Skip to content
This repository was archived by the owner on Dec 28, 2021. It is now read-only.

Nesting issues 4.1.0 #46

Closed
woble opened this issue Aug 19, 2017 · 2 comments
Closed

Nesting issues 4.1.0 #46

woble opened this issue Aug 19, 2017 · 2 comments

Comments

@woble
Copy link

woble commented Aug 19, 2017

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;
}
@jonathantneal
Copy link
Collaborator

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

@JLHwung
Copy link
Contributor

JLHwung commented Aug 20, 2017

& + & 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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants