feat: Support media queries in optional modes

cloudscape-design · Jun 9, 2023 · a599dc6 · a599dc6
1 parent eab1f5d
commit a599dc6
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 52 deletions.
diff --git a/src/__fixtures__/common.ts b/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' },
   },
 };
 

diff --git a/src/browser/__tests__/__snapshots__/index.test.ts.snap b/src/browser/__tests__/__snapshots__/index.test.ts.snap
@@ -30,7 +30,7 @@ exports[`with baseThemeId attaches one style node containing overrides with the
 	--containerShadowBase-css:2px 3px orange, -1px 0 8px olive;
 	--modalShadowContainer-css:2px 3px orange, -1px 0 8px olive;
 }
-.dark.dark.secondary-theme:not(#\\\\9){
+@media not print {.dark.dark.secondary-theme:not(#\\\\9){
 	--fontFamilyBase-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--fontFamilyBody-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--black-css:purple;
@@ -44,7 +44,7 @@ exports[`with baseThemeId attaches one style node containing overrides with the
 	--medium-css:3px;
 	--containerShadowBase-css:2px 3px orange, -1px 0 8px olive;
 	--modalShadowContainer-css:2px 3px orange, -1px 0 8px olive;
-}
+}}
 .disabled-motion.disabled-motion.secondary-theme:not(#\\\\9){
 	--fontFamilyBase-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--fontFamilyBody-css:\\"Helvetica Neue\\", Arial, sans-serif;
@@ -115,7 +115,7 @@ exports[`with baseThemeId attaches one style node containing overrides with the
 	--containerShadowBase-css:2px 3px orange, -1px 0 8px olive;
 	--modalShadowContainer-css:2px 3px orange, -1px 0 8px olive;
 }
-.dark.dark.secondary-theme .navigation:not(#\\\\9){
+@media not print {.dark.dark.secondary-theme .navigation:not(#\\\\9){
 	--fontFamilyBase-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--fontFamilyBody-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--black-css:purple;
@@ -129,8 +129,8 @@ exports[`with baseThemeId attaches one style node containing overrides with the
 	--medium-css:3px;
 	--containerShadowBase-css:2px 3px orange, -1px 0 8px olive;
 	--modalShadowContainer-css:2px 3px orange, -1px 0 8px olive;
-}
-.dark.dark.navigation.secondary-theme:not(#\\\\9){
+}}
+@media not print {.dark.dark.navigation.secondary-theme:not(#\\\\9){
 	--fontFamilyBase-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--fontFamilyBody-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--black-css:purple;
@@ -144,7 +144,7 @@ exports[`with baseThemeId attaches one style node containing overrides with the
 	--medium-css:3px;
 	--containerShadowBase-css:2px 3px orange, -1px 0 8px olive;
 	--modalShadowContainer-css:2px 3px orange, -1px 0 8px olive;
-}
+}}
 .disabled-motion.disabled-motion.secondary-theme .navigation:not(#\\\\9){
 	--fontFamilyBase-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--fontFamilyBody-css:\\"Helvetica Neue\\", Arial, sans-serif;
@@ -201,7 +201,7 @@ exports[`with secondary theme attaches one style node containing override 1`] =
 	--containerShadowBase-css:2px 3px orange, -1px 0 8px olive;
 	--modalShadowContainer-css:2px 3px orange, -1px 0 8px olive;
 }
-.dark.dark:not(#\\\\9){
+@media not print {.dark.dark:not(#\\\\9){
 	--fontFamilyBase-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--fontFamilyBody-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--black-css:black;
@@ -215,7 +215,7 @@ exports[`with secondary theme attaches one style node containing override 1`] =
 	--medium-css:3px;
 	--containerShadowBase-css:2px 3px orange, -1px 0 8px olive;
 	--modalShadowContainer-css:2px 3px orange, -1px 0 8px olive;
-}
+}}
 .disabled-motion.disabled-motion:not(#\\\\9){
 	--fontFamilyBase-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--fontFamilyBody-css:\\"Helvetica Neue\\", Arial, sans-serif;
@@ -269,7 +269,7 @@ exports[`with secondary theme attaches one style node containing override 1`] =
 	--containerShadowBase-css:2px 3px orange, -1px 0 8px olive;
 	--modalShadowContainer-css:2px 3px orange, -1px 0 8px olive;
 }
-.dark.dark .navigation:not(#\\\\9){
+@media not print {.dark.dark .navigation:not(#\\\\9){
 	--fontFamilyBase-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--fontFamilyBody-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--black-css:black;
@@ -283,8 +283,8 @@ exports[`with secondary theme attaches one style node containing override 1`] =
 	--medium-css:3px;
 	--containerShadowBase-css:2px 3px orange, -1px 0 8px olive;
 	--modalShadowContainer-css:2px 3px orange, -1px 0 8px olive;
-}
-.dark.dark.navigation:not(#\\\\9){
+}}
+@media not print {.dark.dark.navigation:not(#\\\\9){
 	--fontFamilyBase-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--fontFamilyBody-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--black-css:black;
@@ -298,7 +298,7 @@ exports[`with secondary theme attaches one style node containing override 1`] =
 	--medium-css:3px;
 	--containerShadowBase-css:2px 3px orange, -1px 0 8px olive;
 	--modalShadowContainer-css:2px 3px orange, -1px 0 8px olive;
-}
+}}
 .disabled-motion.disabled-motion .navigation:not(#\\\\9){
 	--fontFamilyBase-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--fontFamilyBody-css:\\"Helvetica Neue\\", Arial, sans-serif;
@@ -355,7 +355,7 @@ exports[`without secondary theme attaches one style node containing override 1`]
 	--containerShadowBase-css:2px 3px orange, -1px 0 8px olive;
 	--modalShadowContainer-css:2px 3px orange, -1px 0 8px olive;
 }
-.dark.dark:not(#\\\\9){
+@media not print {.dark.dark:not(#\\\\9){
 	--fontFamilyBase-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--fontFamilyBody-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--black-css:black;
@@ -369,7 +369,7 @@ exports[`without secondary theme attaches one style node containing override 1`]
 	--medium-css:3px;
 	--containerShadowBase-css:2px 3px orange, -1px 0 8px olive;
 	--modalShadowContainer-css:2px 3px orange, -1px 0 8px olive;
-}
+}}
 .disabled-motion.disabled-motion:not(#\\\\9){
 	--fontFamilyBase-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--fontFamilyBody-css:\\"Helvetica Neue\\", Arial, sans-serif;
@@ -423,7 +423,7 @@ exports[`without secondary theme attaches one style node containing override 1`]
 	--containerShadowBase-css:2px 3px orange, -1px 0 8px olive;
 	--modalShadowContainer-css:2px 3px orange, -1px 0 8px olive;
 }
-.dark.dark .navigation:not(#\\\\9){
+@media not print {.dark.dark .navigation:not(#\\\\9){
 	--fontFamilyBase-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--fontFamilyBody-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--black-css:black;
@@ -437,8 +437,8 @@ exports[`without secondary theme attaches one style node containing override 1`]
 	--medium-css:3px;
 	--containerShadowBase-css:2px 3px orange, -1px 0 8px olive;
 	--modalShadowContainer-css:2px 3px orange, -1px 0 8px olive;
-}
-.dark.dark.navigation:not(#\\\\9){
+}}
+@media not print {.dark.dark.navigation:not(#\\\\9){
 	--fontFamilyBase-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--fontFamilyBody-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--black-css:black;
@@ -452,7 +452,7 @@ exports[`without secondary theme attaches one style node containing override 1`]
 	--medium-css:3px;
 	--containerShadowBase-css:2px 3px orange, -1px 0 8px olive;
 	--modalShadowContainer-css:2px 3px orange, -1px 0 8px olive;
-}
+}}
 .disabled-motion.disabled-motion .navigation:not(#\\\\9){
 	--fontFamilyBase-css:\\"Helvetica Neue\\", Arial, sans-serif;
 	--fontFamilyBody-css:\\"Helvetica Neue\\", Arial, sans-serif;

diff --git a/src/build/tasks/__tests__/__snapshots__/preset.test.ts.snap b/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\\"
           }
         }
       },

diff --git a/src/shared/declaration/__tests__/__snapshots__/index.test.ts.snap b/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;
-}"
+}}"
 `;
diff --git a/src/shared/declaration/multi.ts b/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
       );

diff --git a/src/shared/declaration/rule.ts b/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) {

diff --git a/src/shared/declaration/single.ts b/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(