Open yisibl opened 2 years ago
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.
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?
@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.
@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
supportOnly 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.
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.
There are also new
@container
rules: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
Spec issue