Open
Description
Consider the following CSS:
.Block {
background: black;
@condition (width >= 100px) {
background: green;
}
&--blue {
@condition (width >= 100px) {
background: blue;
}
}
}
Assuming there's a .Block
and .Block .Block--blue
element, both buttons will switch to green if wider than 100px.
This is because as the algorithm resolves the styles, it get's to the following query in the JSON:
{
"selector": ".Block",
"queries": [{
"conditions": [
[
["width", ">=", 100]
]
],
"elements": [{
"selector": ".Block",
"styles": {
"background": "green"
}
}]
}{
"conditions": [
[
["width", ">=", 100]
]
],
"elements": [{
"selector": ".Block--blue",
"styles": {
"background": "blue"
}
}]
}]
}
Since the algorithm resolves from back-to-front, it'll first apply .Block--blue
's, then .Block
's styles.
That's how the green background gets applied last.