diff --git a/css.js b/css.js
index 6521536a..b49a8b1f 100644
--- 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
new file mode 100644
index 00000000..855e1152
--- /dev/null
+++ 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
index a1af73af..19516fec 100644
--- a/readme.md
+++ b/readme.md
@@ -26,7 +26,7 @@ Code and docs are for v3 which we highly recommend you to try. Looking for style
   * [Via inline `style`](#via-inline-style)
 - [Constants](#constants)
 - [Server-Side Rendering](#server-side-rendering)
-  * [`styled-jsx/server`](#styled-jsxserver)
+  * [`styled-jsx/server.js`](#styled-jsxserver)
 - [External CSS and styles outside of the component](#external-css-and-styles-outside-of-the-component)
   * [External styles](#external-styles)
   * [Styles outside of components](#styles-outside-of-components)
@@ -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">
@@ -316,8 +316,8 @@ In this example, the padding defaults to the one set in `<style>` (`20`), but th
 It is possible to use constants like so:
 
 ```jsx
-import { colors, spacing } from '../theme'
-import { invertColor } from '../theme/utils'
+import { colors, spacing } from '../theme.mjs'
+import { invertColor } from '../theme/utils.mjs'
 
 const Button = ({ children }) => (
   <button>
@@ -337,15 +337,15 @@ Please keep in mind that constants defined outside of the component scope are tr
 
 ## Server-Side Rendering
 
-### `styled-jsx/server`
+### `styled-jsx/server.js`
 
 The main export flushes your styles to an array of `React.Element`:
 
 ```jsx
 import React from 'react'
-import ReactDOM from 'react-dom/server'
-import flush from 'styled-jsx/server'
-import App from './app'
+import ReactDOM from 'react-dom/server.js'
+import flush from 'styled-jsx/server.js'
+import App from './app.mjs'
 
 export default (req, res) => {
   const app = ReactDOM.renderToString(<App />)
@@ -364,9 +364,9 @@ We also expose `flushToHTML` to return generated HTML:
 
 ```jsx
 import React from 'react'
-import ReactDOM from 'react-dom/server'
-import { flushToHTML } from 'styled-jsx/server'
-import App from './app'
+import ReactDOM from 'react-dom/server.js'
+import { flushToHTML } from 'styled-jsx/server.js'
+import App from './app.mjs'
 
 export default (req, res) => {
   const app = ReactDOM.renderToString(<App />)
@@ -404,7 +404,7 @@ Your CSP policy must share the same nonce as well (the header nonce needs to mat
 
 ### External CSS and styles outside of the component
 
-In styled-jsx styles can be defined outside of the component's render method or in separate JavaScript modules using the `styled-jsx/css` library. `styled-jsx/css` exports three tags that can be used to tag your styles:
+In styled-jsx styles can be defined outside of the component's render method or in separate JavaScript modules using the `styled-jsx/css.mjs` library. `styled-jsx/css.mjs` exports three tags that can be used to tag your styles:
 
 * `css`, the default export, to define scoped styles.
 * `css.global` to define global styles.
@@ -416,7 +416,7 @@ In an external file:
 
 ```js
 /* styles.js */
-import css from 'styled-jsx/css'
+import css from 'styled-jsx/css.mjs'
 
 // Scoped styles
 export const button = css`button { color: hotpink; }`
@@ -436,7 +436,7 @@ export default css`div { color: green; }`
 You can then import and use those styles:
 
 ```jsx
-import styles, { button, body } from './styles'
+import styles, { button, body } from './styles.mjs'
 
 export default () => (
   <div>
@@ -450,21 +450,20 @@ export default () => (
 
 N.B. All the tags except for [`resolve`](#the-resolve-tag) don't support dynamic styles.
 
-`resolve` and `global` can also be imported individually:
+`global` and `resolve` can also be imported individually:
 
 ```js
-import { resolve } from 'styled-jsx/css'
-import { global } from 'styled-jsx/css'
+import { global, resolve } from 'styled-jsx/css.mjs'
 ```
 
 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.
+The `css` tag from `styled-jsx/css.mjs` 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'
+import css from 'styled-jsx/css.mjs'
 
 export default () => (
   <div>
@@ -480,7 +479,7 @@ Like in externals styles `css` doesn't work with dynamic styles. If you have dyn
 
 #### The `resolve` tag
 
-The `resolve` tag from `styled-jsx/css` can be used when you need to scope some CSS - for example, if you need to style nested components from the parent, such as the `Link` component in the example below.
+The `resolve` tag from `styled-jsx/css.mjs` can be used when you need to scope some CSS - for example, if you need to style nested components from the parent, such as the `Link` component in the example below.
 
 It works by returning the generated scoped `className` and related `styles`.
 
@@ -488,7 +487,7 @@ It works by returning the generated scoped `className` and related `styles`.
 import React from 'react'
 import Link from 'some-library'
 
-import css from 'styled-jsx/css'
+import css from 'styled-jsx/css.mjs'
 
 const { className, styles } = css.resolve`
   a { color: green }
@@ -509,7 +508,7 @@ The `resolve` tag also supports dynamic styles, via template string interpolatio
 
 ```jsx
 import React from 'react'
-import css from 'styled-jsx/css'
+import css from 'styled-jsx/css.mjs'
 
 function getLinkStyles(color) {
   return css.resolve`
@@ -851,13 +850,13 @@ The `styled-jsx/babel-test` solves this problem. It simply strips `jsx` attribut
 
 #### styled-jsx/css in tests
 
-When using `styled-jsx/babel-test`, `styled-jsx/css` throws the following error:
+When using `styled-jsx/babel-test`, `styled-jsx/css.mjs` throws the following error:
 
 ```
 styled-jsx/css: if you are getting this error it means that your `css` tagged template literals were not transpiled.
 ```
 
-to solve this issue you need to mock `styled-jsx/css`. You can find a guide at the following link https://kevinjalbert.com/jest-snapshots-reducing-styled-jsx-noise/
+to solve this issue you need to mock `styled-jsx/css.mjs`. You can find a guide at the following link https://kevinjalbert.com/jest-snapshots-reducing-styled-jsx-noise/
 
 ## FAQ
 
@@ -882,7 +881,7 @@ const StyledImage = ({ src, alt = '' }) => (
 
 ### Styling third parties / child components from the parent
 
-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 accepts a `className` (or ad-hoc) prop as a way to allow customizations then you can use [the `resolve` tag from `styled-jsx/css.mjs`](#the-resolve-tag).
 
 When the component doesn't accept any `className` or doesn't expose any API to customize the component, then your only option is to use `:global()` styles:
 
@@ -935,8 +934,8 @@ You get full CSS highlighting and autocompletion and it will last until you clos
 Additionally you can use language injection comments to enable all the IDE language features indefinitely using the language comment style:
 
 ```jsx
-import { colors, spacing } from '../theme'
-import { invertColor } from '../theme/utils'
+import { colors, spacing } from '../theme.mjs'
+import { invertColor } from '../theme/utils.mjs'
 
 const Button = ({ children }) => (
   <button>
diff --git a/src/_utils.js b/src/_utils.js
index 564c8d50..ace427c5 100644
--- 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
index 8d8fb882..b98773f2 100644
--- 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
new file mode 100644
index 00000000..80ff4a26
--- /dev/null
+++ 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
index 442b8aba..8a6eb7ee 100644
--- 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
index 71641d54..807a70db 100644
Binary files a/test/babel6/snapshots/attribute.js.snap and b/test/babel6/snapshots/attribute.js.snap differ
diff --git a/test/babel6/snapshots/external.js.md b/test/babel6/snapshots/external.js.md
index e7188727..71d06eda 100644
--- 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
index 84d466e7..c6656af2 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 687bb917..347a3505 100644
--- 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
index 985b671e..98c7a84d 100644
Binary files a/test/babel6/snapshots/index.js.snap and b/test/babel6/snapshots/index.js.snap differ
diff --git a/test/babel6/snapshots/macro.js.md b/test/babel6/snapshots/macro.js.md
index eecb7c37..c6193f40 100644
--- 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
index 532e5ab0..2c178ddf 100644
Binary files a/test/babel6/snapshots/macro.js.snap and b/test/babel6/snapshots/macro.js.snap differ
diff --git a/test/babel6/snapshots/plugins.js.md b/test/babel6/snapshots/plugins.js.md
index 546b315c..d4c9f73c 100644
--- 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
index 1a809ca1..21d71768 100644
Binary files a/test/babel6/snapshots/plugins.js.snap and b/test/babel6/snapshots/plugins.js.snap differ
diff --git a/test/index.js b/test/index.js
index 39fb1006..9b4cddf5 100644
--- a/test/index.js
+++ b/test/index.js
@@ -5,7 +5,7 @@ import ReactDOM from 'react-dom/server'
 
 // Ours
 import plugin from '../src/babel'
-import _transform from './_transform'
+import _transform, { transformSource as _transformSource } from './_transform'
 
 const transform = (file, opts = {}) =>
   _transform(file, {
@@ -13,6 +13,12 @@ const transform = (file, opts = {}) =>
     ...opts
   })
 
+const transformSource = (src, opts = {}) =>
+  _transformSource(src.trim(), {
+    plugins: [[plugin, opts]],
+    ...opts
+  })
+
 test('handles dynamic `this` value inside of arrow function', async t => {
   const { code } = await transform(
     './fixtures/dynamic-this-value-in-arrow.js',
@@ -267,3 +273,39 @@ test('optimized styles do not contain new lines', t => {
 
   t.is(html, `<head>${expected}</head>`)
 })
+
+test('Babel plugin matches import specifier styled-jsx/css', async t => {
+  const { code } = await transformSource(`
+    import css from 'styled-jsx/css'
+
+    css.resolve\`div { color: red }\`
+  `)
+  t.snapshot(code)
+})
+
+test('Babel plugin matches import specifier styled-jsx/css.mjs', async t => {
+  const { code } = await transformSource(`
+    import css from 'styled-jsx/css.mjs'
+
+    css.resolve\`div { color: red }\`
+  `)
+  t.snapshot(code)
+})
+
+test('Babel plugin matches import specifier styled-jsx/css.js', async t => {
+  const { code } = await transformSource(`
+    import css from 'styled-jsx/css.js'
+
+    css.resolve\`div { color: red }\`
+  `)
+  t.snapshot(code)
+})
+
+test('Babel plugin doesn’t match an unrelated import specifier', async t => {
+  const { code } = await transformSource(`
+    import css from 'x'
+
+    css.resolve\`div { color: red }\`
+  `)
+  t.snapshot(code)
+})
diff --git a/test/snapshots/attribute.js.md b/test/snapshots/attribute.js.md
index 594ec1a8..c226a2c6 100644
--- a/test/snapshots/attribute.js.md
+++ b/test/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'); // external only␊
@@ -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";␊
     export default (() => {␊
       const Element = 'div';␊
       return <div className={"jsx-2886504620"}>␊
diff --git a/test/snapshots/attribute.js.snap b/test/snapshots/attribute.js.snap
index 61300916..5e980061 100644
Binary files a/test/snapshots/attribute.js.snap and b/test/snapshots/attribute.js.snap differ
diff --git a/test/snapshots/external.js.md b/test/snapshots/external.js.md
index e1f84dcb..2951c2e0 100644
--- a/test/snapshots/external.js.md
+++ b/test/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';␊
     const bar = ["div.jsx-2141779268{font-size:3em;}"];␊
@@ -55,7 +55,7 @@ Generated by [AVA](https://ava.li).
 
     `"use strict";␊
     ␊
-    var _style = _interopRequireDefault(require("styled-jsx/style"));␊
+    var _style = _interopRequireDefault(require("styled-jsx/style.js"));␊
     ␊
     var _App = _interopRequireDefault(require("./App.styles"));␊
     ␊
@@ -99,7 +99,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';␊
     const bar = new String("div.jsx-2141779268{font-size:3em;}");␊
@@ -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";␊
     import styles from './styles2';␊
     export default (({␊
       level = 1␊
@@ -174,7 +174,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');␊
@@ -201,7 +201,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');␊
@@ -219,7 +219,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}`}>␊
         <p className={`jsx-${styles.__hash}`}>test</p>␊
diff --git a/test/snapshots/external.js.snap b/test/snapshots/external.js.snap
index b7551ed6..60d66372 100644
Binary files a/test/snapshots/external.js.snap and b/test/snapshots/external.js.snap differ
diff --git a/test/snapshots/index.js.md b/test/snapshots/index.js.md
index 46d5ce7b..36fcc445 100644
--- a/test/snapshots/index.js.md
+++ b/test/snapshots/index.js.md
@@ -4,11 +4,41 @@ The actual snapshot is saved in `index.js.snap`.
 
 Generated by [AVA](https://ava.li).
 
+## Babel plugin matches import specifier styled-jsx/css
+
+> Snapshot 1
+
+    `import _JSXStyle from "styled-jsx/style.js";␊
+    ({␊
+      styles: <_JSXStyle id={"2886504620"}>{"div.jsx-2886504620{color:red;}"}</_JSXStyle>,␊
+      className: "jsx-2886504620"␊
+    });`
+
+## Babel plugin matches import specifier styled-jsx/css.js
+
+> Snapshot 1
+
+    `import _JSXStyle from "styled-jsx/style.js";␊
+    ({␊
+      styles: <_JSXStyle id={"2886504620"}>{"div.jsx-2886504620{color:red;}"}</_JSXStyle>,␊
+      className: "jsx-2886504620"␊
+    });`
+
+## Babel plugin matches import specifier styled-jsx/css.mjs
+
+> Snapshot 1
+
+    `import _JSXStyle from "styled-jsx/style.js";␊
+    ({␊
+      styles: <_JSXStyle id={"2886504620"}>{"div.jsx-2886504620{color:red;}"}</_JSXStyle>,␊
+      className: "jsx-2886504620"␊
+    });`
+
 ## generates source maps
 
 > 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>␊
@@ -19,7 +49,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from "styled-jsx/style";␊
+    `import _JSXStyle from "styled-jsx/style.js";␊
     import React, { Component } from 'react';␊
     export default class Index extends Component {␊
       static getInitialProps() {␊
@@ -72,7 +102,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>␊
@@ -84,7 +114,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>;␊
     ␊
@@ -98,7 +128,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';␊
     ␊
@@ -121,7 +151,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>␊
@@ -133,7 +163,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() {␊
         return <div className={"jsx-2101845350"}>␊
@@ -148,7 +178,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}`}>␊
@@ -172,7 +202,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␊
     }) => {␊
@@ -203,7 +233,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';␊
@@ -229,7 +259,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;␊
     ␊
@@ -265,7 +295,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from "styled-jsx/style";␊
+    `import _JSXStyle from "styled-jsx/style.js";␊
     import React from 'react';␊
     export default (() => <>␊
         <p className={"jsx-1712488456"}>Testing!!!</p>␊
@@ -300,7 +330,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>␊
@@ -312,7 +342,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'␊
     };␊
@@ -344,7 +374,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={{␊
@@ -357,10 +387,17 @@ 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>␊
         <p className={"jsx-2743241663"}>woot</p>␊
         <_JSXStyle id={"2743241663"}>{"p.jsx-2743241663{color:red;}"}</_JSXStyle>␊
       </div>);`
+
+## Babel plugin doesn’t match an unrelated import specifier
+
+> Snapshot 1
+
+    `import css from 'x';␊
+    css.resolve`div { color: red }`;`
diff --git a/test/snapshots/index.js.snap b/test/snapshots/index.js.snap
index cc30cc6a..deb432bc 100644
Binary files a/test/snapshots/index.js.snap and b/test/snapshots/index.js.snap differ
diff --git a/test/snapshots/macro.js.md b/test/snapshots/macro.js.md
index 45e48b7e..dbc4e1f8 100644
--- a/test/snapshots/macro.js.md
+++ b/test/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";␊
     ({␊
       styles: <_JSXStyle id={"2886504620"}>{"div.jsx-2886504620{color:red;}"}</_JSXStyle>,␊
       className: "jsx-2886504620"␊
@@ -18,7 +18,7 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    `import _JSXStyle from "styled-jsx/style";␊
+    `import _JSXStyle from "styled-jsx/style.js";␊
     ␊
     function test() {␊
       ({␊
@@ -31,7 +31,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/snapshots/macro.js.snap b/test/snapshots/macro.js.snap
index 49a4136f..46d85411 100644
Binary files a/test/snapshots/macro.js.snap and b/test/snapshots/macro.js.snap differ
diff --git a/test/snapshots/plugins.js.md b/test/snapshots/plugins.js.md
index 85fce81f..0b0ef235 100644
--- a/test/snapshots/plugins.js.md
+++ b/test/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';␊
     export default (() => <div className={"jsx-3382438999 " + `jsx-${styles.__hash}`}>␊
@@ -37,7 +37,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';␊
     export default (() => <div className={"jsx-3382438999 " + `jsx-${styles.__hash}`}>␊
diff --git a/test/snapshots/plugins.js.snap b/test/snapshots/plugins.js.snap
index ca69097b..2b537e34 100644
Binary files a/test/snapshots/plugins.js.snap and b/test/snapshots/plugins.js.snap differ