babel-plugin-emotion - npm Package Compare versions

Comparing version 10.0.4 to 10.0.5

dist/babel-plugin-emotion.cjs.dev.js

@@ -551,2 +551,4 @@ 'use strict';
   var importPath = _ref.importPath,
+      _ref$originalImportPa = _ref.originalImportPath,
+      originalImportPath = _ref$originalImportPa === void 0 ? importPath : _ref$originalImportPa,
       isWeb = _ref.isWeb;
@@ -566,13 +568,49 @@ return babelPluginMacros.createMacro(function (_ref2) {
     if (references.default && references.default.length) {
-      var styledIdentifier = helperModuleImports.addDefault(state.file.path, importPath, {
-        nameHint: 'styled'
-      });
+      var _styledIdentifier;
+
+      var getStyledIdentifier = function getStyledIdentifier() {
+        if (_styledIdentifier === undefined) {
+          _styledIdentifier = helperModuleImports.addDefault(state.file.path, importPath, {
+            nameHint: 'styled'
+          });
+        }
+
+        return t.cloneDeep(_styledIdentifier);
+      };
+
+      var originalImportPathStyledIdentifier;
+
+      var getOriginalImportPathStyledIdentifier = function getOriginalImportPathStyledIdentifier() {
+        if (originalImportPathStyledIdentifier === undefined) {
+          originalImportPathStyledIdentifier = helperModuleImports.addDefault(state.file.path, originalImportPath, {
+            nameHint: 'styled'
+          });
+        }
+
+        return t.cloneDeep(originalImportPathStyledIdentifier);
+      };
+
+      if (importPath === originalImportPath) {
+        getOriginalImportPathStyledIdentifier = getStyledIdentifier;
+      }
+
       references.default.forEach(function (reference) {
-        if (t.isMemberExpression(reference.parent) && reference.parent.computed === false && // checks if the first character is lowercase
-        // becasue we don't want to transform the member expression if
-        // it's in primitives/native
-        reference.parent.property.name.charCodeAt(0) > 96) {
-          reference.parentPath.replaceWith(t.callExpression(t.cloneDeep(styledIdentifier), [t.stringLiteral(reference.parent.property.name)]));
+        var isCall = false;
+
+        if (t.isMemberExpression(reference.parent) && reference.parent.computed === false) {
+          isCall = true;
+
+          if ( // checks if the first character is lowercase
+          // becasue we don't want to transform the member expression if
+          // it's in primitives/native
+          reference.parent.property.name.charCodeAt(0) > 96) {
+            reference.parentPath.replaceWith(t.callExpression(getStyledIdentifier(), [t.stringLiteral(reference.parent.property.name)]));
+          } else {
+            reference.replaceWith(getStyledIdentifier());
+          }
+        } else if (reference.parentPath && reference.parentPath.parentPath && t.isCallExpression(reference.parentPath) && reference.parent.callee === reference.node) {
+          isCall = true;
+          reference.replaceWith(getStyledIdentifier());
         } else {
-          reference.replaceWith(t.cloneDeep(styledIdentifier));
+          reference.replaceWith(getOriginalImportPathStyledIdentifier());
         }
@@ -597,6 +635,8 @@
 
-        reference.addComment('leading', '#__PURE__');
+        if (isCall) {
+          reference.addComment('leading', '#__PURE__');
 
-        if (t.isCallExpression(reference.parentPath)) {
-          reference.parentPath.node.arguments[1] = getStyledOptions(t, reference.parentPath, state);
+          if (isWeb) {
+            reference.parentPath.node.arguments[1] = getStyledOptions(t, reference.parentPath, state);
+          }
         }
@@ -686,2 +726,3 @@ });
   importPath: '@emotion/styled-base',
+  originalImportPath: '@emotion/styled',
   isWeb: true
@@ -691,2 +732,3 @@ });
   importPath: '@emotion/native',
+  originalImportPath: '@emotion/native',
   isWeb: false
@@ -696,2 +738,3 @@ });
   importPath: '@emotion/primitives',
+  originalImportPath: '@emotion/primitives',
   isWeb: false
@@ -698,0 +741,0 @@ });

dist/babel-plugin-emotion.cjs.prod.js

@@ -463,2 +463,5 @@ "use strict";
     var importPath = _ref.importPath,
+      _ref$originalImportPa = _ref.originalImportPath,
+      originalImportPath =
+        void 0 === _ref$originalImportPa ? importPath : _ref$originalImportPa,
       isWeb = _ref.isWeb;
