Support CSS nesting

[MoOx]

I am opening this issue just for people who want to follow the evolution of @tabatkins unofficial draft

http://tabatkins.github.io/specs/css-nesting/

If this become a official draft, we might consider adding this into @postcss parser and create a plugin to transform that.
We also might consider possible side effects.

[bloodyowl]

yeah … even if intuitively I'd advice against it, we need to support this if we're keeping cssnext's motto.
plus they're edge use-cases (like markup you don't control, code highlight, markdown parsed …)

[scottromack]

Please support this either way. it just makes sense!

[MoOx]

It seems like postcss already parse the snippet below (I just tested in the playground, it gives the same result without exception). Probably a good side effect of the parser.

div, p {
    font-size: 10px;
    {.keyword {color: green;}}
    {.constant {
      color: red;
      background-color: green;
      {&:hover::after { content: " [" attr(value) "]";}}
    }}
  }

So we should be able to handle that. We need to create a postcss-nesting and use it under stage 0 (ref #100)

[ai]

@MoOx awesome. And what AST is generated? Rule with empty selector?

[MoOx]

No idea, I will check that really soon and tell you :)

[crhallberg]

Would you be able to nest media queries according to your draft?

.column {
  width: 300px;
  {@media (max-width: 500px) {
    width: auto;
  }}
}

.column {width: 300px;}
@media (max-width: 500px) {
  .column {width: auto;}
}

[MoOx]

Probably more something like

.column {
  width: 300px;
  {@media (max-width: 500px) {&{
    width: auto;
  }}}
}

poke @tabatkins

[crhallberg]

Makes sense!

On Mon, Jun 15, 2015 at 4:32 PM, Maxime Thirouin notifications@github.com
wrote:

Probably more something like

.column {
width: 300px;
{@media (max-width: 500px) {&{
width: auto;
}}}
}

poke @tabatkins https://github.com/tabatkins

—
Reply to this email directly or view it on GitHub
#80 (comment).

[MoOx]

omg. @jonathantneal did it https://github.com/jonathantneal/postcss-nesting
Releasing it in 1.8.0 right now.