cssinjs / jss

JSS is an authoring tool for CSS which uses JavaScript as a host language.
https://cssinjs.org
MIT License
7.08k stars 399 forks source link

Reference a $localrule in main scope #1443

Closed rickstaa closed 3 years ago

rickstaa commented 3 years ago

Is your feature request related to a problem? Please describe.

I'm currently trying to declare several shared properties for two commas separated classes:

A, B {
   height:  "40px"
},
A {
    color: "#fff"
}
B {
    color: "#000"
}

I tried using the $rulename operator to do this. While doing this, I noticed that the local rule operator does not seem to work when I use it in the main scope. However, the operator works when I put the or selection rule inside a parent root element (see image below). I was also able to get the desired behaviour using the extend operator.

image

Describe the solution you'd like

I expected the $rulename local rule operator to also work at the main scope.

Are you willing to implement it?

Yes/No: At the moment I think we have enough methods to achieve the desired behaviour. I just wanted to check if I am doing something wrong.

kof commented 3 years ago

$rulename was designed to reference parent rules inside the nested rules, what you wanted is like you said extend operator