Merge pull request #229 from styled-components/changes-revised

fix object syntax css prop, support more types of components & custom elements

Author: quantizor

src/visitors/transpileCssProp.js

@@ -4,6 +4,8 @@ import { addDefault } from '@babel/helper-module-imports'
 import { importLocalName } from '../utils/detectors'
 import { useCssProp } from '../utils/options'
 
+const TAG_NAME_REGEXP = /^[a-z][a-z\d]*(\-[a-z][a-z\d]*)?$/
+
 const getName = (node, t) => {
   if (typeof node.name === 'string') return node.name
   if (t.isJSXMemberExpression(node)) {
@@ -44,7 +46,7 @@ export default t => (path, state) => {
 
   let styled
 
-  if (/^[a-z]/.test(name)) {
+  if (TAG_NAME_REGEXP.test(name)) {
     styled = t.memberExpression(importName, t.identifier(name))
   } else {
     styled = t.callExpression(importName, [t.identifier(name)])
@@ -70,6 +72,8 @@ export default t => (path, state) => {
       path.node.value.expression.tag.name === 'css'
     ) {
       css = path.node.value.expression.quasi
+    } else if (t.isObjectExpression(path.node.value.expression)) {
+      css = path.node.value.expression
     } else {
       css = t.templateLiteral(
         [
@@ -90,34 +94,101 @@ export default t => (path, state) => {
     elem.parentPath.node.closingElement.name = t.jSXIdentifier(id.name)
   }
 
-  css.expressions = css.expressions.reduce((acc, ex) => {
-    if (
-      Object.keys(bindings).some(key =>
-        bindings[key].referencePaths.find(p => p.node === ex)
-      ) ||
-      t.isFunctionExpression(ex) ||
-      t.isArrowFunctionExpression(ex)
+  // object syntax
+  if (t.isObjectExpression(css)) {
+    /**
+     * for objects as CSS props, we have to recurse through the object and replace any
+     * object value scope references with generated props similar to how the template
+     * literal transform above creates dynamic interpolations
+     */
+    const p = t.identifier('p')
+    let replaceObjectWithPropFunction = false
+
+    css.properties = css.properties.reduce(function propertiesReducer(
+      acc,
+      property
     ) {
-      acc.push(ex)
-    } else {
-      const name = path.scope.generateUidIdentifier('css')
-      const p = t.identifier('p')
-
-      elem.node.attributes.push(
-        t.jSXAttribute(t.jSXIdentifier(name.name), t.jSXExpressionContainer(ex))
-      )
-
-      acc.push(t.arrowFunctionExpression([p], t.memberExpression(p, name)))
+      if (t.isObjectExpression(property.value)) {
+        // recurse for objects within objects (e.g. {'::before': { content: x }})
+        property.value.properties = property.value.properties.reduce(
+          propertiesReducer,
+          []
+        )
+
+        acc.push(property)
+      } else if (
+        // if a non-primitive value we have to interpolate it
+        [
+          t.isBigIntLiteral,
+          t.isBooleanLiteral,
+          t.isNullLiteral,
+          t.isNumericLiteral,
+          t.isStringLiteral,
+        ].every(x => !x(property.value))
+      ) {
+        replaceObjectWithPropFunction = true
+
+        const name = path.scope.generateUidIdentifier('css')
+
+        elem.node.attributes.push(
+          t.jSXAttribute(
+            t.jSXIdentifier(name.name),
+            t.jSXExpressionContainer(property.value)
+          )
+        )
+
+        acc.push(t.objectProperty(property.key, t.memberExpression(p, name)))
+      } else {
+        // some sort of primitive which is safe to pass through as-is
+        acc.push(property)
+      }
+
+      return acc
+    },
+    [])
+
+    if (replaceObjectWithPropFunction) {
+      css = t.arrowFunctionExpression([p], css)
     }
-
-    return acc
-  }, [])
+  } else {
+    // tagged template literal
+    css.expressions = css.expressions.reduce((acc, ex) => {
+      if (
+        Object.keys(bindings).some(key =>
+          bindings[key].referencePaths.find(p => p.node === ex)
+        ) ||
+        t.isFunctionExpression(ex) ||
+        t.isArrowFunctionExpression(ex)
+      ) {
+        acc.push(ex)
+      } else {
+        const name = path.scope.generateUidIdentifier('css')
+        const p = t.identifier('p')
+
+        elem.node.attributes.push(
+          t.jSXAttribute(
+            t.jSXIdentifier(name.name),
+            t.jSXExpressionContainer(ex)
+          )
+        )
+
+        acc.push(t.arrowFunctionExpression([p], t.memberExpression(p, name)))
+      }
+
+      return acc
+    }, [])
+  }
 
   // Add the tagged template expression and then requeue the newly added node
   // so Babel runs over it again
   const length = program.node.body.push(
     t.variableDeclaration('var', [
-      t.variableDeclarator(id, t.taggedTemplateExpression(styled, css)),
+      t.variableDeclarator(
+        id,
+        t.isObjectExpression(css) || t.isArrowFunctionExpression(css)
+          ? t.callExpression(styled, [css])
+          : t.taggedTemplateExpression(styled, css)
+      ),
     ])
   )
 

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

@@ -106,3 +106,30 @@ const CustomCompWithDot = p => <Button.Ghost css="flex: 1">H</Button.Ghost>
 const NestedCompWithDot = p => (
   <Button.Ghost.New css="flex: 1">H</Button.Ghost.New>
 )
+
+const CustomCompWithDotLowerCase = p => (
+  <button.ghost css="flex: 1">H</button.ghost>
+)
+
+const CustomElement = p => <button-ghost css="flex: 1">H</button-ghost>
+
+const globalVar = '"foo"'
+const getAfterValue = () => '"bar"'
+
+const ObjectPropMixedInputs = p => {
+  const color = 'red'
+
+  return (
+    <p
+      css={{
+        background: p.background,
+        color,
+        textAlign: 'left',
+        '::before': { content: globalVar },
+        '::after': { content: getAfterValue() },
+      }}
+    >
+      A
+    </p>
+  )
+}

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

@@ -31,9 +31,7 @@ var StaticTemplate = function StaticTemplate(p) {
 };
 
 var ObjectProp = function ObjectProp(p) {
-  return <_StyledP3 _css={{
-    color: 'blue'
-  }}>A</_StyledP3>;
+  return <_StyledP3>A</_StyledP3>;
 };
 
 var NoChildren = function NoChildren(p) {
@@ -55,11 +53,11 @@ var CustomComp = function CustomComp(p) {
 };
 
 var DynamicProp = function DynamicProp(p) {
-  return <_StyledP6 _css2={props.cssText}>H</_StyledP6>;
+  return <_StyledP6 _css={props.cssText}>H</_StyledP6>;
 };
 
 var LocalInterpolation = function LocalInterpolation(p) {
-  return <_StyledP7 _css3={props.bg}>
+  return <_StyledP7 _css2={props.bg}>
     H
   </_StyledP7>;
 };
@@ -79,7 +77,7 @@ var GlobalInterpolation = function GlobalInterpolation(p) {
 };
 
 var LocalCssHelperProp = function LocalCssHelperProp(p) {
-  return <_StyledP10 _css4={p.color}>
+  return <_StyledP10 _css3={p.color}>
     A
   </_StyledP10>;
 };
@@ -98,6 +96,27 @@ var NestedCompWithDot = function NestedCompWithDot(p) {
   return <_StyledButtonGhostNew>H</_StyledButtonGhostNew>;
 };
 
+var CustomCompWithDotLowerCase = function CustomCompWithDotLowerCase(p) {
+  return <_StyledButtonGhost2>H</_StyledButtonGhost2>;
+};
+
+var CustomElement = function CustomElement(p) {
+  return <_StyledButtonGhost3>H</_StyledButtonGhost3>;
+};
+
+var globalVar = '"foo"';
+
+var getAfterValue = function getAfterValue() {
+  return '"bar"';
+};
+
+var ObjectPropMixedInputs = function ObjectPropMixedInputs(p) {
+  var color = 'red';
+  return <_StyledP12 _css4={p.background} _css5={color} _css6={globalVar} _css7={getAfterValue()}>
+      A
+    </_StyledP12>;
+};
+
 var _StyledP = _styledComponents["default"].p.withConfig({
   displayName: "code___StyledP",
   componentId: "sc-7evkve-2"
@@ -111,8 +130,8 @@ var _StyledP2 = _styledComponents["default"].p.withConfig({
 var _StyledP3 = _styledComponents["default"].p.withConfig({
   displayName: "code___StyledP3",
   componentId: "sc-7evkve-4"
-})(["", ""], function (p) {
-  return p._css;
+})({
+  color: 'blue'
 });
 
 var _StyledP4 = _styledComponents["default"].p.withConfig({
@@ -134,14 +153,14 @@ var _StyledP6 = _styledComponents["default"].p.withConfig({
   displayName: "code___StyledP6",
   componentId: "sc-7evkve-8"
 })(["", ""], function (p) {
-  return p._css2;
+  return p._css;
 });
 
 var _StyledP7 = _styledComponents["default"].p.withConfig({
   displayName: "code___StyledP7",
   componentId: "sc-7evkve-9"
 })(["background:", ";"], function (p) {
-  return p._css3;
+  return p._css2;
 });
 
 var _StyledP8 = _styledComponents["default"].p.withConfig({
@@ -160,7 +179,7 @@ var _StyledP10 = _styledComponents["default"].p.withConfig({
   displayName: "code___StyledP10",
   componentId: "sc-7evkve-12"
 })(["color:", ";"], function (p) {
-  return p._css4;
+  return p._css3;
 });
 
 var _StyledP11 = _styledComponents["default"].p.withConfig({
@@ -179,3 +198,30 @@ var _StyledButtonGhostNew = (0, _styledComponents["default"])(Button.Ghost.New).
   displayName: "code___StyledButtonGhostNew",
   componentId: "sc-7evkve-15"
 })(["flex:1"]);
+
+var _StyledButtonGhost2 = (0, _styledComponents["default"])(button.ghost).withConfig({
+  displayName: "code___StyledButtonGhost2",
+  componentId: "sc-7evkve-16"
+})(["flex:1"]);
+
+var _StyledButtonGhost3 = _styledComponents["default"]["button-ghost"].withConfig({
+  displayName: "code___StyledButtonGhost3",
+  componentId: "sc-7evkve-17"
+})(["flex:1"]);
+
+var _StyledP12 = _styledComponents["default"].p.withConfig({
+  displayName: "code___StyledP12",
+  componentId: "sc-7evkve-18"
+})(function (p) {
+  return {
+    background: p._css4,
+    color: p._css5,
+    textAlign: 'left',
+    '::before': {
+      content: p._css6
+    },
+    '::after': {
+      content: p._css7
+    }
+  };
+});

test/fixtures/transpile-css-prop/code.js

@@ -92,3 +92,9 @@ const CustomCompWithDot = p => <Button.Ghost css="flex: 1">H</Button.Ghost>
 const NestedCompWithDot = p => (
   <Button.Ghost.New css="flex: 1">H</Button.Ghost.New>
 )
+
+const CustomCompWithDotLowerCase = p => (
+  <button.ghost css="flex: 1">H</button.ghost>
+)
+
+const CustomElement = p => <button-ghost css="flex: 1">H</button-ghost>