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 style rules #16

Closed steadicat closed 7 years ago

steadicat commented 7 years ago

It would be great if it were an escape hatch that would allow you to specify global style rules in JS as well, without having to use a separate syntax and pipeline for it.

There could be a special syntax that would opt a rule out of the selector rewriting. For example:

const globalStyles = cssInJS({
  '$body': {margin: 0},
  '$.small-caps': {textTransform: 'uppercase', fontSize: '0.9%'},
});

This would inject the following into the generated stylesheet:

body {margin: 0px}
.small-caps {text-transform: uppercase; font-size: 0.9%}
Pyrolistical commented 7 years ago

I feel this was a mistake, you could have easily added a global.css and imported it in index.html

why allow a random component declare a global?

steadicat commented 7 years ago

Many projects have a CSS pipeline (with variables, autoprefixing, etc.), which makes it impossible to simply add a CSS file to the HTML page. The CSS needs to be preprocessed, which would mean creating and maintaining a whole separate CSS pipeline for what might just be a few rules. If you don't like this feature you're free to not use it in your projects.