diff --git a/src/_utils.js b/src/_utils.js index 007f1dc0..bad5ab77 100644 --- a/src/_utils.js +++ b/src/_utils.js @@ -1,5 +1,5 @@ import path from 'path' -import { addDefault } from '@babel/helper-module-imports'; +import { addDefault } from '@babel/helper-module-imports' import * as t from '@babel/types' import _hashString from 'string-hash' import { SourceMapGenerator } from 'source-map' @@ -258,7 +258,7 @@ export const getJSXStyleInfo = (expr, scope) => { } } -export const computeClassNames = (styles, externalJsxId) => { +export const computeClassNames = (styles, externalJsxId, StyleComponent) => { if (styles.length === 0) { return { className: externalJsxId @@ -297,7 +297,7 @@ export const computeClassNames = (styles, externalJsxId) => { // _JSXStyle.dynamic([ ['1234', [props.foo, bar, fn(props)]], ... ]) const dynamic = t.callExpression( // Callee: _JSXStyle.dynamic - t.memberExpression(t.identifier(STYLE_COMPONENT), t.identifier('dynamic')), + t.memberExpression(t.identifier(StyleComponent), t.identifier('dynamic')), // Arguments [ t.arrayExpression( @@ -380,7 +380,12 @@ export const cssToBabelType = css => { return t.cloneDeep(css) } -export const makeStyledJsxTag = (id, transformedCss, expressions = []) => { +export const makeStyledJsxTag = ( + id, + transformedCss, + expressions = [], + StyleComponent +) => { const css = cssToBabelType(transformedCss) const attributes = [ @@ -402,8 +407,8 @@ export const makeStyledJsxTag = (id, transformedCss, expressions = []) => { } return t.jSXElement( - t.jSXOpeningElement(t.jSXIdentifier(STYLE_COMPONENT), attributes), - t.jSXClosingElement(t.jSXIdentifier(STYLE_COMPONENT)), + t.jSXOpeningElement(t.jSXIdentifier(StyleComponent), attributes), + t.jSXClosingElement(t.jSXIdentifier(StyleComponent)), [t.jSXExpressionContainer(css)] ) } @@ -627,7 +632,7 @@ export const createReactComponentImportDeclaration = state => { typeof state.opts.styleModule === 'string' ? state.opts.styleModule : 'styled-jsx/style', - { nameHint: STYLE_COMPONENT} + { nameHint: state.StyleComponent } ) } @@ -650,6 +655,7 @@ export const setStateOptions = state => { vendorPrefixes: state.opts.vendorPrefixes }) } + state.StyleComponent = STYLE_COMPONENT } export function log(message) { diff --git a/src/babel-external.js b/src/babel-external.js index 71d68d14..3df001a2 100644 --- a/src/babel-external.js +++ b/src/babel-external.js @@ -1,7 +1,5 @@ import * as t from '@babel/types' -import { STYLE_COMPONENT } from './_constants' - import { getJSXStyleInfo, processCss, @@ -23,7 +21,8 @@ export function processTaggedTemplateExpression({ splitRules, plugins, vendorPrefixes, - sourceMaps + sourceMaps, + StyleComponent }) { const templateLiteral = path.get('quasi') let scope @@ -39,7 +38,11 @@ export function processTaggedTemplateExpression({ const stylesInfo = getJSXStyleInfo(templateLiteral, scope) - const { staticClassName, className } = computeClassNames([stylesInfo]) + const { staticClassName, className } = computeClassNames( + [stylesInfo], + undefined, + StyleComponent + ) const styles = processCss( { @@ -64,7 +67,7 @@ export function processTaggedTemplateExpression({ t.objectExpression([ t.objectProperty( t.identifier('styles'), - makeStyledJsxTag(hash, css, expressions) + makeStyledJsxTag(hash, css, expressions, StyleComponent) ), t.objectProperty(t.identifier('className'), className) ]) @@ -212,7 +215,8 @@ export const visitor = { : process.env.NODE_ENV === 'production', plugins: state.plugins, vendorPrefixes, - sourceMaps + sourceMaps, + StyleComponent: state.StyleComponent }) }) ) @@ -223,7 +227,7 @@ export const visitor = { hasJSXStyle && taggedTemplateExpressions.resolve.length > 0 && !state.hasInjectedJSXStyle && - !path.scope.hasBinding(STYLE_COMPONENT) + !path.scope.hasBinding(state.StyleComponent) ) { state.hasInjectedJSXStyle = true createReactComponentImportDeclaration(state) diff --git a/src/babel.js b/src/babel.js index 6f32f170..d23021a5 100644 --- a/src/babel.js +++ b/src/babel.js @@ -172,7 +172,8 @@ export default function({ types: t }) { if (state.styles.length > 0 || externalJsxId) { const { staticClassName, className } = computeClassNames( state.styles, - externalJsxId + externalJsxId, + state.StyleComponent ) state.className = className state.staticClassName = staticClassName @@ -224,7 +225,7 @@ export default function({ types: t }) { ) { const [id, css] = state.externalStyles.shift() - path.replaceWith(makeStyledJsxTag(id, css)) + path.replaceWith(makeStyledJsxTag(id, css, [], state.StyleComponent)) return } @@ -247,7 +248,9 @@ export default function({ types: t }) { splitRules }) - path.replaceWith(makeStyledJsxTag(hash, css, expressions)) + path.replaceWith( + makeStyledJsxTag(hash, css, expressions, state.StyleComponent) + ) } } } @@ -286,6 +289,8 @@ export default function({ types: t }) { setStateOptions(state) + state.importDeclaration = createReactComponentImportDeclaration(state) + // we need to beat the arrow function transform and // possibly others so we traverse from here or else // dynamic values in classNames could be incorrect @@ -299,14 +304,12 @@ export default function({ types: t }) { !( state.file.hasJSXStyle && !state.hasInjectedJSXStyle && - !scope.hasBinding(STYLE_COMPONENT) + !scope.hasBinding(state.StyleComponent) ) ) { return } - state.hasInjectedJSXStyle = true - createReactComponentImportDeclaration(state) } } } diff --git a/src/macro.js b/src/macro.js index daf2aa8e..63ca5db8 100644 --- a/src/macro.js +++ b/src/macro.js @@ -94,12 +94,13 @@ function styledJsxMacro({ references, state }) { : process.env.NODE_ENV === 'production', plugins: state.plugins, vendorPrefixes: state.opts.vendorPrefixes, - sourceMaps: state.opts.sourceMaps + sourceMaps: state.opts.sourceMaps, + StyleComponent: state.StyleComponent }) if ( !state.hasInjectedJSXStyle && - !path.scope.hasBinding(STYLE_COMPONENT) + !path.scope.hasBinding(state.StyleComponent) ) { state.hasInjectedJSXStyle = true createReactComponentImportDeclaration(state) diff --git a/test/babel6/snapshots/external.js.md b/test/babel6/snapshots/external.js.md index 7e7ce819..4fc5da3a 100644 --- a/test/babel6/snapshots/external.js.md +++ b/test/babel6/snapshots/external.js.md @@ -53,7 +53,8 @@ Generated by [AVA](https://ava.li). > Snapshot 1 - `const _defaultExport = ['div.jsx-2292456818{font-size:3em;}'];␊ + `import _JSXStyle from 'styled-jsx/style';␊ + const _defaultExport = ['div.jsx-2292456818{font-size:3em;}'];␊ _defaultExport.__hash = '2292456818';␊ ␊ ␊ @@ -63,7 +64,8 @@ Generated by [AVA](https://ava.li). > Snapshot 1 - `import css from 'hell';␊ + `import _JSXStyle from 'styled-jsx/style';␊ + import css from 'hell';␊ ␊ const color = 'red';␊ ␊ @@ -157,7 +159,9 @@ Generated by [AVA](https://ava.li). > Snapshot 1 - `const _defaultExport = new String('div.jsx-2292456818{font-size:3em;}');␊ + `import _JSXStyle from 'styled-jsx/style';␊ + ␊ + const _defaultExport = new String('div.jsx-2292456818{font-size:3em;}');␊ ␊ _defaultExport.__hash = '2292456818';␊ ␊ diff --git a/test/babel6/snapshots/external.js.snap b/test/babel6/snapshots/external.js.snap index 48479980..25b6ac9e 100644 Binary files a/test/babel6/snapshots/external.js.snap and b/test/babel6/snapshots/external.js.snap differ diff --git a/test/babel6/snapshots/index.js.md b/test/babel6/snapshots/index.js.md index 85e57a30..a2d09d16 100644 --- a/test/babel6/snapshots/index.js.md +++ b/test/babel6/snapshots/index.js.md @@ -19,7 +19,8 @@ Generated by [AVA](https://ava.li). > Snapshot 1 - `const a = () =>
hi
␊ ␊test
␊ <_JSXStyle id={"2101845350"}>{"p.jsx-2101845350{color:red;}"}␊test
@@ -12,5 +12,4 @@ export default class {hi
␊ ␊