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

add failing test case for nested selector #25

Closed lionelB closed 7 years ago

lionelB commented 7 years ago

hello

I open a PR to discuss the support of nested selector (issue #24) I propose to handle global nesting using a parent prop in the specification object that is generated

Another way to support that is to it like in sass, using & char 

cssInJS({
  foo: {
    '& .bar': {
      color: 'red'
    },
    '.bar &': {
      color: 'green'
    }
  }
})

should generate 

.foo .bar {
  color: red;
}
.bar .foo {
  color: green;
}

what do you prefer ? and given i'm pretty new to babel-plugin, is there a simpler solution ?

martinandert commented 7 years ago

Hi @lionelB, this looks good so far. I think handling global nesting using the parent prop you propose is the way to go.