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