Support for vanilla CSS nesting

Scriptura commented 10 months ago

Good morning,

Let's say I'm looking to transpile this valid CSS4 code:

.justify {
  hyphens: auto;

  @media (width > 35.01em) {
    text-align: justify;
  }
}

postcss-csso won't process it because of nesting:

CssSyntaxError: postcss-csso: /var/www/scriptura.github.io/styles/development/typography.css:108:10: Colon is expected

  106 |   hyphens: auto;
  107 | 
> 108 |   @media (width > 35.01em) {
      |          ^
  109 |     text-align: justify;
  110 |   }

In the meantime, I'm using another transpiler which does the bare minimum (removal of white spaces) but which doesn't cause me any problems...

mrkeithy commented 6 months ago

similar issues with the & selector.

Scriptura commented 6 months ago

I abandoned the matter and moved on to something else... or rather I stayed with postcss-minify, with it I'm sure I never encountered a problem of this type.

I did not understand why the industrial world didn't massively move from SASS to PostCSS, since I moved to PostCSS I know: on paper the solution looks great, but in practice many PostCSS plugins don't work, are not maintained, the ecosystem is extremely fragile. Many essential plugins are only maintained by a single developer, if he decides to stop... (example: css-next)

I'm an amateur geek, so I use PostCSS for my personal projects, but if I were a professional I think I would accept the frustration of having to use SASS...

... Or rather more certainly in vanilla CSS. Indeed, in a context where native CSS allows variables (but not yet everywhere) and now nested, the air of pre/post processors is coming to an end.

lahmatiy / postcss-csso

Support for vanilla CSS nesting #33