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

Comparing version 0.19.1 to 0.19.7

__tests__/component-scoped.ts

@@ -48,9 +48,2 @@ import { createReactStyledComponentsPlugin } from '../src'
     uidl.node.content.referencedStyles = {
-      '12345678': {
-        type: 'style-map',
-        content: {
-          mapType: 'component-referenced',
-          content: staticNode('md-8'),
-        },
-      },
       '1415161718': {
@@ -57,0 +50,0 @@ type: 'style-map',

dist/cjs/index.js

@@ -79,3 +79,3 @@ "use strict";
 var createReactStyledComponentsPlugin = function (config) {
-    var _a = config || {}, _b = _a.componentChunkName, componentChunkName = _b === void 0 ? 'jsx-component' : _b, _c = _a.importChunkName, importChunkName = _c === void 0 ? 'import-local' : _c, _d = _a.componentLibrary, componentLibrary = _d === void 0 ? 'react' : _d, _e = _a.illegalComponentNames, illegalComponentNames = _e === void 0 ? [] : _e, _f = _a.classAttributeName, classAttributeName = _f === void 0 ? 'className' : _f;
+    var _a = config || {}, _b = _a.componentChunkName, componentChunkName = _b === void 0 ? 'jsx-component' : _b, _c = _a.importChunkName, importChunkName = _c === void 0 ? 'import-local' : _c, _d = _a.componentLibrary, componentLibrary = _d === void 0 ? 'react' : _d, _e = _a.illegalComponentNames, illegalComponentNames = _e === void 0 ? [] : _e;
     var reactStyledComponentsPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () {
@@ -113,3 +113,2 @@ var uidl, chunks, dependencies, options, node, name, _a, componentStyleSheet, projectStyleSet, componentChunk, jsxNodesLookup, propsPrefix, cssMap, tokensReferred, variants;
                 var projectStyleReferences = new Set();
-                var staticClasses = new Set();
                 if (Object.keys(style).length === 0 && Object.keys(referencedStyles).length === 0) {
@@ -191,6 +190,7 @@ return;
                                 if (componentStyleReferences.size > 0) {
-                                    throw new teleport_types_1.PluginStyledComponent("Styled Component can have only one reference per node.\ni.e either a direct static reference from component style sheet or from props. Got both. " + JSON.stringify(Array.from(componentStyleReferences), null, 2));
+                                    throw new teleport_types_1.PluginStyledComponent("Styled Components can have only one component-reference. Recevied more than one \n\n                  " + JSON.stringify(referencedStyles, null, 2));
                                 }
                                 if (styleRef.content.content.type === 'static') {
-                                    staticClasses.add(types.identifier("'" + styleRef.content.content.content + "'"));
+                                    componentStyleReferences.add(constants_1.componentVariantPropPrefix);
+                                    teleport_plugin_common_1.ASTUtils.addAttributeToJSXTag(root, constants_1.componentVariantPropKey, styleRef.content.content.content);
                                 }
@@ -238,5 +238,2 @@ if (styleRef.content.content.type === 'dynamic' &&
                 }
-                if (staticClasses.size > 0) {
-                    teleport_plugin_common_1.ASTUtils.addMultipleDynamicAttributesToJSXTag(root, classAttributeName, Array.from(staticClasses));
-                }
                 teleport_plugin_common_1.ASTUtils.renameJSXTag(root, className);
@@ -243,0 +240,0 @@ var code = {

dist/esm/index.js

@@ -56,3 +56,3 @@ var __assign = (this && this.__assign) || function () {
 export var createReactStyledComponentsPlugin = function (config) {
-    var _a = config || {}, _b = _a.componentChunkName, componentChunkName = _b === void 0 ? 'jsx-component' : _b, _c = _a.importChunkName, importChunkName = _c === void 0 ? 'import-local' : _c, _d = _a.componentLibrary, componentLibrary = _d === void 0 ? 'react' : _d, _e = _a.illegalComponentNames, illegalComponentNames = _e === void 0 ? [] : _e, _f = _a.classAttributeName, classAttributeName = _f === void 0 ? 'className' : _f;
+    var _a = config || {}, _b = _a.componentChunkName, componentChunkName = _b === void 0 ? 'jsx-component' : _b, _c = _a.importChunkName, importChunkName = _c === void 0 ? 'import-local' : _c, _d = _a.componentLibrary, componentLibrary = _d === void 0 ? 'react' : _d, _e = _a.illegalComponentNames, illegalComponentNames = _e === void 0 ? [] : _e;
     var reactStyledComponentsPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () {
@@ -90,3 +90,2 @@ var uidl, chunks, dependencies, options, node, name, _a, componentStyleSheet, projectStyleSet, componentChunk, jsxNodesLookup, propsPrefix, cssMap, tokensReferred, variants;
                 var projectStyleReferences = new Set();
-                var staticClasses = new Set();
                 if (Object.keys(style).length === 0 && Object.keys(referencedStyles).length === 0) {
@@ -168,6 +167,7 @@ return;
                                 if (componentStyleReferences.size > 0) {
-                                    throw new PluginStyledComponent("Styled Component can have only one reference per node.\ni.e either a direct static reference from component style sheet or from props. Got both. " + JSON.stringify(Array.from(componentStyleReferences), null, 2));
+                                    throw new PluginStyledComponent("Styled Components can have only one component-reference. Recevied more than one \n\n                  " + JSON.stringify(referencedStyles, null, 2));
                                 }
                                 if (styleRef.content.content.type === 'static') {
-                                    staticClasses.add(types.identifier("'" + styleRef.content.content.content + "'"));
+                                    componentStyleReferences.add(componentVariantPropPrefix);
+                                    ASTUtils.addAttributeToJSXTag(root, componentVariantPropKey, styleRef.content.content.content);
                                 }
@@ -215,5 +215,2 @@ if (styleRef.content.content.type === 'dynamic' &&
                 }
-                if (staticClasses.size > 0) {
-                    ASTUtils.addMultipleDynamicAttributesToJSXTag(root, classAttributeName, Array.from(staticClasses));
-                }
                 ASTUtils.renameJSXTag(root, className);
@@ -220,0 +217,0 @@ var code = {

package.json

 {
   "name": "@teleporthq/teleport-plugin-react-styled-components",
-  "version": "0.19.1",
+  "version": "0.19.7",
   "description": "A plugin for injecting the styles through styled-components inside React components",
@@ -32,3 +32,3 @@ "author": "teleportHQ",
   },
-  "gitHead": "867b13813f8116524d52cdb5a458bb401a375a92"
+  "gitHead": "32adb7aad1aba6ed2be72b36607758f126e24b5c"
 }

src/index.ts

@@ -42,3 +42,2 @@ import * as types from '@babel/types'
     illegalComponentNames = [],
-    classAttributeName = 'className',
   } = config || {}
@@ -83,3 +82,2 @@
       const projectStyleReferences: Set<string> = new Set()
-      const staticClasses: Set<types.Identifier> = new Set()
 
@@ -180,12 +178,15 @@ if (Object.keys(style).length === 0 && Object.keys(referencedStyles).length === 0) {
               if (componentStyleReferences.size > 0) {
-                throw new PluginStyledComponent(`Styled Component can have only one reference per node.
-i.e either a direct static reference from component style sheet or from props. Got both. ${JSON.stringify(
-                  Array.from(componentStyleReferences),
-                  null,
-                  2
-                )}`)
+                throw new PluginStyledComponent(
+                  `Styled Components can have only one component-reference. Recevied more than one \n
+                  ${JSON.stringify(referencedStyles, null, 2)}`
+                )
               }
 
               if (styleRef.content.content.type === 'static') {
-                staticClasses.add(types.identifier(`'${styleRef.content.content.content}'`))
+                componentStyleReferences.add(componentVariantPropPrefix)
+                ASTUtils.addAttributeToJSXTag(
+                  root,
+                  componentVariantPropKey,
+                  styleRef.content.content.content
+                )
               }
@@ -262,10 +263,2 @@
 
-      if (staticClasses.size > 0) {
-        ASTUtils.addMultipleDynamicAttributesToJSXTag(
-          root,
-          classAttributeName,
-          Array.from(staticClasses)
-        )
-      }
-
       ASTUtils.renameJSXTag(root, className)
@@ -272,0 +265,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

173419

-0.77%

Lines of code

2103

-0.9%

No dependency changes