@@ -472,37 +475,70 @@ return babelPluginMacros.createMacro(function(_ref2) {
       if (references.default && references.default.length) {
-        var styledIdentifier = helperModuleImports.addDefault(
-          state.file.path,
-          importPath,
-          { nameHint: "styled" }
-        );
-        references.default.forEach(function(reference) {
-          if (
-            (t.isMemberExpression(reference.parent) &&
-            !1 === reference.parent.computed &&
-            96 < reference.parent.property.name.charCodeAt(0)
-              ? reference.parentPath.replaceWith(
-                  t.callExpression(t.cloneDeep(styledIdentifier), [
-                    t.stringLiteral(reference.parent.property.name)
-                  ])
-                )
-              : reference.replaceWith(t.cloneDeep(styledIdentifier)),
-            reference.parentPath && reference.parentPath.parentPath)
-          ) {
-            var styledCallPath = reference.parentPath.parentPath,
-              node = transformExpressionWithStyles({
-                path: styledCallPath,
-                state: state,
-                babel: babel,
-                shouldLabel: !1
-              }).node;
-            node && isWeb && (styledCallPath.node.arguments[0] = node);
-          }
-          reference.addComment("leading", "#__PURE__"),
-            t.isCallExpression(reference.parentPath) &&
-              (reference.parentPath.node.arguments[1] = getStyledOptions(
-                t,
-                reference.parentPath,
-                state
-              ));
-        });
+        var _styledIdentifier,
+          originalImportPathStyledIdentifier,
+          getStyledIdentifier = function() {
+            return (
+              void 0 === _styledIdentifier &&
+                (_styledIdentifier = helperModuleImports.addDefault(
+                  state.file.path,
+                  importPath,
+                  { nameHint: "styled" }
+                )),
+              t.cloneDeep(_styledIdentifier)
+            );
+          },
+          getOriginalImportPathStyledIdentifier = function() {
+            return (
+              void 0 === originalImportPathStyledIdentifier &&
+                (originalImportPathStyledIdentifier = helperModuleImports.addDefault(
+                  state.file.path,
+                  originalImportPath,
+                  { nameHint: "styled" }
+                )),
+              t.cloneDeep(originalImportPathStyledIdentifier)
+            );
+          };
+        importPath === originalImportPath &&
+          (getOriginalImportPathStyledIdentifier = getStyledIdentifier),
+          references.default.forEach(function(reference) {
+            var isCall = !1;
+            if (
+              (t.isMemberExpression(reference.parent) &&
+              !1 === reference.parent.computed
+                ? ((isCall = !0),
+                  96 < reference.parent.property.name.charCodeAt(0)
+                    ? reference.parentPath.replaceWith(
+                        t.callExpression(getStyledIdentifier(), [
+                          t.stringLiteral(reference.parent.property.name)
+                        ])
+                      )
+                    : reference.replaceWith(getStyledIdentifier()))
+                : reference.parentPath &&
+                  reference.parentPath.parentPath &&
+                  t.isCallExpression(reference.parentPath) &&
+                  reference.parent.callee === reference.node
+                  ? ((isCall = !0),
+                    reference.replaceWith(getStyledIdentifier()))
+                  : reference.replaceWith(
+                      getOriginalImportPathStyledIdentifier()
+                    ),
+              reference.parentPath && reference.parentPath.parentPath)
+            ) {
+              var styledCallPath = reference.parentPath.parentPath,
+                node = transformExpressionWithStyles({
+                  path: styledCallPath,
+                  state: state,
+                  babel: babel,
+                  shouldLabel: !1
+                }).node;
+              node && isWeb && (styledCallPath.node.arguments[0] = node);
+            }
+            isCall &&
+              (reference.addComment("leading", "#__PURE__"),
+              isWeb &&
+                (reference.parentPath.node.arguments[1] = getStyledOptions(
+                  t,
+                  reference.parentPath,
+                  state
+                )));
+          });
       }
@@ -583,2 +619,3 @@ Object.keys(references)
     importPath: "@emotion/styled-base",
+    originalImportPath: "@emotion/styled",
     isWeb: !0
@@ -588,2 +625,3 @@ }),
     importPath: "@emotion/native",
+    originalImportPath: "@emotion/native",
     isWeb: !1
@@ -593,2 +631,3 @@ }),
     importPath: "@emotion/primitives",
+    originalImportPath: "@emotion/primitives",
     isWeb: !1
@@ -595,0 +634,0 @@ }),

package.json

 {
   "name": "babel-plugin-emotion",
-  "version": "10.0.4",
+  "version": "10.0.5",
   "description": "A recommended babel preprocessing plugin for emotion, The Next Generation of CSS-in-JS.",
@@ -15,3 +15,3 @@ "main": "dist/babel-plugin-emotion.cjs.js",
     "@emotion/memoize": "0.7.1",
-    "@emotion/serialize": "^0.11.2",
+    "@emotion/serialize": "^0.11.3",
     "babel-plugin-macros": "^2.0.0",
@@ -18,0 +18,0 @@ "babel-plugin-syntax-jsx": "^6.18.0",

src/index.js

@@ -11,2 +11,3 @@ // @flow
   importPath: '@emotion/styled-base',
+  originalImportPath: '@emotion/styled',
   isWeb: true
@@ -16,2 +17,3 @@ })
   importPath: '@emotion/native',
