)
```
@@ -165,66 +167,6 @@ export default () => (
)
```
-### Keeping CSS in separate files
-
-Styles can be defined in separate JavaScript modules by tagging with `css` any template literal that contain CSS.
-
-`css` must be imported from `styled-jsx/css`:
-
-```js
-/* styles.js */
-import css from 'styled-jsx/css'
-
-export const button = css`button { color: hotpink; }`
-export default css`div { color: green; }`
-```
-
-imported as regular strings:
-
-```jsx
-import styles, { button } from './styles'
-
-export default () => (
-
-
-
-
-
-)
-```
-
-Styles are automatically scoped but you can also be consumed as [globals](#global-styles).
-
-N.B. Dynamic styles cannot be used in external styles.
-
-We also support CommonJS exports but you can only export one string per module:
-
-```js
-module.exports = css`div { color: green; }`
-
-// the following won't work
-// module.exports = { styles: css`div { color: green; }` }
-```
-
-### Styles outside of components
-
-The `css` tag from `styled-jsx/css` can be also used to define styles in your components files but outside of the component itself. This might help with keeping `render` methods smaller.
-
-```jsx
-import css from 'styled-jsx/css'
-
-export default () => (
-
-
-
-
-)
-
-const button = css`button { color: hotpink; }`
-```
-
-Like in externals styles `css` doesn't work with dynamic styles. If you have dynamic parts you might want to place them inline inside of your component using a regular `
+
+
+
+)
+```
+
+N.B. All the tags except for [`resolve`](#the-resolve-tag) don't support dynamic styles.
+
+`resolve` and `global` can also be imported individually:
+
+```js
+import { resolve } from 'styled-jsx/css'
+import { global } from 'styled-jsx/css'
+```
+
+If you use Prettier we recommend you to use the default `css` export syntax since the tool doesn't support named imports.
+
+#### Styles outside of components
+
+The `css` tag from `styled-jsx/css` can be also used to define styles in your components files but outside of the component itself. This might help with keeping `render` methods smaller.
+
+```jsx
+import css from 'styled-jsx/css'
+
+export default () => (
+
+
+
+
+)
+
+const button = css`button { color: hotpink; }`
+```
+
+Like in externals styles `css` doesn't work with dynamic styles. If you have dynamic parts you might want to place them inline inside of your component using a regular `
+
+)
+```
+
+The `resolve` tag also supports dynamic styles:
+
+```jsx
+import React from 'react'
+import css from 'styled-jsx/css'
+
+function getLinkStyles(color) {
+ return css.resolve`
+ a { color: ${color} }
+ `
+}
+
+export default (props) => {
+ const { className, styles } = getLinkStyles(props.theme.color)
+
+ return (
+
+ About
+ {styles}
+
+ )
+}
+```
+
+#### Using `resolve` as a babel macro
+
+The `resolve` tag can be used as a Babel macro thanks to the [`babel-plugin-macros`](https://github.com/kentcdodds/babel-plugin-macros) system.
+
+```bash
+npm i --save styled-jsx
+npm i --save-dev babel-plugin-macros
+```
+
+Next add `babel-plugin-macros` to your babel configuration:
+
+```json
+{
+ "plugins": [
+ "babel-plugin-macros"
+ ]
+}
+```
+
+You can then start to use `resolve` by importing it from `styled-jsx/macro`.
+
+```jsx
+import css, { resolve } from 'styled-jsx/macro'
+
+const stylesInfo = css.resolve`a { color: green; }`
+const stylesInfo2 = resolve`a { color: green; }`
+```
+
+**Create React App** comes with `babel-plugin-macros` pre-installed so you just need to install `styled-jsx` and you can start to use `resolve right away.
+
## CSS Preprocessing via Plugins
Styles can be preprocessed via plugins.
@@ -604,44 +701,7 @@ const StyledImage = ({ src, alt = '' }) => (
### Styling third parties / child components from the parent
-When the component accepts a `className` (or ad-hoc) prop that you can use to style those components then you can generate scoped styles locally in the parent component and resolve them to get a `className` and the actual scoped styles like so:
-
-```jsx
-import Link from 'react-router-dom' // component to style
-
-// Generate a `scope` fragment and resolve it
-const scoped = resolveScopedStyles(
-
-
-
-)
-
-// Your component that uses Link
-export default ({ children }) => (
-
- {children}
-
- {/* use the scoped className */}
-
- About
-
-
- {/* apply the scoped styles */}
- {scoped.styles}
-
-)
-```
-
-`resolveScopedStyles` looks like this:
-
-```jsx
-function resolveScopedStyles(scope) {
- return {
- className: scope.props.className,
- styles: scope.props.children
- }
-}
-```
+When the component accepts a `className` (or ad-hoc) prop as a way to allow customizations then you can use [the `resolve` tag from `styled-jsx/css`](#the-resolve-tag).
When the component doesn't accept any `className` or doesn't expose any API to customize the component, then you only option is to use `:global()` styles:
diff --git a/src/_utils.js b/src/_utils.js
index 4cf8087d..703bc82b 100644
--- a/src/_utils.js
+++ b/src/_utils.js
@@ -611,3 +611,30 @@ export const booleanOption = opts => {
})
return ret
}
+
+export const createReactComponentImportDeclaration = () =>
+ t.importDeclaration(
+ [t.importDefaultSpecifier(t.identifier(STYLE_COMPONENT))],
+ t.stringLiteral('styled-jsx/style')
+ )
+
+export const setStateOptions = state => {
+ const vendorPrefixes = booleanOption([
+ state.opts.vendorPrefixes,
+ state.file.opts.vendorPrefixes
+ ])
+ state.opts.vendorPrefixes =
+ typeof vendorPrefixes === 'boolean' ? vendorPrefixes : true
+ const sourceMaps = booleanOption([
+ state.opts.sourceMaps,
+ state.file.opts.sourceMaps
+ ])
+ state.opts.sourceMaps = Boolean(sourceMaps)
+
+ if (!state.plugins) {
+ state.plugins = combinePlugins(state.opts.plugins, {
+ sourceMaps: state.opts.sourceMaps,
+ vendorPrefixes: state.opts.vendorPrefixes
+ })
+ }
+}
diff --git a/src/babel-external.js b/src/babel-external.js
index c9a1f531..f4380529 100644
--- a/src/babel-external.js
+++ b/src/babel-external.js
@@ -1,17 +1,23 @@
import * as t from 'babel-types'
+import { STYLE_COMPONENT } from './_constants'
+
import {
getJSXStyleInfo,
processCss,
cssToBabelType,
validateExternalExpressions,
- combinePlugins,
- booleanOption
+ getScope,
+ computeClassNames,
+ makeStyledJsxTag,
+ createReactComponentImportDeclaration,
+ setStateOptions
} from './_utils'
const isModuleExports = t.buildMatchMemberExpression('module.exports')
-function processTaggedTemplateExpression({
+export function processTaggedTemplateExpression({
+ type,
path,
fileInfo,
splitRules,
@@ -19,35 +25,50 @@ function processTaggedTemplateExpression({
vendorPrefix
}) {
const templateLiteral = path.get('quasi')
+ let scope
+
+ // Check whether there are undefined references or
+ // references to this.something (e.g. props or state).
+ // We allow dynamic styles only when resolving styles.
+ if (type !== 'resolve') {
+ validateExternalExpressions(templateLiteral)
+ } else if (!path.scope.path.isProgram()) {
+ scope = getScope(path)
+ }
- // Check whether there are undefined references or references to this.something (e.g. props or state)
- validateExternalExpressions(templateLiteral)
+ const stylesInfo = getJSXStyleInfo(templateLiteral, scope)
- const stylesInfo = getJSXStyleInfo(templateLiteral)
+ const { staticClassName, className } = computeClassNames([stylesInfo])
- const globalStyles = processCss(
+ const styles = processCss(
{
...stylesInfo,
- hash: `${stylesInfo.hash}0`,
+ staticClassName,
fileInfo,
- isGlobal: true,
+ isGlobal: type === 'global',
plugins,
vendorPrefix
},
{ splitRules }
)
- const scopedStyles = processCss(
- {
- ...stylesInfo,
- hash: `${stylesInfo.hash}1`,
- fileInfo,
- isGlobal: false,
- plugins,
- vendorPrefix
- },
- { splitRules }
- )
+ if (type === 'resolve') {
+ const { hash, css, expressions } = styles
+ path.replaceWith(
+ // {
+ // styles: <_JSXStyle ... />,
+ // className: 'jsx-123'
+ // }
+ t.objectExpression([
+ t.objectProperty(
+ t.identifier('styles'),
+ makeStyledJsxTag(hash, css, expressions)
+ ),
+ t.objectProperty(t.identifier('className'), className)
+ ])
+ )
+ return
+ }
const id = path.parentPath.node.id
const baseExportName = id ? id.name : 'default'
@@ -65,13 +86,10 @@ function processTaggedTemplateExpression({
parentPath = parentPath.parentPath
}
- const hashesAndScoped = {
- hash: globalStyles.hash,
- scoped: cssToBabelType(scopedStyles.css),
- scopedHash: scopedStyles.hash
- }
-
- const globalCss = cssToBabelType(globalStyles.css)
+ const css = cssToBabelType(styles.css)
+ const newPath = t.isArrayExpression(css)
+ ? css
+ : t.newExpression(t.identifier('String'), [css])
// default exports
@@ -81,86 +99,136 @@ function processTaggedTemplateExpression({
)
parentPath.insertBefore(
t.variableDeclaration('const', [
- t.variableDeclarator(
- defaultExportIdentifier,
- t.isArrayExpression(globalCss)
- ? globalCss
- : t.newExpression(t.identifier('String'), [globalCss])
- )
+ t.variableDeclarator(defaultExportIdentifier, newPath)
])
)
- parentPath.insertBefore(
- makeHashesAndScopedCssPaths(defaultExportIdentifier, hashesAndScoped)
- )
+
+ parentPath.insertBefore(addHash(defaultExportIdentifier, styles.hash))
path.replaceWith(defaultExportIdentifier)
return
}
- // named exports
+ // local and named exports
- parentPath.insertAfter(
- makeHashesAndScopedCssPaths(t.identifier(baseExportName), hashesAndScoped)
- )
- path.replaceWith(
- t.isArrayExpression(globalCss)
- ? globalCss
- : t.newExpression(t.identifier('String'), [globalCss])
- )
+ parentPath.insertAfter(addHash(t.identifier(baseExportName), styles.hash))
+ path.replaceWith(newPath)
}
-function makeHashesAndScopedCssPaths(exportIdentifier, data) {
- return Object.keys(data).map(key => {
- const value =
- typeof data[key] === 'string' ? t.stringLiteral(data[key]) : data[key]
-
- return t.expressionStatement(
- t.assignmentExpression(
- '=',
- t.memberExpression(exportIdentifier, t.identifier(`__${key}`)),
- value
- )
+function addHash(exportIdentifier, hash) {
+ const value = typeof hash === 'string' ? t.stringLiteral(hash) : hash
+ return t.expressionStatement(
+ t.assignmentExpression(
+ '=',
+ t.memberExpression(exportIdentifier, t.identifier('__hash')),
+ value
)
- })
+ )
}
export const visitor = {
ImportDeclaration(path, state) {
+ // import css from 'styled-jsx/css'
if (path.node.source.value !== 'styled-jsx/css') {
return
}
- const tagName = path.node.specifiers[0].local.name
- const binding = path.scope.getBinding(tagName)
-
- if (!binding || !Array.isArray(binding.referencePaths)) {
- return
- }
+ // Find all the imported specifiers.
+ // e.g import css, { global, resolve } from 'styled-jsx/css'
+ // -> ['css', 'global', 'resolve']
+ const specifiersNames = path.node.specifiers.map(
+ specifier => specifier.local.name
+ )
+ specifiersNames.forEach(tagName => {
+ // Get all the reference paths i.e. the places that use the tagName above
+ // eg.
+ // css`div { color: red }`
+ // css.global`div { color: red }`
+ // global`div { color: red `
+ const binding = path.scope.getBinding(tagName)
+
+ if (!binding || !Array.isArray(binding.referencePaths)) {
+ return
+ }
- const taggedTemplateExpressions = binding.referencePaths
- .map(ref => ref.parentPath)
- .filter(path => path.isTaggedTemplateExpression())
+ // Produces an object containing all the TaggedTemplateExpression paths detected.
+ // The object contains { scoped, global, resolve }
+ const taggedTemplateExpressions = binding.referencePaths
+ .map(ref => ref.parentPath)
+ .reduce(
+ (result, path) => {
+ let taggedTemplateExpression
+ if (path.isTaggedTemplateExpression()) {
+ // css`` global`` resolve``
+ taggedTemplateExpression = path
+ } else if (
+ path.parentPath &&
+ path.isMemberExpression() &&
+ path.parentPath.isTaggedTemplateExpression()
+ ) {
+ // This part is for css.global`` or css.resolve``
+ // using the default import css
+ taggedTemplateExpression = path.parentPath
+ } else {
+ return result
+ }
+
+ const tag = taggedTemplateExpression.get('tag')
+ const id = tag.isIdentifier()
+ ? tag.node.name
+ : tag.get('property').node.name
+
+ if (result[id]) {
+ result[id].push(taggedTemplateExpression)
+ } else {
+ result.scoped.push(taggedTemplateExpression)
+ }
+ return result
+ },
+ {
+ scoped: [],
+ global: [],
+ resolve: []
+ }
+ )
- if (taggedTemplateExpressions.length === 0) {
- return
- }
+ let hasJSXStyle = false
+
+ const { vendorPrefix, sourceMaps } = state.opts
+
+ Object.keys(taggedTemplateExpressions).forEach(type =>
+ taggedTemplateExpressions[type].forEach(path => {
+ hasJSXStyle = true
+ // Process each css block
+ processTaggedTemplateExpression({
+ type,
+ path,
+ fileInfo: {
+ file: state.file,
+ sourceFileName: state.file.opts.sourceFileName,
+ sourceMaps
+ },
+ splitRules:
+ typeof state.opts.optimizeForSpeed === 'boolean'
+ ? state.opts.optimizeForSpeed
+ : process.env.NODE_ENV === 'production',
+ plugins: state.plugins,
+ vendorPrefix
+ })
+ })
+ )
- const { vendorPrefix, sourceMaps } = state.opts
-
- taggedTemplateExpressions.forEach(path => {
- processTaggedTemplateExpression({
- path,
- fileInfo: {
- file: state.file,
- sourceFileName: state.file.opts.sourceFileName,
- sourceMaps
- },
- splitRules:
- typeof state.opts.optimizeForSpeed === 'boolean'
- ? state.opts.optimizeForSpeed
- : process.env.NODE_ENV === 'production',
- plugins: state.plugins,
- vendorPrefix
- })
+ // When using the `resolve` helper we need to add an import
+ // for the _JSXStyle component `styled-jsx/style`
+ if (
+ hasJSXStyle &&
+ taggedTemplateExpressions.resolve.length > 0 &&
+ !state.hasInjectedJSXStyle &&
+ !path.scope.hasBinding(STYLE_COMPONENT)
+ ) {
+ state.hasInjectedJSXStyle = true
+ const importDeclaration = createReactComponentImportDeclaration()
+ path.scope.path.node.body.unshift(importDeclaration)
+ }
})
// Finally remove the import
@@ -171,25 +239,7 @@ export const visitor = {
export default function() {
return {
Program(path, state) {
- const vendorPrefix = booleanOption([
- state.opts.vendorPrefix,
- state.file.opts.vendorPrefix
- ])
- state.opts.vendorPrefix =
- typeof vendorPrefix === 'boolean' ? vendorPrefix : true
- const sourceMaps = booleanOption([
- state.opts.sourceMaps,
- state.file.opts.sourceMaps
- ])
- state.opts.sourceMaps = Boolean(sourceMaps)
-
- if (!state.plugins) {
- const { sourceMaps, vendorPrefix } = state.opts
- state.plugins = combinePlugins(state.opts.plugins, {
- sourceMaps: sourceMaps || state.file.opts.sourceMaps,
- vendorPrefix: typeof vendorPrefix === 'boolean' ? vendorPrefix : true
- })
- }
+ setStateOptions(state)
},
...visitor
}
diff --git a/src/babel.js b/src/babel.js
index 0882e39d..561590a6 100644
--- a/src/babel.js
+++ b/src/babel.js
@@ -13,8 +13,8 @@ import {
addClassName,
getScope,
processCss,
- combinePlugins,
- booleanOption
+ createReactComponentImportDeclaration,
+ setStateOptions
} from './_utils'
import { STYLE_COMPONENT } from './_constants'
@@ -264,35 +264,20 @@ export default function({ types: t }) {
state.ignoreClosing = null
state.file.hasJSXStyle = false
- const vendorPrefixes = booleanOption([
- state.opts.vendorPrefixes,
- state.file.opts.vendorPrefixes
- ])
- state.opts.vendorPrefixes =
- typeof vendorPrefixes === 'boolean' ? vendorPrefixes : true
- const sourceMaps = booleanOption([
- state.opts.sourceMaps,
- state.file.opts.sourceMaps
- ])
- state.opts.sourceMaps = Boolean(sourceMaps)
-
- if (!state.plugins) {
- state.plugins = combinePlugins(state.opts.plugins, {
- sourceMaps: state.opts.sourceMaps,
- vendorPrefixes: state.opts.vendorPrefixes
- })
- }
+ setStateOptions(state)
},
exit({ node, scope }, state) {
- if (!(state.file.hasJSXStyle && !scope.hasBinding(STYLE_COMPONENT))) {
+ if (
+ !(
+ state.file.hasJSXStyle &&
+ !state.hasInjectedJSXStyle &&
+ !scope.hasBinding(STYLE_COMPONENT)
+ )
+ ) {
return
}
-
- const importDeclaration = t.importDeclaration(
- [t.importDefaultSpecifier(t.identifier(STYLE_COMPONENT))],
- t.stringLiteral('styled-jsx/style')
- )
-
+ state.hasInjectedJSXStyle = true
+ const importDeclaration = createReactComponentImportDeclaration()
node.body.unshift(importDeclaration)
}
},
diff --git a/src/macro.js b/src/macro.js
new file mode 100644
index 00000000..b364f9af
--- /dev/null
+++ b/src/macro.js
@@ -0,0 +1,122 @@
+import { createMacro, MacroError } from 'babel-plugin-macros'
+import { processTaggedTemplateExpression } from './babel-external'
+import {
+ setStateOptions,
+ createReactComponentImportDeclaration
+} from './_utils'
+import { STYLE_COMPONENT } from './_constants'
+
+export default createMacro(styledJsxMacro)
+
+function styledJsxMacro({ references, state }) {
+ setStateOptions(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,
+ // because `css` is generally used as default import name for 'styled-jsx/css'.
+ // People who want to migrate from this macro to pure styled-jsx might have name conflicts issues.
+ const cssReferences = []
+
+ // references looks like this
+ // {
+ // default: [path, path],
+ // resolve: [path],
+ // }
+ Object.keys(references).forEach(refName => {
+ // Enforce `resolve` as named import so people
+ // can only import { resolve } from 'styled-jsx/macro'
+ // or an alias of it eg. { resolve as foo }
+ if (refName !== 'default' && refName !== 'resolve') {
+ throw new MacroError(
+ `Imported an invalid named import: ${refName}. Please import: resolve`
+ )
+ }
+
+ // Start processing the references for refName
+ references[refName].forEach(path => {
+ // We grab the parent path. Eg.
+ // path -> css
+ // path.parenPath -> css`div { color: red }`
+ let templateExpression = path.parentPath
+
+ // templateExpression member expression?
+ // path -> css
+ // path.parentPath -> css.resolve
+ if (templateExpression.isMemberExpression()) {
+ // grab .resolve
+ const tagPropertyName = templateExpression.get('property').node.name
+ // Member expressions are only valid on default imports
+ // eg. import css from 'styled-jsx/macro'
+ if (refName !== 'default') {
+ throw new MacroError(
+ `Can't use named import ${path.node.name} as a member expression: ${
+ path.node.name
+ }.${tagPropertyName}\`div { color: red }\` Please use it directly: ${
+ path.node.name
+ }\`div { color: red }\``
+ )
+ }
+ // Otherwise enforce `css.resolve`
+ if (tagPropertyName !== 'resolve') {
+ throw new MacroError(
+ `Using an invalid tag: ${tagPropertyName}. Please use ${
+ templateExpression.get('object').node.name
+ }.resolve`
+ )
+ }
+
+ // Grab the TaggedTemplateExpression
+ // i.e. css.resolve`div { color: red }`
+ templateExpression = templateExpression.parentPath
+ } else {
+ if (refName === 'default') {
+ const { name } = path.node
+ throw new MacroError(
+ `Can't use default import directly eg. ${name}\`div { color: red }\`. Please use ${name}.resolve\`div { color: red }\` instead.`
+ )
+ }
+
+ if (path.node.name === 'css') {
+ // If the path node name is `css` we push it to the references above to emit a warning later.
+ cssReferences.push(path.node.loc.start.line)
+ }
+ }
+
+ // Finally transform the path :)
+ processTaggedTemplateExpression({
+ type: 'resolve',
+ path: templateExpression,
+ fileInfo: {
+ file: state.file,
+ sourceFileName: state.file.opts.sourceFileName,
+ sourceMaps: state.opts.sourceMaps
+ },
+ splitRules:
+ typeof state.opts.optimizeForSpeed === 'boolean'
+ ? state.opts.optimizeForSpeed
+ : process.env.NODE_ENV === 'production',
+ plugins: state.plugins,
+ vendorPrefix: state.opts.vendorPrefixes
+ })
+
+ if (
+ !state.hasInjectedJSXStyle &&
+ !path.scope.hasBinding(STYLE_COMPONENT)
+ ) {
+ state.hasInjectedJSXStyle = true
+ const importDeclaration = createReactComponentImportDeclaration()
+ path.findParent(p => p.isProgram()).node.body.unshift(importDeclaration)
+ }
+ })
+ })
+
+ if (cssReferences.length > 0) {
+ console.warn(
+ `styled-jsx - Warning - We detected that you named your tag as \`css\` at lines: ${cssReferences.join(
+ ', '
+ )}.\n` +
+ 'This tag name is usually used as default import name for `styled-jsx/css`.\n' +
+ 'Porting macro code to pure styled-jsx in the future might be a bit problematic.'
+ )
+ }
+}
diff --git a/test/__snapshots__/external.js.snap b/test/__snapshots__/external.js.snap
index 9e109afb..9614a2a0 100644
--- a/test/__snapshots__/external.js.snap
+++ b/test/__snapshots__/external.js.snap
@@ -1,47 +1,54 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`(optimized) transpiles external stylesheets (CommonJS modules) 1`] = `
-"const _defaultExport = ['div{font-size:3em;}'];
-_defaultExport.__hash = '761548770';
-_defaultExport.__scoped = ['div.jsx-3720287939{font-size:3em;}'];
-_defaultExport.__scopedHash = '3720287939';
+"const _defaultExport = ['div.jsx-2292456818{font-size:3em;}'];
+_defaultExport.__hash = '2292456818';
module.exports = _defaultExport;"
`;
exports[`(optimized) transpiles external stylesheets 1`] = `
-"
+"import _JSXStyle from 'styled-jsx/style';
+
import colors, { size } from './constants';
const color = 'red';
-const bar = ['div{font-size:3em;}'];
+const bar = ['div.jsx-2141779268{font-size:3em;}'];
-bar.__hash = '3161421268';
-bar.__scoped = ['div.jsx-546996693{font-size:3em;}'];
-bar.__scopedHash = '546996693';
-const a = [\`div{font-size:\${size}em;}\`];
+bar.__hash = '2141779268';
+const baz = ['div{font-size:3em;}'];
-a.__hash = '1282571833';
-a.__scoped = [\`div.jsx-2741963512{font-size:\${size}em;}\`];
-a.__scopedHash = '2741963512';
-const b = [\`div{color:\${colors.green.light};}\`];
+baz.__hash = '2141779268';
+a.__hash = '262929833';
+const a = [\`div{font-size:\${size}em;}\`];
-b.__hash = '3466620163';
-b.__scoped = [\`div.jsx-3071343650{color:\${colors.green.light};}\`];
-b.__scopedHash = '3071343650';
export const uh = bar;
-export const foo = [\`div{color:\${color};}\`];
-
-foo.__hash = '3319550427';
-foo.__scoped = [\`div.jsx-3980805466{color:\${color};}\`];
-foo.__scopedHash = '3980805466';
-const _defaultExport = ['div{font-size:3em;}', \`p{color:\${color};}\`];
-_defaultExport.__hash = '14787253';
-_defaultExport.__scoped = ['div.jsx-602449652{font-size:3em;}', \`p.jsx-602449652{color:\${color};}\`];
-_defaultExport.__scopedHash = '602449652';
-export default _defaultExport;"
+export const foo = [\`div.jsx-2299908427{color:\${color};}\`];
+
+foo.__hash = '2299908427';
+({
+ styles: <_JSXStyle styleId={\\"1329679275\\"} css={[\`div.jsx-1329679275{color:\${colors.green.light};}\`, 'a.jsx-1329679275{color:red;}']} />,
+ className: 'jsx-1329679275'
+});
+
+const b = {
+ styles: <_JSXStyle styleId={\\"1329679275\\"} css={[\`div.jsx-1329679275{color:\${colors.green.light};}\`, 'a.jsx-1329679275{color:red;}']} />,
+ className: 'jsx-1329679275'
+};
+
+const dynamic = colors => {
+ const b = {
+ styles: <_JSXStyle styleId={\\"3325296745\\"} css={[\`div.__jsx-style-dynamic-selector{color:\${colors.green.light};}\`, 'a.__jsx-style-dynamic-selector{color:red;}']} dynamic={[colors.green.light]} />,
+ className: _JSXStyle.dynamic([['3325296745', [colors.green.light]]])
+ };
+};
+
+export default {
+ styles: <_JSXStyle styleId={\\"3290112549\\"} css={['div.jsx-3290112549{font-size:3em;}', \`p.jsx-3290112549{color:\${color};}\`]} />,
+ className: 'jsx-3290112549'
+};"
`;
exports[`does not transpile non-styled-jsx tagged teplate literals 1`] = `
@@ -77,51 +84,68 @@ const AnotherTitle = Title.extend\`color: blue;\`;
export const Component = () => My page;"
`;
+exports[`injects JSXStyle for nested scope 1`] = `
+"import _JSXStyle from 'styled-jsx/style';
+
+
+function test() {
+ ({
+ styles: <_JSXStyle styleId={\\"2886504620\\"} css={\\"div.jsx-2886504620{color:red;}\\"} />,
+ className: 'jsx-2886504620'
+ });
+}"
+`;
+
exports[`transpiles external stylesheets (CommonJS modules) 1`] = `
-"const _defaultExport = new String('div{font-size:3em;}');
+"const _defaultExport = new String('div.jsx-2292456818{font-size:3em;}');
-_defaultExport.__hash = '761548770';
-_defaultExport.__scoped = 'div.jsx-3720287939{font-size:3em;}';
-_defaultExport.__scopedHash = '3720287939';
+_defaultExport.__hash = '2292456818';
module.exports = _defaultExport;"
`;
exports[`transpiles external stylesheets 1`] = `
-"
+"import _JSXStyle from 'styled-jsx/style';
+
import colors, { size } from './constants';
const color = 'red';
-const bar = new String('div{font-size:3em;}');
+const bar = new String('div.jsx-2141779268{font-size:3em;}');
-bar.__hash = '3161421268';
-bar.__scoped = 'div.jsx-546996693{font-size:3em;}';
-bar.__scopedHash = '546996693';
-const a = new String(\`div{font-size:\${size}em;}\`);
+bar.__hash = '2141779268';
+const baz = new String('div{font-size:3em;}');
-a.__hash = '1282571833';
-a.__scoped = \`div.jsx-2741963512{font-size:\${size}em;}\`;
-a.__scopedHash = '2741963512';
-const b = new String(\`div{color:\${colors.green.light};}\`);
+baz.__hash = '2141779268';
+a.__hash = '262929833';
+const a = new String(\`div{font-size:\${size}em;}\`);
-b.__hash = '3466620163';
-b.__scoped = \`div.jsx-3071343650{color:\${colors.green.light};}\`;
-b.__scopedHash = '3071343650';
export const uh = bar;
-export const foo = new String(\`div{color:\${color};}\`);
-
-foo.__hash = '3319550427';
-foo.__scoped = \`div.jsx-3980805466{color:\${color};}\`;
-foo.__scopedHash = '3980805466';
-
-const _defaultExport = new String(\`div{font-size:3em;}p{color:\${color};}\`);
-
-_defaultExport.__hash = '14787253';
-_defaultExport.__scoped = \`div.jsx-602449652{font-size:3em;}p.jsx-602449652{color:\${color};}\`;
-_defaultExport.__scopedHash = '602449652';
-export default _defaultExport;"
+export const foo = new String(\`div.jsx-2299908427{color:\${color};}\`);
+
+foo.__hash = '2299908427';
+({
+ styles: <_JSXStyle styleId={\\"1329679275\\"} css={\`div.jsx-1329679275{color:\${colors.green.light};}a.jsx-1329679275{color:red;}\`} />,
+ className: 'jsx-1329679275'
+});
+
+const b = {
+ styles: <_JSXStyle styleId={\\"1329679275\\"} css={\`div.jsx-1329679275{color:\${colors.green.light};}a.jsx-1329679275{color:red;}\`} />,
+ className: 'jsx-1329679275'
+};
+
+const dynamic = colors => {
+ const b = {
+ styles: <_JSXStyle styleId={\\"3325296745\\"} css={\`div.__jsx-style-dynamic-selector{color:\${colors.green.light};}a.__jsx-style-dynamic-selector{color:red;}\`} dynamic={[colors.green.light]} />,
+ className: _JSXStyle.dynamic([['3325296745', [colors.green.light]]])
+ };
+};
+
+export default {
+ styles: <_JSXStyle styleId={\\"3290112549\\"} css={\`div.jsx-3290112549{font-size:3em;}p.jsx-3290112549{color:\${color};}\`} />,
+ className: 'jsx-3290112549'
+};"
`;
exports[`use external stylesheets (global only) 1`] = `
diff --git a/test/__snapshots__/index.js.snap b/test/__snapshots__/index.js.snap
index 54e9da89..89f49576 100644
--- a/test/__snapshots__/index.js.snap
+++ b/test/__snapshots__/index.js.snap
@@ -90,11 +90,9 @@ export default (({ children }) =>
);
-const styles = new String('p{color:red;}');
+const styles = new String('p.jsx-2587355013{color:red;}');
-styles.__hash = '3606997013';
-styles.__scoped = 'p.jsx-232666004{color:red;}';
-styles.__scopedHash = '232666004';
+styles.__hash = '2587355013';
class Test extends React.Component {
render() {
return