fix: add support for custom selectors like data-theme (#63)

* fix: add support for custom selectors like data-theme * fix: del log * fix: fix lint
unpreset · Sep 15, 2023 · 36b77c6 · 36b77c6
1 parent 3acb8cd
commit 36b77c6
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 1 deletion.
diff --git a/src/index.ts b/src/index.ts
@@ -171,7 +171,7 @@ export function presetTheme<T extends Record<string, any>>(options: PresetThemeO
               }
               else {
                 // convert .light .themename{} to .themename{}
-                line = line.replace(/(\.\w+)+\s([\.\:\w]+)/g, '$2')
+                line = line.replace(/(\.\w+)+\s([\.\:\w\[\-="\]]+)/g, '$2')
               }
               return line
             }).sort((a, b) => {

diff --git a/tests/index.test.ts b/tests/index.test.ts
@@ -342,4 +342,52 @@ describe('theme', () => {
       .text-primary{color:var(--un-preset-theme-colors-primary);}"
     `)
   })
+
+  test('custom-selectors', async () => {
+    const uno = createGenerator({
+      theme: {
+        colors: {
+          primary: '#123456',
+          colorKey: 'red',
+        },
+      },
+      presets: [
+        presetUno(),
+        presetTheme<Theme>({
+          selectors: {
+            light: '[data-theme="light"]',
+            dark: '[data-theme="dark"]',
+            test: '.test',
+          },
+          theme: {
+            dark: {
+              colors: {
+                primary: '#654321',
+                colorKey: 'blue',
+              },
+            },
+            test: {
+              colors: {
+                primary: '#123123',
+              },
+            },
+          },
+        }),
+      ],
+    })
+
+    const targets = ['text-primary', 'text-color-key']
+    const { css } = await uno.generate(targets.join('\n'))
+    expect(css).toMatchInlineSnapshot(`
+    "/* layer: preflights */
+    *,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}
+    /* layer: theme */
+    [data-theme=\\"dark\\"]{--un-preset-theme-colors-primary:101, 67, 33;--un-preset-theme-colors-colorKey:blue;}
+    [data-theme=\\"light\\"]{--un-preset-theme-colors-primary:18, 52, 86;--un-preset-theme-colors-colorKey:red;}
+    .test{--un-preset-theme-colors-primary:18, 49, 35;}
+    /* layer: default */
+    .text-color-key{color:var(--un-preset-theme-colors-colorKey);}
+    .text-primary{--un-text-opacity:1;color:rgba(var(--un-preset-theme-colors-primary),var(--un-text-opacity));}"
+    `)
+  })
 })