Skip to content

postcss-custom-media: avoid complex generated CSS in more cases #709

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 18, 2022
Merged

postcss-custom-media: avoid complex generated CSS in more cases #709

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
05869d8
postcss-custom-media: avoid complex generated CSS in more cases
romainmenke Nov 17, 2022
0f46f3c
undo
romainmenke Nov 17, 2022
ef81a46
fmt
romainmenke Nov 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/media-query-list-parser/src/nodes/media-condition.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export class MediaCondition {

media: MediaNot | MediaInParens | MediaConditionListWithAnd | MediaConditionListWithOr;

constructor(media: MediaNot | MediaInParens |MediaConditionListWithAnd | MediaConditionListWithOr) {
constructor(media: MediaNot | MediaInParens | MediaConditionListWithAnd | MediaConditionListWithOr) {
this.media = media;
}

Expand Down
4 changes: 4 additions & 0 deletions plugins/postcss-custom-media/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# Changes to PostCSS Custom Media

### Unreleased

- Fixed: avoid complex generated CSS when `@custom-media` contains only a single simple media feature.

### 9.0.0 (November 14, 2022)

- Updated: Support for Node v14+ (major).
Expand Down
25 changes: 24 additions & 1 deletion plugins/postcss-custom-media/src/transform-at-media/transform-at-media.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { alwaysTrue, neverTrue } from './always-true-or-false';
import { isGeneralEnclosed, isMediaAnd, isMediaConditionList, isMediaFeature, isMediaFeatureBoolean, isMediaNot, isMediaOr, isMediaQueryInvalid, isMediaQueryWithType, MediaQuery, newMediaFeaturePlain, parse } from '@csstools/media-query-list-parser';
import { isGeneralEnclosed, isMediaAnd, isMediaConditionList, isMediaFeature, isMediaFeatureBoolean, isMediaNot, isMediaOr, isMediaQueryInvalid, isMediaQueryWithType, MediaFeature, MediaQuery, newMediaFeaturePlain, parse } from '@csstools/media-query-list-parser';

export function transformAtMediaListTokens(params: string, replacements: Map<string, { truthy: Array<MediaQuery>, falsy: Array<MediaQuery> }>): Array<{ replaceWith: string, encapsulateWith?: string }> {
const mediaQueries = parse(params, {
Expand Down Expand Up @@ -104,6 +104,29 @@ export function transformComplexMediaQuery(mediaQuery: MediaQuery, replacements:

const replacement = replacements.get(name);
if (replacement) {

if (replacement.truthy.length === 1 && mediaQueryIsSimple(replacement.truthy[0])) {
let mediaFeature: MediaFeature | null = null;
const replacementMediaQuery = replacement.truthy[0];
replacementMediaQuery.walk((replacementEntry) => {
if (isMediaFeature(replacementEntry.node)) {
mediaFeature = replacementEntry.node;
return false;
}
});

if (mediaFeature && mediaFeature.feature) {
parent.feature = mediaFeature.feature;
candidate = [
{
replaceWith: mediaQuery.toString(),
},
];

return false;
}
}

const replaceWithTrue = newMediaFeaturePlain(
alwaysTrue[0][4].value as string,
alwaysTrue[2],
Expand Down
12 changes: 9 additions & 3 deletions plugins/postcss-custom-media/test/basic-after-v9.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,12 @@
}
}

@media (((--simple-feature-test))) {
.a {
order: 1.2;
}
}

/* Also a type condition */
@media screen and (--simple-feature-test) {
.a {
Expand All @@ -31,7 +37,7 @@
@custom-media --modern (color), (hover);

@media (--modern) and (width > 1024px) {
.a {
color: green;
}
.a {
color: green;
}
}
34 changes: 11 additions & 23 deletions plugins/postcss-custom-media/test/basic-after-v9.expect.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,54 +11,42 @@
}
}

/* Also a type condition */
@media (min-width: 300px) {
@media screen and (max-color:2147477350) {
.a {
order: 2;
order: 1.2;
}
}
}
@media not all and (min-width: 300px) {
@media screen and (color:2147477350) {

/* Also a type condition */
@media screen and (min-width: 300px) {
.a {
order: 2;
}
}
}

/* Negation */
@media (min-width: 300px) {
@media not (max-color:2147477350) {
@media not (min-width: 300px) {
.a {
order: 3;
}
}
}
@media not all and (min-width: 300px) {
@media not (color:2147477350) {
.a {
order: 3;
}
}
}

/* LightningCSS example */

@media (color),(hover) {

@media (max-color:2147477350) and (width > 1024px) {
.a {
color: green;
}
.a {
color: green;
}
}
}

@media not all and (color),not all and (hover) {

@media (color:2147477350) and (width > 1024px) {
.a {
color: green;
}
.a {
color: green;
}
}
}
44 changes: 19 additions & 25 deletions plugins/postcss-custom-media/test/basic-after-v9.preserve.expect.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,42 +24,36 @@
}
}

/* Also a type condition */
@media (min-width: 300px) {
@media screen and (max-color:2147477350) {
.a {
order: 2;
order: 1.2;
}
}

@media (((--simple-feature-test))) {
.a {
order: 1.2;
}
}
@media not all and (min-width: 300px) {
@media screen and (color:2147477350) {

/* Also a type condition */
@media screen and (min-width: 300px) {
.a {
order: 2;
}
}
}
@media screen and (--simple-feature-test) {
.a {
order: 2;
}
}

/* Negation */
@media (min-width: 300px) {
@media not (max-color:2147477350) {
@media not (min-width: 300px) {
.a {
order: 3;
}
}
}
@media not all and (min-width: 300px) {
@media not (color:2147477350) {
.a {
order: 3;
}
}
}
@media not (--simple-feature-test) {
.a {
order: 3;
Expand All @@ -72,23 +66,23 @@
@media (color),(hover) {

@media (max-color:2147477350) and (width > 1024px) {
.a {
color: green;
}
.a {
color: green;
}
}
}

@media not all and (color),not all and (hover) {

@media (color:2147477350) and (width > 1024px) {
.a {
color: green;
}
.a {
color: green;
}
}
}

@media (--modern) and (width > 1024px) {
.a {
color: green;
}
.a {
color: green;
}
}
38 changes: 1 addition & 37 deletions plugins/postcss-custom-media/test/basic.expect.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,47 +118,11 @@
}
}

@media (min-width: 320px) {

@media (max-width: 640px) {

@media (max-color:2147477350) and (max-color:2147477350) {
body {
order: 10;
}
}
}

@media not all and (max-width: 640px) {

@media (max-color:2147477350) and (color:2147477350) {
body {
order: 10;
}
}
}
}

@media not all and (min-width: 320px) {

@media (max-width: 640px) {

@media (color:2147477350) and (max-color:2147477350) {
body {
order: 10;
}
}
}

@media not all and (max-width: 640px) {

@media (color:2147477350) and (color:2147477350) {
@media (min-width: 320px) and (max-width: 640px) {
body {
order: 10;
}
}
}
}

@media (min-width: 320px) and (max-width: 640px) {
body {
Expand Down
66 changes: 3 additions & 63 deletions plugins/postcss-custom-media/test/complex.expect.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,85 +58,25 @@

@media only screen {

@media (width >= 570px) {

@media (max-color:2147477350) and (max-color:2147477350) {
body {
background-color: green;
}
}
}

@media not all and (width >= 570px) {

@media (max-color:2147477350) and (color:2147477350) {
@media (max-color:2147477350) and (width >= 570px) {
body {
background-color: green;
}
}
}
}

@media not screen {

@media (width >= 570px) {

@media (color:2147477350) and (max-color:2147477350) {
body {
background-color: green;
}
}
}

@media not all and (width >= 570px) {

@media (color:2147477350) and (color:2147477350) {
body {
background-color: green;
}
}
}
}

@media (width >= 570px) {

@media (width < 1000px) {

@media (max-color:2147477350) and (max-color:2147477350) {
body {
background-color: green;
}
}
}

@media not all and (width < 1000px) {

@media (max-color:2147477350) and (color:2147477350) {
body {
background-color: green;
}
}
}
}

@media not all and (width >= 570px) {

@media (width < 1000px) {

@media (color:2147477350) and (max-color:2147477350) {
@media (color:2147477350) and (width >= 570px) {
body {
background-color: green;
}
}
}

@media not all and (width < 1000px) {

@media (color:2147477350) and (color:2147477350) {
@media (width >= 570px) and (width < 1000px) {
body {
background-color: green;
}
}
}
}
/* #endregion https://github.com/csstools/postcss-custom-media/issues/51 */
Loading