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

Support global selectors #19

Closed steadicat closed 7 years ago

steadicat commented 7 years ago

This is an easy solution for #16. Any selector prefixed with $ is passed through to the generated CSS unchanged, and omitted in the resulting JS object.

This allows for comma-separated lists of selectors as well, such as { '$html, body, .button': {} }, which is pretty useful when defining global stylesheets.

An alternative solution would be to allow comma separated selectors everywhere, and requiring the prefixing of every selector individually ({ foo: {}, bar: {}, '$html, $body, $.button, foo, bar': {} }), but that would be a bigger change. Would love to hear thoughts on this.

steadicat commented 7 years ago

Again, test broken because of #17.

martinandert commented 7 years ago

Wow, thanks for this and the other two pull requests. Great stuff! Merged all three and released a new minor version.

Would you mind updating the README with an explanation of this feature? And also please add yourself to the "contributors" section of package.json if you like.