babel-plugin-jss-simple

Add filename keys to your jss-simple declarations to help with hot reloading

Installation

$ npm install babel-plugin-jss-simple

What it does

It transforms this:

import css from 'jss-simple'
 
const style = css({
  primary: {
    color: 'green'
  }
})

into this:

import css from 'jss-simple'
 
const style = css({
  primary: {
    color: 'green'
  }
}, __filename)

Why do I want this?

If you are using hot module replacement on the client, you won't be able to tell which styles are the new styles. This provides a key (the filename) to jss-simple so that it can replace the previous style with the new style, and your stylesheet doesn't grow huge.

Do I have to call it 'css'?

No. It will track whatever you've called your default import and rewrite it appropriately.

Can I use css more than once in a given file?

Yes. Each instance of the call will be keyed separately, with _<n> being suffixed to the file name key.

License

MIT