search

martinandert / babel-plugin-css-in-js

A plugin for Babel v6 which transforms inline styles defined in JavaScript modules into class names so they become available to, e.g. the `className` prop of React elements. While transforming, the plugin processes all JavaScript style definitions found and bundles them up into a CSS file, ready to be requested from your web server.
MIT License
299 stars 11 forks source link

Is there any solution about universal app? #12

Closed b6pzeusbc54tvhw5jgpyw8pwz2x6gs closed 8 years ago

b6pzeusbc54tvhw5jgpyw8pwz2x6gs commented 8 years ago

Recently, I'm working on the study about universal app like react-redux-universal-hot-example. As far as I know, in universal app, js files are loaded from different ways on each server and client side. Server side use the babel-register but client side use a bundle js file from webpack.

I have a question. Assuming that my code state haven't changed and use the same babelrc and options, regardless of the loading method(babel-register or webpack), does babel-plugin-css-in-js always guarantee to create the same class name? Even when I use compressClassName option, always guarantee it?

martinandert commented 8 years ago

[...] does babel-plugin-css-in-js always guarantee to create the same class name? Even when I use compressClassName option [...]

Yes, this is garanteed. The plugin internally uses a classname cache on disk to ensure this property. The example directory contains a universal app where classnames are compiled on both the client and the server side.

b6pzeusbc54tvhw5jgpyw8pwz2x6gs commented 8 years ago

Thanks for answering my question. Much as I think, this plugin is an awesome!