cuth / cuth/postcss-pxtorem

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

Open
#86 6 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2.2k
Forks
173
PR merge metrics
No merged PRs in 30d

Description

Hello here!

Aside from the #79 issue for which there’s already a PR (#80), there’s no support for [`@supports`](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) nor [`@container` queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries#container-type_3).

For example, this `@supports` rule:

```css
@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

```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](https://github.com/cuth/postcss-pxtorem/blob/122649015322214f8e9d1ac852eb11c0791b634b/index.js#L175-L178), I assume only `@media` is currently supported.

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

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.