Styled-jsx: Doesn't work with Rollup

[foisonocean]

[jimthedev]

Does this mean that if you want to create a library of distributable components bundled with rollup then you can't?

[giuseppeg]

@jimthedev have you tried this? @foisonocean can you provide more details?

[jimthedev]

I haven't tried it. Was curious.

[jimthedev]

I know next.js 5 has pretty much doubled down on webpack for front and back end bundling so I'm sure rollup isn't their top priority.

[Tomekmularczyk]

Hi,

I actually posted a similar issue here.
I want to create a components library with styled-jsx (as an external dependency) and rollup. But I end up bundling a lot of code.

here is the minimal repo demonstrating the problem.

I think lib/index.js is bundling the whole styled-jsx library. Besides that it's generating source-maps that won't be necessary for production bundle either.

[giuseppeg]

can you put together a minimal repo that includes styled-jsx? fwiw styled-jsx should be a peerDependency

[Tomekmularczyk]

@giuseppeg in my previous answer I’ve included a link to the repo.

https://github.com/Tomekmularczyk/react-package-rollup/tree/with-styled-jsx

[giuseppeg]

@Tomekmularczyk sorry I was looking at the wrong link :) Thank you

[giuseppeg]

@Tomekmularczyk you need to declare all the styled-jsx/* imports as external:

external: id => /^react|styled-jsx/.test(id)

[giuseppeg]

you might also want to set the NODE_ENV to production

package.json

{
  "scripts": {
    "build": "NODE_ENV=production rollup -c"
  }
}

[Tomekmularczyk]

@giuseppeg Thank you! <3

[giuseppeg]

@Tomekmularczyk fwiw I think that you should build a dev and prod version and then have an entry file that requires one or the other based on process.env.NODE_ENV.

[Tomekmularczyk]

Oh, so depending if a client is using development/production environment I should return proper file. Thanks again!

[afzal273]

I'm unable to access the test repo, I'm looking for a working config with rollup or webpack for a react component library with styled-jsx. Could you please re-share a working link?

[Tomekmularczyk]

@afzal273 Here's the config I have created. It create two bundles dev.js and prod.js like @giuseppeg suggested.

.babelrc

{
  "presets": [
    ["env", {"modules": false}],
    "react"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread",
    "styled-jsx/babel"
  ]
}

package.json

{
  "scripts": {
    "release": "npm run build:dev && npm run build:prod",
    "build:prod": "NODE_ENV=production rollup -c",
    "build:dev": "NODE_ENV=development rollup -c"
  },
  "main": "index.js",
  "files": [
    "lib",
    "dev.js",
    "prod.js"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "rollup": "^0.58.2",
    "rollup-plugin-babel": "^3.0.4",
    "rollup-plugin-commonjs": "^9.1.0",
    "rollup-plugin-node-resolve": "^3.3.0",
    "rollup-plugin-replace": "^2.0.0",
    "styled-jsx": "^2.2.6"
  },
  "peerDependencies": {
    "react": ">= 16.3.x",
    "styled-jsx": ">= 2.x.x"
  }
}

rollup.config.js

import babel from "rollup-plugin-babel";
import commonjs from "rollup-plugin-commonjs";
import resolve from "rollup-plugin-node-resolve";
import replace from "rollup-plugin-replace";

const NODE_ENV = process.env.NODE_ENV || "development";
const outputFile = NODE_ENV === "production" ? "./lib/prod.js" : "./lib/dev.js";

export default {
  input: "./src/index.js",
  output: {
    file: outputFile,
    format: "cjs"
  },
  plugins: [
    replace({
      "process.env.NODE_ENV": JSON.stringify(NODE_ENV)
    }),
    babel({
      exclude: "node_modules/**",
      plugins: ["external-helpers"]
    }),
    resolve(),
    commonjs()
  ],
  external: id => /^react|styled-jsx/.test(id)
};

index.js

if (process.env.NODE_ENV !== "production") {
  module.exports = require("./lib/dev");
} else {
  module.exports = require("./lib/prod");
}

[giuseppeg]

@Tomekmularczyk it would be cool to write a blog post about this! Let me know in case you have time and want to do this :)

[Tomekmularczyk]

@giuseppeg sure! I want to. I just need to know some simple guidelines how it should look like and where would you want it.

[giuseppeg]

If you have a personal blog you could just post it there :) As for the guidelines I guess your workflow seems pretty good to me so I'd just describe that with an example :)

[afzal273]

Thanks much @Tomekmularczyk , do you also have an example for bundling a component library that uses styled-jsx with webpack instead of rollup? We use webpack and would be great to have it working for webpack as well!

[Tomekmularczyk]

@afzal273 there's already an article on that.

EDIT:

Oh, the example in the article doesn't use webpack. I've created minimal repo with webpack config, however, I didn't know how to exclude styled-jsx from output bundles. Maybe @giuseppeg can help again. My only idea would be to do something like in the article and do not use a plugin in production:

  "env": {
    "production": {
      "presets": ["env", "react"]
    },
    "development": {
      "presets": ["env", "react"],
      "plugins": ["styled-jsx/babel"]
    }
  }

But I'm not sure its gonna work.

[Tomekmularczyk]

@giuseppeg how can I contact you about that article? I would like you to review it.

[giuseppeg]

@Tomekmularczyk I am on Slack as g https://zeit.chat or you can dm me on twitter https://twitter.com/giuseppegurgone

[Tomekmularczyk]

@giuseppeg I have posted it on Medium. Thanks.

[giuseppeg]

awesome! If you tweet that I'll retweet :) Also feel free to submit a PR to add a link to this under the FAQ section of the main readme.md

[Tomekmularczyk]

@giuseppeg sure I’ll do that. Thanks again!

[DominicTobias]

It doesn't work unless styled-jsx is declared external, that's a shame. Don't want to stipulate that to users I guess I'll have to switch to Webpack and hope they release ESM support in v5 not to long after it is stable

[sw-yx]

for the benefit of future pple who come across this

i declared styled-jsx external, then didnt know how to get styled-jsx running (i dont have enough rollup-fu to take it from there).

so in order to do it i... inlined all of styled-jsx into my index.html, so that it would get picked up as an external module properly.

https://github.com/sw-yx/rollup-react-boilerplate/commit/02cee453c0c60df63a138aae9e268a6738a1e03d

here's hoping nobody else needs to do what i did. it felt dirty af but im on a deadline and didnt know what else to do