Fixed dynamic styles detection (#397)

vercel · Jan 31, 2018 · 9b6635c · 9b6635c
1 parent b6c5832
commit 9b6635c
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 25 deletions.
diff --git a/src/_utils.js b/src/_utils.js
@@ -129,11 +129,13 @@ export const validateExpressionVisitor = {
     }
   },
   Identifier(path, scope) {
-    if (t.isMemberExpression(path.parentPath)) {
+    const { name } = path.node
+
+    if (t.isMemberExpression(path.parentPath) && scope.hasOwnBinding(name)) {
       return
     }
-    const { name } = path.node
-    if (scope.hasOwnBinding(name)) {
+
+    if (scope.hasOwnBinding(name) || path.scope.hasOwnBinding(name)) {
       throw path.buildCodeFrameError(
         `Expected \`${name}\` ` +
           `to not come from the closest scope.\n` +

diff --git a/test/__snapshots__/attribute.js.snap b/test/__snapshots__/attribute.js.snap
@@ -53,6 +53,36 @@ export const Test6 = ({ color }) => <div className={'jsx-3190985107 ' + _JSXStyl
 export const Test7 = ({ color }) => <div className={_JSXStyle.dynamic([['1947484460', [color]]])}>
     <p className={_JSXStyle.dynamic([['1947484460', [color]]])}>dynamic only</p>
     <_JSXStyle styleId={\\"1947484460\\"} css={\`p.__jsx-style-dynamic-selector{color:\${color};}\`} dynamic={[color]} />
+  </div>;
+
+// dynamic with scoped compound variable
+export const Test8 = ({ color }) => {
+  if (color) {
+    const innerProps = { color };
+
+    return <div className={_JSXStyle.dynamic([['1791723528', [innerProps.color]]])}>
+        <p className={_JSXStyle.dynamic([['1791723528', [innerProps.color]]])}>dynamic with scoped compound variable</p>
+        <_JSXStyle styleId={\\"1791723528\\"} css={\`p.__jsx-style-dynamic-selector{color:\${innerProps.color};}\`} dynamic={[innerProps.color]} />
+      </div>;
+  }
+};
+
+// dynamic with compound variable
+export const Test9 = ({ color }) => {
+  const innerProps = { color };
+
+  return <div className={_JSXStyle.dynamic([['248922593', [innerProps.color]]])}>
+      <p className={_JSXStyle.dynamic([['248922593', [innerProps.color]]])}>dynamic with compound variable</p>
+      <_JSXStyle styleId={\\"248922593\\"} css={\`p.__jsx-style-dynamic-selector{color:\${innerProps.color};}\`} dynamic={[innerProps.color]} />
+    </div>;
+};
+
+const foo = 'red';
+
+// dynamic with constant variable
+export const Test10 = () => <div className={\\"jsx-461505126\\"}>
+    <p className={\\"jsx-461505126\\"}>dynamic with constant variable</p>
+    <_JSXStyle styleId={\\"461505126\\"} css={\`p.jsx-461505126{color:\${foo};}\`} />
   </div>;"
 `;
 

diff --git a/test/fixtures/attribute-generation-modes.js b/test/fixtures/attribute-generation-modes.js
@@ -3,47 +3,42 @@ import styles from './styles'
 const styles2 = require('./styles2')
 
 // external only
-export const Test1 = () =>
+export const Test1 = () => (
   <div>
     <p>external only</p>
-    <style jsx>
-      {styles}
-    </style>
-    <style jsx>
-      {styles2}
-    </style>
+    <style jsx>{styles}</style>
+    <style jsx>{styles2}</style>
   </div>
+)
 
 // external and static
-export const Test2 = () =>
+export const Test2 = () => (
   <div>
     <p>external and static</p>
     <style jsx>{`
       p {
         color: red;
       }
     `}</style>
-    <style jsx>
-      {styles}
-    </style>
+    <style jsx>{styles}</style>
   </div>
+)
 
 // external and dynamic
-export const Test3 = ({ color }) =>
+export const Test3 = ({ color }) => (
   <div>
     <p>external and dynamic</p>
     <style jsx>{`
       p {
         color: ${color};
       }
     `}</style>
-    <style jsx>
-      {styles}
-    </style>
+    <style jsx>{styles}</style>
   </div>
+)
 
 // external, static and dynamic
-export const Test4 = ({ color }) =>
+export const Test4 = ({ color }) => (
   <div>
     <p>external, static and dynamic</p>
     <style jsx>{`
@@ -56,13 +51,12 @@ export const Test4 = ({ color }) =>
         color: ${color};
       }
     `}</style>
-    <style jsx>
-      {styles}
-    </style>
+    <style jsx>{styles}</style>
   </div>
+)
 
 // static only
-export const Test5 = () =>
+export const Test5 = () => (
   <div>
     <p>static only</p>
     <style jsx>{`
@@ -76,9 +70,10 @@ export const Test5 = () =>
       }
     `}</style>
   </div>
+)
 
 // static and dynamic
-export const Test6 = ({ color }) =>
+export const Test6 = ({ color }) => (
   <div>
     <p>static and dynamic</p>
     <style jsx>{`
@@ -92,9 +87,10 @@ export const Test6 = ({ color }) =>
       }
     `}</style>
   </div>
+)
 
 // dynamic only
-export const Test7 = ({ color }) =>
+export const Test7 = ({ color }) => (
   <div>
     <p>dynamic only</p>
     <style jsx>{`
@@ -103,3 +99,52 @@ export const Test7 = ({ color }) =>
       }
     `}</style>
   </div>
+)
+
+// dynamic with scoped compound variable
+export const Test8 = ({ color }) => {
+  if (color) {
+    const innerProps = { color }
+
+    return (
+      <div>
+        <p>dynamic with scoped compound variable</p>
+        <style jsx>{`
+          p {
+            color: ${innerProps.color};
+          }
+        `}</style>
+      </div>
+    )
+  }
+}
+
+// dynamic with compound variable
+export const Test9 = ({ color }) => {
+  const innerProps = { color }
+
+  return (
+    <div>
+      <p>dynamic with compound variable</p>
+      <style jsx>{`
+        p {
+          color: ${innerProps.color};
+        }
+      `}</style>
+    </div>
+  )
+}
+
+const foo = 'red'
+
+// dynamic with constant variable
+export const Test10 = () => (
+  <div>
+    <p>dynamic with constant variable</p>
+    <style jsx>{`
+      p {
+        color: ${foo};
+      }
+    `}</style>
+  </div>
+)