leverage generated uid from addDefault

src/_utils.js

@@ -9,8 +9,8 @@ import transform from './lib/style-transform'
 import {
   STYLE_ATTRIBUTE,
   GLOBAL_ATTRIBUTE,
-  STYLE_COMPONENT_ID,
   STYLE_COMPONENT,
+  STYLE_COMPONENT_ID,
   STYLE_COMPONENT_DYNAMIC
 } from './_constants'
 
@@ -258,7 +258,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 +301,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 +391,7 @@ export const makeStyledJsxTag = (
   id,
   transformedCss,
   expressions = [],
-  styleComponent
+  styleComponentImportName
 ) => {
   const css = cssToBabelType(transformedCss)
 
@@ -407,8 +414,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,13 +634,9 @@ export const booleanOption = opts => {
 }
 
 export const createReactComponentImportDeclaration = state => {
-  addDefault(
-    state.file.path,
-    typeof state.opts.styleModule === 'string'
-      ? state.opts.styleModule
-      : 'styled-jsx/style',
-    { nameHint: state.styleComponent }
-  )
+  return addDefault(state.file.path, state.styleModule, {
+    nameHint: STYLE_COMPONENT
+  }).name
 }
 
 export const setStateOptions = state => {
@@ -655,7 +658,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

@@ -8,7 +8,6 @@ import {
   getScope,
   computeClassNames,
   makeStyledJsxTag,
-  createReactComponentImportDeclaration,
   setStateOptions
 } from './_utils'
 
@@ -22,7 +21,7 @@ export function processTaggedTemplateExpression({
   plugins,
   vendorPrefixes,
   sourceMaps,
-  styleComponent
+  styleComponentImportName
 }) {
   const templateLiteral = path.get('quasi')
   let scope
@@ -41,7 +40,7 @@ export function processTaggedTemplateExpression({
   const { staticClassName, className } = computeClassNames(
     [stylesInfo],
     undefined,
-    styleComponent
+    styleComponentImportName
   )
 
   const styles = processCss(
@@ -67,7 +66,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 +215,7 @@ export const visitor = {
             plugins: state.plugins,
             vendorPrefixes,
             sourceMaps,
-            styleComponent: state.styleComponent
+            styleComponentImportName: state.styleComponentImportName
           })
         })
       )
@@ -226,11 +225,9 @@ export const visitor = {
       if (
         hasJSXStyle &&
         taggedTemplateExpressions.resolve.length > 0 &&
-        !state.hasInjectedJSXStyle &&
-        !path.scope.hasBinding(state.styleComponent)
+        !state.hasInjectedJSXStyle
       ) {
         state.hasInjectedJSXStyle = true
-        createReactComponentImportDeclaration(state)
       }
     })
 

src/babel.js

@@ -17,8 +17,6 @@ import {
   setStateOptions
 } from './_utils'
 
-import { STYLE_COMPONENT } from './_constants'
-
 export default function({ types: t }) {
   const jsxVisitors = {
     JSXOpeningElement(path, state) {
@@ -43,7 +41,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 +171,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 +223,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 +249,12 @@ export default function({ types: t }) {
         })
 
         path.replaceWith(
-          makeStyledJsxTag(hash, css, expressions, state.styleComponent)
+          makeStyledJsxTag(
+            hash,
+            css,
+            expressions,
+            state.styleComponentImportName
+          )
         )
       }
     }
@@ -286,9 +291,12 @@ export default function({ types: t }) {
           state.hasJSXStyle = null
           state.ignoreClosing = null
           state.file.hasJSXStyle = false
-
           setStateOptions(state)
-          createReactComponentImportDeclaration(state)
+
+          // `addDefault` will generate unique id for the scope
+          state.styleComponentImportName = createReactComponentImportDeclaration(
+            state
+          )
 
           // we need to beat the arrow function transform and
           // possibly others so we traverse from here or else
@@ -303,7 +311,7 @@ export default function({ types: t }) {
             !(
               state.file.hasJSXStyle &&
               !state.hasInjectedJSXStyle &&
-              !scope.hasBinding(state.styleComponent)
+              !scope.hasBinding(state.styleComponentImportName)
             )
           ) {
             return

src/macro.js

@@ -9,6 +9,7 @@ export default createMacro(styledJsxMacro)
 
 function styledJsxMacro({ references, state }) {
   setStateOptions(state)
+  state.styleComponentImportName = createReactComponentImportDeclaration(state)
 
   // 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,15 +95,11 @@ 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)
-      ) {
+      if (!state.hasInjectedJSXStyle) {
         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"}>␊
@@ -242,6 +241,19 @@ Generated by [AVA](https://ava.li).
     ␊
     };`
 
+## 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>;␊
+    }`
+
 ## works with expressions in template literals
 
 > Snapshot 1