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

Comparing version 0.19.8 to 0.19.17

dist/cjs/index.js

@@ -79,3 +79,3 @@ "use strict";
     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, templateChunk, componentDecoratorChunk, templateLookup, propsPrefix, cssMap, mediaStylesMap, cssFileName, decoratorAST, decoratorParam;
+        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) {
@@ -86,2 +86,4 @@ uidl = structure.uidl, chunks = structure.chunks, dependencies = structure.dependencies, options = structure.options;
             _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
+            ;
             if (isRootComponent) {
@@ -111,4 +113,32 @@ if (Object.keys(tokens).length > 0 || Object.keys(styleSetDefinitions).length > 0) {
                 var dynamicVariantsToAppend = new Set();
-                var _c = element.style, style = _c === void 0 ? {} : _c, key = element.key, _d = element.referencedStyles, referencedStyles = _d === void 0 ? {} : _d;
-                if (Object.keys(style).length === 0 && Object.keys(referencedStyles).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;
+                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 = compStyleName_1 + "-" + 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] = compStyleName_1 + "-" + teleport_shared_1.StringUtils.camelCaseToDashCase(String(compInstanceNode.properties[attr]));
+                            }
+                        }
+                    });
+                }
+                if (Object.keys(style).length === 0 &&
+                    Object.keys(referencedStyles).length === 0 &&
+                    Object.keys(componentStyleSet).length === 0) {
                     return;
@@ -121,7 +151,6 @@ }
                 var elementClassName = teleport_shared_1.StringUtils.camelCaseToDashCase(key);
-                var componentFileName = teleport_shared_1.UIDLUtils.getComponentFileName(uidl); // Filename used to enforce dash case naming
                 var className = forceScoping // when the framework doesn't provide automating scoping for classNames
                     ? componentFileName + "-" + elementClassName
                     : elementClassName;
-                var _e = teleport_shared_1.UIDLUtils.splitDynamicAndStaticStyles(style), staticStyles = _e.staticStyles, dynamicStyles = _e.dynamicStyles, tokenStyles = _e.tokenStyles;
+                var _f = teleport_shared_1.UIDLUtils.splitDynamicAndStaticStyles(style), staticStyles = _f.staticStyles, dynamicStyles = _f.dynamicStyles, tokenStyles = _f.tokenStyles;
                 if (Object.keys(staticStyles).length > 0 || Object.keys(tokenStyles).length > 0) {
@@ -166,3 +195,5 @@ var collectedStyles = __assign(__assign({}, teleport_plugin_common_1.StyleUtils.getContentOfStyleObject(staticStyles)), teleport_plugin_common_1.StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles));
                             if (styleRef.content.content.type === 'static') {
-                                classNamesToAppend.add(String(styleRef.content.content.content));
+                                classNamesToAppend.add(String(forceScoping && styleRef.content.content.content
+                                    ? componentFileName + "-" + teleport_shared_1.StringUtils.camelCaseToDashCase(String(styleRef.content.content.content))
+                                    : styleRef.content.content.content));
                             }
