css prop not working with babel plugins: "transform-react-inline-elements", "transform-react-constant-elements"

[josebrito]

Hi,

I'm using react-boilerplate for a project and have upgraded styled-components to v4.

For the production build I use the following babel configuration (i've only added styled-components, the rest is the initial configuration provided by the boilerplate):

"production": {
        "only": [
          "app"
        ],
        "plugins": [
          "styled-components",
          "transform-react-remove-prop-types",
          "transform-react-inline-elements",
          "transform-react-constant-elements"
        ]
      },

I have a component which uses the css prop, but even though it is working fine in development, when I run the production build the styles defined in the css prop are not being applied unless I remove transform-react-inline-elements and transform-react-constant-elements from the babel configurations.

I wasn't able to tell why it's happening, just reporting this here in case anyone has any clues. For now there's no workaround besides not using the css prop.

Thank you!

Edit: Also confirmed here

---

Example:

<div css={{ padding: '5rem', border: '1px solid red' }}>Dummy div</div>

package.json:

"babel-cli": "6.26.0",
    "babel-core": "6.26.3",
    "babel-eslint": "^8.2.6",
    "babel-loader": "7.1.4",
    "babel-plugin-dynamic-import-node": "1.2.0",
    "babel-plugin-react-intl": "2.4.0",
    "babel-plugin-react-transform": "3.0.0",
    "babel-plugin-styled-components": "^1.10.0",
    "babel-plugin-transform-es2015-modules-commonjs": "6.26.2",
    "babel-plugin-transform-react-constant-elements": "6.23.0",
    "babel-plugin-transform-react-inline-elements": "6.22.0",
    "babel-plugin-transform-react-jsx-source": "6.22.0",
    "babel-plugin-transform-react-remove-prop-types": "0.4.13",
    "babel-preset-env": "1.7.0",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-0": "6.24.1",

[yash-tamakuwala]

+1

[webwelten]

+1

[quantizor]

Please upvote the original post rather than adding "+1" comments if you don't have any more information to add, thanks.

[quantizor]

@josebrito Could you please supply a reproduction sandbox?

[josebrito]

@probablyup thanks for the reply.

Check this this sandbox to reproduce the issue. It will show a blank page, because the app fails to render. If you check the browser inspector you will see a Minified React error #130.

You can also clone this repo and start the app with yarn start:dev to confirm that this works with dev builds. If you start the production build with yarn start the app fails to render.

Thanks!

Note: even though it is a different package, note that emotion also has issues with babel-plugin-transform-react-inline-elements.

[quantizor]

@josebrito ok I think my changes in #228 fixed this :) you can test it with [email protected]

[josebrito]

@probablyup just tested it and seems fixed!

Hoping for a new release soon. Thanks a lot! 🙌🏻🙌🏻

[quantizor]

Awesome! Yeah I'm still working on that PR a bit so probably later this week 👍