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

How are you preventing caching on bundle.css ? #14

Open criso opened 7 years ago

martinandert commented 7 years ago

You can't currently. I'd be interested to hear your use case though.

criso commented 7 years ago

I'd like to be able to do something like: new ExtractTextPlugin('bundle-[name]-[contenthash].css'); Are you just serving the css file with "?v=1.1" ?

b6pzeusbc54tvhw5jgpyw8pwz2x6gs commented 7 years ago

During in woking on code, load your bundle.css in js code, like:

if( __DEVELOPMENT__ ) {   // this variable is injected by webpack.DefinePlugin
  require('./bundle.css');
}

in your webpack.config.dev.js, use style-loader to insert css into DOM, like:

module: {
  loaders: [{
    ...
    ...
  }, {
    test: /\.css$/,
    loader: 'style-loader!css-loader'
  }]
}

If you use HotModuleReplacementPlugin(), whenever you change cssInJS style, bundle.css will be regenerated, and then your browser will get the new bundle.css module, then re-render will occur without page refresh.

But if you don't want or can't use webpack, as you mention, the bundle.css?v=$(timestamp) and page refresh solution is also good!