Support Node.js ESM.

Fixes vercel#640 .
jaydenseric · May 12, 2020 · b947efd · b947efd
1 parent d111ffc
commit b947efd
Show file tree

Hide file tree

Showing 27 changed files with 174 additions and 86 deletions.
diff --git a/css.js b/css.js
@@ -1,23 +1,5 @@
-function notTranspiledError(name) {
-  throw new Error(
-    'styled-jsx/css: if you are getting this error it means that your `' +
-      name +
-      '` tagged template literals were not transpiled.'
-  )
-}
-
-function css() {
-  notTranspiledError('css')
-}
-
-css.global = function() {
-  notTranspiledError('global')
-}
-
-css.resolve = function() {
-  notTranspiledError('resolve')
-}
+const { css, global, resolve } = require('./dist/decoys')
 
 module.exports = css
-module.exports.global = css.global
-module.exports.resolve = css.resolve
+module.exports.global = global
+module.exports.resolve = resolve
diff --git a/css.mjs b/css.mjs
@@ -0,0 +1,5 @@
+import decoys from './dist/decoys.js'
+
+export default decoys.css
+export const global = decoys.global
+export const resolve = decoys.resolve
diff --git a/readme.md b/readme.md
@@ -128,7 +128,7 @@ Turn on/off automatic vendor prefixing (default: `true`)
 The example above transpiles to the following:
 
 ```jsx
-import _JSXStyle from 'styled-jsx/style'
+import _JSXStyle from 'styled-jsx/style.js'
 
 export default () => (
   <div className="jsx-123">

diff --git a/src/_utils.js b/src/_utils.js
@@ -678,7 +678,7 @@ export const booleanOption = opts => {
 export const createReactComponentImportDeclaration = () =>
   t.importDeclaration(
     [t.importDefaultSpecifier(t.identifier(STYLE_COMPONENT))],
-    t.stringLiteral('styled-jsx/style')
+    t.stringLiteral('styled-jsx/style.js')
   )
 
 export const setStateOptions = state => {

diff --git a/src/babel-external.js b/src/babel-external.js
@@ -129,8 +129,11 @@ function addHash(exportIdentifier, hash) {
 
 export const visitor = {
   ImportDeclaration(path, state) {
-    // import css from 'styled-jsx/css'
-    if (path.node.source.value !== 'styled-jsx/css') {
+    // Bail if the import doesn’t have one of these specifiers:
+    // - styled-jsx/css
+    // - styled-jsx/css.mjs
+    // - 'styled-jsx/css.js
+    if (!/^styled-jsx\/css(?:\.m?js)?$/.test(path.node.source.value)) {
       return
     }
 
@@ -218,7 +221,7 @@ export const visitor = {
       )
 
       // When using the `resolve` helper we need to add an import
-      // for the _JSXStyle component `styled-jsx/style`
+      // for the _JSXStyle component `styled-jsx/style.js`
       if (
         hasJSXStyle &&
         taggedTemplateExpressions.resolve.length > 0 &&

diff --git a/src/decoys.js b/src/decoys.js
@@ -0,0 +1,19 @@
+function notTranspiledError(name) {
+  throw new Error(
+    'styled-jsx/css: if you are getting this error it means that your `' +
+      name +
+      '` tagged template literals were not transpiled.'
+  )
+}
+
+export function css() {
+  notTranspiledError('css')
+}
+
+export function global() {
+  notTranspiledError('global')
+}
+
+export function resolve() {
+  notTranspiledError('resolve')
+}
diff --git a/test/babel6/snapshots/attribute.js.md b/test/babel6/snapshots/attribute.js.md
@@ -8,7 +8,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXStyle from 'styled-jsx/style.js';␊
     import styles from './styles';␊
     ␊
     const styles2 = require('./styles2');␊
