@teleporthq/teleport-plugin-react-styled-components - npm Package Compare versions

Comparing version 0.15.0 to 0.16.0

dist/cjs/index.js

@@ -59,3 +59,3 @@ "use strict";
     var reactStyledComponentsPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () {
-        var uidl, chunks, dependencies, options, node, name, projectStyleSet, componentChunk, jsxNodesLookup, propsPrefix, jssStyleMap, isTokensUsed;
+        var uidl, chunks, dependencies, options, node, name, projectStyleSet, componentChunk, jsxNodesLookup, propsPrefix, jssStyleMap, tokensReferred;
         return __generator(this, function (_a) {
@@ -72,3 +72,3 @@ uidl = structure.uidl, chunks = structure.chunks, dependencies = structure.dependencies, options = structure.options;
             jssStyleMap = {};
-            isTokensUsed = false;
+            tokensReferred = [];
             teleport_shared_1.UIDLUtils.traverseElements(node, function (element) {
@@ -84,4 +84,4 @@ var _a;
                 var projectReferencedClassNames = [];
-                var timesReferred = utils_1.countPropReferences(style, 0);
-                timesReferred = utils_1.countPropRefernecesFromReferencedStyles(referencedStyles, timesReferred);
+                var timesProsReferred = utils_1.countPropReferences(style, 0);
+                timesProsReferred = utils_1.countPropRefernecesFromReferencedStyles(referencedStyles, timesProsReferred);
                 if (style && Object.keys(style).length > 0) {
@@ -106,7 +106,3 @@ /* Styled components might create an element that
                     }
-                    var _b = utils_1.generatePropReferencesSyntax(style, timesReferred, root, propsPrefix), transformedStyles = _b.transformedStyles, tokensUsed = _b.tokensUsed;
-                    jssStyleMap[className] = transformedStyles;
-                    if (tokensUsed) {
-                        isTokensUsed = true;
-                    }
+                    jssStyleMap[className] = utils_1.generatePropReferencesSyntax(style, timesProsReferred, tokensReferred, root, propsPrefix);
                 }
@@ -125,14 +121,6 @@ if (referencedStyles && ((_a = Object.keys(referencedStyles)) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                                 if (condition.conditionType === 'screen-size') {
-                                    var _f = utils_1.generatePropReferencesSyntax(styleRef.content.styles, timesReferred, root, propsPrefix), transformedStyles = _f.transformedStyles, tokensUsed = _f.tokensUsed;
-                                    if (tokensUsed) {
-                                        isTokensUsed = tokensUsed;
-                                    }
-                                    jssStyleMap[className] = __assign(__assign({}, jssStyleMap[className]), (_a = {}, _a["@media(max-width: " + condition.maxWidth + "px)"] = transformedStyles, _a));
+                                    jssStyleMap[className] = __assign(__assign({}, jssStyleMap[className]), (_a = {}, _a["@media(max-width: " + condition.maxWidth + "px)"] = utils_1.generatePropReferencesSyntax(styleRef.content.styles, timesProsReferred, tokensReferred, root, propsPrefix), _a));
                                 }
                                 if (condition.conditionType === 'element-state') {
-                                    var _g = utils_1.generatePropReferencesSyntax(styleRef.content.styles, timesReferred, root, propsPrefix), transformedStyles = _g.transformedStyles, tokensUsed = _g.tokensUsed;
-                                    if (tokensUsed) {
-                                        isTokensUsed = true;
-                                    }
-                                    jssStyleMap[className] = __assign(__assign({}, jssStyleMap[className]), (_b = {}, _b["&:" + condition.content] = transformedStyles, _b));
+                                    jssStyleMap[className] = __assign(__assign({}, jssStyleMap[className]), (_b = {}, _b["&:" + condition.content] = utils_1.generatePropReferencesSyntax(styleRef.content.styles, timesProsReferred, tokensReferred, root, propsPrefix), _b));
                                 }
@@ -169,3 +157,3 @@ return;
                 }
-                if (timesReferred > 1) {
+                if (timesProsReferred > 1) {
                     teleport_plugin_common_1.ASTUtils.addSpreadAttributeToJSXTag(root, propsPrefix);
@@ -186,3 +174,3 @@ }
             }
-            if (isTokensUsed) {
+            if (tokensReferred.length > 0) {
                 dependencies.TOKENS = {
@@ -189,0 +177,0 @@ type: 'local',

dist/cjs/style-sheet.js

@@ -58,3 +58,2 @@ "use strict";
 var t = __importStar(require("@babel/types"));
-var teleport_plugin_common_1 = require("@teleporthq/teleport-plugin-common");
 var teleport_types_1 = require("@teleporthq/teleport-types");
@@ -66,9 +65,9 @@ var utils_1 = require("./utils");
     var styleSheetPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () {
-        var uidl, chunks, dependencies, styleSetDefinitions, _a, designLanguage, _b, tokens, tokensMap;
-        return __generator(this, function (_c) {
+        var uidl, chunks, dependencies, _a, styleSetDefinitions, _b, _c, tokens, tokensMap;
+        return __generator(this, function (_d) {
             uidl = structure.uidl, chunks = structure.chunks, dependencies = structure.dependencies;
-            styleSetDefinitions = uidl.styleSetDefinitions, _a = uidl.designLanguage, designLanguage = _a === void 0 ? {} : _a;
-            _b = designLanguage.tokens, tokens = _b === void 0 ? {} : _b;
-            if (!styleSetDefinitions && !tokens) {
-                return [2 /*return*/];
+            _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*/, structure];
             }
@@ -85,4 +84,3 @@ tokensMap = Object.keys(tokens || {}).reduce(function (acc, key) {
                 var styles = {};
-                var transformedStyles = utils_1.generatePropReferencesSyntax(content, 0).transformedStyles;
-                styles = __assign(__assign({}, styles), transformedStyles);
+                styles = __assign(__assign({}, styles), utils_1.generatePropReferencesSyntax(content));
                 if (conditions.length > 0) {
@@ -94,6 +92,5 @@ conditions.forEach(function (styleRef) {
                         }
-                        var transformedMediaStyles = utils_1.generatePropReferencesSyntax(styleRef.content, 0).transformedStyles;
                         if (styleRef.type === 'screen-size') {
                             styles = __assign(__assign({}, styles), (_a = {},
-                                _a["@media(max-width: " + styleRef.meta.maxWidth + "px)"] = transformedMediaStyles,
+                                _a["@media(max-width: " + styleRef.meta.maxWidth + "px)"] = utils_1.generatePropReferencesSyntax(styleRef.content),
                                 _a));
@@ -103,3 +100,3 @@ }
                             styles = __assign(__assign({}, styles), (_b = {},
-                                _b["&:" + styleRef.meta.state] = transformedMediaStyles,
+                                _b["&:" + styleRef.meta.state] = utils_1.generatePropReferencesSyntax(styleRef.content),
                                 _b));
@@ -109,4 +106,2 @@ }
                 }
-                uidl.outputOptions = uidl.outputOptions || {};
-                uidl.outputOptions.fileName = fileName;
                 chunks.push({
@@ -119,20 +114,30 @@ name: fileName,
                 });
+                dependencies.css = {
+                    type: 'package',
+                    path: componentLibrary === 'react' ? 'styled-components' : 'styled-components/native',
+                    version: '4.2.0',
+                    meta: {
+                        namedImport: true,
+                    },
+                };
             });
-            chunks.push({
-                name: 'tokens-chunk',
-                type: teleport_types_1.ChunkType.AST,
-                fileType: teleport_types_1.FileType.JS,
-                content: t.exportNamedDeclaration(t.variableDeclaration('const', [
-                    t.variableDeclarator(t.identifier('TOKENS'), teleport_plugin_common_1.ASTUtils.objectToObjectExpression(tokensMap)),
-                ])),
-                linkAfter: ['import-local'],
-            });
-            dependencies.css = {
-                type: 'package',
-                path: componentLibrary === 'react' ? 'styled-components' : 'styled-components/native',
-                version: '4.2.0',
-                meta: {
-                    namedImport: true,
-                },
-            };
+            if (Object.keys(tokensMap).length > 0) {
+                chunks.push({
+                    name: 'tokens-chunk',
+                    type: teleport_types_1.ChunkType.AST,
+                    fileType: teleport_types_1.FileType.JS,
+                    content: t.exportNamedDeclaration(t.variableDeclaration('const', [
+                        t.variableDeclarator(t.identifier('TOKENS'), t.objectExpression(Object.keys(tokensMap).reduce(function (acc, token) {
+                            var value = typeof tokensMap[token] === 'number'
+                                ? t.numericLiteral(Number(tokensMap[token]))
+                                : t.stringLiteral(String(tokensMap[token]));
+                            acc.push(t.objectProperty(t.identifier(token), value));
+                            return acc;
+                        }, []))),
+                    ])),
+                    linkAfter: ['import-local'],
+                });
+            }
+            uidl.outputOptions = uidl.outputOptions || {};
+            uidl.outputOptions.fileName = fileName;
             return [2 /*return*/, structure];
@@ -139,0 +144,0 @@ });

dist/cjs/utils.d.ts

@@ -9,5 +9,2 @@ import * as t from '@babel/types';
 export declare const removeUnusedDependencies: (dependencies: Record<string, UIDLDependency>, jsxNodesLookup: Record<string, t.JSXElement>) => void;
-export declare const generatePropReferencesSyntax: (style: Record<string, UIDLStyleValue>, timesReferred: number, root?: t.JSXElement, propsPrefix?: unknown) => {
-    transformedStyles: Record<string, any>;
-    tokensUsed: boolean;
-};
+export declare const generatePropReferencesSyntax: (style: Record<string, UIDLStyleValue>, timesPropsReferred?: number, tokensReferred?: string[], root?: t.JSXElement, propsPrefix?: unknown) => Record<string, any>;

dist/cjs/utils.js

@@ -76,9 +76,9 @@ "use strict";
 };
