Adds support for styleModule (#629)

vercel · May 14, 2020 · e025679 · e025679
1 parent d111ffc
commit e025679
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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)
       }
     })