geddski / csstyle

MOVED TO https://github.com/csstyle/csstyle a modern approach for crafting beautifully maintainable stylesheets
http://csstyle.io
Other
851 stars 34 forks source link

Part nested under an option prints all components hierarchy #43

Open f-liva opened 9 years ago

f-liva commented 9 years ago

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.

f-liva commented 9 years ago

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;
}