@teleporthq/teleport-plugin-css - npm Package Compare versions

Comparing version 0.20.6 to 0.21.0

__tests__/referenced-styles.ts

@@ -103,3 +103,3 @@ import { staticNode, component, elementNode } from '@teleporthq/teleport-uidl-builders'
     expect(cssFile.content).toContain('@media(max-width: 991px)')
-    expect(nodeReference.properties.class).toBe('container primary-button')
+    expect(nodeReference.properties.class).toBe('container primaryButton')
   })
@@ -106,0 +106,0 @@ })

__tests__/style-sheet.ts

@@ -87,3 +87,3 @@ import {
 `)
-    expect(content).toContain(`.conditional-button:hover {
+    expect(content).toContain(`.conditionalButton:hover {
   background: var(--blue-500);
@@ -93,5 +93,5 @@ }
     expect(content).toContain(`color: var(--red-500)`)
-    expect(content).toContain('.primary-button')
-    expect(content).toContain('secondary-button')
-    expect(content).toContain('.conditional-button:hover')
+    expect(content).toContain('.primaryButton')
+    expect(content).toContain('secondaryButton')
+    expect(content).toContain('.conditionalButton:hover')
     expect(content).toContain('@media(max-width: 991px)')
@@ -98,0 +98,0 @@ expect(content).not.toContain('5ecfa1233b8e50f60ea2b64b')

dist/cjs/index.d.ts

@@ -13,6 +13,7 @@ import { ComponentPluginFactory, ComponentPlugin } from '@teleporthq/teleport-types';
     dynamicVariantPrefix?: string;
+    staticPropReferences?: boolean;
 }
-export declare const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig>;
-export { createStyleSheetPlugin };
+declare const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig>;
+export { createStyleSheetPlugin, createCSSPlugin };
 declare const _default: ComponentPlugin;
 export default _default;

dist/cjs/index.js

@@ -73,3 +73,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createStyleSheetPlugin = exports.createCSSPlugin = void 0;
+exports.createCSSPlugin = exports.createStyleSheetPlugin = void 0;
 var teleport_shared_1 = require("@teleporthq/teleport-shared");
@@ -82,12 +82,10 @@ var teleport_plugin_common_1 = require("@teleporthq/teleport-plugin-common");
 var createCSSPlugin = function (config) {
-    var _a = config || {}, _b = _a.chunkName, chunkName = _b === void 0 ? 'style-chunk' : _b, _c = _a.templateChunkName, templateChunkName = _c === void 0 ? 'template-chunk' : _c, _d = _a.componentDecoratorChunkName, componentDecoratorChunkName = _d === void 0 ? 'component-decorator' : _d, _e = _a.inlineStyleAttributeKey, inlineStyleAttributeKey = _e === void 0 ? 'style' : _e, _f = _a.classAttributeName, classAttributeName = _f === void 0 ? 'class' : _f, _g = _a.templateStyle, templateStyle = _g === void 0 ? 'html' : _g, _h = _a.declareDependency, declareDependency = _h === void 0 ? 'none' : _h, _j = _a.forceScoping, forceScoping = _j === void 0 ? false : _j, dynamicVariantPrefix = _a.dynamicVariantPrefix;
+    var _a = config || {}, _b = _a.chunkName, chunkName = _b === void 0 ? 'style-chunk' : _b, _c = _a.templateChunkName, templateChunkName = _c === void 0 ? 'template-chunk' : _c, _d = _a.componentDecoratorChunkName, componentDecoratorChunkName = _d === void 0 ? 'component-decorator' : _d, _e = _a.inlineStyleAttributeKey, inlineStyleAttributeKey = _e === void 0 ? 'style' : _e, _f = _a.classAttributeName, classAttributeName = _f === void 0 ? 'class' : _f, _g = _a.templateStyle, templateStyle = _g === void 0 ? 'html' : _g, _h = _a.declareDependency, declareDependency = _h === void 0 ? 'none' : _h, _j = _a.forceScoping, forceScoping = _j === void 0 ? false : _j, dynamicVariantPrefix = _a.dynamicVariantPrefix, _k = _a.staticPropReferences, staticPropReferences = _k === void 0 ? false : _k;
     var cssPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () {
-        var uidl, chunks, dependencies, options, node, _a, componentStyleSet, _b, projectStyleSet, _c, _d, _e, tokens, isRootComponent, _f, _g, styleSetDefinitions, projectStyleSheetName, projectStyleSheetPath, componentFileName, templateChunk, componentDecoratorChunk, templateLookup, propsPrefix, cssMap, mediaStylesMap, cssFileName, decoratorAST, decoratorParam;
-        return __generator(this, function (_h) {
+        var uidl, chunks, dependencies, options, node, _a, componentStyleSet, _b, propDefinitions, _c, projectStyleSet, _d, _e, _f, tokens, isRootComponent, _g, _h, styleSetDefinitions, projectStyleSheetName, projectStyleSheetPath, templateChunk, componentDecoratorChunk, templateLookup, propsPrefix, cssMap, mediaStylesMap, cssFileName, decoratorAST, decoratorParam;
+        return __generator(this, function (_j) {
             uidl = structure.uidl, chunks = structure.chunks, dependencies = structure.dependencies, options = structure.options;
-            node = uidl.node, _a = uidl.styleSetDefinitions, componentStyleSet = _a === void 0 ? {} : _a;
-            _b = options || {}, projectStyleSet = _b.projectStyleSet, _c = _b.designLanguage, _d = _c === void 0 ? {} : _c, _e = _d.tokens, tokens = _e === void 0 ? {} : _e, isRootComponent = _b.isRootComponent;
-            _f = projectStyleSet || {}, _g = _f.styleSetDefinitions, styleSetDefinitions = _g === void 0 ? {} : _g, projectStyleSheetName = _f.fileName, projectStyleSheetPath = _f.path;
-            componentFileName = teleport_shared_1.UIDLUtils.getComponentFileName(uidl) // Filename used to enforce dash case naming
-            ;
+            node = uidl.node, _a = uidl.styleSetDefinitions, componentStyleSet = _a === void 0 ? {} : _a, _b = uidl.propDefinitions, propDefinitions = _b === void 0 ? {} : _b;
+            _c = options || {}, projectStyleSet = _c.projectStyleSet, _d = _c.designLanguage, _e = _d === void 0 ? {} : _d, _f = _e.tokens, tokens = _f === void 0 ? {} : _f, isRootComponent = _c.isRootComponent;
+            _g = projectStyleSet || {}, _h = _g.styleSetDefinitions, styleSetDefinitions = _h === void 0 ? {} : _h, projectStyleSheetName = _g.fileName, projectStyleSheetPath = _g.path;
             if (isRootComponent) {
@@ -118,26 +116,12 @@ if (Object.keys(tokens).length > 0 || Object.keys(styleSetDefinitions).length > 0) {
                 var _c = element.style, style = _c === void 0 ? {} : _c, key = element.key, _d = element.referencedStyles, referencedStyles = _d === void 0 ? {} : _d, dependency = element.dependency, _e = element.attrs, attrs = _e === void 0 ? {} : _e, elementType = element.elementType;
+                var elementClassName = teleport_shared_1.StringUtils.camelCaseToDashCase(key);
                 if (forceScoping && (dependency === null || dependency === void 0 ? void 0 : dependency.type) === 'local') {
-                    Object.keys(attrs).forEach(function (attr) {
-                        var _a;
-                        if (attrs[attr].type === 'comp-style') {
-                            var compStyleName_1 = teleport_shared_1.StringUtils.camelCaseToDashCase(elementType);
-                            if (templateStyle === 'jsx') {
-                                var compInstanceNode = templateLookup[key];
-                                (_a = compInstanceNode.openingElement) === null || _a === void 0 ? void 0 : _a.attributes.forEach(function (attribute) {
-                                    var _a, _b;
-                                    if (((_a = attribute.name) === null || _a === void 0 ? void 0 : _a.name) === attr &&
-                                        ((_b = attribute.value) === null || _b === void 0 ? void 0 : _b.value)) {
-                                        ;
-                                        attribute.value.value = "".concat(compStyleName_1, "-").concat(teleport_shared_1.StringUtils.camelCaseToDashCase(attribute.value.value));
-                                    }
-                                });
-                            }
-                            if (templateStyle === 'html') {
-                                var compInstanceNode = templateLookup[key];
-                                if (!(compInstanceNode === null || compInstanceNode === void 0 ? void 0 : compInstanceNode.properties[attr])) {
-                                    return;
-                                }
-                                compInstanceNode.properties[attr] = "".concat(compStyleName_1, "-").concat(teleport_shared_1.StringUtils.camelCaseToDashCase(String(compInstanceNode.properties[attr])));
-                            }
-                        }
+                    teleport_plugin_common_1.StyleBuilders.setPropValueForCompStyle({
+                        attrs: attrs,
+                        key: key,
+                        jsxNodesLookup: templateLookup,
+                        templateStyle: templateStyle,
+                        getClassName: function (styleName) {
+                            return getClassName(forceScoping, teleport_shared_1.StringUtils.camelCaseToDashCase(elementType), styleName);
+                        },
                     });
@@ -154,6 +138,3 @@ }
                 }
-                var elementClassName = teleport_shared_1.StringUtils.camelCaseToDashCase(key);
-                var className = forceScoping // when the framework doesn't provide automating scoping for classNames
-                    ? "".concat(componentFileName, "-").concat(elementClassName)
-                    : elementClassName;
+                var className = getClassName(forceScoping, uidl.name, elementClassName);
                 var _f = teleport_shared_1.UIDLUtils.splitDynamicAndStaticStyles(style), staticStyles = _f.staticStyles, dynamicStyles = _f.dynamicStyles, tokenStyles = _f.tokenStyles;
@@ -181,2 +162,3 @@ if (Object.keys(staticStyles).length > 0 || Object.keys(tokenStyles).length > 0) {
                     var _a;
+                    var _b;
                     switch (styleRef.content.mapType) {
@@ -190,3 +172,6 @@ case 'inlined': {
                                 var maxWidth = condition.maxWidth;
-                                mediaStylesMap[maxWidth] = __assign(__assign({}, mediaStylesMap[maxWidth]), (_a = {}, _a[className] = collectedStyles, _a));
+                                if (!mediaStylesMap[String(maxWidth)]) {
+                                    mediaStylesMap[String(maxWidth)] = [];
+                                }
+                                mediaStylesMap[String(maxWidth)].push((_a = {}, _a[className] = collectedStyles, _a));
                             }
@@ -201,16 +186,30 @@ if (condition.conditionType === 'element-state') {
                             if (styleRef.content.content.type === 'static') {
-                                classNamesToAppend.add(String(forceScoping && styleRef.content.content.content
-                                    ? "".concat(componentFileName, "-").concat(teleport_shared_1.StringUtils.camelCaseToDashCase(String(styleRef.content.content.content)))
-                                    : styleRef.content.content.content));
+                                classNamesToAppend.add(String(styleRef.content.content.content));
                             }
                             if (styleRef.content.content.type === 'dynamic' &&
                                 styleRef.content.content.content.referenceType === 'prop') {
-                                if (!dynamicVariantPrefix && templateStyle === 'html') {
-                                    throw new teleport_types_1.PluginCSS("Node ".concat(element.name || element.key, " is using dynamic variant based on prop. But \"dynamicVariantPrefix\" is not defiend.\n                  ").concat(JSON.stringify(styleRef.content.content, null, 2)));
+                                var defaultPropValue = (_b = propDefinitions[styleRef.content.content.content.id]) === null || _b === void 0 ? void 0 : _b.defaultValue;
+                                if (defaultPropValue) {
+                                    /* Changing the default value of the prop.
+                                      When forceScoping is enabled the classnames change. So, we need to change the default prop too. */
+                                    propDefinitions[styleRef.content.content.content.id].defaultValue = getClassName(forceScoping, uidl.name, String(defaultPropValue));
                                 }
-                                dynamicVariantsToAppend.add(styleRef.content.content.content.id);
+                                if (staticPropReferences) {
+                                    if (!defaultPropValue) {
+                                        return;
+                                    }
+                                    if (staticPropReferences) {
+                                        classNamesToAppend.add(getClassName(forceScoping, uidl.name, String(defaultPropValue)));
+                                    }
+                                }
+                                else {
+                                    dynamicVariantsToAppend.add(styleRef.content.content.content.id);
+                                }
                             }
                             if (styleRef.content.content.type === 'dynamic' &&
                                 styleRef.content.content.content.referenceType === 'comp') {
-                                classNamesToAppend.add(styleRef.content.content.content.id);
+                                if (!componentStyleSet[styleRef.content.content.content.id]) {
+                                    throw new teleport_types_1.PluginCSS("Node ".concat(elementType, " is referring to a comp style instance ").concat(styleRef.content.content.content.id, " which is missing."));
+                                }
+                                classNamesToAppend.add(getClassName(forceScoping, uidl.name, String(styleRef.content.content.content.id)));
                             }
@@ -225,7 +224,7 @@ return;
                             }
-                            classNamesToAppend.add(teleport_shared_1.StringUtils.camelCaseToDashCase(content.referenceId));
+                            classNamesToAppend.add(content.referenceId);
                             return;
                         }
                         default: {
-                            throw new teleport_types_1.PluginCSS("We support only project-referenced or inlined, received ".concat(JSON.stringify(styleRef.content, null, 2)));
+                            throw new teleport_types_1.PluginCSS("Un-supported style reference ".concat(JSON.stringify(styleRef.content, null, 2)));
                         }
@@ -255,3 +254,3 @@ }
             if (Object.keys(componentStyleSet).length > 0) {
-                teleport_plugin_common_1.StyleBuilders.generateStylesFromStyleSetDefinitions(componentStyleSet, cssMap, mediaStylesMap, componentFileName, forceScoping);
+                teleport_plugin_common_1.StyleBuilders.generateStylesFromStyleSetDefinitions(componentStyleSet, cssMap, mediaStylesMap, function (styleName) { return getClassName(forceScoping, uidl.name, styleName); });
             }
@@ -295,3 +294,3 @@ if (Object.keys(mediaStylesMap).length > 0) {
 exports.createCSSPlugin = createCSSPlugin;
-exports.default = (0, exports.createCSSPlugin)();
+exports.default = createCSSPlugin();
 var createDynamicInlineStyle = function (styles) {
@@ -304,2 +303,7 @@ return Object.keys(styles)
 };
+var getClassName = function (scoping, uidlName, nodeStyleName) {
+    return scoping
+        ? teleport_shared_1.StringUtils.camelCaseToDashCase("".concat(uidlName, "-").concat(nodeStyleName))
+        : teleport_shared_1.StringUtils.camelCaseToDashCase(nodeStyleName);
+};
 //# sourceMappingURL=index.js.map

dist/cjs/style-sheet.d.ts

 import { ComponentPluginFactory } from '@teleporthq/teleport-types';
 interface StyleSheetPlugin {
     fileName?: string;
-    forceScoping?: boolean;
 }
 export declare const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin>;
 export {};

dist/cjs/style-sheet.js

@@ -42,5 +42,4 @@ "use strict";
 var teleport_types_1 = require("@teleporthq/teleport-types");
-var teleport_shared_1 = require("@teleporthq/teleport-shared");
 var createStyleSheetPlugin = function (config) {
-    var _a = config || { fileName: 'style', forceScoping: false }, fileName = _a.fileName, _b = _a.forceScoping, forceScoping = _b === void 0 ? false : _b;
+    var fileName = (config || { fileName: 'style' }).fileName;
     var styleSheetPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () {
@@ -61,3 +60,3 @@ var uidl, chunks, _a, styleSetDefinitions, _b, _c, _d, tokens, cssMap, mediaStylesMap;
             if (Object.keys(styleSetDefinitions).length > 0) {
-                teleport_plugin_common_1.StyleBuilders.generateStylesFromStyleSetDefinitions(styleSetDefinitions, cssMap, mediaStylesMap, teleport_shared_1.UIDLUtils.getComponentClassName(uidl), forceScoping);
+                teleport_plugin_common_1.StyleBuilders.generateStylesFromStyleSetDefinitions(styleSetDefinitions, cssMap, mediaStylesMap, function (styleName) { return styleName; });
             }
@@ -64,0 +63,0 @@ cssMap.push.apply(cssMap, teleport_plugin_common_1.StyleBuilders.generateMediaStyle(mediaStylesMap));

dist/esm/index.d.ts

@@ -13,6 +13,7 @@ import { ComponentPluginFactory, ComponentPlugin } from '@teleporthq/teleport-types';
     dynamicVariantPrefix?: string;
+    staticPropReferences?: boolean;
 }
-export declare const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig>;
-export { createStyleSheetPlugin };
+declare const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig>;
+export { createStyleSheetPlugin, createCSSPlugin };
 declare const _default: ComponentPlugin;
 export default _default;

dist/esm/index.js

@@ -53,13 +53,11 @@ var __assign = (this && this.__assign) || function () {
 import { createStyleSheetPlugin } from './style-sheet';
-export var createCSSPlugin = function (config) {
-    var _a = config || {}, _b = _a.chunkName, chunkName = _b === void 0 ? 'style-chunk' : _b, _c = _a.templateChunkName, templateChunkName = _c === void 0 ? 'template-chunk' : _c, _d = _a.componentDecoratorChunkName, componentDecoratorChunkName = _d === void 0 ? 'component-decorator' : _d, _e = _a.inlineStyleAttributeKey, inlineStyleAttributeKey = _e === void 0 ? 'style' : _e, _f = _a.classAttributeName, classAttributeName = _f === void 0 ? 'class' : _f, _g = _a.templateStyle, templateStyle = _g === void 0 ? 'html' : _g, _h = _a.declareDependency, declareDependency = _h === void 0 ? 'none' : _h, _j = _a.forceScoping, forceScoping = _j === void 0 ? false : _j, dynamicVariantPrefix = _a.dynamicVariantPrefix;
+var createCSSPlugin = function (config) {
+    var _a = config || {}, _b = _a.chunkName, chunkName = _b === void 0 ? 'style-chunk' : _b, _c = _a.templateChunkName, templateChunkName = _c === void 0 ? 'template-chunk' : _c, _d = _a.componentDecoratorChunkName, componentDecoratorChunkName = _d === void 0 ? 'component-decorator' : _d, _e = _a.inlineStyleAttributeKey, inlineStyleAttributeKey = _e === void 0 ? 'style' : _e, _f = _a.classAttributeName, classAttributeName = _f === void 0 ? 'class' : _f, _g = _a.templateStyle, templateStyle = _g === void 0 ? 'html' : _g, _h = _a.declareDependency, declareDependency = _h === void 0 ? 'none' : _h, _j = _a.forceScoping, forceScoping = _j === void 0 ? false : _j, dynamicVariantPrefix = _a.dynamicVariantPrefix, _k = _a.staticPropReferences, staticPropReferences = _k === void 0 ? false : _k;
     var cssPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () {
-        var uidl, chunks, dependencies, options, node, _a, componentStyleSet, _b, projectStyleSet, _c, _d, _e, tokens, isRootComponent, _f, _g, styleSetDefinitions, projectStyleSheetName, projectStyleSheetPath, componentFileName, templateChunk, componentDecoratorChunk, templateLookup, propsPrefix, cssMap, mediaStylesMap, cssFileName, decoratorAST, decoratorParam;
-        return __generator(this, function (_h) {
+        var uidl, chunks, dependencies, options, node, _a, componentStyleSet, _b, propDefinitions, _c, projectStyleSet, _d, _e, _f, tokens, isRootComponent, _g, _h, styleSetDefinitions, projectStyleSheetName, projectStyleSheetPath, templateChunk, componentDecoratorChunk, templateLookup, propsPrefix, cssMap, mediaStylesMap, cssFileName, decoratorAST, decoratorParam;
+        return __generator(this, function (_j) {
             uidl = structure.uidl, chunks = structure.chunks, dependencies = structure.dependencies, options = structure.options;
-            node = uidl.node, _a = uidl.styleSetDefinitions, componentStyleSet = _a === void 0 ? {} : _a;
-            _b = options || {}, projectStyleSet = _b.projectStyleSet, _c = _b.designLanguage, _d = _c === void 0 ? {} : _c, _e = _d.tokens, tokens = _e === void 0 ? {} : _e, isRootComponent = _b.isRootComponent;
-            _f = projectStyleSet || {}, _g = _f.styleSetDefinitions, styleSetDefinitions = _g === void 0 ? {} : _g, projectStyleSheetName = _f.fileName, projectStyleSheetPath = _f.path;
-            componentFileName = UIDLUtils.getComponentFileName(uidl) // Filename used to enforce dash case naming
-            ;
+            node = uidl.node, _a = uidl.styleSetDefinitions, componentStyleSet = _a === void 0 ? {} : _a, _b = uidl.propDefinitions, propDefinitions = _b === void 0 ? {} : _b;
+            _c = options || {}, projectStyleSet = _c.projectStyleSet, _d = _c.designLanguage, _e = _d === void 0 ? {} : _d, _f = _e.tokens, tokens = _f === void 0 ? {} : _f, isRootComponent = _c.isRootComponent;
+            _g = projectStyleSet || {}, _h = _g.styleSetDefinitions, styleSetDefinitions = _h === void 0 ? {} : _h, projectStyleSheetName = _g.fileName, projectStyleSheetPath = _g.path;
             if (isRootComponent) {
@@ -90,26 +88,12 @@ if (Object.keys(tokens).length > 0 || Object.keys(styleSetDefinitions).length > 0) {
                 var _c = element.style, style = _c === void 0 ? {} : _c, key = element.key, _d = element.referencedStyles, referencedStyles = _d === void 0 ? {} : _d, dependency = element.dependency, _e = element.attrs, attrs = _e === void 0 ? {} : _e, elementType = element.elementType;
+                var elementClassName = StringUtils.camelCaseToDashCase(key);
                 if (forceScoping && (dependency === null || dependency === void 0 ? void 0 : dependency.type) === 'local') {
-                    Object.keys(attrs).forEach(function (attr) {
-                        var _a;
-                        if (attrs[attr].type === 'comp-style') {
-                            var compStyleName_1 = StringUtils.camelCaseToDashCase(elementType);
-                            if (templateStyle === 'jsx') {
-                                var compInstanceNode = templateLookup[key];
-                                (_a = compInstanceNode.openingElement) === null || _a === void 0 ? void 0 : _a.attributes.forEach(function (attribute) {
-                                    var _a, _b;
-                                    if (((_a = attribute.name) === null || _a === void 0 ? void 0 : _a.name) === attr &&
-                                        ((_b = attribute.value) === null || _b === void 0 ? void 0 : _b.value)) {
-                                        ;
-                                        attribute.value.value = "".concat(compStyleName_1, "-").concat(StringUtils.camelCaseToDashCase(attribute.value.value));
-                                    }
-                                });
-                            }
-                            if (templateStyle === 'html') {
-                                var compInstanceNode = templateLookup[key];
-                                if (!(compInstanceNode === null || compInstanceNode === void 0 ? void 0 : compInstanceNode.properties[attr])) {
-                                    return;
-                                }
-                                compInstanceNode.properties[attr] = "".concat(compStyleName_1, "-").concat(StringUtils.camelCaseToDashCase(String(compInstanceNode.properties[attr])));
-                            }
-                        }
+                    StyleBuilders.setPropValueForCompStyle({
+                        attrs: attrs,
+                        key: key,
+                        jsxNodesLookup: templateLookup,
+                        templateStyle: templateStyle,
+                        getClassName: function (styleName) {
+                            return getClassName(forceScoping, StringUtils.camelCaseToDashCase(elementType), styleName);
+                        },
                     });
@@ -126,6 +110,3 @@ }
                 }
-                var elementClassName = StringUtils.camelCaseToDashCase(key);
-                var className = forceScoping // when the framework doesn't provide automating scoping for classNames
-                    ? "".concat(componentFileName, "-").concat(elementClassName)
-                    : elementClassName;
+                var className = getClassName(forceScoping, uidl.name, elementClassName);
                 var _f = UIDLUtils.splitDynamicAndStaticStyles(style), staticStyles = _f.staticStyles, dynamicStyles = _f.dynamicStyles, tokenStyles = _f.tokenStyles;
@@ -153,2 +134,3 @@ if (Object.keys(staticStyles).length > 0 || Object.keys(tokenStyles).length > 0) {
                     var _a;
+                    var _b;
                     switch (styleRef.content.mapType) {
@@ -162,3 +144,6 @@ case 'inlined': {
                                 var maxWidth = condition.maxWidth;
-                                mediaStylesMap[maxWidth] = __assign(__assign({}, mediaStylesMap[maxWidth]), (_a = {}, _a[className] = collectedStyles, _a));
+                                if (!mediaStylesMap[String(maxWidth)]) {
+                                    mediaStylesMap[String(maxWidth)] = [];
+                                }
+                                mediaStylesMap[String(maxWidth)].push((_a = {}, _a[className] = collectedStyles, _a));
                             }
@@ -173,16 +158,30 @@ if (condition.conditionType === 'element-state') {
                             if (styleRef.content.content.type === 'static') {
-                                classNamesToAppend.add(String(forceScoping && styleRef.content.content.content
-                                    ? "".concat(componentFileName, "-").concat(StringUtils.camelCaseToDashCase(String(styleRef.content.content.content)))
-                                    : styleRef.content.content.content));
+                                classNamesToAppend.add(String(styleRef.content.content.content));
                             }
                             if (styleRef.content.content.type === 'dynamic' &&
                                 styleRef.content.content.content.referenceType === 'prop') {
-                                if (!dynamicVariantPrefix && templateStyle === 'html') {
-                                    throw new PluginCSS("Node ".concat(element.name || element.key, " is using dynamic variant based on prop. But \"dynamicVariantPrefix\" is not defiend.\n                  ").concat(JSON.stringify(styleRef.content.content, null, 2)));
+                                var defaultPropValue = (_b = propDefinitions[styleRef.content.content.content.id]) === null || _b === void 0 ? void 0 : _b.defaultValue;
+                                if (defaultPropValue) {
+                                    /* Changing the default value of the prop.
+                                      When forceScoping is enabled the classnames change. So, we need to change the default prop too. */
+                                    propDefinitions[styleRef.content.content.content.id].defaultValue = getClassName(forceScoping, uidl.name, String(defaultPropValue));
                                 }
-                                dynamicVariantsToAppend.add(styleRef.content.content.content.id);
+                                if (staticPropReferences) {
+                                    if (!defaultPropValue) {
+                                        return;
+                                    }
+                                    if (staticPropReferences) {
+                                        classNamesToAppend.add(getClassName(forceScoping, uidl.name, String(defaultPropValue)));
+                                    }
+                                }
+                                else {
+                                    dynamicVariantsToAppend.add(styleRef.content.content.content.id);
+                                }
                             }
                             if (styleRef.content.content.type === 'dynamic' &&
                                 styleRef.content.content.content.referenceType === 'comp') {
-                                classNamesToAppend.add(styleRef.content.content.content.id);
+                                if (!componentStyleSet[styleRef.content.content.content.id]) {
+                                    throw new PluginCSS("Node ".concat(elementType, " is referring to a comp style instance ").concat(styleRef.content.content.content.id, " which is missing."));
+                                }
+                                classNamesToAppend.add(getClassName(forceScoping, uidl.name, String(styleRef.content.content.content.id)));
                             }
@@ -197,7 +196,7 @@ return;
                             }
-                            classNamesToAppend.add(StringUtils.camelCaseToDashCase(content.referenceId));
+                            classNamesToAppend.add(content.referenceId);
                             return;
                         }
                         default: {
-                            throw new PluginCSS("We support only project-referenced or inlined, received ".concat(JSON.stringify(styleRef.content, null, 2)));
+                            throw new PluginCSS("Un-supported style reference ".concat(JSON.stringify(styleRef.content, null, 2)));
                         }
@@ -227,3 +226,3 @@ }
             if (Object.keys(componentStyleSet).length > 0) {
-                StyleBuilders.generateStylesFromStyleSetDefinitions(componentStyleSet, cssMap, mediaStylesMap, componentFileName, forceScoping);
+                StyleBuilders.generateStylesFromStyleSetDefinitions(componentStyleSet, cssMap, mediaStylesMap, function (styleName) { return getClassName(forceScoping, uidl.name, styleName); });
             }
@@ -266,3 +265,3 @@ if (Object.keys(mediaStylesMap).length > 0) {
 };
-export { createStyleSheetPlugin };
+export { createStyleSheetPlugin, createCSSPlugin };
 export default createCSSPlugin();
@@ -276,2 +275,7 @@ var createDynamicInlineStyle = function (styles) {
 };
+var getClassName = function (scoping, uidlName, nodeStyleName) {
+    return scoping
+        ? StringUtils.camelCaseToDashCase("".concat(uidlName, "-").concat(nodeStyleName))
+        : StringUtils.camelCaseToDashCase(nodeStyleName);
+};
 //# sourceMappingURL=index.js.map

dist/esm/style-sheet.d.ts

 import { ComponentPluginFactory } from '@teleporthq/teleport-types';
 interface StyleSheetPlugin {
     fileName?: string;
-    forceScoping?: boolean;
 }
 export declare const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin>;
 export {};

dist/esm/style-sheet.js

@@ -39,5 +39,4 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 import { ChunkType, FileType, } from '@teleporthq/teleport-types';
-import { UIDLUtils } from '@teleporthq/teleport-shared';
 export var createStyleSheetPlugin = function (config) {
-    var _a = config || { fileName: 'style', forceScoping: false }, fileName = _a.fileName, _b = _a.forceScoping, forceScoping = _b === void 0 ? false : _b;
+    var fileName = (config || { fileName: 'style' }).fileName;
     var styleSheetPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () {
@@ -58,3 +57,3 @@ var uidl, chunks, _a, styleSetDefinitions, _b, _c, _d, tokens, cssMap, mediaStylesMap;
             if (Object.keys(styleSetDefinitions).length > 0) {
-                StyleBuilders.generateStylesFromStyleSetDefinitions(styleSetDefinitions, cssMap, mediaStylesMap, UIDLUtils.getComponentClassName(uidl), forceScoping);
+                StyleBuilders.generateStylesFromStyleSetDefinitions(styleSetDefinitions, cssMap, mediaStylesMap, function (styleName) { return styleName; });
             }
@@ -61,0 +60,0 @@ cssMap.push.apply(cssMap, StyleBuilders.generateMediaStyle(mediaStylesMap));

package.json

 {
   "name": "@teleporthq/teleport-plugin-css",
-  "version": "0.20.6",
+  "version": "0.21.0",
   "description": "A plugin for creating the styles into external css files",
@@ -28,7 +28,7 @@ "author": "teleportHQ",
     "@babel/types": "^7.5.5",
-    "@teleporthq/teleport-plugin-common": "^0.20.6",
-    "@teleporthq/teleport-shared": "^0.20.3",
-    "@teleporthq/teleport-types": "^0.20.3"
+    "@teleporthq/teleport-plugin-common": "^0.21.0",
+    "@teleporthq/teleport-shared": "^0.21.0",
+    "@teleporthq/teleport-types": "^0.21.0"
   },
-  "gitHead": "71111c77c83c2b8794a8c1fa038a560653eea6c1"
+  "gitHead": "dd790cfb393fbdb560646eded5a9d6111e43b6ad"
 }

src/index.ts

@@ -28,5 +28,6 @@ import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared'
   dynamicVariantPrefix?: string
+  staticPropReferences?: boolean
 }
 
-export const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config) => {
+const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config) => {
   const {
@@ -42,2 +43,3 @@ chunkName = 'style-chunk',
     dynamicVariantPrefix,
+    staticPropReferences = false,
   } = config || {}
@@ -47,3 +49,3 @@
     const { uidl, chunks, dependencies, options } = structure
-    const { node, styleSetDefinitions: componentStyleSet = {} } = uidl
+    const { node, styleSetDefinitions: componentStyleSet = {}, propDefinitions = {} } = uidl
     const { projectStyleSet, designLanguage: { tokens = {} } = {}, isRootComponent } = options || {}
@@ -55,3 +57,2 @@ const {
     } = projectStyleSet || {}
-    const componentFileName = UIDLUtils.getComponentFileName(uidl) // Filename used to enforce dash case naming
 
@@ -87,3 +88,6 @@ if (isRootComponent) {
     const cssMap: string[] = []
-    const mediaStylesMap: Record<string, Record<string, unknown>> = {}
+    const mediaStylesMap: Record<
+      string,
+      Array<{ [x: string]: Record<string, string | number> }>
+    > = {}
 
@@ -101,38 +105,12 @@ UIDLUtils.traverseElements(node, (element) => {
       } = element
+      const elementClassName = StringUtils.camelCaseToDashCase(key)
 
       if (forceScoping && dependency?.type === 'local') {
-        Object.keys(attrs).forEach((attr) => {
-          if (attrs[attr].type === 'comp-style') {
-            const compStyleName = StringUtils.camelCaseToDashCase(elementType)
-
-            if (templateStyle === 'jsx') {
-              const compInstanceNode = templateLookup[key] as types.JSXElement
-              compInstanceNode.openingElement?.attributes.forEach(
-                (attribute: types.JSXAttribute) => {
-                  if (
-                    attribute.name?.name === attr &&
-                    (attribute.value as types.StringLiteral)?.value
-                  ) {
-                    ;(
-                      attribute.value as types.StringLiteral
-                    ).value = `${compStyleName}-${StringUtils.camelCaseToDashCase(
-                      (attribute.value as types.StringLiteral).value
-                    )}`
-                  }
-                }
-              )
-            }
-
-            if (templateStyle === 'html') {
-              const compInstanceNode = templateLookup[key] as HastNode
-              if (!compInstanceNode?.properties[attr]) {
-                return
-              }
-              compInstanceNode.properties[
-                attr
-              ] = `${compStyleName}-${StringUtils.camelCaseToDashCase(
-                String(compInstanceNode.properties[attr])
-              )}`
-            }
-          }
+        StyleBuilders.setPropValueForCompStyle({
+          attrs,
+          key,
+          jsxNodesLookup: templateLookup,
+          templateStyle,
+          getClassName: (styleName: string) =>
+            getClassName(forceScoping, StringUtils.camelCaseToDashCase(elementType), styleName),
         })
@@ -154,6 +132,3 @@ }
 
-      const elementClassName = StringUtils.camelCaseToDashCase(key)
-      const className = forceScoping // when the framework doesn't provide automating scoping for classNames
-        ? `${componentFileName}-${elementClassName}`
-        : elementClassName
+      const className = getClassName(forceScoping, uidl.name, elementClassName)
 
@@ -208,6 +183,6 @@ const { staticStyles, dynamicStyles, tokenStyles } =
               const { maxWidth } = condition as UIDLStyleMediaQueryScreenSizeCondition
-              mediaStylesMap[maxWidth] = {
-                ...mediaStylesMap[maxWidth],
-                [className]: collectedStyles,
+              if (!mediaStylesMap[String(maxWidth)]) {
+                mediaStylesMap[String(maxWidth)] = []
               }
+              mediaStylesMap[String(maxWidth)].push({ [className]: collectedStyles })
             }
@@ -231,11 +206,3 @@
             if (styleRef.content.content.type === 'static') {
-              classNamesToAppend.add(
-                String(
-                  forceScoping && styleRef.content.content.content
-                    ? `${componentFileName}-${StringUtils.camelCaseToDashCase(
-                        String(styleRef.content.content.content)
-                      )}`
-                    : styleRef.content.content.content
-                )
-              )
+              classNamesToAppend.add(String(styleRef.content.content.content))
             }
@@ -247,12 +214,27 @@
             ) {
-              if (!dynamicVariantPrefix && templateStyle === 'html') {
-                throw new PluginCSS(
-                  `Node ${
-                    element.name || element.key
-                  } is using dynamic variant based on prop. But "dynamicVariantPrefix" is not defiend.
-                  ${JSON.stringify(styleRef.content.content, null, 2)}`
+              const defaultPropValue =
+                propDefinitions[styleRef.content.content.content.id]?.defaultValue
+
+              if (defaultPropValue) {
+                /* Changing the default value of the prop. 
+                  When forceScoping is enabled the classnames change. So, we need to change the default prop too. */
+                propDefinitions[styleRef.content.content.content.id].defaultValue = getClassName(
+                  forceScoping,
+                  uidl.name,
+                  String(defaultPropValue)
                 )
               }
 
-              dynamicVariantsToAppend.add(styleRef.content.content.content.id)
+              if (staticPropReferences) {
+                if (!defaultPropValue) {
+                  return
+                }
+                if (staticPropReferences) {
+                  classNamesToAppend.add(
+                    getClassName(forceScoping, uidl.name, String(defaultPropValue))
+                  )
+                }
+              } else {
+                dynamicVariantsToAppend.add(styleRef.content.content.content.id)
+              }
             }
@@ -264,3 +246,10 @@
             ) {
-              classNamesToAppend.add(styleRef.content.content.content.id)
+              if (!componentStyleSet[styleRef.content.content.content.id]) {
+                throw new PluginCSS(
+                  `Node ${elementType} is referring to a comp style instance ${styleRef.content.content.content.id} which is missing.`
+                )
+              }
+              classNamesToAppend.add(
+                getClassName(forceScoping, uidl.name, String(styleRef.content.content.content.id))
+              )
             }
@@ -279,3 +268,4 @@
             }
-            classNamesToAppend.add(StringUtils.camelCaseToDashCase(content.referenceId))
+
+            classNamesToAppend.add(content.referenceId)
             return
@@ -286,7 +276,3 @@ }
             throw new PluginCSS(
-              `We support only project-referenced or inlined, received ${JSON.stringify(
-                styleRef.content,
-                null,
-                2
-              )}`
+              `Un-supported style reference ${JSON.stringify(styleRef.content, null, 2)}`
             )
@@ -337,4 +323,3 @@ }
         mediaStylesMap,
-        componentFileName,
-        forceScoping
+        (styleName: string) => getClassName(forceScoping, uidl.name, styleName)
       )
@@ -391,3 +376,3 @@ }
 
-export { createStyleSheetPlugin }
+export { createStyleSheetPlugin, createCSSPlugin }
 
@@ -403,1 +388,7 @@ export default createCSSPlugin()
 }
+
+const getClassName = (scoping: boolean, uidlName: string, nodeStyleName: string) => {
+  return scoping
+    ? StringUtils.camelCaseToDashCase(`${uidlName}-${nodeStyleName}`)
+    : StringUtils.camelCaseToDashCase(nodeStyleName)
+}

src/style-sheet.ts

@@ -8,11 +8,9 @@ import { StyleUtils, StyleBuilders } from '@teleporthq/teleport-plugin-common'
 } from '@teleporthq/teleport-types'
-import { UIDLUtils } from '@teleporthq/teleport-shared'
 
 interface StyleSheetPlugin {
   fileName?: string
-  forceScoping?: boolean
 }
 
 export const createStyleSheetPlugin: ComponentPluginFactory<StyleSheetPlugin> = (config) => {
-  const { fileName, forceScoping = false } = config || { fileName: 'style', forceScoping: false }
+  const { fileName } = config || { fileName: 'style' }
   const styleSheetPlugin: ComponentPlugin = async (structure) => {
@@ -30,3 +28,6 @@ const { uidl, chunks } = structure
     const cssMap: string[] = []
-    const mediaStylesMap: Record<string, Record<string, unknown>> = {}
+    const mediaStylesMap: Record<
+      string,
+      Array<{ [x: string]: Record<string, string | number> }>
+    > = {}
 
@@ -48,4 +49,3 @@ if (Object.keys(tokens).length > 0) {
         mediaStylesMap,
-        UIDLUtils.getComponentClassName(uidl),
-        forceScoping
+        (styleName: string) => styleName
       )
@@ -52,0 +52,0 @@ }

No alert changes

Worsened metrics

Total package byte prevSize

145609

-0.76%

Lines of code

1774

-0.22%

Dependency changes

• + Added

  @teleporthq/teleport-plugin-common@0.21.7
  (transitive)

• + Added

  @teleporthq/teleport-shared@0.21.7
  (transitive)

• + Added

  @teleporthq/teleport-types@0.21.7
  (transitive)

• - Removed

  @teleporthq/teleport-plugin-common@0.20.6
  (transitive)

• - Removed

  @teleporthq/teleport-shared@0.20.3
  (transitive)

• - Removed

  @teleporthq/teleport-types@0.20.3
  (transitive)

• Updated

  @teleporthq/teleport-plugin-common@^0.21.0

• Updated

  @teleporthq/teleport-shared@^0.21.0

• Updated

  @teleporthq/teleport-types@^0.21.0