babel-plugin-emotion-rename - npm Package Compare versions

Comparing version 1.0.0-beta.1 to 1.0.0-beta.2

lib/babel.spec.js

@@ -24,9 +24,59 @@ "use strict";
   _assertSimpleTap["default"].equal(transformedCode.trim(), expectedCode.trim(), message);
-};
+}; // testGeneration(
+//   "replace basic imports",
+//   `
+// import styled, { css } from "react-emotion";
+// `,
+//   `
+// import styled from "@emotion/styled";
+// import { css } from "@emotion/css";
+// `
+// );
+// testGeneration(
+//   "replace complex multiple imports",
+//   `
+// import styled, { css, keyframes } from "react-emotion";
+// `,
+//   `
+// import styled from "@emotion/styled";
+// import { css, keyframes } from "@emotion/css";
+// `
+// );
+// testGeneration(
+//   "replace only one styled from react-emotion",
+//   `
+// import styled from "react-emotion";
+// `,
+//   `
+// import styled from "@emotion/styled";
+// `
+// );
+// testGeneration(
+//   "replace only one styled from emotion",
+//   `
+// import styled from "react-emotion";
+// `,
+//   `
+// import styled from "@emotion/styled";
+// `
+// );
+// testGeneration(
+//   "replace only one styled from emotion - cjs",
+//   `
+// const styled = require("react-emotion");
+// `,
+//   `
+// const styled = require("@emotion/styled");
+// `
+// );
 
-testGeneration("replace basic imports", "\nimport styled, { css } from \"react-emotion\";\n", "\nimport styled from \"@emotion/styled\";\nimport { css } from \"@emotion/css\";\n");
-testGeneration("replace complex multiple imports", "\nimport styled, { css, keyframes } from \"react-emotion\";\n", "\nimport styled from \"@emotion/styled\";\nimport { css, keyframes } from \"@emotion/css\";\n");
-testGeneration("replace only one styled from react-emotion", "\nimport styled from \"react-emotion\";\n", "\nimport styled from \"@emotion/styled\";\n");
-testGeneration("replace only one styled from emotion", "\nimport styled from \"react-emotion\";\n", "\nimport styled from \"@emotion/styled\";\n");
-testGeneration("replace only one styled from emotion - cjs", "\nconst styled = require(\"react-emotion\");\n", "\nconst styled = require(\"@emotion/styled\");\n");
-testGeneration("dont replace require without binding", "\n  var _emotion = _interopRequireWildcard(require(\"emotion\"));\n  ", "\n  var _emotion = _interopRequireWildcard(require(\"emotion\"));\n");
+
+testGeneration("replace css import to emotion/react if used on styled - case1", "\nimport styled, { css } from \"react-emotion\";\n\nconst normalCss = css`\n  color: #fff; \n`;\nconst abnormalCss = css`\n  color: #000; \n`;\nconst Cmp = styled.div`\n  ${abnormalCss}\n  color: 'pink';\n`;\n", "\nimport { css as css2 } from '@emotion/react';\nimport styled from \"@emotion/styled\";\nimport { css } from \"@emotion/css\";\nconst normalCss = css`\n  color: #fff; \n`;\nconst abnormalCss = css2`\n  color: #000; \n`;\nconst Cmp = styled.div`\n  ${abnormalCss}\n  color: 'pink';\n`;\n"); // testGeneration(
+//   "dont replace require without binding",
+//   `
+//   var _emotion = _interopRequireWildcard(require("emotion"));
+//   `,
+//   `
+//   var _emotion = _interopRequireWildcard(require("emotion"));
+// `
+// );

lib/index.js

@@ -37,2 +37,3 @@ "use strict";
 var buildImport = (0, _template["default"])("\n  import styled from '@emotion/styled';\n");
+var buildImportEmotionReact = (0, _template["default"])("\n  import { css as css2 } from '@emotion/react';\n");
 var REP = [{
@@ -55,8 +56,73 @@ replacement: "@emotion/css",
   var imported = false;
+  var listTags = [];
+  var MAP_STYLED = {};
+  var emotionReactImported = false;
   var importDeclaration = buildImport();
+  var emotionReactImportDeclaration = buildImportEmotionReact();
   return {
     visitor: {
-      Program: function Program(path) {
-        root = path;
+      Program: {
+        enter: function enter(path) {
+          root = path;
+        },
+        exit: function exit(path) {
+          /**
+           * Only rename all css which are embedded to styled component
+           * This will swap the css import from emotion/css to emotion/react
+           */
+          var res = listTags.filter(function (t) {
+            return MAP_STYLED[t.name];
+          });
+          res.forEach(function (t) {
+            t.path.node.declarations[0].init.tag.name = "css2";
+          });
+
+          if (!emotionReactImported && res.length) {
+            root.unshiftContainer("body", emotionReactImportDeclaration);
+            emotionReactImported = true;
+          }
+        }
       },
+      VariableDeclaration: function VariableDeclaration(path) {
+        // if (path.node.declarations[0].id.name === "abnormalCss") {
+        //   console.log("vd1", path.node.declarations[0].id.name);
+        //   console.log("vd2", path.node.declarations[0].init.tag.name);
+        //   console.log("vd3", path.node.declarations[0]);
+        // }
+        if (!path.node.declarations.length || !path.node.declarations[0].id || !path.node.declarations[0].init.tag) {
+          return;
+        }
+
+        var varName = path.node.declarations[0].id.name;
+        var tagName = path.node.declarations[0].init.tag.name;
+
+        if (tagName === "css" && path.scope.bindings.styled) {
+          /**
+           * Looks for every variables that call emotion css usage.
+           * Need to list all of them for now, since
+           * it cannot check the template literal reference from this callback,
+           * it needs Identifier callback for that
+           */
+          listTags.push({
+            name: varName,
+            path: path
+          });
+          console.log("emotion/css!!!", varName);
+        }
+      },
+      Identifier: function Identifier(path, parent) {
+        var type = path.parent.type;
+        var nodeName = path.node.name; // console.log(type, nodeName);
+
+        /**
+         * Look for template literal on styled with css embed
+         */
+
+        if (["TemplateLiteral"].indexOf(type) !== -1) {
+          if (path.scope.bindings.styled) {
+            console.log("foundOnTemplateLiteral!!!", nodeName);
+            MAP_STYLED[nodeName] = true;
+          }
+        }
+      },
       ImportDeclaration: function ImportDeclaration(path, state) {
@@ -63,0 +129,0 @@ var _getStyled = getStyled(path),

package.json

 {
   "name": "babel-plugin-emotion-rename",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "Babel plugin to rename old Emotion 9 import to new Emotion 10+ import",
@@ -5,0 +5,0 @@ "main": "lib/index",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12263

increased by36.23%

Lines of code

232

increased by93.33%

No dependency changes