V6 Roadmap

[yisibl]

As more and more browsers support range syntax, the syntax of @media becomes complex and the current regular expression substitution pattern will become difficult to maintain.

For example, the following rules are valid in browsers.

@media (900px = width) {}
@media (900px < width) {}
@media (900px <= width)  {}
@media (900px <= width <= 1200px)  {}
@media ( width > calc(5px + 1rem) ) {}
@media ( width < calc(Infinity * 1px) ) {}
@media ( width > max(30px, 30em) ) {}
@media not (900px > width) {}
@media (width >= 900px) and (not (width = 910px)) {}
@media (width >= 500px) and ((499px > width) or (not (width = 500px))) {}

There are also new @container rules:

@container layout-name (width >= 500px) {}

So, consider a complete refactoring in the new version, adding a dedicated at rule parser to parse them. Perhaps a good place to start is to investigate css-tree in conjunction with PostCSS.

The postcss-media-minmax plugin is very popular, with over 6 million downloads per week. The refactoring will maintain better compatibility with browsers, which will be significant.

Feel free to discuss, PR or sponsor!

Related packages

• https://github.com/olsonpm/postcss-create-mq-ast
• https://github.com/dryoma/postcss-media-query-parser
• https://github.com/TrySound/postcss-value-parser

Spec issue

• https://github.com/w3c/csswg-drafts/issues/2791

[romainmenke]

We will wait with postcss-preset-env v8 until this is ready to ship and happy to help where possible!

As @Antonio-Laguna already hinted at, we really like this package and appreciate that it is getting a major update!

---

I recently started using postcss-value-parser for at-rule params and even passing parts to postcss-selector-parser (@supports selector(:has(...)))

This works fine for simple detection but quickly becomes a hassle and a specialised parser would be better.

[simevidas]

Would it be possible if the new version used inverted media queries to produce accurate conversions.

Input:

@media (width < 100px)

postcss-preset-env output:

@media (max-width: 99px)

This is of course not accurate because it does not cover widths between 99px and 100px.

However, there is a way to convert (width < 100px) to a syntax that is accurate and works in older browsers:

@​media not all and (min-width: 100px)

Source: https://ryanmulligan.dev/blog/invert-media-queries/

Have such inverted media queries been considered?

[romainmenke]

@yisibl this might be interesting for this update (if the swc integration is more trouble than it's worth). For @custom-media we also required a better way to analyse and mutate @media.

In the end we found that a tokenizer is sufficient for now : https://github.com/csstools/postcss-plugins/pull/627

The tokenizer hasn't been published yet and we hope to still create a parser for @media params specifically in the future.

[romainmenke]

@yisibl The tokenizer and media query parser are now finished and I am converting this plugin as a way to validate those packages.

Most things just work because nothing is regexp-based.

I am unsure if you are still actively working on V6? If you want I can refactor this plugin fully to use our parser.

---

Edit :

This is pretty much done.

• calc support
• fixed all issues related to incorrect or partial support of the range syntax
• fixed al issues related to incorrect transforms

Only thing not done is improving support for the <ratio> value type. I am also not changing anything to how numbers are increased/decreased because that is separate imho.