-exports.generatePropReferencesSyntax = function (style, timesReferred, root, propsPrefix) {
-    var tokensUsed = false;
-    var transformedStyles = teleport_shared_1.UIDLUtils.transformDynamicStyles(style, function (styleValue, attribute) {
+exports.generatePropReferencesSyntax = function (style, timesPropsReferred, tokensReferred, root, propsPrefix) {
+    return teleport_shared_1.UIDLUtils.transformDynamicStyles(style, function (styleValue, attribute) {
+        var _a;
         switch (styleValue.content.referenceType) {
             case 'prop': {
                 var dashCaseAttribute = teleport_shared_1.StringUtils.dashCaseToCamelCase(attribute);
-                if (timesReferred === 1 && root && propsPrefix) {
+                if (timesPropsReferred && timesPropsReferred === 1 && root && propsPrefix) {
                     teleport_plugin_common_1.ASTUtils.addDynamicAttributeToJSXTag(root, dashCaseAttribute, styleValue.content.id, propsPrefix);
@@ -90,4 +90,5 @@ return "${props => props." + dashCaseAttribute + "}";
             case 'token':
-                tokensUsed = true;
-                return "${TOKENS." + teleport_shared_1.StringUtils.capitalize(teleport_shared_1.StringUtils.dashCaseToCamelCase(styleValue.content.id)) + "}";
+                var token = teleport_shared_1.StringUtils.capitalize(teleport_shared_1.StringUtils.dashCaseToCamelCase(styleValue.content.id));
+                (_a = tokensReferred) === null || _a === void 0 ? void 0 : _a.push(token);
+                return "${TOKENS." + token + "}";
             default:
@@ -97,7 +98,3 @@ throw new Error("Error running transformDynamicStyles in reactStyledComponentsPlugin. \n          Unsupported styleValue.content.referenceType value " + styleValue.content.referenceType);
     });
-    return {
-        transformedStyles: transformedStyles,
-        tokensUsed: tokensUsed,
-    };
 };
 //# sourceMappingURL=utils.js.map

dist/esm/index.js

@@ -20,3 +20,3 @@ import { ChunkType, FileType, } from '@teleporthq/teleport-types';
         const jssStyleMap = {};
-        let isTokensUsed = false;
+        const tokensReferred = [];
         UIDLUtils.traverseElements(node, (element) => {
@@ -32,4 +32,4 @@ var _a;
             const projectReferencedClassNames = [];
-            let timesReferred = countPropReferences(style, 0);
-            timesReferred = countPropRefernecesFromReferencedStyles(referencedStyles, timesReferred);
+            let timesProsReferred = countPropReferences(style, 0);
+            timesProsReferred = countPropRefernecesFromReferencedStyles(referencedStyles, timesProsReferred);
             if (style && Object.keys(style).length > 0) {
@@ -59,7 +59,3 @@ /* Styled components might create an element that
                 }
-                const { transformedStyles, tokensUsed } = generatePropReferencesSyntax(style, timesReferred, root, propsPrefix);
-                jssStyleMap[className] = transformedStyles;
-                if (tokensUsed) {
-                    isTokensUsed = true;
-                }
+                jssStyleMap[className] = generatePropReferencesSyntax(style, timesProsReferred, tokensReferred, root, propsPrefix);
             }
@@ -77,19 +73,11 @@ if (referencedStyles && ((_a = Object.keys(referencedStyles)) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                             if (condition.conditionType === 'screen-size') {
-                                const { transformedStyles, tokensUsed } = generatePropReferencesSyntax(styleRef.content.styles, timesReferred, root, propsPrefix);
-                                if (tokensUsed) {
-                                    isTokensUsed = tokensUsed;
-                                }
                                 jssStyleMap[className] = {
                                     ...jssStyleMap[className],
-                                    [`@media(max-width: ${condition.maxWidth}px)`]: transformedStyles,
+                                    [`@media(max-width: ${condition.maxWidth}px)`]: generatePropReferencesSyntax(styleRef.content.styles, timesProsReferred, tokensReferred, root, propsPrefix),
                                 };
                             }
                             if (condition.conditionType === 'element-state') {
-                                const { transformedStyles, tokensUsed } = generatePropReferencesSyntax(styleRef.content.styles, timesReferred, root, propsPrefix);
-                                if (tokensUsed) {
-                                    isTokensUsed = true;
-                                }
                                 jssStyleMap[className] = {
                                     ...jssStyleMap[className],
-                                    [`&:${condition.content}`]: transformedStyles,
+                                    [`&:${condition.content}`]: generatePropReferencesSyntax(styleRef.content.styles, timesProsReferred, tokensReferred, root, propsPrefix),
                                 };
@@ -129,3 +117,3 @@ }
             }
-            if (timesReferred > 1) {
+            if (timesProsReferred > 1) {
                 ASTUtils.addSpreadAttributeToJSXTag(root, propsPrefix);
@@ -146,3 +134,3 @@ }
         }
-        if (isTokensUsed) {
+        if (tokensReferred.length > 0) {
             dependencies.TOKENS = {
@@ -149,0 +137,0 @@ type: 'local',

dist/esm/style-sheet.js

 import * as t from '@babel/types';
-import { ASTUtils } from '@teleporthq/teleport-plugin-common';
 import { ChunkType, FileType, } from '@teleporthq/teleport-types';
@@ -10,6 +9,6 @@ import { generateExportablCSSInterpolate, generatePropReferencesSyntax } from './utils';
         const { uidl, chunks, dependencies } = structure;
-        const { styleSetDefinitions, designLanguage = {} } = uidl;
-        const { tokens = {} } = designLanguage;
-        if (!styleSetDefinitions && !tokens) {
-            return;
+        const { styleSetDefinitions = {}, designLanguage: { tokens = {} } = {} } = uidl;
+        if ((!styleSetDefinitions && !tokens) ||
+            (Object.keys(styleSetDefinitions).length === 0 && Object.keys(tokens).length === 0)) {
+            return structure;
         }
@@ -26,6 +25,5 @@ const tokensMap = Object.keys(tokens || {}).reduce((acc, key) => {
             let styles = {};
-            const { transformedStyles } = generatePropReferencesSyntax(content, 0);
             styles = {
                 ...styles,
-                ...transformedStyles,
+                ...generatePropReferencesSyntax(content),
             };
@@ -37,3 +35,2 @@ if (conditions.length > 0) {
                     }
-                    const { transformedStyles: transformedMediaStyles } = generatePropReferencesSyntax(styleRef.content, 0);
                     if (styleRef.type === 'screen-size') {
@@ -43,3 +40,3 @@ styles = {
                             ...{
-                                [`@media(max-width: ${styleRef.meta.maxWidth}px)`]: transformedMediaStyles,
+                                [`@media(max-width: ${styleRef.meta.maxWidth}px)`]: generatePropReferencesSyntax(styleRef.content),
                             },
@@ -52,3 +49,3 @@ };
                             ...{
-                                [`&:${styleRef.meta.state}`]: transformedMediaStyles,
+                                [`&:${styleRef.meta.state}`]: generatePropReferencesSyntax(styleRef.content),
                             },
@@ -59,4 +56,2 @@ };
             }
-            uidl.outputOptions = uidl.outputOptions || {};
-            uidl.outputOptions.fileName = fileName;
             chunks.push({
@@ -69,20 +64,30 @@ name: fileName,
             });
+            dependencies.css = {
+                type: 'package',
+                path: componentLibrary === 'react' ? 'styled-components' : 'styled-components/native',
+                version: '4.2.0',
+                meta: {
+                    namedImport: true,
+                },
+            };
         });
-        chunks.push({
-            name: 'tokens-chunk',
-            type: ChunkType.AST,
-            fileType: FileType.JS,
-            content: t.exportNamedDeclaration(t.variableDeclaration('const', [
-                t.variableDeclarator(t.identifier('TOKENS'), ASTUtils.objectToObjectExpression(tokensMap)),
-            ])),
-            linkAfter: ['import-local'],
-        });
-        dependencies.css = {
-            type: 'package',
-            path: componentLibrary === 'react' ? 'styled-components' : 'styled-components/native',
-            version: '4.2.0',
-            meta: {
-                namedImport: true,
-            },
-        };
+        if (Object.keys(tokensMap).length > 0) {
+            chunks.push({
+                name: 'tokens-chunk',
+                type: ChunkType.AST,
+                fileType: FileType.JS,
+                content: t.exportNamedDeclaration(t.variableDeclaration('const', [
+                    t.variableDeclarator(t.identifier('TOKENS'), t.objectExpression(Object.keys(tokensMap).reduce((acc, token) => {
+                        const value = typeof tokensMap[token] === 'number'
+                            ? t.numericLiteral(Number(tokensMap[token]))
+                            : t.stringLiteral(String(tokensMap[token]));
+                        acc.push(t.objectProperty(t.identifier(token), value));
+                        return acc;
+                    }, []))),
+                ])),
+                linkAfter: ['import-local'],
+            });
+        }
+        uidl.outputOptions = uidl.outputOptions || {};
+        uidl.outputOptions.fileName = fileName;
         return structure;
@@ -89,0 +94,0 @@ };

dist/esm/utils.d.ts

@@ -9,5 +9,2 @@ import * as t from '@babel/types';
 export declare const removeUnusedDependencies: (dependencies: Record<string, UIDLDependency>, jsxNodesLookup: Record<string, t.JSXElement>) => void;
-export declare const generatePropReferencesSyntax: (style: Record<string, UIDLStyleValue>, timesReferred: number, root?: t.JSXElement, propsPrefix?: unknown) => {
-    transformedStyles: Record<string, any>;
-    tokensUsed: boolean;
-};
+export declare const generatePropReferencesSyntax: (style: Record<string, UIDLStyleValue>, timesPropsReferred?: number, tokensReferred?: string[], root?: t.JSXElement, propsPrefix?: unknown) => Record<string, any>;

dist/esm/utils.js

@@ -67,9 +67,9 @@ import * as t from '@babel/types';
 };
-export const generatePropReferencesSyntax = (style, timesReferred, root, propsPrefix) => {
-    let tokensUsed = false;
-    const transformedStyles = UIDLUtils.transformDynamicStyles(style, (styleValue, attribute) => {
+export const generatePropReferencesSyntax = (style, timesPropsReferred, tokensReferred, root, propsPrefix) => {
+    return UIDLUtils.transformDynamicStyles(style, (styleValue, attribute) => {
+        var _a;
         switch (styleValue.content.referenceType) {
             case 'prop': {
                 const dashCaseAttribute = StringUtils.dashCaseToCamelCase(attribute);
-                if (timesReferred === 1 && root && propsPrefix) {
+                if (timesPropsReferred && timesPropsReferred === 1 && root && propsPrefix) {
                     ASTUtils.addDynamicAttributeToJSXTag(root, dashCaseAttribute, styleValue.content.id, propsPrefix);
@@ -81,4 +81,5 @@ return `\$\{props => props.${dashCaseAttribute}\}`;
             case 'token':
-                tokensUsed = true;
-                return `\$\{TOKENS.${StringUtils.capitalize(StringUtils.dashCaseToCamelCase(styleValue.content.id))}\}`;
+                const token = StringUtils.capitalize(StringUtils.dashCaseToCamelCase(styleValue.content.id));
+                (_a = tokensReferred) === null || _a === void 0 ? void 0 : _a.push(token);
+                return `\$\{TOKENS.${token}\}`;
             default:
@@ -89,7 +90,3 @@ throw new Error(`Error running transformDynamicStyles in reactStyledComponentsPlugin.
     });
-    return {
-        transformedStyles,
-        tokensUsed,
-    };
 };
 //# sourceMappingURL=utils.js.map

package.json

 {
   "name": "@teleporthq/teleport-plugin-react-styled-components",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "A plugin for injecting the styles through styled-components inside React components",
@@ -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

@@ -49,3 +49,3 @@ import * as types from '@babel/types'
     const jssStyleMap: Record<string, unknown> = {}
-    let isTokensUsed: boolean = false
+    const tokensReferred: string[] = []
 
@@ -64,4 +64,7 @@ UIDLUtils.traverseElements(node, (element) => {
 
-      let timesReferred = countPropReferences(style, 0)
-      timesReferred = countPropRefernecesFromReferencedStyles(referencedStyles, timesReferred)
+      let timesProsReferred = countPropReferences(style, 0)
+      timesProsReferred = countPropRefernecesFromReferencedStyles(
+        referencedStyles,
+        timesProsReferred
+      )
 
@@ -96,12 +99,9 @@ if (style && Object.keys(style).length > 0) {
         }
-        const { transformedStyles, tokensUsed } = generatePropReferencesSyntax(
+        jssStyleMap[className] = generatePropReferencesSyntax(
           style,
-          timesReferred,
+          timesProsReferred,
+          tokensReferred,
           root,
           propsPrefix
         )
-        jssStyleMap[className] = transformedStyles
-        if (tokensUsed) {
-          isTokensUsed = true
-        }
       }
@@ -121,14 +121,11 @@
               if (condition.conditionType === 'screen-size') {
-                const { transformedStyles, tokensUsed } = generatePropReferencesSyntax(
-                  styleRef.content.styles,
-                  timesReferred,
-                  root,
-                  propsPrefix
-                )
-                if (tokensUsed) {
-                  isTokensUsed = tokensUsed
-                }
                 jssStyleMap[className] = {
                   ...(jssStyleMap[className] as Record<string, string>),
-                  [`@media(max-width: ${condition.maxWidth}px)`]: transformedStyles,
+                  [`@media(max-width: ${condition.maxWidth}px)`]: generatePropReferencesSyntax(
+                    styleRef.content.styles,
+                    timesProsReferred,
+                    tokensReferred,
+                    root,
+                    propsPrefix
+                  ),
                 }
@@ -138,14 +135,11 @@ }
               if (condition.conditionType === 'element-state') {
-                const { transformedStyles, tokensUsed } = generatePropReferencesSyntax(
-                  styleRef.content.styles,
-                  timesReferred,
-                  root,
-                  propsPrefix
-                )
-                if (tokensUsed) {
-                  isTokensUsed = true
-                }
                 jssStyleMap[className] = {
                   ...(jssStyleMap[className] as Record<string, string>),
-                  [`&:${condition.content}`]: transformedStyles,
+                  [`&:${condition.content}`]: generatePropReferencesSyntax(
+                    styleRef.content.styles,
+                    timesProsReferred,
+                    tokensReferred,
+                    root,
+                    propsPrefix
+                  ),
                 }
@@ -192,3 +186,3 @@ }
 
-      if (timesReferred > 1) {
+      if (timesProsReferred > 1) {
         ASTUtils.addSpreadAttributeToJSXTag(root, propsPrefix)
@@ -218,3 +212,3 @@ }
 
-    if (isTokensUsed) {
+    if (tokensReferred.length > 0) {
       dependencies.TOKENS = {
@@ -221,0 +215,0 @@ type: 'local',

src/style-sheet.ts

 import * as t from '@babel/types'
-import { ASTUtils } from '@teleporthq/teleport-plugin-common'
 import {
@@ -22,7 +21,9 @@ ComponentPlugin,
     const { uidl, chunks, dependencies } = structure
-    const { styleSetDefinitions, designLanguage = {} } = uidl
-    const { tokens = {} } = designLanguage
+    const { styleSetDefinitions = {}, designLanguage: { tokens = {} } = {} } = uidl
 
-    if (!styleSetDefinitions && !tokens) {
-      return
+    if (
+      (!styleSetDefinitions && !tokens) ||
+      (Object.keys(styleSetDefinitions).length === 0 && Object.keys(tokens).length === 0)
+    ) {
+      return structure
     }
@@ -45,6 +46,5 @@
       let styles = {}
-      const { transformedStyles } = generatePropReferencesSyntax(content, 0)
       styles = {
         ...styles,
-        ...transformedStyles,
+        ...generatePropReferencesSyntax(content),
       }
@@ -57,6 +57,2 @@
           }
-          const { transformedStyles: transformedMediaStyles } = generatePropReferencesSyntax(
-            styleRef.content,
-            0
-          )
 
@@ -67,3 +63,5 @@ if (styleRef.type === 'screen-size') {
               ...{
-                [`@media(max-width: ${styleRef.meta.maxWidth}px)`]: transformedMediaStyles,
+                [`@media(max-width: ${styleRef.meta.maxWidth}px)`]: generatePropReferencesSyntax(
+                  styleRef.content
+                ),
               },
@@ -77,3 +75,3 @@ }
               ...{
-                [`&:${styleRef.meta.state}`]: transformedMediaStyles,
+                [`&:${styleRef.meta.state}`]: generatePropReferencesSyntax(styleRef.content),
               },
@@ -85,5 +83,2 @@ }
 
-      uidl.outputOptions = uidl.outputOptions || {}
-      uidl.outputOptions.fileName = fileName
-
       chunks.push({
@@ -96,28 +91,42 @@ name: fileName,
       })
-    })
 
-    chunks.push({
-      name: 'tokens-chunk',
-      type: ChunkType.AST,
-      fileType: FileType.JS,
-      content: t.exportNamedDeclaration(
-        t.variableDeclaration('const', [
-          t.variableDeclarator(
-            t.identifier('TOKENS'),
-            ASTUtils.objectToObjectExpression(tokensMap)
-          ),
-        ])
-      ),
-      linkAfter: ['import-local'],
+      dependencies.css = {
+        type: 'package',
+        path: componentLibrary === 'react' ? 'styled-components' : 'styled-components/native',
+        version: '4.2.0',
+        meta: {
+          namedImport: true,
+        },
+      }
     })
 
-    dependencies.css = {
-      type: 'package',
-      path: componentLibrary === 'react' ? 'styled-components' : 'styled-components/native',
-      version: '4.2.0',
-      meta: {
-        namedImport: true,
-      },
+    if (Object.keys(tokensMap).length > 0) {
+      chunks.push({
+        name: 'tokens-chunk',
+        type: ChunkType.AST,
+        fileType: FileType.JS,
+        content: t.exportNamedDeclaration(
+          t.variableDeclaration('const', [
+            t.variableDeclarator(
+              t.identifier('TOKENS'),
+              t.objectExpression(
+                Object.keys(tokensMap).reduce((acc: t.ObjectProperty[], token) => {
+                  const value =
+                    typeof tokensMap[token] === 'number'
+                      ? t.numericLiteral(Number(tokensMap[token]))
+                      : t.stringLiteral(String(tokensMap[token]))
+                  acc.push(t.objectProperty(t.identifier(token), value))
+                  return acc
+                }, [])
+              )
+            ),
+          ])
+        ),
+        linkAfter: ['import-local'],
+      })
     }
 
+    uidl.outputOptions = uidl.outputOptions || {}
+    uidl.outputOptions.fileName = fileName
+
     return structure
@@ -124,0 +133,0 @@ }

src/utils.ts

@@ -106,12 +106,12 @@ import * as t from '@babel/types'
   style: Record<string, UIDLStyleValue>,
-  timesReferred: number,
+  timesPropsReferred?: number,
+  tokensReferred?: string[],
   root?: t.JSXElement,
   propsPrefix?: unknown
 ) => {
-  let tokensUsed = false
-  const transformedStyles = UIDLUtils.transformDynamicStyles(style, (styleValue, attribute) => {
+  return UIDLUtils.transformDynamicStyles(style, (styleValue, attribute) => {
     switch (styleValue.content.referenceType) {
       case 'prop': {
         const dashCaseAttribute = StringUtils.dashCaseToCamelCase(attribute)
-        if (timesReferred === 1 && root && propsPrefix) {
+        if (timesPropsReferred && timesPropsReferred === 1 && root && propsPrefix) {
           ASTUtils.addDynamicAttributeToJSXTag(
@@ -128,6 +128,5 @@ root,
       case 'token':
-        tokensUsed = true
-        return `\$\{TOKENS.${StringUtils.capitalize(
-          StringUtils.dashCaseToCamelCase(styleValue.content.id)
-        )}\}`
+        const token = StringUtils.capitalize(StringUtils.dashCaseToCamelCase(styleValue.content.id))
+        tokensReferred?.push(token)
+        return `\$\{TOKENS.${token}\}`
       default:
@@ -140,7 +139,2 @@ throw new Error(
   })
-
-  return {
-    transformedStyles,
-    tokensUsed,
-  }
 }

No alert changes

Improved metrics

Total package byte prevSize

347089

0.09%

Worsened metrics

Lines of code

1704

-1.62%

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