feat: Support media queries in optional modes

src/__fixtures__/common.ts

@@ -29,7 +29,7 @@ export const colorMode: Mode = {
   id: 'color',
   states: {
     light: { default: true },
-    dark: { selector: '.dark' },
+    dark: { selector: '.dark', media: 'not print' },
   },
 };
 

src/build/tasks/__tests__/__snapshots__/preset.test.ts.snap

@@ -138,7 +138,8 @@ exports[`renderCJSPreset matches previous snapshot 1`] = `
             \\"default\\": true
           },
           \\"dark\\": {
-            \\"selector\\": \\".dark\\"
+            \\"selector\\": \\".dark\\",
+            \\"media\\": \\"not print\\"
           }
         }
       },
@@ -343,7 +344,8 @@ exports[`renderPreset matches previous snapshot 1`] = `
             \\"default\\": true
           },
           \\"dark\\": {
-            \\"selector\\": \\".dark\\"
+            \\"selector\\": \\".dark\\",
+            \\"media\\": \\"not print\\"
           }
         }
       },

src/shared/declaration/__tests__/__snapshots__/index.test.ts.snap

@@ -27,12 +27,12 @@ exports[`renderDeclarations includes secondary theme 1`] = `
 .compact{
 	--scaledSize-css:1px;
 }
-.dark{
+@media not print {.dark{
 	--shadow-css:black;
 	--buttonShadow-css:black;
 	--boxShadow-css:brown;
 	--lineShadow-css:brown;
-}
+}}
 .disabled-motion{
 	--appear-css:0;
 }
@@ -42,26 +42,26 @@ exports[`renderDeclarations includes secondary theme 1`] = `
 	--boxShadow-css:purple;
 	--lineShadow-css:black;
 }
-.dark .navigation{
+@media not print {.dark .navigation{
 	--shadow-css:brown;
 	--buttonShadow-css:brown;
 	--lineShadow-css:purple;
-}
-.dark.navigation{
+}}
+@media not print {.dark.navigation{
 	--shadow-css:brown;
 	--buttonShadow-css:brown;
 	--lineShadow-css:purple;
-}
+}}
 .secondary-theme{
 	--black-css:purple;
 	--brown-css:black;
 }
