styled-jsx - npm Package Compare versions

Comparing version 4.0.0-alpha.3 to 4.0.0-alpha.4

dist/_utils.js

@@ -9,4 +9,2 @@ "use strict";
 
-var _helperModuleImports = require("@babel/helper-module-imports");
-
 var t = _interopRequireWildcard(require("@babel/types"));
@@ -562,5 +560,3 @@
 var createReactComponentImportDeclaration = function createReactComponentImportDeclaration(state) {
-  return (0, _helperModuleImports.addDefault)(state.file.path, state.styleModule, {
-    nameHint: _constants.STYLE_COMPONENT
-  }).name;
+  return t.importDeclaration([t.importDefaultSpecifier(t.identifier(state.styleComponentImportName))], t.stringLiteral(state.styleModule));
 };
@@ -567,0 +563,0 @@

dist/babel-external.js

@@ -177,10 +177,8 @@ "use strict";
         });
-      }); // When using the `resolve` helper we need to add an import
+      });
+      var hasCssResolve = hasJSXStyle && taggedTemplateExpressions.resolve.length > 0; // When using the `resolve` helper we need to add an import
       // for the _JSXStyle component `styled-jsx/style`
 
-      var useResolve = hasJSXStyle && taggedTemplateExpressions.resolve.length > 0;
-
-      if (useResolve) {
+      if (hasCssResolve) {
         state.file.hasCssResolve = true;
-        state.hasInjectedJSXStyle = true;
       }
@@ -187,0 +185,0 @@ }); // Finally remove the import

dist/babel.js

@@ -12,2 +12,4 @@ "use strict";
 
+var _constants = require("./_constants");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -251,9 +253,9 @@
         enter: function enter(path, state) {
+          (0, _utils.setStateOptions)(state);
           state.hasJSXStyle = null;
           state.ignoreClosing = null;
           state.file.hasJSXStyle = false;
-          state.file.hasCssResolve = false;
-          (0, _utils.setStateOptions)(state); // `addDefault` will generate unique id for the scope
+          state.file.hasCssResolve = false; // create unique identifier for _JSXStyle component
 
-          state.styleComponentImportName = (0, _utils.createReactComponentImportDeclaration)(state); // we need to beat the arrow function transform and
+          state.styleComponentImportName = path.scope.generateUidIdentifier(_constants.STYLE_COMPONENT).name; // we need to beat the arrow function transform and
           // possibly others so we traverse from here or else
@@ -267,19 +269,9 @@ // dynamic values in classNames could be incorrect
         exit: function exit(path, state) {
-          // For source that didn't really need styled-jsx/style imports,
-          // remove the injected import at the beginning
           if (!state.file.hasJSXStyle && !state.file.hasCssResolve) {
-            path.traverse({
-              ImportDeclaration: function ImportDeclaration(importPath) {
-                if (importPath.node.source.value === state.styleModule) {
-                  importPath.remove();
-                }
-              }
-            });
-          }
-
-          if (!(state.file.hasJSXStyle && !state.hasInjectedJSXStyle && !path.scope.hasBinding(state.styleComponentImportName))) {
             return;
           }
 
-          state.hasInjectedJSXStyle = true;
+          state.file.hasJSXStyle = true;
+          var importDeclaration = (0, _utils.createReactComponentImportDeclaration)(state);
+          path.unshiftContainer('body', importDeclaration);
         }
@@ -286,0 +278,0 @@ }

dist/macro.js

@@ -12,2 +12,4 @@ "use strict";
 
+var _constants = require("./_constants");
+
 var _default = (0, _babelPluginMacros.createMacro)(styledJsxMacro);
@@ -20,4 +22,3 @@
       state = _ref.state;
-  (0, _utils.setStateOptions)(state);
-  state.styleComponentImportName = (0, _utils.createReactComponentImportDeclaration)(state); // Holds a reference to all the lines where strings are tagged using the `css` tag name.
+  (0, _utils.setStateOptions)(state); // Holds a reference to all the lines where strings are tagged using the `css` tag name.
   // We print a warning at the end of the macro in case there is any reference to css,
@@ -77,2 +78,11 @@ // because `css` is generally used as default import name for 'styled-jsx/css'.
         }
+      }
+
+      if (!state.styleComponentImportName) {
+        var programPath = path.findParent(function (p) {
+          return p.isProgram();
+        });
+        state.styleComponentImportName = programPath.scope.generateUidIdentifier(_constants.STYLE_COMPONENT).name;
+        var importDeclaration = (0, _utils.createReactComponentImportDeclaration)(state);
+        programPath.unshiftContainer('body', importDeclaration);
       } // Finally transform the path :)
@@ -91,6 +101,2 @@
       });
-
-      if (!state.hasInjectedJSXStyle) {
-        state.hasInjectedJSXStyle = true;
-      }
     });
@@ -97,0 +103,0 @@ });

package.json

 {
   "name": "styled-jsx",
-  "version": "4.0.0-alpha.3",
+  "version": "4.0.0-alpha.4",
   "license": "MIT",
@@ -59,3 +59,2 @@ "repository": "vercel/styled-jsx",
   "dependencies": {
-    "@babel/helper-module-imports": "7.14.5",
     "@babel/plugin-syntax-jsx": "7.14.5",
@@ -62,0 +61,0 @@ "@babel/types": "7.15.0",

No alert changes

Improved metrics

Dependency count

9

decreased by-10%

Worsened metrics

Total package byte prevSize

103889

decreased by-0.2%

Lines of code

1666

decreased by-0.42%

Dependency changes

• - Removed@babel/helper-module-imports@7.14.5

• - Removed@babel/helper-module-imports@7.14.5(transitive)