Currently babel-plugin-css-in-js
support some nested rules using global selectors $
, but they are very limited. I'm considering implementing nested rules for a universal case used in css pre-processes such as less and stylus. ( see the example below )
Component:
<div className={ st.box }>
<div className={ st.hiddenBtn }/>
</div>
css-in-js
const st = cssInJS({
box: {
color: 'red',
},
hiddenBtn: {
opacity: 0
},
// I want to follow Nested Rules
'box:hover': {
'.hiddenBtn': {
opacity: 1,
}
}
})
babel:
const st = {
box: 'dir_filename_js-styles-box',
hiddenBtn: 'dir_filename_js-styles-hiddenBtn'
}
css
.dir_filename_js-styles-box {
color: red;
}
.dir_filename_js-styles-hiddenBtn {
opacity: 0;
}
.dir_filename_js-styles-box:hover .dir_filename_js-styles-hiddenBtn {
opacity: 1;
}
[Image1]
In the First box
in Image1
.box .hiddenBtn
selector works well. But in the second box, .box .hiddenBtn
selector will select all .hiddenBtn
in the box.
it might be a bug. (Because developers always can write .box .hiddenBtn
selector instead of .box > .hiddenBtn
selector, I don't mention about .box > .hiddenBtn
selector here )
So I like the globally unique (randomized) className this plugin creates. Ever since I use this plugin, no matter how big the application was, there was no bug affected by the unintentional css rule. In order to keep this benefit, in nested rules, both box
and hiddenBtn
must be uniqued.
The global selector concept is great for theme, but I want to implement nested rules with a more universal concept that is used by other pre-processors that operate independently of the global selector nested rules.
Could I make some PR?