Named exports not detected when using Rollup

[stevenbenisek]

Issue

Bundling styled-tools with Rollup produces the following error:

[!] Error: 'prop' is not exported by node_modules/styled-tools/index.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module

As per https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module and https://github.com/rollup/rollup-plugin-commonjs#custom-named-exports this can be solved by using custom named exports.

However, the better solution would be to create a package that exports not only a CommonJS but also an ES Modules version. This would avoid the extra Rollup config and have the added benefit of tree shaking

Test case

In order to reproduce the issue you need a new project with these files:

• package.json
• rollup.config.js
• index.js

From the root of the project run:

npm install && npm run build

---

package.json

{
  "scripts": {
    "build": "rollup -c"
  },
  "devDependencies": {
    "rollup": "^0.55.0",
    "rollup-plugin-node-resolve": "^3.0.2"
  },
  "dependencies": {
    "styled-tools": "^0.2.3"
  }
}

rollup.config.js

import resolve from 'rollup-plugin-node-resolve';

export default {
  input: 'index.js',
  output: {
    format: 'es',
  },
  plugins: [resolve()],
};

index.js

import { prop } from 'styled-tools';

prop('color', 'red');

[stevenbenisek]

PR on its way 😃