+  originalImportPath: '@emotion/native',
   isWeb: false
@@ -21,2 +23,3 @@ })
   importPath: '@emotion/primitives',
+  originalImportPath: '@emotion/primitives',
   isWeb: false
@@ -23,0 +26,0 @@ })

src/styled-macro.js

@@ -8,5 +8,7 @@ // @flow
   importPath,
+  originalImportPath = importPath,
   isWeb
 }: {
   importPath: string,
+  originalImportPath?: string,
   isWeb: boolean
@@ -20,21 +22,58 @@ }) =>
     if (references.default && references.default.length) {
-      let styledIdentifier = addDefault(state.file.path, importPath, {
-        nameHint: 'styled'
-      })
+      let _styledIdentifier
+      let getStyledIdentifier = () => {
+        if (_styledIdentifier === undefined) {
+          _styledIdentifier = addDefault(state.file.path, importPath, {
+            nameHint: 'styled'
+          })
+        }
+        return t.cloneDeep(_styledIdentifier)
+      }
+      let originalImportPathStyledIdentifier
+      let getOriginalImportPathStyledIdentifier = () => {
+        if (originalImportPathStyledIdentifier === undefined) {
+          originalImportPathStyledIdentifier = addDefault(
+            state.file.path,
+            originalImportPath,
+            {
+              nameHint: 'styled'
+            }
+          )
+        }
+        return t.cloneDeep(originalImportPathStyledIdentifier)
+      }
+      if (importPath === originalImportPath) {
+        getOriginalImportPathStyledIdentifier = getStyledIdentifier
+      }
       references.default.forEach(reference => {
+        let isCall = false
         if (
           t.isMemberExpression(reference.parent) &&
-          reference.parent.computed === false &&
-          // checks if the first character is lowercase
-          // becasue we don't want to transform the member expression if
-          // it's in primitives/native
-          reference.parent.property.name.charCodeAt(0) > 96
+          reference.parent.computed === false
         ) {
-          reference.parentPath.replaceWith(
-            t.callExpression(t.cloneDeep(styledIdentifier), [
-              t.stringLiteral(reference.parent.property.name)
-            ])
-          )
+          isCall = true
+          if (
+            // checks if the first character is lowercase
+            // becasue we don't want to transform the member expression if
+            // it's in primitives/native
+            reference.parent.property.name.charCodeAt(0) > 96
+          ) {
+            reference.parentPath.replaceWith(
+              t.callExpression(getStyledIdentifier(), [
+                t.stringLiteral(reference.parent.property.name)
+              ])
+            )
+          } else {
+            reference.replaceWith(getStyledIdentifier())
+          }
+        } else if (
+          reference.parentPath &&
+          reference.parentPath.parentPath &&
+          t.isCallExpression(reference.parentPath) &&
+          reference.parent.callee === reference.node
+        ) {
+          isCall = true
+          reference.replaceWith(getStyledIdentifier())
         } else {
-          reference.replaceWith(t.cloneDeep(styledIdentifier))
+          reference.replaceWith(getOriginalImportPathStyledIdentifier())
         }
@@ -54,10 +93,12 @@ if (reference.parentPath && reference.parentPath.parentPath) {
         }
-        reference.addComment('leading', '#__PURE__')
 
-        if (t.isCallExpression(reference.parentPath)) {
-          reference.parentPath.node.arguments[1] = getStyledOptions(
-            t,
-            reference.parentPath,
-            state
-          )
+        if (isCall) {
+          reference.addComment('leading', '#__PURE__')
+          if (isWeb) {
+            reference.parentPath.node.arguments[1] = getStyledOptions(
+              t,
+              reference.parentPath,
+              state
+            )
+          }
         }
@@ -64,0 +105,0 @@ })

No alert changes

Improved metrics

Total package byte prevSize

98830

increased by4.98%

Lines of code

2556

increased by4.8%

Dependency changes

• + Added@babel/code-frame@7.24.6(transitive)

• + Added@babel/helper-module-imports@7.24.6(transitive)

• + Added@babel/helper-string-parser@7.24.6(transitive)

• + Added@babel/helper-validator-identifier@7.24.6(transitive)

• + Added@babel/highlight@7.24.6(transitive)

• + Added@babel/runtime@7.24.6(transitive)

• + Added@babel/types@7.24.6(transitive)

• + Addedansi-styles@3.2.1(transitive)

• + Addedchalk@2.4.2(transitive)

• + Addedcolor-convert@1.9.3(transitive)

• + Addedcolor-name@1.1.3(transitive)

• + Addedhas-flag@3.0.0(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedpicocolors@1.0.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedsupports-color@5.5.0(transitive)

• + Addedto-fast-properties@2.0.0(transitive)

• Updated@emotion/serialize@^0.11.3