Feature request: support at-rules `@supports` and `@container`

[meduzen]

Hello here!

Aside from the #79 issue for which there’s already a PR (#80), there’s no support for @supports nor @container queries.

For example, this @supports rule:

@supports (top: max(0px)) {
  .btn {
    bottom: max(calc(var(--safe-bottom)), calc(var(--some-var, 10px) - 10px));
    left: max(calc(var(--safe-left)), calc(var(--some-var, 10px) - 10px));
  }
}

outputs the following CSS

@supports (top: max(0px)) {
.btn {
    bottom: max(calc(var(--safe-bottom)), calc(var(--some-var, 10px) - 0.625rem));
    left: max(calc(var(--safe-left)), calc(var(--some-var, 10px) - 0.625rem));
}

I haven’t tested container queries, but according to that part of the code, I assume only @media is currently supported.

https://github.com/cuth/postcss-pxtorem/blob/122649015322214f8e9d1ac852eb11c0791b634b/index.js#L175-L178

[hemengke1997]

maybe ouput should be:

@supports (top: max(0px)) {
.btn {
    bottom: max(calc(var(--safe-bottom)), calc(var(--some-var, 0.625rem) - 0.625rem));
    left: max(calc(var(--safe-left)), calc(var(--some-var, 0.625rem) - 0.625rem));
}

BTW, you could try https://github.com/hemengke1997/postcss-pxtorem. Because this repo does not seem to be maintained for a long time

[meduzen-immoweb]

Thanks @hemengke1997 for taking over with your fork. I’m trying it now and it looks promising. 🙏