csstyle
csstyle copied to clipboard
Part nested under an option prints all components hierarchy
Given this markup
<div class="main">
<div class="module --title-at-right">
<div class="module__title">...</div>
</div>
</div>
And that SCSS
@include component(main) {
@include component(module) {
// standard title stay at the left
@include part(title) {
float: left;
}
// if module has the --title-at-right option,
// the title should stay at the right
@include option(title-at-right) {
@include part(title) {
float: right;
}
}
}
]
This compiled CSS outputs
.main .module_title {
float: left;
}
.main .module.\--title-at-right .main .module__title {
float: right;
}
But .main should not be nested under the .module component. The right result should be:
.main .module_title {
float: left;
}
.main .module.\--title-at-right .module__title {
float: right;
}
Nesting a part under a option should print only the first grade parent component, and not all hierarchy.
This is another case:
@include component(header) {
@include option(stick) {
@include component(addsearch) {
@include part(button) {
color: white;
}
}
}
}
Given output:
.header.\--stick .addsearch .header__button {
color: white;
}
Expected output:
.header.\--stick .addsearch__button {
color: white;
}