feat(config): support selectors and media queries

Allow specification of selectors or media queries themes are valid during re #63 re #47
RyanClementsHax · May 9, 2023 · b9cb9e4 · b9cb9e4
1 parent 2eca7d1
commit b9cb9e4
Show file tree

Hide file tree

Showing 4 changed files with 218 additions and 6 deletions.
diff --git a/src/index.spec.ts b/src/index.spec.ts
@@ -54,8 +54,54 @@ describe('multiThemePlugin', () => {
         )
       }
     })
+  })
+
+  describe('styles', () => {
+    let api: PluginAPI
+
+    beforeEach(() => {
+      api = mock<PluginAPI>({
+        e: jest.fn(x => `escaped-${x}`),
+        theme: jest.fn(x => x) as PluginAPI['theme']
+      })
+    })
 
     it('adds the custom vars for each theme', () => {
+      const config: MultiThemePluginOptions = {
+        defaultTheme: {
+          extend: {
+            colors: {
+              primary: 'thing'
+            }
+          }
+        },
+        themes: [
+          {
+            name: 'dark',
+            extend: {
+              colors: {
+                primary: 'another',
+                secondary: 'something'
+              },
+              spacing: {
+                '0.5': '10px'
+              }
+            }
+          },
+          {
+            name: 'neon',
+            extend: {
+              colors: {
+                primary: 'another',
+                secondary: 'something'
+              },
+              spacing: {
+                '0.5': '10px'
+              }
+            }
+          }
+        ]
+      }
       multiThemePlugin(config).handler(api)
 
       expect(api.addBase).toHaveBeenCalledWith({
@@ -73,6 +119,146 @@ describe('multiThemePlugin', () => {
         })
       }
     })
+
+    it('adds the custom vars for each theme using selectors if provided', () => {
+      const config: MultiThemePluginOptions = {
+        defaultTheme: {
+          extend: {
+            colors: {
+              primary: 'thing'
+            }
+          }
+        },
+        themes: [
+          {
+            name: 'dark',
+            selectors: ['.dark-mode', '[data-theme="dark"]'],
+            extend: {
+              colors: {
+                primary: 'first'
+              }
+            }
+          },
+          {
+            name: 'neon',
+            selectors: ['.high-contrast', '[data-theme="high-contrast"]'],
+            extend: {
+              colors: {
+                primary: 'second'
+              }
+            }
+          }
+        ]
+      }
+
+      multiThemePlugin(config).handler(api)
+
+      expect(api.addBase).toHaveBeenCalledWith({
+        '.dark-mode, [data-theme="dark"]': {
+          '--colors-primary': 'first'
+        }
+      })
+      expect(api.addBase).toHaveBeenCalledWith({
+        '.high-contrast, [data-theme="high-contrast"]': {
+          '--colors-primary': 'second'
+        }
+      })
+    })
+
+    it('doesnt add a style when no selectors given', () => {
+      const config: MultiThemePluginOptions = {
+        defaultTheme: {
+          extend: {
+            colors: {
+              primary: 'thing'
+            }
+          }
+        },
+        themes: [
+          {
+            name: 'dark',
+            selectors: [],
+            extend: {
+              colors: {
+                primary: 'first'
+              }
+            }
+          }
+        ]
+      }
+
+      multiThemePlugin(config).handler(api)
+
+      expect(api.addBase).toHaveBeenCalledWith({
+        ':root': {
+          '--colors-primary': 'thing'
+        }
+      })
+      expect(api.addBase).toHaveBeenCalledTimes(1)
+    })
+
+    it('adds a media query if one given', () => {
+      const config: MultiThemePluginOptions = {
+        defaultTheme: {
+          extend: {
+            colors: {
+              primary: 'thing'
+            }
+          }
+        },
+        themes: [
+          {
+            name: 'dark',
+            selectors: ['[data-theme="dark"]'],
+            mediaQuery: '@media (prefers-color-scheme: dark)',
+            extend: {
+              colors: {
+                primary: 'first'
+              }
+            }
+          }
+        ]
+      }
+
+      multiThemePlugin(config).handler(api)
+
+      expect(api.addBase).toHaveBeenCalledWith({
+        '@media (prefers-color-scheme: dark)': {
+          ':root': {
+            '--colors-primary': 'first'
+          }
+        }
+      })
+    })
+
+    it('does not a media query if none given', () => {
+      const config: MultiThemePluginOptions = {
+        defaultTheme: {
+          extend: {
+            colors: {
+              primary: 'thing'
+            }
+          }
+        },
+        themes: [
+          {
+            name: 'dark',
+            selectors: ['[data-theme="dark"]'],
+            extend: {
+              colors: {
+                primary: 'first'
+              }
+            }
+          }
+        ]
+      }
+
+      multiThemePlugin(config).handler(api)
+
+      expect(api.addBase).not.toHaveBeenCalledWith({
+        '@media (prefers-color-scheme: dark)': expect.anything()
+      })
+    })
   })
 
   describe('config', () => {

diff --git a/src/index.ts b/src/index.ts
@@ -40,11 +40,20 @@ const addThemeVariants = (
  */
 const addThemeStyles = (themes: ThemeConfig[], api: PluginAPI): void => {
   const { addBase, e } = api
-  themes.forEach(({ name, extend }) => {
-    addBase({
-      [name === defaultThemeName ? ':root' : `.${e(name)}`]:
-        resolveThemeExtensionAsCustomProps(extend, api)
-    })
+  themes.forEach(({ name, selectors, extend, mediaQuery }) => {
+    selectors ??= name === defaultThemeName ? [':root'] : [`.${e(name)}`]
+    if (selectors.length > 0) {
+      addBase({
+        [selectors.join(', ')]: resolveThemeExtensionAsCustomProps(extend, api)
+      })
+    }
+    if (mediaQuery) {
+      addBase({
+        [mediaQuery]: {
+          ':root': resolveThemeExtensionAsCustomProps(extend, api)
+        }
+      })
+    }
   })
 }
 

diff --git a/src/utils/optionsUtils.spec.ts b/src/utils/optionsUtils.spec.ts
@@ -107,5 +107,16 @@ describe('themeUtils', () => {
         })
       ).toThrow()
     })
+
+    it('throws an error if the default theme has a selectors array', () => {
+      expect(() =>
+        validateOptions({
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-expect-error
+          defaultTheme: { selectors: ['default'], extend: {} },
+          themes: [{ name: defaultThemeName, extend: {} }]
+        })
+      ).toThrow()
+    })
   })
 })
diff --git a/src/utils/optionsUtils.ts b/src/utils/optionsUtils.ts
@@ -3,10 +3,12 @@ import { TailwindExtension } from '../config'
 
 export interface ThemeConfig {
   name: string
+  selectors?: string[]
+  mediaQuery?: string
   extend: TailwindExtension
 }
 
-export type DefaultThemeConfig = Omit<ThemeConfig, 'name'>
+export type DefaultThemeConfig = Omit<ThemeConfig, 'name' | 'selectors'>
 
 export interface MultiThemePluginOptions {
   defaultTheme?: DefaultThemeConfig
@@ -20,6 +22,7 @@ export const defaultThemeName = '__default'
  * @throws an {@link Error} if the options are invalid
  */
 export const validateOptions = ({
+  defaultTheme,
   themes = []
 }: MultiThemePluginOptions): void => {
   if (themes.some(x => !x.name)) {
@@ -38,6 +41,9 @@ export const validateOptions = ({
       `No theme in the themes array in the multiThemePlugin options cannot have a name of "${defaultThemeName}"`
     )
   }
+  if ((defaultTheme as ThemeConfig)?.selectors) {
+    throw new Error('The default theme cannot have any selectors')
+  }
 }
 
 /**