Comments (6)
SassNinja
commented on August 28, 2024
1
Brief update: as this requires a rework of how the CSS is internally saved I'm going to move the @supports support to the next major release (2.0.0)
from postcss-extract-media-query.
SassNinja
commented on August 28, 2024
Hi @stevepiron
thanks for reporting this issue!
The problem is I've only considered rules within @media and not atRules (such as @supports).
Seems my addToAtRules method needs some rework. I'll try to do this on the weekend.
p.s.
would be awesome if you gave the plugin a github star 😉
from postcss-extract-media-query.
stevepiron
commented on August 28, 2024
Alright, thanks!
Meanwhile, a workaround is to have @media wrapped by @supports instead of the other way around. Like so:
Good
@supports (display: grid) {
@media screen only and (min-width: 50em) {
grid-template-columns: 2fr repeat(3, 1fr);
}
}Bad
@media screen only and (min-width: 50em) {
@supports (display: grid) {
grid-template-columns: 2fr repeat(3, 1fr);
}
}from postcss-extract-media-query.
stevepiron
commented on August 28, 2024
Documenting an additional scenario that breaks the CSS output as well:
Input
/**
* 1. Fallback
* 2. Firefox
* 3. Other browsers that support env() and max()
*/
.o-wrapper {
padding: 0 2rem; /* [1] */
@supports (padding:calc(constant(safe-area-inset-left))) { /* [2] */
padding-left: calc(2rem + constant(safe-area-inset-left));
padding-right: calc(2rem + constant(safe-area-inset-right));
}
@supports (padding:calc(max(0px))) { /* [3] */
padding-left: calc(max(2rem, env(safe-area-inset-left)));
padding-right: calc(max(2rem, env(safe-area-inset-right)));
}
@media screen only and (min-width: 50em) { /* [1] */
padding-left: 5rem;
padding-right: 5rem;
}
@supports (padding:calc(constant(safe-area-inset-left))) { /* [2] */
@media screen only and (min-width: 50em) {
padding-left: calc(5rem + constant(safe-area-inset-left));
padding-right: calc(5rem + constant(safe-area-inset-right));
}
}
@supports (padding:calc(max(0px))) { /* [3] */
@media screen only and (min-width: 50em) {
padding-left: calc(max(5rem, env(safe-area-inset-left)));
padding-right: calc(max(5rem, env(safe-area-inset-right)));
}
}
}The idea here is to introduce safe-area-inset-left and safe-area-inset-right for gutters when browsing a site in landscape mode on a device featuring a notch (example: iPhone X).
I've tried the "workaround" I found and wrote about in my previous comment which is wrapping the media query with @supports (instead of doing it the other way around) but it doesn't seem to work when multiple @supports are used within the same file.
With such an input, here's the output I get:
Output: main.css (mobile styles)
.o-wrapper {
padding: 0 2rem;
padding-left: calc(max(2rem, env(safe-area-inset-left)));
padding-right: calc(max(2rem, env(safe-area-inset-right)));
}Output: only-screen-and-min-width-50em.css
@media only screen and (min-width: 50em) {
.o-wrapper {
padding-left: 5rem;
padding-right: 5rem
}
.o-wrapper {
padding-left: calc(5rem + constant(safe-area-inset-left));
padding-right: calc(5rem + constant(safe-area-inset-right))
}
.o-wrapper {
padding-left: calc(max(5rem,env(safe-area-inset-left)));
padding-right: calc(max(5rem,env(safe-area-inset-right)))
}
}☝️@supports are removed.
With a regular CSS input, I still don't get a good result:
Input
/**
* 1. Fallback
* 2. Firefox
* 3. Other browsers that support env() and max()
*/
.o-wrapper {
padding: 0 2rem; /* [1] */
}
@supports (padding:calc(constant(safe-area-inset-left))) { /* [2] */
.o-wrapper {
padding-left: calc(2rem + constant(safe-area-inset-left));
padding-right: calc(2rem + constant(safe-area-inset-right));
}
}
@supports (padding:calc(max(0px))) { /* [3] */
.o-wrapper {
padding-left: calc(max(2rem, env(safe-area-inset-left)));
padding-right: calc(max(2rem, env(safe-area-inset-right)));
}
}
@media only screen and (min-width: 50em) { /* [1] */
.o-wrapper {
padding-left: 5rem;
padding-right: 5rem;
}
}
@supports (padding:calc(constant(safe-area-inset-left))) { /* [2] */
@media only screen and (min-width: 50em) {
.o-wrapper {
padding-left: calc(5rem + constant(safe-area-inset-left));
padding-right: calc(5rem + constant(safe-area-inset-right));
}
}
}
@supports (padding:calc(max(0px))) { /* [3] */
@media only screen and (min-width: 50em) {
.o-wrapper {
padding-left: calc(max(5rem, env(safe-area-inset-left)));
padding-right: calc(max(5rem, env(safe-area-inset-right)));
}
}
}Output: main.css (mobile styles)
.o-wrapper {
padding: 0 2rem;
/* [1] */
}
@supports (padding: calc(constant(safe-area-inset-left))) {
/* [2] */
.o-wrapper {
padding-left: calc(2rem + constant(safe-area-inset-left));
padding-right: calc(2rem + constant(safe-area-inset-right));
}
}
@supports (padding: calc(max(0px))) {
/* [3] */
.o-wrapper {
padding-left: calc(max(2rem, env(safe-area-inset-left)));
padding-right: calc(max(2rem, env(safe-area-inset-right)));
}
}
@supports (padding: calc(constant(safe-area-inset-left))) {
/* [2] */
}
@supports (padding: calc(max(0px))) {
/* [3] */
}Output: only-screen-and-min-width-50em.css
@media only screen and (min-width: 50em) {
.o-wrapper {
padding-left: 5rem;
padding-right: 5rem
}
.o-wrapper {
padding-left: calc(5rem + constant(safe-area-inset-left));
padding-right: calc(5rem + constant(safe-area-inset-right))
}
.o-wrapper {
padding-left: calc(max(5rem,env(safe-area-inset-left)));
padding-right: calc(max(5rem,env(safe-area-inset-right)))
}
}from postcss-extract-media-query.
SassNinja
commented on August 28, 2024
@stevepiron it has taken a while... but now it should work for you (when you place @supports in @media)
from postcss-extract-media-query.
stevepiron
commented on August 28, 2024
@SassNinja I've received a bunch of notifications about it 😄 Thank you for fixing that!
from postcss-extract-media-query.
Related Issues (20)
- extractAll not working HOT 3
- Possibility to leave original file intact? HOT 2
- Keep the media in same file HOT 2
- extractAll query mismatch HOT 1
- media css files generated but default.css missing HOT 1
- README file suggests this approach has a bigger performance impact than it actually does HOT 2
- Duplicated a media rules in css HOT 7
- Rules get applied every time a new file is processed HOT 3
- Unknown error, different PostCSS versions HOT 1
- Is it possible to use several entries? HOT 2
- Proposal: attach processing to OnceExit hook
- Plugin + Foundation setup HOT 13
- Webpack & entrypoints.json HOT 2
- Sass files in dist folder (Using Vite example) HOT 1
- Not creating css file for all other styles HOT 1
- Omit media query in final output HOT 2
- Invalid PostCSS Plugin found HOT 3
- Can this be used to only combine media queries? HOT 1
- File naming gets confused if source file names have more than one dot in them HOT 1
- Multiple media queries into one file. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from postcss-extract-media-query.