@@ -217,3 +248,3 @@ if (styleRef.content.content.type === 'dynamic' &&
             if (Object.keys(componentStyleSet).length > 0) {
-                teleport_plugin_common_1.StyleBuilders.generateStylesFromStyleSetDefinitions(componentStyleSet, cssMap, mediaStylesMap);
+                teleport_plugin_common_1.StyleBuilders.generateStylesFromStyleSetDefinitions(componentStyleSet, cssMap, mediaStylesMap, componentFileName, forceScoping);
             }
@@ -220,0 +251,0 @@ if (Object.keys(mediaStylesMap).length > 0) {

dist/cjs/style-sheet.js

@@ -42,2 +42,3 @@ "use strict";
 var teleport_types_1 = require("@teleporthq/teleport-types");
+var teleport_shared_1 = require("@teleporthq/teleport-shared");
 var createStyleSheetPlugin = function (config) {
@@ -60,3 +61,3 @@ var fileName = (config || { fileName: 'style' }).fileName;
             if (Object.keys(styleSetDefinitions).length > 0) {
-                teleport_plugin_common_1.StyleBuilders.generateStylesFromStyleSetDefinitions(styleSetDefinitions, cssMap, mediaStylesMap);
+                teleport_plugin_common_1.StyleBuilders.generateStylesFromStyleSetDefinitions(styleSetDefinitions, cssMap, mediaStylesMap, teleport_shared_1.UIDLUtils.getComponentClassName(uidl));
             }
@@ -63,0 +64,0 @@ cssMap.push.apply(cssMap, teleport_plugin_common_1.StyleBuilders.generateMediaStyle(mediaStylesMap));

dist/esm/index.js

@@ -56,3 +56,3 @@ var __assign = (this && this.__assign) || function () {
     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, templateChunk, componentDecoratorChunk, templateLookup, propsPrefix, cssMap, mediaStylesMap, cssFileName, decoratorAST, decoratorParam;
+        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) {
@@ -63,2 +63,4 @@ uidl = structure.uidl, chunks = structure.chunks, dependencies = structure.dependencies, options = structure.options;
             _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
+            ;
             if (isRootComponent) {
@@ -88,4 +90,32 @@ if (Object.keys(tokens).length > 0 || Object.keys(styleSetDefinitions).length > 0) {
                 var dynamicVariantsToAppend = new Set();
-                var _c = element.style, style = _c === void 0 ? {} : _c, key = element.key, _d = element.referencedStyles, referencedStyles = _d === void 0 ? {} : _d;
-                if (Object.keys(style).length === 0 && Object.keys(referencedStyles).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;
+                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 = compStyleName_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] = compStyleName_1 + "-" + StringUtils.camelCaseToDashCase(String(compInstanceNode.properties[attr]));
+                            }
+                        }
+                    });
+                }
+                if (Object.keys(style).length === 0 &&
+                    Object.keys(referencedStyles).length === 0 &&
+                    Object.keys(componentStyleSet).length === 0) {
                     return;
@@ -98,7 +128,6 @@ }
                 var elementClassName = StringUtils.camelCaseToDashCase(key);
-                var componentFileName = UIDLUtils.getComponentFileName(uidl); // Filename used to enforce dash case naming
                 var className = forceScoping // when the framework doesn't provide automating scoping for classNames
                     ? componentFileName + "-" + elementClassName
                     : elementClassName;
-                var _e = UIDLUtils.splitDynamicAndStaticStyles(style), staticStyles = _e.staticStyles, dynamicStyles = _e.dynamicStyles, tokenStyles = _e.tokenStyles;
+                var _f = UIDLUtils.splitDynamicAndStaticStyles(style), staticStyles = _f.staticStyles, dynamicStyles = _f.dynamicStyles, tokenStyles = _f.tokenStyles;
                 if (Object.keys(staticStyles).length > 0 || Object.keys(tokenStyles).length > 0) {
@@ -143,3 +172,5 @@ var collectedStyles = __assign(__assign({}, StyleUtils.getContentOfStyleObject(staticStyles)), StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles));
                             if (styleRef.content.content.type === 'static') {
-                                classNamesToAppend.add(String(styleRef.content.content.content));
+                                classNamesToAppend.add(String(forceScoping && styleRef.content.content.content
+                                    ? componentFileName + "-" + StringUtils.camelCaseToDashCase(String(styleRef.content.content.content))
+                                    : styleRef.content.content.content));
                             }
@@ -194,3 +225,3 @@ if (styleRef.content.content.type === 'dynamic' &&
             if (Object.keys(componentStyleSet).length > 0) {
-                StyleBuilders.generateStylesFromStyleSetDefinitions(componentStyleSet, cssMap, mediaStylesMap);
+                StyleBuilders.generateStylesFromStyleSetDefinitions(componentStyleSet, cssMap, mediaStylesMap, componentFileName, forceScoping);
             }
@@ -197,0 +228,0 @@ if (Object.keys(mediaStylesMap).length > 0) {

dist/esm/style-sheet.js

@@ -39,2 +39,3 @@ 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) {
@@ -57,3 +58,3 @@ var fileName = (config || { fileName: 'style' }).fileName;
             if (Object.keys(styleSetDefinitions).length > 0) {
-                StyleBuilders.generateStylesFromStyleSetDefinitions(styleSetDefinitions, cssMap, mediaStylesMap);
+                StyleBuilders.generateStylesFromStyleSetDefinitions(styleSetDefinitions, cssMap, mediaStylesMap, UIDLUtils.getComponentClassName(uidl));
             }
@@ -60,0 +61,0 @@ cssMap.push.apply(cssMap, StyleBuilders.generateMediaStyle(mediaStylesMap));

package.json

 {
   "name": "@teleporthq/teleport-plugin-css",
-  "version": "0.19.8",
+  "version": "0.19.17",
   "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.19.8",
-    "@teleporthq/teleport-shared": "^0.19.8",
-    "@teleporthq/teleport-types": "^0.19.8"
+    "@teleporthq/teleport-plugin-common": "^0.19.17",
+    "@teleporthq/teleport-shared": "^0.19.17",
+    "@teleporthq/teleport-types": "^0.19.17"
   },
-  "gitHead": "3fe5317002da58950a4640a19181a2165fc1b198"
+  "gitHead": "4af7375f20235273eeabb48ef109cab2a02ddceb"
 }

src/index.ts

@@ -52,2 +52,3 @@ import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared'
     } = projectStyleSet || {}
+    const componentFileName = UIDLUtils.getComponentFileName(uidl) // Filename used to enforce dash case naming
 
@@ -88,5 +89,54 @@ if (isRootComponent) {
       const dynamicVariantsToAppend: Set<string> = new Set()
-      const { style = {}, key, referencedStyles = {} } = element
+      const {
+        style = {},
+        key,
+        referencedStyles = {},
+        dependency,
+        attrs = {},
+        elementType,
+      } = element
 
-      if (Object.keys(style).length === 0 && Object.keys(referencedStyles).length === 0) {
+      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])
+              )}`
+            }
+          }
+        })
+      }
+
+      if (
+        Object.keys(style).length === 0 &&
+        Object.keys(referencedStyles).length === 0 &&
+        Object.keys(componentStyleSet).length === 0
+      ) {
         return
@@ -101,3 +151,2 @@ }
       const elementClassName = StringUtils.camelCaseToDashCase(key)
-      const componentFileName = UIDLUtils.getComponentFileName(uidl) // Filename used to enforce dash case naming
       const className = forceScoping // when the framework doesn't provide automating scoping for classNames
@@ -177,3 +226,11 @@ ? `${componentFileName}-${elementClassName}`
             if (styleRef.content.content.type === 'static') {
-              classNamesToAppend.add(String(styleRef.content.content.content))
+              classNamesToAppend.add(
+                String(
+                  forceScoping && styleRef.content.content.content
+                    ? `${componentFileName}-${StringUtils.camelCaseToDashCase(
+                        String(styleRef.content.content.content)
+                      )}`
+                    : styleRef.content.content.content
+                )
+              )
             }
@@ -267,3 +324,9 @@
     if (Object.keys(componentStyleSet).length > 0) {
-      StyleBuilders.generateStylesFromStyleSetDefinitions(componentStyleSet, cssMap, mediaStylesMap)
+      StyleBuilders.generateStylesFromStyleSetDefinitions(
+        componentStyleSet,
+        cssMap,
+        mediaStylesMap,
+        componentFileName,
+        forceScoping
+      )
     }
@@ -270,0 +333,0 @@

src/style-sheet.ts

@@ -8,2 +8,3 @@ import { StyleUtils, StyleBuilders } from '@teleporthq/teleport-plugin-common'
 } from '@teleporthq/teleport-types'
+import { UIDLUtils } from '@teleporthq/teleport-shared'
 
@@ -44,3 +45,4 @@ interface StyleSheetPlugin {
         cssMap,
-        mediaStylesMap
+        mediaStylesMap,
+        UIDLUtils.getComponentClassName(uidl)
       )
@@ -47,0 +49,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

145360

7.39%

Lines of code

1770

7.66%

Dependency changes

• Updated

  @teleporthq/teleport-plugin-common@^0.19.17

• Updated

  @teleporthq/teleport-shared@^0.19.17

• Updated

  @teleporthq/teleport-types@^0.19.17