@@ -108,7 +108,7 @@ Generated by [AVA](https://ava.li).
 
     `var _this = this;␊
     ␊
-    import _JSXStyle from "styled-jsx/style";␊
+    import _JSXStyle from "styled-jsx/style.js";␊
     export default (() => {␊
       const Element = 'div';␊
       return <div className={"jsx-2886504620"}>␊

diff --git a/test/babel6/snapshots/attribute.js.snap b/test/babel6/snapshots/attribute.js.snap
diff --git a/test/babel6/snapshots/external.js.md b/test/babel6/snapshots/external.js.md
@@ -8,7 +8,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXStyle from 'styled-jsx/style.js';␊
     ␊
     import colors, { size } from './constants';␊
     const color = 'red';␊
@@ -98,7 +98,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXStyle from 'styled-jsx/style.js';␊
     ␊
     ␊
     function test() {␊
@@ -112,7 +112,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXStyle from 'styled-jsx/style.js';␊
     ␊
     import colors, { size } from './constants';␊
     const color = 'red';␊
@@ -168,7 +168,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from "styled-jsx/style";␊
+    `import _JSXStyle from "styled-jsx/style.js";␊
     import styles from './styles2';␊
     ␊
     export default (({ level = 1 }) => {␊
@@ -184,7 +184,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXStyle from 'styled-jsx/style.js';␊
     import styles from './styles';␊
     const styles2 = require('./styles2');␊
     import { foo as styles3 } from './styles';␊
@@ -211,7 +211,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXStyle from 'styled-jsx/style.js';␊
     import styles, { foo as styles3 } from './styles';␊
     ␊
     const styles2 = require('./styles2');␊
@@ -229,7 +229,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXStyle from 'styled-jsx/style.js';␊
     import styles from './styles';␊
     ␊
     export default (() => <div className={`jsx-${styles.__hash}`}>␊

diff --git a/test/babel6/snapshots/external.js.snap b/test/babel6/snapshots/external.js.snap
diff --git a/test/babel6/snapshots/index.js.md b/test/babel6/snapshots/index.js.md
@@ -8,7 +8,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXStyle from 'styled-jsx/style.js';␊
     export default (() => <div className={"jsx-2743241663"}>␊
         <p className={"jsx-2743241663"}>test</p>␊
         <p className={"jsx-2743241663"}>woot</p>␊
@@ -28,7 +28,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXStyle from 'styled-jsx/style.js';␊
     export default (() => <div className={"jsx-2743241663"}>␊
         <p className={"jsx-2743241663"}>test</p>␊
         <p className={"jsx-2743241663"}>woot</p>␊
@@ -40,7 +40,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXStyle from 'styled-jsx/style.js';␊
     const Test = () => <_JSXStyle id={"2743241663"}>{"p{color:red;}"}</_JSXStyle>;␊
     ␊
     export default (() => <div className={"jsx-2673076688"}>␊
@@ -53,7 +53,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXStyle from 'styled-jsx/style.js';␊
     const color = 'red';␊
     const otherColor = 'green';␊
     ␊
@@ -76,7 +76,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from "styled-jsx/style";␊
+    `import _JSXStyle from "styled-jsx/style.js";␊
     const Test = () => <div className={"jsx-2529315885"}>␊
         <span className={"jsx-2529315885"}>test</span>␊
         <Component />␊
@@ -87,7 +87,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from "styled-jsx/style";␊
+    `import _JSXStyle from "styled-jsx/style.js";␊
     export default class {␊
     ␊
       render() {␊
@@ -103,7 +103,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXStyle from 'styled-jsx/style.js';␊
     ␊
     ␊
     export default (({ children }) => <div className={`jsx-${styles.__hash}`}>␊
@@ -127,7 +127,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from "styled-jsx/style";␊
+    `import _JSXStyle from "styled-jsx/style.js";␊
     export default (({ level = 1 }) => {␊
       const Element = `h${level}`;␊
     ␊
@@ -158,7 +158,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXStyle from 'styled-jsx/style.js';␊
     export default class {␊
       render() {␊
         const Element = 'div';␊
@@ -184,7 +184,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXStyle from 'styled-jsx/style.js';␊
     const darken = c => c;␊
     const color = 'red';␊
     const otherColor = 'green';␊
@@ -215,7 +215,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXStyle from 'styled-jsx/style.js';␊
     const Test = () => <div className={"jsx-2209073070"}>␊
         <_JSXStyle id={"2209073070"}>{"body{color:red;}:hover{color:red;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-animation:foo 1s ease-out;animation:foo 1s ease-out;}div a{display:none;}[data-test]>div{color:red;}"}</_JSXStyle>␊
       </div>;␊
@@ -226,7 +226,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from "styled-jsx/style";␊
+    `import _JSXStyle from "styled-jsx/style.js";␊
     const attrs = {␊
       id: 'test'␊
     };␊
@@ -257,7 +257,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXStyle from 'styled-jsx/style.js';␊
     export default (() => <div className={"jsx-2743241663"}>␊
         <p className={"jsx-2743241663"}>woot</p>␊
         <style dangerouslySetInnerHTML={{ __html: `body { margin: 0; }` }}></style>␊
@@ -268,7 +268,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXStyle from 'styled-jsx/style.js';␊
     export default (() => <div className={"jsx-2743241663"}>␊
         <p className={"jsx-2743241663"}>test</p>␊
         <p className={"jsx-2743241663"}>woot</p>␊

diff --git a/test/babel6/snapshots/index.js.snap b/test/babel6/snapshots/index.js.snap
diff --git a/test/babel6/snapshots/macro.js.md b/test/babel6/snapshots/macro.js.md
@@ -8,7 +8,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXStyle from 'styled-jsx/style.js';␊
     ␊
     ␊
     ({␊
@@ -20,7 +20,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXStyle from 'styled-jsx/style.js';␊
     ␊
     ␊
     function test() {␊
@@ -34,7 +34,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXStyle from 'styled-jsx/style.js';␊
     ␊
     ␊
     const { className, styles } = {␊

diff --git a/test/babel6/snapshots/macro.js.snap b/test/babel6/snapshots/macro.js.snap
diff --git a/test/babel6/snapshots/plugins.js.md b/test/babel6/snapshots/plugins.js.md
@@ -8,7 +8,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXStyle from 'styled-jsx/style.js';␊
     import styles from './styles';␊
     const color = 'red';␊
     ␊
@@ -39,7 +39,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from 'styled-jsx/style';␊
+    `import _JSXStyle from 'styled-jsx/style.js';␊
     import styles from './styles';␊
     const color = 'red';␊
     ␊

diff --git a/test/babel6/snapshots/plugins.js.snap b/test/babel6/snapshots/plugins.js.snap