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.

postcss-pxtorem/index.js

Lines 175 to 178 in 1226490

	if (opts.mediaQuery && atRule.name === "media") {
	if (atRule.params.indexOf("px") === -1) return;
	atRule.params = atRule.params.replace(pxRegex, pxReplace);
	}

[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. 🙏

[bronzehedwick]

Hi @meduzen, this issue has been open for a while, so not sure if you still have this need, or if this repo is being maintained at this point. I came across a need for this, and tried @hemengke1997's fork, but I did not see @container or @supports queries being transformed. I opened a PR to resolve. Reviews would be appreciated. Thanks!

[meduzen]

Hi @bronzehedwick, I personally don’t have the need, it was a need from previous work (helping a team to still deliver rem while writing px). I still think it’s a good one for teams that can’t or don’t want to embrace rem in their source code. 🤓

The PR looks good to me 👍. It lacks tests, thou.

[bronzehedwick]

It lacks tests, thou.

Thanks @meduzen, I appreciate it! I added tests.