search

postcss / postcss-nested

PostCSS plugin to unwrap nested rules like how Sass does it.
MIT License
1.15k stars 66 forks source link

@at-root combined with & (ampersand) #150

Closed davyrolink closed 1 year ago

davyrolink commented 1 year ago

I encountered a problem when converting a Sass project to Postcss-nested.

SCSS input:

.a {
    @at-root {
        .b & {
            color: lime;
        }
    }
}

Postcss-nested output:

.b & {
    color: lime;
}

Expected (Sass) output:

.b .a {
    color: lime;
}

I'm using the latest available version of Postcss-nested, 6.0.0

ai commented 1 year ago

This example looks broken. What is a reason to move on the root if you are using &?

Maybe we should throw an error instead?

ai commented 1 year ago

Note, that we don't guarantee any Sass compatibility.

davyrolink commented 1 year ago

It's an extremely shortened example of some legacy code. We will refactor the legacy code in these cases, but maybe it's useful for others to write a short line in the readme. It would be good to documented it somewhere, to make it clear that there are some differences to be expected. Thanks for the quick reply and your work on these projects!

ai commented 1 year ago

I think it is better to add docs. Do you have an idea how to say it?

davyrolink commented 1 year ago

I'm not a native speaker, but maybe something like: The behaviour of @at-root isn't fully Sass compatible, e.g. using a parent-selector as the direct child of the @at-root rule is not supported at the moment.

ai commented 1 year ago

Too long. Users need to be focused on important information and this case is too rare to spend space on it.

I changed text a little a5a8b49