csstools / postcss-nesting

Nest style rules inside each other

Home Page:https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Nesting issues 4.1.0

woble opened this issue · comments

commented

4.1.0 seems to solve most issues, but now something else doesn't work. Unsure if according with spec. It worked prior v3 though.

The following does not compile at all. Using postcss-selector-matches to unfold matches in the example; does not affect the postcss-nesting processing as & + & is expected to work.

li {
    color: cyan;

    /* Basic */
    & + & {
        color: tomato;
    }

    /* Complex */
    &:nth-last-child(n+2):matches(:first-child, :first-child ~ &) {
        color: red;
    }
}

Expected

li {
    color: cyan;
}

li + li {
    color: tomato;
}

li:nth-last-child(n+2):first-child,
li:nth-last-child(n+2):first-child ~ li {
    color: red;
}

This is on purpose, as & does not merely represent string concatenation. See this comment from the author of the spec: #17 (comment)

& + & is not invalid but meaningless according to the author (#17 (comment)). The idea is that & is not a selector but the element itself.

This opens to a case where

ol {
    @nest &.li + &.li {
        margin-top: 5px;
    }
}

should be valid as well as meaningful according to the spec. But as the author said (#17 (comment)), it is relatively rare and polyfilling this would need greater even expensive efforts, so we simply reject multiple & occurence in a complex selector.