diff --git a/packages/media-query-list-parser/src/nodes/media-condition.ts b/packages/media-query-list-parser/src/nodes/media-condition.ts index 766c39eaf..187c9a70e 100644 --- a/packages/media-query-list-parser/src/nodes/media-condition.ts +++ b/packages/media-query-list-parser/src/nodes/media-condition.ts @@ -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; } diff --git a/plugins/postcss-custom-media/CHANGELOG.md b/plugins/postcss-custom-media/CHANGELOG.md index a16d2d9c4..1c1582760 100644 --- a/plugins/postcss-custom-media/CHANGELOG.md +++ b/plugins/postcss-custom-media/CHANGELOG.md @@ -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). diff --git a/plugins/postcss-custom-media/src/transform-at-media/transform-at-media.ts b/plugins/postcss-custom-media/src/transform-at-media/transform-at-media.ts index 65bea992a..7c9e23816 100644 --- a/plugins/postcss-custom-media/src/transform-at-media/transform-at-media.ts +++ b/plugins/postcss-custom-media/src/transform-at-media/transform-at-media.ts @@ -1,5 +1,19 @@ 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 { + MediaFeature, + MediaQuery, + isGeneralEnclosed, + isMediaAnd, + isMediaConditionList, + isMediaFeature, + isMediaFeatureBoolean, + isMediaNot, + isMediaOr, + isMediaQueryInvalid, + isMediaQueryWithType, + newMediaFeaturePlain, + parse, +} from '@csstools/media-query-list-parser'; export function transformAtMediaListTokens(params: string, replacements: Map, falsy: Array }>): Array<{ replaceWith: string, encapsulateWith?: string }> { const mediaQueries = parse(params, { @@ -104,6 +118,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], diff --git a/plugins/postcss-custom-media/test/basic-after-v9.css b/plugins/postcss-custom-media/test/basic-after-v9.css index 01fb549e9..cd54fd265 100644 --- a/plugins/postcss-custom-media/test/basic-after-v9.css +++ b/plugins/postcss-custom-media/test/basic-after-v9.css @@ -13,6 +13,12 @@ } } +@media (((--simple-feature-test))) { + .a { + order: 1.2; + } +} + /* Also a type condition */ @media screen and (--simple-feature-test) { .a { @@ -31,7 +37,7 @@ @custom-media --modern (color), (hover); @media (--modern) and (width > 1024px) { - .a { - color: green; - } + .a { + color: green; + } } diff --git a/plugins/postcss-custom-media/test/basic-after-v9.expect.css b/plugins/postcss-custom-media/test/basic-after-v9.expect.css index 6d01623fe..42fe24303 100644 --- a/plugins/postcss-custom-media/test/basic-after-v9.expect.css +++ b/plugins/postcss-custom-media/test/basic-after-v9.expect.css @@ -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; + } } } diff --git a/plugins/postcss-custom-media/test/basic-after-v9.preserve.expect.css b/plugins/postcss-custom-media/test/basic-after-v9.preserve.expect.css index 5fa31e9fd..1e8981ca6 100644 --- a/plugins/postcss-custom-media/test/basic-after-v9.preserve.expect.css +++ b/plugins/postcss-custom-media/test/basic-after-v9.preserve.expect.css @@ -24,21 +24,24 @@ } } -/* 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; @@ -46,20 +49,11 @@ } /* 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; @@ -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; + } } diff --git a/plugins/postcss-custom-media/test/basic.expect.css b/plugins/postcss-custom-media/test/basic.expect.css index 97d82e390..572710522 100644 --- a/plugins/postcss-custom-media/test/basic.expect.css +++ b/plugins/postcss-custom-media/test/basic.expect.css @@ -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 { diff --git a/plugins/postcss-custom-media/test/complex.expect.css b/plugins/postcss-custom-media/test/complex.expect.css index 792e80338..89246f1d3 100644 --- a/plugins/postcss-custom-media/test/complex.expect.css +++ b/plugins/postcss-custom-media/test/complex.expect.css @@ -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 */ diff --git a/plugins/postcss-custom-media/test/list.expect.css b/plugins/postcss-custom-media/test/list.expect.css index 3bf1138d3..a4f7ea7a2 100644 --- a/plugins/postcss-custom-media/test/list.expect.css +++ b/plugins/postcss-custom-media/test/list.expect.css @@ -44,38 +44,8 @@ } } -@media (min-width: 201px) { - -@media screen and (max-color:2147477350) { +@media screen and (min-width: 201px), not (min-width: 202px) { .b { order: 4; } } -} - -@media not all and (min-width: 201px) { - -@media screen and (color:2147477350) { - .b { - order: 4; - } -} -} - -@media (min-width: 202px) { - -@media not (max-color:2147477350) { - .b { - order: 4; - } -} -} - -@media not all and (min-width: 202px) { - -@media not (color:2147477350) { - .b { - order: 4; - } -} -} diff --git a/plugins/postcss-custom-media/test/true-false.expect.css b/plugins/postcss-custom-media/test/true-false.expect.css index 789755def..520b1b1f5 100644 --- a/plugins/postcss-custom-media/test/true-false.expect.css +++ b/plugins/postcss-custom-media/test/true-false.expect.css @@ -1,36 +1,14 @@ -@media (max-color:2147477350) {@media screen and (max-color:2147477350) { +@media screen and (max-color:2147477350) { .true { order: 1; } } -} - -@media not all and (max-color:2147477350) { - -@media screen and (color:2147477350) { - .true { - order: 1; - } -} -} - -@media (color:2147477350) { - -@media screen and (max-color:2147477350) { - .false { - order: 2; - } -} -} - -@media not all and (color:2147477350) { @media screen and (color:2147477350) { .false { order: 2; } } -} @media (max-color:2147477350) { .true {