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

Should not split media query blocks #20

Open steadicat opened 7 years ago

steadicat commented 7 years ago

Single media query blocks in the source JS are currently split up into multiple blocks, one per selector, in the output CSS. This creates larger files and also potentially slows down browser rendering.

var x = cssInJS({
  foo: { margin: 10 },
  bar: { border: '2px solid black' },
  baz: { padding: '0 20px' },
  '@media only screen and (min-width: 500px)': {
    foo: { margin: 5 },
    bar: { border: '1px solid black' },
    baz: { padding: '0 10px' },
  }
});

becomes:

{
  .foo { margin: 10px }
  @media only screen and (min-width: 500px) {
    .foo { margin: 5px }
  }
  .bar { border: 2px solid black }
  @media only screen and (min-width: 500px) {
    .bar { border: 1px solid black }
  }
  .baz { padding: 0 20px }
  @media only screen and (min-width: 500px) {
    .baz { padding: 0 10px }
  }
}

instead of:

{
  .foo { margin: 10px }
  .bar { border: 2px solid black }
  .baz { padding: 0 20px }
  @media only screen and (min-width: 500px) {
    .foo { margin: 5px }
    .bar { border: 1px solid black }
    .baz { padding: 0 10px }
  }
}