Merge pull request #340 from styled-components/315-namespace-import-support

quantizor · web-flow · commit 03a58d561fd6 · 2021-07-06T11:48:07.000-04:00
handle namespace import helpers
diff --git a/src/utils/detectors.js b/src/utils/detectors.js
@@ -15,9 +15,9 @@ export const isValidTopLevelImport = (x, state) =>
 const localNameCache = {}
 
 export const importLocalName = (name, state, options = {}) => {
-  const { cacheIdentifier, bypassCache = false } = options;
-  const cacheKeyAffix = cacheIdentifier ? `|${cacheIdentifier}` : '';
-  const cacheKey = name + state.file.opts.filename + cacheKeyAffix;
+  const { cacheIdentifier, bypassCache = false } = options
+  const cacheKeyAffix = cacheIdentifier ? `|${cacheIdentifier}` : ''
+  const cacheKey = name + state.file.opts.filename + cacheKeyAffix
 
   if (!bypassCache && cacheKey in localNameCache) {
     return localNameCache[cacheKey]
@@ -36,10 +36,13 @@ export const importLocalName = (name, state, options = {}) => {
 
         if (isValidTopLevelImport(node.source.value, state)) {
           for (const specifier of path.get('specifiers')) {
-            if (specifier.isImportSpecifier() && specifier.node.imported.name === 'styled') {
+            if (
+              specifier.isImportSpecifier() &&
+              specifier.node.imported.name === 'styled'
+            ) {
               localName = 'styled'
             }
-            
+
             if (specifier.isImportDefaultSpecifier()) {
               localName = specifier.node.local.name
             }
@@ -52,7 +55,7 @@ export const importLocalName = (name, state, options = {}) => {
             }
 
             if (specifier.isImportNamespaceSpecifier()) {
-              localName = specifier.node.local.name
+              localName = name === 'default' ? specifier.node.local.name : name
             }
           }
         }
@@ -76,9 +79,16 @@ export const isStyled = t => (tag, state) => {
   } else {
     return (
       (t.isMemberExpression(tag) &&
-        tag.object.name === importLocalName('default', state, { cacheIdentifier: tag.object.name })) ||
+        tag.object.name ===
+          importLocalName('default', state, {
+            cacheIdentifier: tag.object.name,
+          }) &&
+        !isHelper(t)(tag.property, state)) ||
       (t.isCallExpression(tag) &&
-        tag.callee.name === importLocalName('default', state, { cacheIdentifier: tag.callee.name })) ||
+        tag.callee.name ===
+          importLocalName('default', state, {
+            cacheIdentifier: tag.callee.name,
+          })) ||
       /**
        * #93 Support require()
        * styled-components might be imported using a require()
@@ -95,7 +105,17 @@ export const isStyled = t => (tag, state) => {
         t.isCallExpression(tag) &&
         t.isMemberExpression(tag.callee) &&
         tag.callee.property.name === 'default' &&
-        tag.callee.object.name === state.styledRequired)
+        tag.callee.object.name === state.styledRequired) ||
+      (importLocalName('default', state) &&
+        t.isMemberExpression(tag) &&
+        t.isMemberExpression(tag.object) &&
+        tag.object.property.name === 'default' &&
+        tag.object.object.name === importLocalName('default', state)) ||
+      (importLocalName('default', state) &&
+        t.isCallExpression(tag) &&
+        t.isMemberExpression(tag.callee) &&
+        tag.object.property.name === 'default' &&
+        tag.object.object.name === importLocalName('default', state))
     )
   }
 }
@@ -116,13 +136,20 @@ export const isKeyframesHelper = t => (tag, state) =>
 export const isWithThemeHelper = t => (tag, state) =>
   t.isIdentifier(tag) && tag.name === importLocalName('withTheme', state)
 
+export const isUseTheme = t => (tag, state) =>
+  t.isIdentifier(tag) && tag.name === importLocalName('useTheme', state)
+
 export const isHelper = t => (tag, state) =>
+  isCreateGlobalStyleHelper(t)(tag, state) ||
   isCSSHelper(t)(tag, state) ||
+  isInjectGlobalHelper(t)(tag, state) ||
+  isUseTheme(t)(tag, state) ||
   isKeyframesHelper(t)(tag, state) ||
   isWithThemeHelper(t)(tag, state)
 
 export const isPureHelper = t => (tag, state) =>
+  isCreateGlobalStyleHelper(t)(tag, state) ||
   isCSSHelper(t)(tag, state) ||
   isKeyframesHelper(t)(tag, state) ||
-  isCreateGlobalStyleHelper(t)(tag, state) ||
+  isUseTheme(t)(tag, state) ||
   isWithThemeHelper(t)(tag, state)
diff --git a/src/visitors/displayNameAndId.js b/src/visitors/displayNameAndId.js
@@ -9,7 +9,11 @@ import {
 import getName from '../utils/getName'
 import prefixLeadingDigit from '../utils/prefixDigit'
 import hash from '../utils/hash'
-import { isStyled } from '../utils/detectors'
+import {
+  isCreateGlobalStyleHelper,
+  isCSSHelper,
+  isStyled,
+} from '../utils/detectors'
 
 const addConfig = t => (path, displayName, componentId) => {
   if (!displayName && !componentId) {
@@ -211,8 +215,8 @@ export default t => (path, state) => {
           t.isMemberExpression(path.node.callee.callee) &&
           path.node.callee.callee.property &&
           path.node.callee.callee.property.name &&
-          path.node.callee.callee.property.name == 'withConfig' &&
-          !path.node.callee.arguments[0].properties.some((prop) =>
+          path.node.callee.callee.property.name === 'withConfig' &&
+          !path.node.callee.arguments[0].properties.some(prop =>
             ['displayName', 'componentId'].includes(prop.key.name)
           ))
   ) {
diff --git a/test/fixtures/annotate-create-global-style-with-pure-comments/output.js b/test/fixtures/annotate-create-global-style-with-pure-comments/output.js
@@ -1,6 +1,2 @@
 import { createGlobalStyle } from 'styled-components';
-const GlobalStyle = /*#__PURE__*/createGlobalStyle`
-  body {
-    color: red;
-  }
-`;
+const GlobalStyle = /*#__PURE__*/createGlobalStyle(["body{color:red;}"]);
diff --git a/test/fixtures/minify-css-in-helpers/code.js b/test/fixtures/minify-css-in-helpers/code.js
@@ -1,11 +1,17 @@
-import { css, keyframes } from 'styled-components';
+import { createGlobalStyle, css, keyframes } from 'styled-components'
 
 const key = keyframes`
   to {
     transform: rotate(360deg);
   }
-`;
+`
 
 const color = css`
   color: ${theColor};
-`;
+`
+
+const GlobalStyles = createGlobalStyle`
+  html {
+    color: red;
+  }
+`
diff --git a/test/fixtures/minify-css-in-helpers/output.js b/test/fixtures/minify-css-in-helpers/output.js
@@ -1,3 +1,4 @@
-import { css, keyframes } from 'styled-components';
+import { createGlobalStyle, css, keyframes } from 'styled-components';
 const key = keyframes`to{transform:rotate(360deg);}`;
 const color = css`color:${theColor};`;
+const GlobalStyles = createGlobalStyle`html{color:red;}`;
diff --git a/test/fixtures/transpile-template-literals-with-config/.babelrc b/test/fixtures/transpile-template-literals-with-config/.babelrc
@@ -1,7 +1,5 @@
 {
-  "presets": [
-    "@babel/preset-env"
-  ],
+  "presets": ["@babel/preset-env"],
   "plugins": [
     [
       "../../../src",
@@ -13,4 +11,4 @@
       }
     ]
   ]
-}
+}
diff --git a/test/fixtures/transpile-template-literals-with-config/code.js b/test/fixtures/transpile-template-literals-with-config/code.js
@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled, { css, createGlobalStyle } from 'styled-components'
 
 const Named = styled.div`
   width: 100%;
@@ -15,3 +15,13 @@ const Wrapped = styled(Inner)`
 const Foo = styled.div({
   color: 'green',
 })
+
+const style = css`
+  background: green;
+`
+
+const GlobalStyle = createGlobalStyle`
+  html {
+    background: silver;
+  }
+`
diff --git a/test/fixtures/transpile-template-literals-with-config/output.js b/test/fixtures/transpile-template-literals-with-config/output.js
@@ -1,8 +1,12 @@
 "use strict";
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var Named = _styledComponents["default"].div.withConfig({
   displayName: "code__Named"
@@ -23,3 +27,6 @@ var Foo = _styledComponents["default"].div.withConfig({
 })({
   color: 'green'
 });
+
+var style = (0, _styledComponents.css)(["\n  background: green;\n"]);
+var GlobalStyle = (0, _styledComponents.createGlobalStyle)(["\n  html {\n    background: silver;\n  }\n"]);
diff --git a/test/fixtures/use-namespace/.babelrc b/test/fixtures/use-namespace/.babelrc
@@ -7,4 +7,4 @@
       }
     ]
   ]
-}
+}
diff --git a/test/fixtures/use-namespace/code.js b/test/fixtures/use-namespace/code.js
@@ -1,13 +1,23 @@
-import styled from 'styled-components'
+import * as styled from 'styled-components'
 
