leverage generated uid from addDefault

src/_utils.js

@@ -10,7 +10,6 @@ import {
   STYLE_ATTRIBUTE,
   GLOBAL_ATTRIBUTE,
   STYLE_COMPONENT_ID,
-  STYLE_COMPONENT,
   STYLE_COMPONENT_DYNAMIC
 } from './_constants'
 
@@ -258,7 +257,11 @@ export const getJSXStyleInfo = (expr, scope) => {
   }
 }
 
-export const computeClassNames = (styles, externalJsxId, styleComponent) => {
+export const computeClassNames = (
+  styles,
+  externalJsxId,
+  styleComponentImportName
+) => {
   if (styles.length === 0) {
     return {
       className: externalJsxId
@@ -297,7 +300,10 @@ export const computeClassNames = (styles, externalJsxId, styleComponent) => {
   // _JSXStyle.dynamic([ ['1234', [props.foo, bar, fn(props)]], ... ])
   const dynamic = t.callExpression(
     // Callee: _JSXStyle.dynamic
-    t.memberExpression(t.identifier(styleComponent), t.identifier('dynamic')),
+    t.memberExpression(
+      t.identifier(styleComponentImportName),
+      t.identifier(STYLE_COMPONENT_DYNAMIC)
+    ),
     // Arguments
     [
       t.arrayExpression(
@@ -384,7 +390,7 @@ export const makeStyledJsxTag = (
   id,
   transformedCss,
   expressions = [],
-  styleComponent
+  styleComponentImportName
 ) => {
   const css = cssToBabelType(transformedCss)
 
@@ -407,8 +413,8 @@ export const makeStyledJsxTag = (
   }
 
   return t.jSXElement(
-    t.jSXOpeningElement(t.jSXIdentifier(styleComponent), attributes),
-    t.jSXClosingElement(t.jSXIdentifier(styleComponent)),
+    t.jSXOpeningElement(t.jSXIdentifier(styleComponentImportName), attributes),
+    t.jSXClosingElement(t.jSXIdentifier(styleComponentImportName)),
     [t.jSXExpressionContainer(css)]
   )
 }
@@ -627,12 +633,10 @@ export const booleanOption = opts => {
 }
 
 export const createReactComponentImportDeclaration = state => {
-  addDefault(
+  return addDefault(
     state.file.path,
-    typeof state.opts.styleModule === 'string'
-      ? state.opts.styleModule
-      : 'styled-jsx/style',
-    { nameHint: state.styleComponent }
+    state.styleModule,
+    { nameHint: '_JSXStyle' } // state.styleComponentImportName }
   )
 }
 
@@ -655,7 +659,10 @@ export const setStateOptions = state => {
       vendorPrefixes: state.opts.vendorPrefixes
     })
   }
-  state.styleComponent = STYLE_COMPONENT
+  state.styleModule =
+    typeof state.opts.styleModule === 'string'
+      ? state.opts.styleModule
+      : 'styled-jsx/style'
 }
 
 export function log(message) {

src/babel-external.js

@@ -22,7 +22,7 @@ export function processTaggedTemplateExpression({
   plugins,
   vendorPrefixes,
   sourceMaps,
-  styleComponent
+  styleComponentImportName
 }) {
   const templateLiteral = path.get('quasi')
   let scope
@@ -41,7 +41,7 @@ export function processTaggedTemplateExpression({
   const { staticClassName, className } = computeClassNames(
     [stylesInfo],
     undefined,
-    styleComponent
+    styleComponentImportName
   )
 
   const styles = processCss(
@@ -67,7 +67,7 @@ export function processTaggedTemplateExpression({
       t.objectExpression([
         t.objectProperty(
           t.identifier('styles'),
-          makeStyledJsxTag(hash, css, expressions, styleComponent)
+          makeStyledJsxTag(hash, css, expressions, styleComponentImportName)
         ),
         t.objectProperty(t.identifier('className'), className)
       ])
@@ -216,7 +216,7 @@ export const visitor = {
             plugins: state.plugins,
             vendorPrefixes,
             sourceMaps,
-            styleComponent: state.styleComponent
+            styleComponentImportName: state.styleComponentImportName
           })
         })
       )
@@ -227,7 +227,7 @@ export const visitor = {
         hasJSXStyle &&
         taggedTemplateExpressions.resolve.length > 0 &&
         !state.hasInjectedJSXStyle &&
-        !path.scope.hasBinding(state.styleComponent)
+        !path.scope.hasBinding(state.styleComponentImportName)
       ) {
         state.hasInjectedJSXStyle = true
         createReactComponentImportDeclaration(state)

src/babel.js

@@ -43,7 +43,7 @@ export default function({ types: t }) {
       if (
         name &&
         name !== 'style' &&
-        name !== STYLE_COMPONENT &&
+        name !== state.styleComponentImportName &&
         (name.charAt(0) !== name.charAt(0).toUpperCase() ||
           Object.values(path.scope.bindings).some(binding =>
             binding.referencePaths.some(r => r === tag)
@@ -173,7 +173,7 @@ export default function({ types: t }) {
           const { staticClassName, className } = computeClassNames(
             state.styles,
             externalJsxId,
-            state.styleComponent
+            state.styleComponentImportName
           )
           state.className = className
           state.staticClassName = staticClassName
@@ -225,7 +225,9 @@ export default function({ types: t }) {
         ) {
           const [id, css] = state.externalStyles.shift()
 
-          path.replaceWith(makeStyledJsxTag(id, css, [], state.styleComponent))
+          path.replaceWith(
+            makeStyledJsxTag(id, css, [], state.styleComponentImportName)
+          )
           return
         }
 
@@ -249,7 +251,12 @@ export default function({ types: t }) {
         })
 
         path.replaceWith(
-          makeStyledJsxTag(hash, css, expressions, state.styleComponent)
+          makeStyledJsxTag(
+            hash,
+            css,
+            expressions,
+            state.styleComponentImportName
+          )
         )
       }
     }
@@ -286,9 +293,13 @@ export default function({ types: t }) {
           state.hasJSXStyle = null
           state.ignoreClosing = null
           state.file.hasJSXStyle = false
-
           setStateOptions(state)
-          createReactComponentImportDeclaration(state)
+
+          const prev = state.styleComponentImportName
+          // `addDefault` will generate unique id for the scope
+          state.styleComponentImportName = createReactComponentImportDeclaration(
+            state
+          ).name
 
           // we need to beat the arrow function transform and
           // possibly others so we traverse from here or else
@@ -303,7 +314,7 @@ export default function({ types: t }) {
             !(
               state.file.hasJSXStyle &&
               !state.hasInjectedJSXStyle &&
-              !scope.hasBinding(state.styleComponent)
+              !scope.hasBinding(state.styleComponentImportName)
             )
           ) {
             return

src/macro.js

@@ -1,5 +1,6 @@
 import { createMacro, MacroError } from 'babel-plugin-macros'
 import { processTaggedTemplateExpression } from './babel-external'
+import { STYLE_COMPONENT } from './_constants'
 import {
   setStateOptions,
   createReactComponentImportDeclaration
@@ -9,6 +10,7 @@ export default createMacro(styledJsxMacro)
 
 function styledJsxMacro({ references, state }) {
   setStateOptions(state)
+  state.styleComponentImportName = STYLE_COMPONENT
 
   // Holds a reference to all the lines where strings are tagged using the `css` tag name.
   // We print a warning at the end of the macro in case there is any reference to css,
@@ -94,12 +96,12 @@ function styledJsxMacro({ references, state }) {
         plugins: state.plugins,
         vendorPrefixes: state.opts.vendorPrefixes,
         sourceMaps: state.opts.sourceMaps,
-        styleComponent: state.styleComponent
+        styleComponentImportName: state.styleComponentImportName
       })
 
       if (
         !state.hasInjectedJSXStyle &&
-        !path.scope.hasBinding(state.styleComponent)
+        !path.scope.hasBinding(state.styleComponentImportName)
       ) {
         state.hasInjectedJSXStyle = true
         createReactComponentImportDeclaration(state)

test/babel6/snapshots/index.js.md

@@ -88,8 +88,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
-    export const _StyleImport = '123';␊
+    `import _JSXStyle from "styled-jsx/style";␊
     export default class {␊
       render() {␊
         return <div className={"jsx-2101845350"}>␊

test/fixtures/class.js

@@ -1,4 +1,3 @@
-export const _StyleImport = '123'
 export default class {
   render() {
     return (

test/fixtures/conflicts.js

@@ -0,0 +1,13 @@
+export const _JSXStyle = '_JSXStyle-literal'
+export default function() {
+  return (
+    <div>
+      <p>test</p>
+      <style jsx>{`
+        p {
+          color: red;
+        }
+      `}</style>
+    </div>
+  )
+}

test/index.js

@@ -112,6 +112,11 @@ test('works with dynamic element in class', async t => {
   t.snapshot(code)
 })
 
+test('works with existing identifier for _JSXStyle', async t => {
+  const { code } = await transform('./fixtures/conflicts.js')
+  t.snapshot(code)
+})
+
 test('does not transpile nested style tags', async t => {
   const { message } = await t.throwsAsync(() =>
     transform('./fixtures/nested-style-tags.js')

test/snapshots/index.js.md

@@ -150,7 +150,6 @@ Generated by [AVA](https://ava.li).
 > Snapshot 1
 
     `import _JSXStyle from "styled-jsx/style";␊
-    export const _StyleImport = '123';␊
     export default class {␊
       render() {␊
         return <div className={"jsx-2101845350"}>␊
@@ -381,3 +380,16 @@ Generated by [AVA](https://ava.li).
         <p className={"jsx-2743241663"}>woot</p>␊
         <_JSXStyle id={"2743241663"}>{"p.jsx-2743241663{color:red;}"}</_JSXStyle>␊
       </div>);`
+
+## works with existing identifier for \_JSXStyle
+
+> Snapshot 1
+
+    `import _JSXStyle2 from "styled-jsx/style";␊
+    export const _JSXStyle = '_JSXStyle-literal';␊
+    export default function () {␊
+      return <div className={"jsx-319553417"}>␊
+          <p className={"jsx-319553417"}>test</p>␊
+          <_JSXStyle2 id={"319553417"}>{"p.jsx-319553417{color:red;}"}</_JSXStyle2>␊
+        </div>;␊
+    }`