Adopt a new (more css-friendly) syntax

[ZeeCoder]

Based on the discussion here: https://twitter.com/innovati/status/946155332719599622

The new proposed syntax (that'll be mostly adopted by eqcss too if everything goes well):

.Container {
  ...
}

@container .Container (width >= 320px) {
  .Element {
    ...
  }
}

(Whether the query's name will be @container or @element is not decided yet, so I'll support both for the time being.)

Where @container applies styles to elements inside the element, given by the selector.

The following should be possible too, although not BEM-like, and not encouraged by this particular project:

@container .some-selector .Container (width >= 320px) {
  .some-selector .Element {
    ...
  }
}

This makes the job of preprocessors slightly harder though, since it's a bit hard to decide where the boundary is between container-selector and element-selector.

Consider the following:

.wrapper {
    .Container {
        ...

        .another-selector {
            .Element {
                @container (width >= 320px) {
                    ...
                }
            }
        }
    }
}

With @media queries, a prerpocessor would lift the media query on the top level, wrapping everything else inside, which is however not the desired result for us:

// This is wrong!
@container (width >= 320px) {
    .wrapper .Container .another-selector .Element {
        ...
    }
}

Even if preprocessors do handle @container queries differently, they have no way of telling at which point the container selector begin and end.

Maybe the following is the closest to a solution:

.wrapper {
    .Container {
        ...

        @container (width >= 320px) {
            .another-selector {
                .Element {

                }
            }
        }
    }
}

Here preprocessors can assume that everything outside a @container query is the container selector, and needs to be put in between the query keyword and the conditions, and anything inside would be element / child selectors. Resulting in:

// This is correct!
@container .wrapper .Container (width >= 320px) {
  .another-selector .Element {
    ...
  }
}

[ZeeCoder]

with a postcss plugin, the current syntax could be used as-is too, if the selector part after @container is auto-injected before processing.

[ZeeCoder]

Once this is done, the documentation needs to change to present the simpler syntax, and not the nested one. The latter would also need more thorough documentation, since I think it's not highlighted that postcss-nested would need to be set up with the bubble option. Otherwise it wouldn't process @container queries, and silently fail instead.