fix css prop transpilation for stable server-side rendering (#225)

* run the css prop transpiler before other transforms

* fix css prop in ssr mode

Author: quantizor

src/index.js

@@ -10,8 +10,15 @@ export default function({ types: t }) {
   return {
     inherits: syntax,
     visitor: {
-      JSXAttribute(path, state) {
-        transpileCssProp(t)(path, state)
+      Program(path, state) {
+        path.traverse(
+          {
+            JSXAttribute(path, state) {
+              transpileCssProp(t)(path, state)
+            },
+          },
+          state
+        )
       },
       CallExpression(path, state) {
         displayNameAndId(t)(path, state)

src/utils/detectors.js

@@ -10,10 +10,10 @@ export const isValidTopLevelImport = x =>
 
 const localNameCache = {}
 
-const importLocalName = (name, state) => {
+export const importLocalName = (name, state, bypassCache = false) => {
   const cacheKey = name + state.file.opts.filename
 
-  if (localNameCache[cacheKey]) {
+  if (!bypassCache && localNameCache[cacheKey]) {
     return localNameCache[cacheKey]
   }
 
@@ -45,7 +45,9 @@ const importLocalName = (name, state) => {
       },
     },
   })
+
   localNameCache[cacheKey] = localName
+
   return localName
 }
 

src/visitors/transpileCssProp.js

@@ -1,6 +1,7 @@
 // Most of this code was taken from @satya164's babel-plugin-css-prop
 // @see https://github.com/satya164/babel-plugin-css-prop
 import { addDefault } from '@babel/helper-module-imports'
+import { importLocalName } from '../utils/detectors'
 import { useCssProp } from '../utils/options'
 
 const getName = (node, t) => {
@@ -9,9 +10,7 @@ const getName = (node, t) => {
     return `${getName(node.object, t)}.${node.property.name}`
   }
   throw path.buildCodeFrameError(
-    `Cannot infer name from node with type "${
-      node.type
-    }". Please submit an issue at github.com/styled-components/babel-plugin-styled-components with your code so we can take a look at your use case!`
+    `Cannot infer name from node with type "${node.type}". Please submit an issue at github.com/styled-components/babel-plugin-styled-components with your code so we can take a look at your use case!`
   )
 }
 
@@ -20,27 +19,36 @@ export default t => (path, state) => {
   if (path.node.name.name !== 'css') return
 
   const program = state.file.path
+
   // state.customImportName is passed through from styled-components/macro if it's used
   // since the macro also inserts the import
-  let importName = state.customImportName
-  // Insert import if it doesn't exist yet
+  let importName =
+    state.customImportName || t.identifier(importLocalName('default', state))
+
   const { bindings } = program.scope
-  if (!importName || !bindings[importName.name]) {
-    importName = addDefault(path, 'styled-components', {
-      nameHint: importName ? importName.name : 'styled',
+
+  // Insert import if it doesn't exist yet
+  if (!bindings[importName.name]) {
+    addDefault(path, 'styled-components', {
+      nameHint: 'styled',
     })
+
+    importName = t.identifier(importLocalName('default', state, true))
   }
-  if (!state.customImportName) state.customImportName = importName
 
   const elem = path.parentPath
   const name = getName(elem.node.name, t)
   const id = path.scope.generateUidIdentifier(
     'Styled' + name.replace(/^([a-z])/, (match, p1) => p1.toUpperCase())
   )
 
-  const styled = t.callExpression(importName, [
-    /^[a-z]/.test(name) ? t.stringLiteral(name) : t.identifier(name),
-  ])
+  let styled
+
+  if (/^[a-z]/.test(name)) {
+    styled = t.memberExpression(importName, t.identifier(name))
+  } else {
+    styled = t.callExpression(importName, [t.identifier(name)])
+  }
 
   let css
 

test/fixtures/transpile-css-prop-add-import/output.js

@@ -1,17 +1,5 @@
 "use strict";
 
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n      width: 35em;\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -27,7 +15,18 @@ var _config = _interopRequireDefault(require("../../../config"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-// @flow
+function _templateObject() {
+  var data = _taggedTemplateLiteral(["\n      width: 35em;\n    "]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 var _default = function _default() {
   return <_StyledDiv>
     <_Card.default>
@@ -43,4 +42,4 @@ var _default = function _default() {
 
 exports["default"] = _default;
 
-var _StyledDiv = (0, _styledComponents["default"])("div")(_templateObject());
+var _StyledDiv = _styledComponents["default"].div(_templateObject());

test/fixtures/transpile-css-prop-add-require/.babelrc

@@ -1,6 +1,6 @@
 {
+  "presets": [["@babel/preset-env", { "modules": "commonjs" }]],
   "plugins": [
-    "transform-es2015-modules-commonjs",
     [
       "../../../src",
       {
@@ -12,4 +12,4 @@
       }
     ]
   ]
-}
+}

test/fixtures/transpile-css-prop-add-require/output.js

@@ -3,20 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports["default"] = void 0;
 
-var _styledComponents = require("styled-components");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
+var _react = _interopRequireDefault(require("react"));
 
-var _react = require("react");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _react2 = _interopRequireDefault(_react);
+function _templateObject() {
+  var data = _taggedTemplateLiteral(["\n      width: 35em;\n    "]);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+  _templateObject = function _templateObject() {
+    return data;
+  };
 
-// @flow
-exports.default = () => <_StyledDiv />;
+  return data;
+}
 
-var _StyledDiv = (0, _styledComponents2.default)("div")`
-      width: 35em;
-    `;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var _default = function _default() {
+  return <_StyledDiv />;
+};
+
+exports["default"] = _default;
+
+var _StyledDiv = _styledComponents["default"].div(_templateObject());

test/fixtures/transpile-css-prop-all-options-on/.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": ["@babel/preset-env"],
+  "plugins": [
+    [
+      "../../../src",
+      {
+        "ssr": true,
+        "displayName": true,
+        "transpileTemplateLiterals": true,
+        "minify": true,
+        "cssProp": true
+      }
+    ]
+  ]
+}

test/fixtures/transpile-css-prop-all-options-on/code.js

@@ -0,0 +1,108 @@
+import styled from 'styled-components'
+
+/**
+ * control
+ */
+
+const Thing = styled.div`
+  color: red;
+`
+
+const Thing2 = styled(Thing)`
+  background: blue;
+`
+
+/*
+ * Basic fixtures
+ */
+
+const StaticString = p => <p css="flex: 1;">A</p>
+
+const StaticTemplate = p => (
+  <p
+    css={`
+      flex: 1;
+    `}
+  >
+    A
+  </p>
+)
+
+const ObjectProp = p => <p css={{ color: 'blue' }}>A</p>
+
+const NoChildren = p => <p css="flex: 1;" />
+
+const CssHelperProp = p => (
+  <p
+    css={css`
+      color: blue;
+    `}
+  >
+    A
+  </p>
+)
+
+/*
+ * Dynamic prop
+ */
+
+const CustomComp = p => <Paragraph css="flex: 1">H</Paragraph>
+
+const DynamicProp = p => <p css={props.cssText}>H</p>
+
+const LocalInterpolation = p => (
+  <p
+    css={`
+      background: ${props.bg};
+    `}
+  >
+    H
+  </p>
+)
+
+const FuncInterpolation = p => (
+  <p
+    css={`
+      color: ${props => props.theme.a};
+    `}
+  >
+    H
+  </p>
+)
+
+const radius = 10
+const GlobalInterpolation = p => (
+  <p
+    css={`
+      border-radius: ${radius}px;
+    `}
+  >
+    H
+  </p>
+)
+
+const LocalCssHelperProp = p => (
+  <p
+    css={css`
+      color: ${p.color};
+    `}
+  >
+    A
+  </p>
+)
+
+const DynamicCssHelperProp = p => (
+  <p
+    css={css`
+      color: ${props => props.theme.color};
+    `}
+  >
+    A
+  </p>
+)
+
+const CustomCompWithDot = p => <Button.Ghost css="flex: 1">H</Button.Ghost>
+
+const NestedCompWithDot = p => (
+  <Button.Ghost.New css="flex: 1">H</Button.Ghost.New>
+)