-const Test = styled.div`
+const css = styled.css`
+  background: black;
+`
+
+const GlobalStyle = styled.createGlobalStyle`
+  html {
+    background: black;
+  }
+`
+
+const Test = styled.default.div`
   color: red;
 `
 
-const before = styled.div`
+const before = styled.default.div`
   color: blue;
 `
 
-styled.div``
+styled.default.div``
 
-export default styled.button``
+export default styled.default.button``
diff --git a/test/fixtures/use-namespace/output.js b/test/fixtures/use-namespace/output.js
@@ -1,17 +1,25 @@
-import styled from 'styled-components';
-const Test = styled.div.withConfig({
+import * as styled from 'styled-components';
+const css = styled.css`
+  background: black;
+`;
+const GlobalStyle = styled.createGlobalStyle`
+  html {
+    background: black;
+  }
+`;
+const Test = styled.default.div.withConfig({
   displayName: "code__Test",
   componentId: "test-namespace__sc-3rfj0a-0"
 })(["color:red;"]);
-const before = styled.div.withConfig({
+const before = styled.default.div.withConfig({
   displayName: "code__before",
   componentId: "test-namespace__sc-3rfj0a-1"
 })(["color:blue;"]);
-styled.div.withConfig({
+styled.default.div.withConfig({
   displayName: "code",
   componentId: "test-namespace__sc-3rfj0a-2"
 })([""]);
-export default styled.button.withConfig({
+export default styled.default.button.withConfig({
   displayName: "code",
   componentId: "test-namespace__sc-3rfj0a-3"
 })([""]);

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,5 @@`
`1`	`1`	`{`
`2`		`- "presets": [`
`3`		`- "@babel/preset-env"`
`4`		`- ],`
	`2`	`+ "presets": ["@babel/preset-env"],`
`5`	`3`	`"plugins": [`
`6`	`4`	`[`
`7`	`5`	`"../../../src",`
`@@ -13,4 +11,4 @@`
`13`	`11`	`}`
`14`	`12`	`]`
`15`	`13`	`]`
`16`		`-}`
	`14`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -7,4 +7,4 @@`
`7`	`7`	`}`
`8`	`8`	`]`
`9`	`9`	`]`
`10`		`-}`
	`10`	`+}`