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

Comparing version 0.15.0 to 0.16.0

__tests__/index.ts

@@ -8,3 +8,3 @@ import { component, elementNode, staticNode } from '@teleporthq/teleport-uidl-builders'
 } from '@teleporthq/teleport-types'
-import { createCSSPlugin } from '../src/index'
+import { createCSSPlugin } from '../src'
 
@@ -11,0 +11,0 @@ describe('plugin-css', () => {

dist/cjs/index.js

@@ -58,8 +58,20 @@ "use strict";
     var cssPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () {
-        var uidl, chunks, dependencies, options, projectStyleSet, node, templateChunk, componentDecoratorChunk, templateLookup, propsPrefix, jssStylesArray, isProjectStyleReferred, mediaStylesMap, cssFileName, decoratorAST, decoratorParam;
-        var _a;
-        return __generator(this, function (_b) {
+        var uidl, chunks, dependencies, options, _a, projectStyleSet, _b, _c, tokens, isRootComponent, _d, _e, styleSetDefinitions, projectStyleSheetName, path, node, templateChunk, componentDecoratorChunk, templateLookup, propsPrefix, jssStylesArray, mediaStylesMap, cssFileName, decoratorAST, decoratorParam;
+        return __generator(this, function (_f) {
             uidl = structure.uidl, chunks = structure.chunks, dependencies = structure.dependencies, options = structure.options;
-            projectStyleSet = options.projectStyleSet;
+            _a = options || {}, projectStyleSet = _a.projectStyleSet, _b = _a.designLanguage, _c = (_b === void 0 ? {} : _b).tokens, tokens = _c === void 0 ? {} : _c, isRootComponent = _a.isRootComponent;
+            _d = projectStyleSet || {}, _e = _d.styleSetDefinitions, styleSetDefinitions = _e === void 0 ? {} : _e, projectStyleSheetName = _d.fileName, path = _d.path;
             node = uidl.node;
+            if (isRootComponent) {
+                if (Object.keys(tokens).length > 0 || Object.keys(styleSetDefinitions).length > 0) {
+                    dependencies[projectStyleSheetName] = {
+                        type: 'local',
+                        path: path + "/" + projectStyleSheetName + "." + teleport_types_1.FileType.CSS,
+                        meta: {
+                            importJustPath: true,
+                        },
+                    };
+                }
+                return [2 /*return*/, structure];
+            }
             templateChunk = chunks.find(function (chunk) { return chunk.name === templateChunkName; });
@@ -72,3 +84,2 @@ componentDecoratorChunk = chunks.find(function (chunk) { return chunk.name === componentDecoratorChunkName; });
             jssStylesArray = [];
-            isProjectStyleReferred = false;
             mediaStylesMap = {};
@@ -91,4 +102,4 @@ teleport_shared_1.UIDLUtils.traverseElements(node, function (element) {
                     var _b = teleport_shared_1.UIDLUtils.splitDynamicAndStaticStyles(style), staticStyles = _b.staticStyles, dynamicStyles = _b.dynamicStyles, tokenStyles = _b.tokenStyles;
-                    var collectedStyles = __assign(__assign({}, teleport_plugin_common_1.StyleUtils.getContentOfStyleObject(staticStyles)), teleport_plugin_common_1.StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles));
-                    if (Object.keys(staticStyles).length > 0) {
+                    if (Object.keys(staticStyles).length > 0 || Object.keys(tokenStyles).length > 0) {
+                        var collectedStyles = __assign(__assign({}, teleport_plugin_common_1.StyleUtils.getContentOfStyleObject(staticStyles)), teleport_plugin_common_1.StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles));
                         jssStylesArray.push(teleport_plugin_common_1.StyleBuilders.createCSSClass(className, collectedStyles));
@@ -100,16 +111,14 @@ appendClassName = true;
                         since inline style does not support that */
-                        if (Object.keys(dynamicStyles).length > 0) {
-                            if (templateStyle === 'html') {
-                                // simple string expression
-                                var inlineStyles = createDynamicInlineStyle(dynamicStyles);
-                                teleport_plugin_common_1.HASTUtils.addAttributeToNode(root, inlineStyleAttributeKey, "{" + inlineStyles + "}");
-                            }
-                            else {
-                                // jsx object expression
-                                var inlineStyles = teleport_shared_1.UIDLUtils.transformDynamicStyles(dynamicStyles, function (styleValue) {
-                                    return teleport_plugin_common_1.StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix);
-                                });
-                                teleport_plugin_common_1.ASTUtils.addAttributeToJSXTag(root, inlineStyleAttributeKey, inlineStyles);
-                            }
+                        if (templateStyle === 'html') {
+                            // simple string expression
+                            var inlineStyles = createDynamicInlineStyle(dynamicStyles);
+                            teleport_plugin_common_1.HASTUtils.addAttributeToNode(root, inlineStyleAttributeKey, "{" + inlineStyles + "}");
                         }
+                        else {
+                            // jsx object expression
+                            var inlineStyles = teleport_shared_1.UIDLUtils.transformDynamicStyles(dynamicStyles, function (styleValue) {
+                                return teleport_plugin_common_1.StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix);
+                            });
+                            teleport_plugin_common_1.ASTUtils.addAttributeToJSXTag(root, inlineStyleAttributeKey, inlineStyles);
+                        }
                     }
@@ -127,5 +136,2 @@ }
                                 var collectedStyles = __assign(__assign({}, teleport_plugin_common_1.StyleUtils.getContentOfStyleObject(staticStyles)), teleport_plugin_common_1.StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles));
-                                if (staticStyles && Object.keys(staticStyles).length === 0) {
-                                    return;
-                                }
                                 if (Object.keys(staticStyles).length > 0) {
@@ -146,9 +152,5 @@ var condition = styleRef.content.conditions[0];
                             case 'project-referenced': {
-                                if (!projectStyleSet) {
-                                    throw new Error("Project Style Sheet is missing, but the node is referring to it " + element);
-                                }
                                 var content = styleRef.content;
                                 if (content.referenceId && !((_b = content) === null || _b === void 0 ? void 0 : _b.conditions)) {
-                                    isProjectStyleReferred = true;
-                                    var referedStyle = projectStyleSet.styleSetDefinitions[content.referenceId];
+                                    var referedStyle = styleSetDefinitions[content.referenceId];
                                     if (!referedStyle) {
@@ -182,11 +184,2 @@ throw new Error("Style that is being used for reference is missing - " + content.referenceId);
             }
-            if (isProjectStyleReferred && ((_a = projectStyleSet) === null || _a === void 0 ? void 0 : _a.importFile)) {
-                dependencies[projectStyleSet.fileName] = {
-                    type: 'local',
-                    path: projectStyleSet.path + "/" + projectStyleSet.fileName + "." + teleport_types_1.FileType.CSS,
-                    meta: {
-                        importJustPath: true,
-                    },
-                };
-            }
             if (jssStylesArray.length > 0) {
@@ -193,0 +186,0 @@ chunks.push({

dist/cjs/style-sheet.js

@@ -56,8 +56,8 @@ "use strict";
     var styleSheetPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () {
-        var uidl, chunks, styleSetDefinitions, _a, designLanguage, _b, tokens, cssMap, mediaStylesMap;
-        return __generator(this, function (_c) {
+        var uidl, chunks, _a, styleSetDefinitions, _b, _c, tokens, cssMap, mediaStylesMap;
+        return __generator(this, function (_d) {
             uidl = structure.uidl, chunks = structure.chunks;
-            styleSetDefinitions = uidl.styleSetDefinitions, _a = uidl.designLanguage, designLanguage = _a === void 0 ? {} : _a;
-            _b = designLanguage.tokens, tokens = _b === void 0 ? {} : _b;
-            if (!styleSetDefinitions || Object.keys(styleSetDefinitions).length === 0) {
+            _a = uidl.styleSetDefinitions, styleSetDefinitions = _a === void 0 ? {} : _a, _b = uidl.designLanguage, _c = (_b === void 0 ? {} : _b).tokens, tokens = _c === void 0 ? {} : _c;
+            if ((!styleSetDefinitions && !tokens) ||
+                (Object.keys(styleSetDefinitions).length === 0 && Object.keys(tokens).length === 0)) {
                 return [2 /*return*/];
@@ -70,23 +70,28 @@ }
             }
-            Object.values(styleSetDefinitions).forEach(function (style) {
-                var name = style.name, content = style.content, _a = style.conditions, conditions = _a === void 0 ? [] : _a;
-                var _b = teleport_shared_1.UIDLUtils.splitDynamicAndStaticStyles(content), staticStyles = _b.staticStyles, tokenStyles = _b.tokenStyles;
-                var collectedStyles = __assign(__assign({}, teleport_plugin_common_1.StyleUtils.getContentOfStyleObject(staticStyles)), teleport_plugin_common_1.StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles));
-                cssMap.push(teleport_plugin_common_1.StyleBuilders.createCSSClass(name, collectedStyles));
-                if (conditions.length === 0) {
-                    return;
-                }
-                conditions.forEach(function (styleRef) {
-                    var _a;
-                    var _b = teleport_shared_1.UIDLUtils.splitDynamicAndStaticStyles(styleRef.content), staticValues = _b.staticStyles, tokenValues = _b.tokenStyles;
-                    var collecedMediaStyles = __assign(__assign({}, teleport_plugin_common_1.StyleUtils.getContentOfStyleObject(staticValues)), teleport_plugin_common_1.StyleUtils.getCSSVariablesContentFromTokenStyles(tokenValues));
-                    if (styleRef.type === 'element-state') {
-                        cssMap.push(teleport_plugin_common_1.StyleBuilders.createCSSClassWithSelector(name, "&:" + styleRef.meta.state, collecedMediaStyles));
+            if (Object.keys(styleSetDefinitions).length > 0) {
+                Object.values(styleSetDefinitions).forEach(function (style) {
+                    var name = style.name, content = style.content, _a = style.conditions, conditions = _a === void 0 ? [] : _a;
+                    var _b = teleport_shared_1.UIDLUtils.splitDynamicAndStaticStyles(content), staticStyles = _b.staticStyles, tokenStyles = _b.tokenStyles;
+                    var collectedStyles = __assign(__assign({}, teleport_plugin_common_1.StyleUtils.getContentOfStyleObject(staticStyles)), teleport_plugin_common_1.StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles));
+                    cssMap.push(teleport_plugin_common_1.StyleBuilders.createCSSClass(name, collectedStyles));
+                    if (conditions.length === 0) {
+                        return;
                     }
-                    if (styleRef.type === 'screen-size') {
-                        mediaStylesMap[styleRef.meta.maxWidth] = __assign(__assign({}, mediaStylesMap[styleRef.meta.maxWidth]), (_a = {}, _a[name] = collecedMediaStyles, _a));
-                    }
+                    conditions.forEach(function (styleRef) {
+                        var _a;
+                        var _b = teleport_shared_1.UIDLUtils.splitDynamicAndStaticStyles(styleRef.content), staticValues = _b.staticStyles, tokenValues = _b.tokenStyles;
+                        var collecedMediaStyles = __assign(__assign({}, teleport_plugin_common_1.StyleUtils.getContentOfStyleObject(staticValues)), teleport_plugin_common_1.StyleUtils.getCSSVariablesContentFromTokenStyles(tokenValues));
+                        if (styleRef.type === 'element-state') {
+                            cssMap.push(teleport_plugin_common_1.StyleBuilders.createCSSClassWithSelector(name, "&:" + styleRef.meta.state, collecedMediaStyles));
+                        }
+                        if (styleRef.type === 'screen-size') {
+                            mediaStylesMap[styleRef.meta.maxWidth] = __assign(__assign({}, mediaStylesMap[styleRef.meta.maxWidth]), (_a = {}, _a[name] = collecedMediaStyles, _a));
+                        }
+                    });
                 });
-            });
+            }
             cssMap.push.apply(cssMap, teleport_plugin_common_1.StyleBuilders.generateMediaStyle(mediaStylesMap));
+            if (cssMap.length === 0) {
+                return [2 /*return*/, structure];
+            }
             uidl.outputOptions = uidl.outputOptions || {};
@@ -93,0 +98,0 @@ uidl.outputOptions.styleFileName = fileName;

dist/esm/index.js

@@ -8,6 +8,18 @@ import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared';
     const cssPlugin = async (structure) => {
-        var _a;
         const { uidl, chunks, dependencies, options } = structure;
-        const { projectStyleSet } = options;
+        const { projectStyleSet, designLanguage: { tokens = {} } = {}, isRootComponent } = options || {};
+        const { styleSetDefinitions = {}, fileName: projectStyleSheetName, path } = projectStyleSet || {};
         const { node } = uidl;
+        if (isRootComponent) {
+            if (Object.keys(tokens).length > 0 || Object.keys(styleSetDefinitions).length > 0) {
+                dependencies[projectStyleSheetName] = {
+                    type: 'local',
+                    path: `${path}/${projectStyleSheetName}.${FileType.CSS}`,
+                    meta: {
+                        importJustPath: true,
+                    },
+                };
+            }
+            return structure;
+        }
         const templateChunk = chunks.find((chunk) => chunk.name === templateChunkName);
@@ -22,3 +34,2 @@ const componentDecoratorChunk = chunks.find((chunk) => chunk.name === componentDecoratorChunkName);
         const jssStylesArray = [];
-        let isProjectStyleReferred = false;
         const mediaStylesMap = {};
@@ -41,7 +52,7 @@ UIDLUtils.traverseElements(node, (element) => {
                 const { staticStyles, dynamicStyles, tokenStyles } = UIDLUtils.splitDynamicAndStaticStyles(style);
-                const collectedStyles = {
-                    ...StyleUtils.getContentOfStyleObject(staticStyles),
-                    ...StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles),
-                };
-                if (Object.keys(staticStyles).length > 0) {
+                if (Object.keys(staticStyles).length > 0 || Object.keys(tokenStyles).length > 0) {
+                    const collectedStyles = {
+                        ...StyleUtils.getContentOfStyleObject(staticStyles),
+                        ...StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles),
+                    };
                     jssStylesArray.push(StyleBuilders.createCSSClass(className, collectedStyles));
@@ -53,14 +64,12 @@ appendClassName = true;
                     since inline style does not support that */
-                    if (Object.keys(dynamicStyles).length > 0) {
-                        if (templateStyle === 'html') {
-                            // simple string expression
-                            const inlineStyles = createDynamicInlineStyle(dynamicStyles);
-                            HASTUtils.addAttributeToNode(root, inlineStyleAttributeKey, `{${inlineStyles}}`);
-                        }
-                        else {
-                            // jsx object expression
-                            const inlineStyles = UIDLUtils.transformDynamicStyles(dynamicStyles, (styleValue) => StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix));
-                            ASTUtils.addAttributeToJSXTag(root, inlineStyleAttributeKey, inlineStyles);
-                        }
+                    if (templateStyle === 'html') {
+                        // simple string expression
+                        const inlineStyles = createDynamicInlineStyle(dynamicStyles);
+                        HASTUtils.addAttributeToNode(root, inlineStyleAttributeKey, `{${inlineStyles}}`);
                     }
+                    else {
+                        // jsx object expression
+                        const inlineStyles = UIDLUtils.transformDynamicStyles(dynamicStyles, (styleValue) => StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix));
+                        ASTUtils.addAttributeToJSXTag(root, inlineStyleAttributeKey, inlineStyles);
+                    }
                 }
@@ -80,5 +89,2 @@ }
                             };
-                            if (staticStyles && Object.keys(staticStyles).length === 0) {
-                                return;
-                            }
                             if (Object.keys(staticStyles).length > 0) {
@@ -102,9 +108,5 @@ const condition = styleRef.content.conditions[0];
                         case 'project-referenced': {
-                            if (!projectStyleSet) {
-                                throw new Error(`Project Style Sheet is missing, but the node is referring to it ${element}`);
-                            }
                             const { content } = styleRef;
                             if (content.referenceId && !((_a = content) === null || _a === void 0 ? void 0 : _a.conditions)) {
-                                isProjectStyleReferred = true;
-                                const referedStyle = projectStyleSet.styleSetDefinitions[content.referenceId];
+                                const referedStyle = styleSetDefinitions[content.referenceId];
                                 if (!referedStyle) {
@@ -138,11 +140,2 @@ throw new Error(`Style that is being used for reference is missing - ${content.referenceId}`);
         }
-        if (isProjectStyleReferred && ((_a = projectStyleSet) === null || _a === void 0 ? void 0 : _a.importFile)) {
-            dependencies[projectStyleSet.fileName] = {
-                type: 'local',
-                path: `${projectStyleSet.path}/${projectStyleSet.fileName}.${FileType.CSS}`,
-                meta: {
-                    importJustPath: true,
-                },
-            };
-        }
         if (jssStylesArray.length > 0) {
@@ -149,0 +142,0 @@ chunks.push({

dist/esm/style-sheet.js

@@ -8,5 +8,5 @@ import { StyleUtils, StyleBuilders } from '@teleporthq/teleport-plugin-common';
         const { uidl, chunks } = structure;
-        const { styleSetDefinitions, designLanguage = {} } = uidl;
-        const { tokens = {} } = designLanguage;
-        if (!styleSetDefinitions || Object.keys(styleSetDefinitions).length === 0) {
+        const { styleSetDefinitions = {}, designLanguage: { tokens = {} } = {} } = uidl;
+        if ((!styleSetDefinitions && !tokens) ||
+            (Object.keys(styleSetDefinitions).length === 0 && Object.keys(tokens).length === 0)) {
             return;
@@ -19,31 +19,36 @@ }
         }
-        Object.values(styleSetDefinitions).forEach((style) => {
-            const { name, content, conditions = [] } = style;
-            const { staticStyles, tokenStyles } = UIDLUtils.splitDynamicAndStaticStyles(content);
-            const collectedStyles = {
-                ...StyleUtils.getContentOfStyleObject(staticStyles),
-                ...StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles),
-            };
-            cssMap.push(StyleBuilders.createCSSClass(name, collectedStyles));
-            if (conditions.length === 0) {
-                return;
-            }
-            conditions.forEach((styleRef) => {
-                const { staticStyles: staticValues, tokenStyles: tokenValues, } = UIDLUtils.splitDynamicAndStaticStyles(styleRef.content);
-                const collecedMediaStyles = {
-                    ...StyleUtils.getContentOfStyleObject(staticValues),
-                    ...StyleUtils.getCSSVariablesContentFromTokenStyles(tokenValues),
+        if (Object.keys(styleSetDefinitions).length > 0) {
+            Object.values(styleSetDefinitions).forEach((style) => {
+                const { name, content, conditions = [] } = style;
+                const { staticStyles, tokenStyles } = UIDLUtils.splitDynamicAndStaticStyles(content);
+                const collectedStyles = {
+                    ...StyleUtils.getContentOfStyleObject(staticStyles),
+                    ...StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles),
                 };
-                if (styleRef.type === 'element-state') {
-                    cssMap.push(StyleBuilders.createCSSClassWithSelector(name, `&:${styleRef.meta.state}`, collecedMediaStyles));
+                cssMap.push(StyleBuilders.createCSSClass(name, collectedStyles));
+                if (conditions.length === 0) {
+                    return;
                 }
-                if (styleRef.type === 'screen-size') {
-                    mediaStylesMap[styleRef.meta.maxWidth] = {
-                        ...mediaStylesMap[styleRef.meta.maxWidth],
-                        [name]: collecedMediaStyles,
+                conditions.forEach((styleRef) => {
+                    const { staticStyles: staticValues, tokenStyles: tokenValues, } = UIDLUtils.splitDynamicAndStaticStyles(styleRef.content);
+                    const collecedMediaStyles = {
+                        ...StyleUtils.getContentOfStyleObject(staticValues),
+                        ...StyleUtils.getCSSVariablesContentFromTokenStyles(tokenValues),
                     };
-                }
+                    if (styleRef.type === 'element-state') {
+                        cssMap.push(StyleBuilders.createCSSClassWithSelector(name, `&:${styleRef.meta.state}`, collecedMediaStyles));
+                    }
+                    if (styleRef.type === 'screen-size') {
+                        mediaStylesMap[styleRef.meta.maxWidth] = {
+                            ...mediaStylesMap[styleRef.meta.maxWidth],
+                            [name]: collecedMediaStyles,
+                        };
+                    }
+                });
             });
-        });
+        }
         cssMap.push(...StyleBuilders.generateMediaStyle(mediaStylesMap));
+        if (cssMap.length === 0) {
+            return structure;
+        }
         uidl.outputOptions = uidl.outputOptions || {};
@@ -50,0 +55,0 @@ uidl.outputOptions.styleFileName = fileName;

package.json

 {
   "name": "@teleporthq/teleport-plugin-css",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "A plugin for creating the styles into external css files",
@@ -30,7 +30,7 @@ "author": "teleportHQ",
     "@babel/types": "^7.5.5",
-    "@teleporthq/teleport-plugin-common": "^0.15.0",
-    "@teleporthq/teleport-shared": "^0.15.0",
-    "@teleporthq/teleport-types": "^0.15.0"
+    "@teleporthq/teleport-plugin-common": "^0.16.0",
+    "@teleporthq/teleport-shared": "^0.16.0",
+    "@teleporthq/teleport-types": "^0.16.0"
   },
-  "gitHead": "397f2e55be8419d8b060dfd96485297fc1169535"
+  "gitHead": "87531fab68231f166de64fdd5a2a212fdab8f0c9"
 }

src/index.ts

@@ -42,6 +42,22 @@ import { StringUtils, UIDLUtils } from '@teleporthq/teleport-shared'
     const { uidl, chunks, dependencies, options } = structure
-    const { projectStyleSet } = options
+    const { projectStyleSet, designLanguage: { tokens = {} } = {}, isRootComponent } = options || {}
+    const { styleSetDefinitions = {}, fileName: projectStyleSheetName, path } =
+      projectStyleSet || {}
 
     const { node } = uidl
 
+    if (isRootComponent) {
+      if (Object.keys(tokens).length > 0 || Object.keys(styleSetDefinitions).length > 0) {
+        dependencies[projectStyleSheetName] = {
+          type: 'local',
+          path: `${path}/${projectStyleSheetName}.${FileType.CSS}`,
+          meta: {
+            importJustPath: true,
+          },
+        }
+      }
+
+      return structure
+    }
+
     const templateChunk = chunks.find((chunk) => chunk.name === templateChunkName)
@@ -64,3 +80,2 @@ const componentDecoratorChunk = chunks.find(
     const jssStylesArray: string[] = []
-    let isProjectStyleReferred: boolean = false
     const mediaStylesMap: Record<string, Record<string, unknown>> = {}
@@ -89,10 +104,9 @@
         )
-        const collectedStyles = {
-          ...StyleUtils.getContentOfStyleObject(staticStyles),
-          ...StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles),
-        } as Record<string, string | number>
 
-        if (Object.keys(staticStyles).length > 0) {
+        if (Object.keys(staticStyles).length > 0 || Object.keys(tokenStyles).length > 0) {
+          const collectedStyles = {
+            ...StyleUtils.getContentOfStyleObject(staticStyles),
+            ...StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles),
+          } as Record<string, string | number>
           jssStylesArray.push(StyleBuilders.createCSSClass(className, collectedStyles))
-
           appendClassName = true
@@ -104,23 +118,20 @@ }
           since inline style does not support that */
-
-          if (Object.keys(dynamicStyles).length > 0) {
-            if (templateStyle === 'html') {
-              // simple string expression
-              const inlineStyles = createDynamicInlineStyle(dynamicStyles)
-              HASTUtils.addAttributeToNode(
-                root as HastNode,
-                inlineStyleAttributeKey,
-                `{${inlineStyles}}`
-              )
-            } else {
-              // jsx object expression
-              const inlineStyles = UIDLUtils.transformDynamicStyles(dynamicStyles, (styleValue) =>
-                StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)
-              )
-              ASTUtils.addAttributeToJSXTag(
-                root as types.JSXElement,
-                inlineStyleAttributeKey,
-                inlineStyles
-              )
-            }
+          if (templateStyle === 'html') {
+            // simple string expression
+            const inlineStyles = createDynamicInlineStyle(dynamicStyles)
+            HASTUtils.addAttributeToNode(
+              root as HastNode,
+              inlineStyleAttributeKey,
+              `{${inlineStyles}}`
+            )
+          } else {
+            // jsx object expression
+            const inlineStyles = UIDLUtils.transformDynamicStyles(dynamicStyles, (styleValue) =>
+              StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)
+            )
+            ASTUtils.addAttributeToJSXTag(
+              root as types.JSXElement,
+              inlineStyleAttributeKey,
+              inlineStyles
+            )
           }
@@ -144,6 +155,2 @@ }
 
-              if (staticStyles && Object.keys(staticStyles).length === 0) {
-                return
-              }
-
               if (Object.keys(staticStyles).length > 0) {
@@ -175,12 +182,5 @@ const condition = styleRef.content.conditions[0]
             case 'project-referenced': {
-              if (!projectStyleSet) {
-                throw new Error(
-                  `Project Style Sheet is missing, but the node is referring to it ${element}`
-                )
-              }
-
               const { content } = styleRef
               if (content.referenceId && !content?.conditions) {
-                isProjectStyleReferred = true
-                const referedStyle = projectStyleSet.styleSetDefinitions[content.referenceId]
+                const referedStyle = styleSetDefinitions[content.referenceId]
                 if (!referedStyle) {
@@ -225,12 +225,2 @@ throw new Error(
 
-    if (isProjectStyleReferred && projectStyleSet?.importFile) {
-      dependencies[projectStyleSet.fileName] = {
-        type: 'local',
-        path: `${projectStyleSet.path}/${projectStyleSet.fileName}.${FileType.CSS}`,
-        meta: {
-          importJustPath: true,
-        },
-      }
-    }
-
     if (jssStylesArray.length > 0) {
@@ -237,0 +227,0 @@ chunks.push({

src/style-sheet.ts

@@ -18,6 +18,8 @@ import { StyleUtils, StyleBuilders } from '@teleporthq/teleport-plugin-common'
     const { uidl, chunks } = structure
-    const { styleSetDefinitions, designLanguage = {} } = uidl
-    const { tokens = {} } = designLanguage
+    const { styleSetDefinitions = {}, designLanguage: { tokens = {} } = {} } = uidl
 
-    if (!styleSetDefinitions || Object.keys(styleSetDefinitions).length === 0) {
+    if (
+      (!styleSetDefinitions && !tokens) ||
+      (Object.keys(styleSetDefinitions).length === 0 && Object.keys(tokens).length === 0)
+    ) {
       return
@@ -39,45 +41,51 @@ }
 
-    Object.values(styleSetDefinitions).forEach((style) => {
-      const { name, content, conditions = [] } = style
-      const { staticStyles, tokenStyles } = UIDLUtils.splitDynamicAndStaticStyles(content)
-      const collectedStyles = {
-        ...StyleUtils.getContentOfStyleObject(staticStyles),
-        ...StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles),
-      } as Record<string, string | number>
-      cssMap.push(StyleBuilders.createCSSClass(name, collectedStyles))
-
-      if (conditions.length === 0) {
-        return
-      }
-      conditions.forEach((styleRef) => {
-        const {
-          staticStyles: staticValues,
-          tokenStyles: tokenValues,
-        } = UIDLUtils.splitDynamicAndStaticStyles(styleRef.content)
-        const collecedMediaStyles = {
-          ...StyleUtils.getContentOfStyleObject(staticValues),
-          ...StyleUtils.getCSSVariablesContentFromTokenStyles(tokenValues),
+    if (Object.keys(styleSetDefinitions).length > 0) {
+      Object.values(styleSetDefinitions).forEach((style) => {
+        const { name, content, conditions = [] } = style
+        const { staticStyles, tokenStyles } = UIDLUtils.splitDynamicAndStaticStyles(content)
+        const collectedStyles = {
+          ...StyleUtils.getContentOfStyleObject(staticStyles),
+          ...StyleUtils.getCSSVariablesContentFromTokenStyles(tokenStyles),
         } as Record<string, string | number>
+        cssMap.push(StyleBuilders.createCSSClass(name, collectedStyles))
 
-        if (styleRef.type === 'element-state') {
-          cssMap.push(
-            StyleBuilders.createCSSClassWithSelector(
-              name,
-              `&:${styleRef.meta.state}`,
-              collecedMediaStyles
-            )
-          )
+        if (conditions.length === 0) {
+          return
         }
+        conditions.forEach((styleRef) => {
+          const {
+            staticStyles: staticValues,
+            tokenStyles: tokenValues,
+          } = UIDLUtils.splitDynamicAndStaticStyles(styleRef.content)
+          const collecedMediaStyles = {
+            ...StyleUtils.getContentOfStyleObject(staticValues),
+            ...StyleUtils.getCSSVariablesContentFromTokenStyles(tokenValues),
+          } as Record<string, string | number>
 
-        if (styleRef.type === 'screen-size') {
-          mediaStylesMap[styleRef.meta.maxWidth] = {
-            ...mediaStylesMap[styleRef.meta.maxWidth],
-            [name]: collecedMediaStyles,
+          if (styleRef.type === 'element-state') {
+            cssMap.push(
+              StyleBuilders.createCSSClassWithSelector(
+                name,
+                `&:${styleRef.meta.state}`,
+                collecedMediaStyles
+              )
+            )
           }
-        }
+
+          if (styleRef.type === 'screen-size') {
+            mediaStylesMap[styleRef.meta.maxWidth] = {
+              ...mediaStylesMap[styleRef.meta.maxWidth],
+              [name]: collecedMediaStyles,
+            }
+          }
+        })
       })
-    })
+    }
 
     cssMap.push(...StyleBuilders.generateMediaStyle(mediaStylesMap))
 
+    if (cssMap.length === 0) {
+      return structure
+    }
+
     uidl.outputOptions = uidl.outputOptions || {}
@@ -84,0 +92,0 @@ uidl.outputOptions.styleFileName = fileName

No alert changes

Improved metrics

Total package byte prevSize

327233

0.17%

Worsened metrics

Lines of code

1475

-0.2%

Dependency changes

• + Added

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

• + Added

  @teleporthq/teleport-shared@0.16.3
  (transitive)

• + Added

  @teleporthq/teleport-types@0.16.3
  (transitive)

• - Removed

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

• - Removed

  @teleporthq/teleport-shared@0.15.0
  (transitive)

• - Removed

  @teleporthq/teleport-types@0.15.0
  (transitive)

• Updated

  @teleporthq/teleport-plugin-common@^0.16.0

• Updated

  @teleporthq/teleport-shared@^0.16.0

• Updated

  @teleporthq/teleport-types@^0.16.0