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

Comparing version 0.12.1 to 0.12.2

__tests__/style-sheet.ts

@@ -61,2 +61,27 @@ import {
       },
+      '5ecfa1233b8e50f60ea2b64c': {
+        id: '5ecfa1233b8e50f60ea2b64c',
+        name: 'conditionalButton',
+        type: 'reusable-project-style-map',
+        conditions: [
+          {
+            type: 'screen-size',
+            meta: { maxWidth: 991 },
+            content: {
+              backgrouns: staticNode('purple'),
+            },
+          },
+          {
+            type: 'element-state',
+            meta: { state: 'hover' },
+            content: {
+              background: staticNode('yellow'),
+            },
+          },
+        ],
+        content: {
+          background: staticNode('red'),
+          color: staticNode('blue'),
+        },
+      },
     }
@@ -68,3 +93,3 @@
 
-    expect(styleChunks.length).toBe(2)
+    expect(styleChunks.length).toBe(3)
     expect(dependencies.css.path).toBe('styled-components')
@@ -71,0 +96,0 @@ })

dist/cjs/index.js

@@ -107,3 +107,3 @@ "use strict";
                         var _a, _b;
-                        var _c, _d;
+                        var _c, _d, _e;
                         switch ((_c = styleRef.content) === null || _c === void 0 ? void 0 : _c.mapType) {
@@ -113,2 +113,5 @@ case 'inlined': {
                                 var condition = conditions[0];
+                                if (((_d = styleRef.content) === null || _d === void 0 ? void 0 : _d.styles) && Object.keys(styleRef.content.styles).length === 0) {
+                                    return;
+                                }
                                 if (condition.conditionType === 'screen-size') {
@@ -127,3 +130,3 @@ jssStyleMap[className] = __assign(__assign({}, jssStyleMap[className]), (_a = {}, _a["@media(max-width: " + condition.maxWidth + "px)"] = utils_1.generatePropReferencesSyntax(styleRef.content.styles, timesReferred, root, propsPrefix), _a));
                                 var content = styleRef.content;
-                                if (content.referenceId && !((_d = content) === null || _d === void 0 ? void 0 : _d.conditions)) {
+                                if (content.referenceId && !((_e = content) === null || _e === void 0 ? void 0 : _e.conditions)) {
                                     var referedStyle = projectStyleSet.styleSetDefinitions[content.referenceId];
@@ -130,0 +133,0 @@ if (!referencedStyles) {

dist/cjs/style-sheet.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -56,4 +67,23 @@ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
             Object.values(styleSetDefinitions).forEach(function (style) {
-                var name = style.name, content = style.content;
+                var name = style.name, content = style.content, _a = style.conditions, conditions = _a === void 0 ? [] : _a;
                 var className = teleport_shared_1.StringUtils.dashCaseToUpperCamelCase(name);
+                var styles = teleport_plugin_common_1.StyleUtils.getContentOfStyleObject(content);
+                if (conditions.length > 0) {
+                    conditions.forEach(function (styleRef) {
+                        var _a, _b;
+                        if (Object.keys(styleRef.content).length === 0) {
+                            return;
+                        }
+                        if (styleRef.type === 'screen-size') {
+                            styles = __assign(__assign({}, styles), (_a = {},
+                                _a["@media(max-width: " + styleRef.meta.maxWidth + "px)"] = teleport_plugin_common_1.StyleUtils.getContentOfStyleObject(styleRef.content),
+                                _a));
+                        }
+                        if (styleRef.type === 'element-state') {
+                            styles = __assign(__assign({}, styles), (_b = {},
+                                _b["&:" + styleRef.meta.state] = teleport_plugin_common_1.StyleUtils.getContentOfStyleObject(styleRef.content),
+                                _b));
+                        }
+                    });
+                }
                 chunks.push({
@@ -63,3 +93,3 @@ name: fileName,
                     fileType: teleport_types_1.FileType.JS,
-                    content: utils_1.generateExportablCSSInterpolate(className, teleport_plugin_common_1.StyleUtils.getContentOfStyleObject(content)),
+                    content: utils_1.generateExportablCSSInterpolate(className, styles),
                     linkAfter: ['import-local'],
@@ -66,0 +96,0 @@ });

dist/esm/index.js

@@ -60,3 +60,3 @@ import { ChunkType, FileType, } from '@teleporthq/teleport-types';
                 Object.values(referencedStyles).forEach((styleRef) => {
-                    var _a, _b;
+                    var _a, _b, _c;
                     switch ((_a = styleRef.content) === null || _a === void 0 ? void 0 : _a.mapType) {
@@ -66,2 +66,5 @@ case 'inlined': {
                             const [condition] = conditions;
+                            if (((_b = styleRef.content) === null || _b === void 0 ? void 0 : _b.styles) && Object.keys(styleRef.content.styles).length === 0) {
+                                return;
+                            }
                             if (condition.conditionType === 'screen-size') {
@@ -86,3 +89,3 @@ jssStyleMap[className] = {
                             const { content } = styleRef;
-                            if (content.referenceId && !((_b = content) === null || _b === void 0 ? void 0 : _b.conditions)) {
+                            if (content.referenceId && !((_c = content) === null || _c === void 0 ? void 0 : _c.conditions)) {
                                 const referedStyle = projectStyleSet.styleSetDefinitions[content.referenceId];
@@ -89,0 +92,0 @@ if (!referencedStyles) {

dist/esm/style-sheet.js

@@ -16,4 +16,28 @@ import { StyleUtils } from '@teleporthq/teleport-plugin-common';
         Object.values(styleSetDefinitions).forEach((style) => {
-            const { name, content } = style;
+            const { name, content, conditions = [] } = style;
             const className = StringUtils.dashCaseToUpperCamelCase(name);
+            let styles = StyleUtils.getContentOfStyleObject(content);
+            if (conditions.length > 0) {
+                conditions.forEach((styleRef) => {
+                    if (Object.keys(styleRef.content).length === 0) {
+                        return;
+                    }
+                    if (styleRef.type === 'screen-size') {
+                        styles = {
+                            ...styles,
+                            ...{
+                                [`@media(max-width: ${styleRef.meta.maxWidth}px)`]: StyleUtils.getContentOfStyleObject(styleRef.content),
+                            },
+                        };
+                    }
+                    if (styleRef.type === 'element-state') {
+                        styles = {
+                            ...styles,
+                            ...{
+                                [`&:${styleRef.meta.state}`]: StyleUtils.getContentOfStyleObject(styleRef.content),
+                            },
+                        };
+                    }
+                });
+            }
             chunks.push({
@@ -23,3 +47,3 @@ name: fileName,
                 fileType: FileType.JS,
-                content: generateExportablCSSInterpolate(className, StyleUtils.getContentOfStyleObject(content)),
+                content: generateExportablCSSInterpolate(className, styles),
                 linkAfter: ['import-local'],
@@ -26,0 +50,0 @@ });

package.json

 {
   "name": "@teleporthq/teleport-plugin-react-styled-components",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "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.12.1",
-    "@teleporthq/teleport-shared": "^0.12.1",
-    "@teleporthq/teleport-types": "^0.12.1"
+    "@teleporthq/teleport-plugin-common": "^0.12.2",
+    "@teleporthq/teleport-shared": "^0.12.2",
+    "@teleporthq/teleport-types": "^0.12.2"
   },
-  "gitHead": "b915601e01fc0144bffc12c858198c93b29a2a47"
+  "gitHead": "9980dea7c44514e3899333762d22bf577e00831b"
 }

src/index.ts

@@ -110,2 +110,7 @@ import * as types from '@babel/types'
               const [condition] = conditions
+
+              if (styleRef.content?.styles && Object.keys(styleRef.content.styles).length === 0) {
+                return
+              }
+
               if (condition.conditionType === 'screen-size') {
@@ -112,0 +117,0 @@ jssStyleMap[className] = {

src/style-sheet.ts

@@ -31,6 +31,35 @@ import { StyleUtils } from '@teleporthq/teleport-plugin-common'
     Object.values(styleSetDefinitions).forEach((style) => {
-      const { name, content } = style
+      const { name, content, conditions = [] } = style
 
       const className = StringUtils.dashCaseToUpperCamelCase(name)
+      let styles = StyleUtils.getContentOfStyleObject(content)
 
+      if (conditions.length > 0) {
+        conditions.forEach((styleRef) => {
+          if (Object.keys(styleRef.content).length === 0) {
+            return
+          }
+
+          if (styleRef.type === 'screen-size') {
+            styles = {
+              ...styles,
+              ...{
+                [`@media(max-width: ${styleRef.meta.maxWidth}px)`]: StyleUtils.getContentOfStyleObject(
+                  styleRef.content
+                ),
+              },
+            }
+          }
+
+          if (styleRef.type === 'element-state') {
+            styles = {
+              ...styles,
+              ...{
+                [`&:${styleRef.meta.state}`]: StyleUtils.getContentOfStyleObject(styleRef.content),
+              },
+            }
+          }
+        })
+      }
+
       chunks.push({
@@ -40,6 +69,3 @@ name: fileName,
         fileType: FileType.JS,
-        content: generateExportablCSSInterpolate(
-          className,
-          StyleUtils.getContentOfStyleObject(content)
-        ),
+        content: generateExportablCSSInterpolate(className, styles),
         linkAfter: ['import-local'],
@@ -46,0 +72,0 @@ })

No alert changes

Improved metrics

Total package byte prevSize

333627

increased by1.9%

Lines of code

1546

increased by7.74%

Dependency changes

• Updated@teleporthq/teleport-plugin-common@^0.12.2

• Updated@teleporthq/teleport-shared@^0.12.2

• Updated@teleporthq/teleport-types@^0.12.2