diff --git a/readme.md b/readme.md index a1af73af..cfb74c18 100644 --- a/readme.md +++ b/readme.md @@ -13,6 +13,7 @@ Code and docs are for v3 which we highly recommend you to try. Looking for style - [Configuration options](#configuration-options) * [`optimizeForSpeed`](#optimizeforspeed) * [`sourceMaps`](#sourcemaps) + * [`styleModule`](#stylemodule) * [`vendorPrefixes`](#vendorprefixes) - [Features](#features) - [How It Works](#how-it-works) @@ -106,6 +107,10 @@ Beware that when using this option source maps cannot be generated and styles ca Generates source maps (default: `false`) +#### `styleModule` + +Module that the transpiled files should import (default: `styled-jsx/style`) + #### `vendorPrefixes` Turn on/off automatic vendor prefixing (default: `true`) @@ -388,7 +393,7 @@ duplicate styles are avoided. ### Content Security Policy -Strict [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) is supported. +Strict [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) is supported. You should generate a nonce **per request**. ```js diff --git a/src/_utils.js b/src/_utils.js index 564c8d50..ea8d1d66 100644 --- a/src/_utils.js +++ b/src/_utils.js @@ -675,11 +675,17 @@ export const booleanOption = opts => { return ret } -export const createReactComponentImportDeclaration = () => - t.importDeclaration( +export const createReactComponentImportDeclaration = state => { + const styleModule = + typeof state.opts.styleModule === 'string' + ? state.opts.styleModule + : 'styled-jsx/style' + + return t.importDeclaration( [t.importDefaultSpecifier(t.identifier(STYLE_COMPONENT))], - t.stringLiteral('styled-jsx/style') + t.stringLiteral(styleModule) ) +} export const setStateOptions = state => { const vendorPrefixes = booleanOption([ diff --git a/src/babel-external.js b/src/babel-external.js index 8d8fb882..fd413357 100644 --- a/src/babel-external.js +++ b/src/babel-external.js @@ -226,7 +226,7 @@ export const visitor = { !path.scope.hasBinding(STYLE_COMPONENT) ) { state.hasInjectedJSXStyle = true - const importDeclaration = createReactComponentImportDeclaration() + const importDeclaration = createReactComponentImportDeclaration(state) path.scope.path.node.body.unshift(importDeclaration) } }) diff --git a/src/babel.js b/src/babel.js index e3726a07..8c01155d 100644 --- a/src/babel.js +++ b/src/babel.js @@ -303,7 +303,7 @@ export default function({ types: t }) { } state.hasInjectedJSXStyle = true - const importDeclaration = createReactComponentImportDeclaration() + const importDeclaration = createReactComponentImportDeclaration(state) node.body.unshift(importDeclaration) } }, diff --git a/src/macro.js b/src/macro.js index b050f7d6..8040f328 100644 --- a/src/macro.js +++ b/src/macro.js @@ -102,7 +102,7 @@ function styledJsxMacro({ references, state }) { !path.scope.hasBinding(STYLE_COMPONENT) ) { state.hasInjectedJSXStyle = true - const importDeclaration = createReactComponentImportDeclaration() + const importDeclaration = createReactComponentImportDeclaration(state) path.findParent(p => p.isProgram()).node.body.unshift(importDeclaration) } })