From 42b4256b54b42ca79d5c6374a42d102eaa3a0ae2 Mon Sep 17 00:00:00 2001 From: "qing.deng" Date: Wed, 13 Jul 2022 12:48:47 +0800 Subject: [PATCH 1/7] feat(preset-mini): customizing dark mode selector --- packages/preset-mini/src/index.ts | 14 +++++++++++++- packages/preset-mini/src/variants/dark.ts | 7 ++++--- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/preset-mini/src/index.ts b/packages/preset-mini/src/index.ts index 67514b4b21..a0bc44af4b 100644 --- a/packages/preset-mini/src/index.ts +++ b/packages/preset-mini/src/index.ts @@ -11,11 +11,23 @@ export { parseColor } from './utils' export type { ThemeAnimation, Theme } +interface DarkSelector { + /** + * @default '.light' + */ + light?: string + + /** + * @default '.dark' + */ + dark?: string +} + export interface PresetMiniOptions extends PresetOptions { /** * @default 'class' */ - dark?: 'class' | 'media' + dark?: 'class' | 'media' | ['class', DarkSelector] /** * @default false */ diff --git a/packages/preset-mini/src/variants/dark.ts b/packages/preset-mini/src/variants/dark.ts index ebfb2397ac..41af29ca03 100644 --- a/packages/preset-mini/src/variants/dark.ts +++ b/packages/preset-mini/src/variants/dark.ts @@ -3,10 +3,11 @@ import type { PresetMiniOptions } from '..' import { variantMatcher, variantParentMatcher } from '../utils' export const variantColorsMediaOrClass = (options: PresetMiniOptions = {}): Variant[] => { - if (options?.dark === 'class') { + if (options?.dark === 'class' || options?.dark?.[0] === 'class') { + const { dark = '.dark', light = '.light' } = typeof options.dark === 'string' ? {} : options.dark[1] return [ - variantMatcher('dark', input => ({ prefix: `.dark $$ ${input.prefix}` })), - variantMatcher('light', input => ({ prefix: `.light $$ ${input.prefix}` })), + variantMatcher('dark', input => ({ prefix: `${dark} $$ ${input.prefix}` })), + variantMatcher('light', input => ({ prefix: `${light} $$ ${input.prefix}` })), ] } From 6f1a9f665e2d9ec6e56c3d0e6bb658ac9f9df6e6 Mon Sep 17 00:00:00 2001 From: "qing.deng" Date: Wed, 13 Jul 2022 12:49:01 +0800 Subject: [PATCH 2/7] test: add test --- test/preset-mini.test.ts | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/test/preset-mini.test.ts b/test/preset-mini.test.ts index 4b713fb850..f92b2c97fc 100644 --- a/test/preset-mini.test.ts +++ b/test/preset-mini.test.ts @@ -27,6 +27,40 @@ const uno = createGenerator({ }) describe('preset-mini', () => { + test('dark customizing selector', async () => { + const uno = createGenerator({ + presets: [ + presetMini({ + dark: ['class', { + dark: '[data-mode="dark"]', + light: '[data-mode="light"]', + }], + }), + ], + }) + + const { css } = await uno.generate([ + 'dark:bg-white', + 'dark:text-lg', + 'dark:hover:rounded', + 'light:bg-black', + 'light:text-sm', + 'light:disabled:w-full', + ].join(' '), { + preflights: false, + }) + + expect(css).toMatchInlineSnapshot(` + "/* layer: default */ + [data-mode=\\"dark\\"] .dark\\\\:bg-white{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity));} + [data-mode=\\"light\\"] .light\\\\:bg-black{--un-bg-opacity:1;background-color:rgba(0,0,0,var(--un-bg-opacity));} + [data-mode=\\"dark\\"] .dark\\\\:hover\\\\:rounded:hover{border-radius:0.25rem;} + [data-mode=\\"dark\\"] .dark\\\\:text-lg{font-size:1.125rem;line-height:1.75rem;} + [data-mode=\\"light\\"] .light\\\\:text-sm{font-size:0.875rem;line-height:1.25rem;} + [data-mode=\\"dark\\"] .dark\\\\:disabled\\\\:w-full:disabled{width:100%;}" + `) + }) + test('targets', async () => { const code = presetMiniTargets.join(' ') const { css } = await uno.generate(code) From 3b2e98af54ee265448b97d6b91720c4d110cb8ef Mon Sep 17 00:00:00 2001 From: "qing.deng" Date: Wed, 13 Jul 2022 12:51:48 +0800 Subject: [PATCH 3/7] test: update test --- test/__snapshots__/preset-mini.test.ts.snap | 10 ++++++++++ test/preset-mini.test.ts | 10 +--------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap index ece9a09915..d81ea07926 100644 --- a/test/__snapshots__/preset-mini.test.ts.snap +++ b/test/__snapshots__/preset-mini.test.ts.snap @@ -7,6 +7,16 @@ exports[`preset-mini > custom var prefix 1`] = ` .scale-100{--hi-scale-x:1;--hi-scale-y:1;transform:translateX(var(--hi-translate-x)) translateY(var(--hi-translate-y)) translateZ(var(--hi-translate-z)) rotate(var(--hi-rotate)) rotateX(var(--hi-rotate-x)) rotateY(var(--hi-rotate-y)) rotateZ(var(--hi-rotate-z)) skewX(var(--hi-skew-x)) skewY(var(--hi-skew-y)) scaleX(var(--hi-scale-x)) scaleY(var(--hi-scale-y)) scaleZ(var(--hi-scale-z));}" `; +exports[`preset-mini > dark customizing selector 1`] = ` +"/* layer: default */ +[data-mode=\\"dark\\"] .dark\\\\:bg-white{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity));} +[data-mode=\\"light\\"] .light\\\\:bg-black{--un-bg-opacity:1;background-color:rgba(0,0,0,var(--un-bg-opacity));} +[data-mode=\\"dark\\"] .dark\\\\:hover\\\\:rounded:hover{border-radius:0.25rem;} +[data-mode=\\"dark\\"] .dark\\\\:text-lg{font-size:1.125rem;line-height:1.75rem;} +[data-mode=\\"light\\"] .light\\\\:text-sm{font-size:0.875rem;line-height:1.25rem;} +[data-mode=\\"light\\"] .light\\\\:disabled\\\\:w-full:disabled{width:100%;}" +`; + exports[`preset-mini > nested theme colors 1`] = ` "/* layer: default */ .bg-a-b-c{--un-bg-opacity:1;background-color:rgba(81,69,67,var(--un-bg-opacity));} diff --git a/test/preset-mini.test.ts b/test/preset-mini.test.ts index f92b2c97fc..5ca70cb144 100644 --- a/test/preset-mini.test.ts +++ b/test/preset-mini.test.ts @@ -50,15 +50,7 @@ describe('preset-mini', () => { preflights: false, }) - expect(css).toMatchInlineSnapshot(` - "/* layer: default */ - [data-mode=\\"dark\\"] .dark\\\\:bg-white{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity));} - [data-mode=\\"light\\"] .light\\\\:bg-black{--un-bg-opacity:1;background-color:rgba(0,0,0,var(--un-bg-opacity));} - [data-mode=\\"dark\\"] .dark\\\\:hover\\\\:rounded:hover{border-radius:0.25rem;} - [data-mode=\\"dark\\"] .dark\\\\:text-lg{font-size:1.125rem;line-height:1.75rem;} - [data-mode=\\"light\\"] .light\\\\:text-sm{font-size:0.875rem;line-height:1.25rem;} - [data-mode=\\"dark\\"] .dark\\\\:disabled\\\\:w-full:disabled{width:100%;}" - `) + expect(css).toMatchSnapshot() }) test('targets', async () => { From e7f6a945e741a373293cb29d2b1c182d76f2bb40 Mon Sep 17 00:00:00 2001 From: "qing.deng" Date: Wed, 13 Jul 2022 13:59:54 +0800 Subject: [PATCH 4/7] feat: update types --- packages/preset-mini/src/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/preset-mini/src/index.ts b/packages/preset-mini/src/index.ts index a0bc44af4b..9288f35d03 100644 --- a/packages/preset-mini/src/index.ts +++ b/packages/preset-mini/src/index.ts @@ -11,7 +11,7 @@ export { parseColor } from './utils' export type { ThemeAnimation, Theme } -interface DarkSelector { +type DarkModeSelectors = ['class', { /** * @default '.light' */ @@ -21,13 +21,13 @@ interface DarkSelector { * @default '.dark' */ dark?: string -} +}] export interface PresetMiniOptions extends PresetOptions { /** * @default 'class' */ - dark?: 'class' | 'media' | ['class', DarkSelector] + dark?: 'class' | 'media' | DarkModeSelectors /** * @default false */ From 168f2ad265ee77107fe975608d9083255f572a96 Mon Sep 17 00:00:00 2001 From: "qing.deng" Date: Wed, 13 Jul 2022 14:09:19 +0800 Subject: [PATCH 5/7] feat: improve type --- packages/preset-mini/src/index.ts | 4 ++-- packages/preset-mini/src/variants/dark.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/preset-mini/src/index.ts b/packages/preset-mini/src/index.ts index 9288f35d03..223bb3fe58 100644 --- a/packages/preset-mini/src/index.ts +++ b/packages/preset-mini/src/index.ts @@ -11,7 +11,7 @@ export { parseColor } from './utils' export type { ThemeAnimation, Theme } -type DarkModeSelectors = ['class', { +interface DarkModeSelectors { /** * @default '.light' */ @@ -21,7 +21,7 @@ type DarkModeSelectors = ['class', { * @default '.dark' */ dark?: string -}] +} export interface PresetMiniOptions extends PresetOptions { /** diff --git a/packages/preset-mini/src/variants/dark.ts b/packages/preset-mini/src/variants/dark.ts index 41af29ca03..ec330d143e 100644 --- a/packages/preset-mini/src/variants/dark.ts +++ b/packages/preset-mini/src/variants/dark.ts @@ -3,8 +3,8 @@ import type { PresetMiniOptions } from '..' import { variantMatcher, variantParentMatcher } from '../utils' export const variantColorsMediaOrClass = (options: PresetMiniOptions = {}): Variant[] => { - if (options?.dark === 'class' || options?.dark?.[0] === 'class') { - const { dark = '.dark', light = '.light' } = typeof options.dark === 'string' ? {} : options.dark[1] + if (options?.dark === 'class' || typeof options.dark === 'object') { + const { dark = '.dark', light = '.light' } = typeof options.dark === 'string' ? {} : options.dark return [ variantMatcher('dark', input => ({ prefix: `${dark} $$ ${input.prefix}` })), variantMatcher('light', input => ({ prefix: `${light} $$ ${input.prefix}` })), From 3cfc65de509e20d0eb27f4483b5890ed2753d99b Mon Sep 17 00:00:00 2001 From: "qing.deng" Date: Wed, 13 Jul 2022 14:09:45 +0800 Subject: [PATCH 6/7] test: fix --- test/preset-mini.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/preset-mini.test.ts b/test/preset-mini.test.ts index 5ca70cb144..89558da446 100644 --- a/test/preset-mini.test.ts +++ b/test/preset-mini.test.ts @@ -31,10 +31,10 @@ describe('preset-mini', () => { const uno = createGenerator({ presets: [ presetMini({ - dark: ['class', { + dark: { dark: '[data-mode="dark"]', light: '[data-mode="light"]', - }], + }, }), ], }) From dda2f85d35d8a443eb0b298ee2165d6b33f1cd52 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Wed, 13 Jul 2022 16:15:47 +0800 Subject: [PATCH 7/7] chore: update --- packages/preset-mini/src/index.ts | 12 +++++++++++- packages/preset-mini/src/variants/dark.ts | 5 ++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/preset-mini/src/index.ts b/packages/preset-mini/src/index.ts index 223bb3fe58..d8c0d221ee 100644 --- a/packages/preset-mini/src/index.ts +++ b/packages/preset-mini/src/index.ts @@ -11,13 +11,17 @@ export { parseColor } from './utils' export type { ThemeAnimation, Theme } -interface DarkModeSelectors { +export interface DarkModeSelectors { /** + * Selector for light variant. + * * @default '.light' */ light?: string /** + * Selector for dark variant. + * * @default '.dark' */ dark?: string @@ -25,14 +29,20 @@ interface DarkModeSelectors { export interface PresetMiniOptions extends PresetOptions { /** + * Dark mode options + * * @default 'class' */ dark?: 'class' | 'media' | DarkModeSelectors /** + * Generate pesudo selector as `[group=""]` instead of `.group` + * * @default false */ attributifyPseudo?: Boolean /** + * Prefix for CSS variables. + * * @default 'un-' */ variablePrefix?: string diff --git a/packages/preset-mini/src/variants/dark.ts b/packages/preset-mini/src/variants/dark.ts index ec330d143e..6a34d3cf13 100644 --- a/packages/preset-mini/src/variants/dark.ts +++ b/packages/preset-mini/src/variants/dark.ts @@ -4,7 +4,10 @@ import { variantMatcher, variantParentMatcher } from '../utils' export const variantColorsMediaOrClass = (options: PresetMiniOptions = {}): Variant[] => { if (options?.dark === 'class' || typeof options.dark === 'object') { - const { dark = '.dark', light = '.light' } = typeof options.dark === 'string' ? {} : options.dark + const { dark = '.dark', light = '.light' } = typeof options.dark === 'string' + ? {} + : options.dark + return [ variantMatcher('dark', input => ({ prefix: `${dark} $$ ${input.prefix}` })), variantMatcher('light', input => ({ prefix: `${light} $$ ${input.prefix}` })),