-.dark.secondary-theme{
+@media not print {.dark.secondary-theme{
 	--shadow-css:purple;
 	--buttonShadow-css:purple;
 	--boxShadow-css:black;
 	--lineShadow-css:black;
-}
+}}
 .secondary-theme .navigation{
 	--shadow-css:purple;
 	--buttonShadow-css:purple;
@@ -72,17 +72,17 @@ exports[`renderDeclarations includes secondary theme 1`] = `
 	--buttonShadow-css:purple;
 	--lineShadow-css:purple;
 }
-.dark.secondary-theme .navigation{
+@media not print {.dark.secondary-theme .navigation{
 	--shadow-css:grey;
 	--buttonShadow-css:grey;
 	--boxShadow-css:black;
 	--lineShadow-css:black;
-}
-.dark.navigation.secondary-theme{
+}}
+@media not print {.dark.navigation.secondary-theme{
 	--shadow-css:grey;
 	--buttonShadow-css:grey;
 	--lineShadow-css:black;
-}"
+}}"
 `;
 
 exports[`renderDeclarations renders declarations for theme with :root selector and context 1`] = `
@@ -106,12 +106,12 @@ exports[`renderDeclarations renders declarations for theme with :root selector a
 :global .compact{
 	--scaledSize-css:1px;
 }
-:global .dark{
+@media not print {:global .dark{
 	--shadow-css:black;
 	--buttonShadow-css:black;
 	--boxShadow-css:brown;
 	--lineShadow-css:brown;
-}
+}}
 :global .disabled-motion{
 	--appear-css:0;
 }
@@ -121,16 +121,16 @@ exports[`renderDeclarations renders declarations for theme with :root selector a
 	--boxShadow-css:purple;
 	--lineShadow-css:black;
 }
-:global .dark .navigation{
+@media not print {:global .dark .navigation{
 	--shadow-css:brown;
 	--buttonShadow-css:brown;
 	--lineShadow-css:purple;
-}
-:global .dark.navigation{
+}}
+@media not print {:global .dark.navigation{
 	--shadow-css:brown;
 	--buttonShadow-css:brown;
 	--lineShadow-css:purple;
-}"
+}}"
 `;
 
 exports[`renderDeclarations renders declarations for theme with non :root selector 1`] = `
@@ -154,12 +154,12 @@ exports[`renderDeclarations renders declarations for theme with non :root select
 .compact.secondary-theme{
 	--scaledSize-css:1px;
 }
-.dark.secondary-theme{
+@media not print {.dark.secondary-theme{
 	--shadow-css:purple;
 	--buttonShadow-css:purple;
 	--boxShadow-css:black;
 	--lineShadow-css:black;
-}
+}}
 .disabled-motion.secondary-theme{
 	--appear-css:0;
 }
@@ -175,16 +175,16 @@ exports[`renderDeclarations renders declarations for theme with non :root select
 	--boxShadow-css:purple;
 	--lineShadow-css:purple;
 }
-.dark.secondary-theme .navigation{
+@media not print {.dark.secondary-theme .navigation{
 	--shadow-css:grey;
 	--buttonShadow-css:grey;
 	--boxShadow-css:black;
 	--lineShadow-css:black;
-}
-.dark.navigation.secondary-theme{
+}}
+@media not print {.dark.navigation.secondary-theme{
 	--shadow-css:grey;
 	--buttonShadow-css:grey;
 	--boxShadow-css:black;
 	--lineShadow-css:black;
-}"
+}}"
 `;

src/shared/declaration/multi.ts

@@ -68,7 +68,7 @@ export class MultiThemeCreator extends AbstractCreator implements StylesheetCrea
       const optionalState = mode.states[state] as OptionalState;
       const modeResolution = reduce(secondaryResolution, secondary, modeReducer(mode, state));
       const modeRule = this.ruleCreator.create(
-        { global: [secondary.selector, optionalState.selector] },
+        { global: [secondary.selector, optionalState.selector], media: optionalState.media },
         modeResolution
       );
       const parentModeRule = stylesheet.findRule(
@@ -119,6 +119,7 @@ export class MultiThemeCreator extends AbstractCreator implements StylesheetCrea
         {
           global: [secondary.selector, optionalState.selector],
           local: [context.selector],
+          media: optionalState.media,
         },
         contextResolution
       );
@@ -159,6 +160,7 @@ export class MultiThemeCreator extends AbstractCreator implements StylesheetCrea
       const contextAndModeRuleGlobal = this.ruleCreator.create(
         {
           global: [secondary.selector, optionalState.selector, context.selector],
+          media: optionalState.media,
         },
         contextResolution
       );

src/shared/declaration/rule.ts

@@ -9,6 +9,7 @@ import { SpecificResolution } from '../theme';
 export interface SelectorConfig {
   global: string[];
   local?: string[];
+  media?: string;
 }
 export class RuleCreator {
   selector: Selector;
@@ -20,7 +21,7 @@ export class RuleCreator {
   }
 
   create(config: SelectorConfig, resolution: SpecificResolution): Rule {
-    const rule = new Rule(this.selectorFor(config));
+    const rule = new Rule(this.selectorFor(config), config.media);
     entries(resolution).forEach(([token, value]) => {
       const property = this.registry.get(token);
       if (property) {

src/shared/declaration/single.ts

@@ -37,8 +37,9 @@ export class SingleThemeCreator extends AbstractCreator implements StylesheetCre
 
     SingleThemeCreator.forEachOptionalModeState(this.theme, (mode, state) => {
       const modeResolution = reduce(this.resolution, this.theme, modeReducer(mode, state));
+      const stateDetails = mode.states[state] as OptionalState;
       const modeRule = this.ruleCreator.create(
-        { global: [this.theme.selector, (mode.states[state] as OptionalState).selector] },
+        { global: [this.theme.selector, stateDetails.selector], media: stateDetails.media },
         modeResolution
       );
       SingleThemeCreator.appendRuleToStylesheet(stylesheet, modeRule, [rootRule]);
@@ -61,8 +62,9 @@ export class SingleThemeCreator extends AbstractCreator implements StylesheetCre
 
     SingleThemeCreator.forEachContextWithinOptionalModeState(this.theme, (context, mode, state) => {
       const contextResolution = reduce(resolveContext(this.theme, context), this.theme, modeReducer(mode, state));
+      const stateDetails = mode.states[state] as OptionalState;
       const contextAndModeRule = this.ruleCreator.create(
-        { global: [this.theme.selector, (mode.states[state] as OptionalState).selector], local: [context.selector] },
+        { global: [this.theme.selector, stateDetails.selector], local: [context.selector], media: stateDetails.media },
         contextResolution
       );
       const contextRule = stylesheet.findRule(
@@ -84,7 +86,7 @@ export class SingleThemeCreator extends AbstractCreator implements StylesheetCre
       );
 
       const contextRuleAndModeRuleGlobal = this.ruleCreator.create(
-        { global: [this.theme.selector, (mode.states[state] as OptionalState).selector, context.selector] },
+        { global: [this.theme.selector, stateDetails.selector, context.selector], media: stateDetails.media },
         contextResolution
       );
       SingleThemeCreator.appendRuleToStylesheet(

src/shared/declaration/stylesheet.ts

@@ -55,11 +55,13 @@ export default class Stylesheet {
 
 export class Rule {
   selector: string;
+  media?: string;
   declarationsMap: Map<string, [Declaration, number]> = new Map();
   counter = 0;
 
-  constructor(selector: string) {
+  constructor(selector: string, media?: string) {
     this.selector = selector;
+    this.media = media;
   }
 
   appendDeclaration(declaration: Declaration) {
@@ -81,7 +83,11 @@ export class Rule {
 
   toString(): string {
     const lines = asValuesArray(this.declarationsMap).map((decl) => decl.toString());
-    return `${this.selector}{\n\t${lines.join('\n\t')}\n}`;
+    const rule = `${this.selector}{\n\t${lines.join('\n\t')}\n}`;
+    if (this.media) {
+      return `@media ${this.media} {${rule}}`;
+    }
+    return rule;
   }
 }
 

src/shared/theme/__tests__/__snapshots__/merge.test.ts.snap

@@ -28,6 +28,7 @@ Object {
       "id": "color",
       "states": Object {
         "dark": Object {
+          "media": "not print",
           "selector": ".dark",
         },
         "light": Object {

src/shared/theme/interfaces.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 export interface OptionalState {
   selector: string;
+  media?: string;
 }
 
 export interface DefaultState {