diff --git a/src/index.ts b/src/index.ts index 3d87577..925004c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,141 +1,146 @@ -import type { Preset } from "@unocss/core"; -import { mergeDeep } from "@unocss/core"; -import { parseCssColor } from "@unocss/rule-utils"; -import { getThemeVal, wrapCSSFunction, wrapVar, escapeStringRegexp } from "./helpers"; +import type { Preset } from '@unocss/core' +import { mergeDeep } from '@unocss/core' +import { parseCssColor } from '@unocss/rule-utils' +import { escapeStringRegexp, getThemeVal, wrapCSSFunction, wrapVar } from './helpers' -const defaultThemeNames = ["dark", "light"]; -const PRESET_THEME_RULE = "PRESET_THEME_RULE"; +const defaultThemeNames = ['dark', 'light'] +const PRESET_THEME_RULE = 'PRESET_THEME_RULE' interface Selectors { - [themeName: string]: string; + [themeName: string]: string } export interface PresetThemeOptions<Theme extends Record<string, any>> { /** * Multiple themes */ - theme: Record<string, Theme>; + theme: Record<string, Theme> /** * The prefix of the generated css variables * @default --un-preset-theme */ - prefix?: string; + prefix?: string /** * Customize the selectors of the generated css variables * @default { light: ':root', [themeName]: '.[themeName]' } */ - selectors?: Selectors; + selectors?: Selectors } /** * @deprecated use `PresetThemeOptions` instead * @see PresetThemeOptions */ -export type PresetTheme<Theme extends Record<string, any>> = PresetThemeOptions<Theme>; +export type PresetTheme<Theme extends Record<string, any>> = PresetThemeOptions<Theme> interface ThemeValue { - theme: Record<string, Record<string, string>>; - name: string; + theme: Record<string, Record<string, string>> + name: string } export function presetTheme<T extends Record<string, any>>(options: PresetThemeOptions<T>): Preset<T> { - const { prefix = "--un-preset-theme", theme } = options; - const selectors: Selectors = { light: ":root", ...options.selectors }; - if (!theme.light) theme.light = {} as T; - const keys = Object.keys(theme); - const varsRE = new RegExp(`var\\((${prefix}[\\w-]*)\\)`); - const themeValues = new Map<string, ThemeValue>(); - const usedTheme: Array<ThemeValue> = []; + const { prefix = '--un-preset-theme', theme } = options + const selectors: Selectors = { light: ':root', ...options.selectors } + if (!theme.light) + theme.light = {} as T + const keys = Object.keys(theme) + const varsRE = new RegExp(`var\\((${prefix}[\\w-]*)\\)`) + const themeValues = new Map<string, ThemeValue>() + const usedTheme: Array<ThemeValue> = [] return { - name: "unocss-preset-theme", + name: 'unocss-preset-theme', extendTheme(originalTheme) { const recursiveTheme = (curTheme: Record<string, any>, preKeys: string[] = []) => { Object.keys(curTheme).forEach((key) => { - const val = Reflect.get(curTheme, key); - const themeKeys = preKeys.concat(key); + const val = Reflect.get(curTheme, key) + const themeKeys = preKeys.concat(key) const setThemeValue = (name: string, index = 0, isColor = false) => { themeValues.set(name, { theme: keys.reduce((obj, key) => { - let themeValue = - getThemeVal(theme[key], themeKeys, index) || - (key === "light" ? getThemeVal(originalTheme, themeKeys) : null); + let themeValue + = getThemeVal(theme[key], themeKeys, index) + || (key === 'light' ? getThemeVal(originalTheme, themeKeys) : null) if (themeValue) { if (isColor) { - const cssColor = parseCssColor(themeValue); - if (cssColor?.components) themeValue = cssColor.components.join(" "); + const cssColor = parseCssColor(themeValue) + if (cssColor?.components) + themeValue = cssColor.components.join(' ') } obj[key] = { [name]: themeValue, - }; + } } - return obj; - }, {} as ThemeValue["theme"]), + return obj + }, {} as ThemeValue['theme']), name, - }); - }; + }) + } if (Array.isArray(val)) { val.forEach((_, index) => { - const name = [prefix, ...themeKeys, index].join("-"); - setThemeValue(name, index); - val[index] = wrapVar(name); - }); - } else if (typeof val === "string") { - const name = [prefix, ...themeKeys].join("-"); - const isColor = themeKeys[0] === "colors"; - setThemeValue(name, 0, isColor); - curTheme[key] = wrapVar(name); + const name = [prefix, ...themeKeys, index].join('-') + setThemeValue(name, index) + val[index] = wrapVar(name) + }) + } + else if (typeof val === 'string') { + const name = [prefix, ...themeKeys].join('-') + const isColor = themeKeys[0] === 'colors' + setThemeValue(name, 0, isColor) + curTheme[key] = wrapVar(name) if (isColor) { - const cssColor = parseCssColor(val) || val; - if (typeof cssColor !== "string") - curTheme[key] = wrapCSSFunction(cssColor.type, curTheme[key], cssColor?.alpha); + const cssColor = parseCssColor(val) || val + if (typeof cssColor !== 'string') + curTheme[key] = wrapCSSFunction(cssColor.type, curTheme[key], cssColor?.alpha) } - } else { - recursiveTheme(val, themeKeys); } - }); - return curTheme; - }; + else { + recursiveTheme(val, themeKeys) + } + }) + return curTheme + } return mergeDeep( originalTheme, recursiveTheme( keys.reduce((obj, key) => { - return mergeDeep(obj, theme[key]); - }, {} as T) - ) - ); + return mergeDeep(obj, theme[key]) + }, {} as T), + ), + ) }, rules: [ [ new RegExp(`^${PRESET_THEME_RULE}\:(.*)\:`), (re) => { return usedTheme.reduce((obj, e) => { - const key = re?.[1]; - if (!key || !e.theme[key]) return obj; + const key = re?.[1] + if (!key || !e.theme[key]) + return obj return { ...obj, ...e.theme[key], - }; - }, {}); + } + }, {}) }, ], ], variants: [ { - name: "preset-theme-rule", + name: 'preset-theme-rule', match(matcher) { if (matcher.includes(PRESET_THEME_RULE)) { return { matcher, selector(input) { - const themeName = input.match(/\:([\w-]+)\\\:\d+/)![1]; - return selectors[themeName] || `.${themeName}`; + const themeName = input.match(/\:([\w-]+)\\\:\d+/)![1] + return selectors[themeName] || `.${themeName}` }, - }; + } } }, }, @@ -146,103 +151,107 @@ export function presetTheme<T extends Record<string, any>>(options: PresetThemeO }, preflights: [ { - layer: "theme", + layer: 'theme', async getCSS(context) { const { css } = await context.generator.generate( // Add Date.now() to avoid cache keys.map( - (key) => `${defaultThemeNames.includes(key) ? `${key}:` : ""}${PRESET_THEME_RULE}:${key}:${Date.now()}` + key => `${defaultThemeNames.includes(key) ? `${key}:` : ''}${PRESET_THEME_RULE}:${key}:${Date.now()}`, ), - { preflights: false } - ); - let inMediaPrefersColorScheme = ""; - const res: string[] = []; + { preflights: false }, + ) + let inMediaPrefersColorScheme = '' + const res: string[] = [] css - .replace(/,\n/g, ",") - .split("\n") + .replace(/,\n/g, ',') + .split('\n') .slice(1) .forEach((line) => { - if (line === "@media (prefers-color-scheme: dark){") { - inMediaPrefersColorScheme = selectors.dark || ".dark"; - res.push(line); - return; + if (line === '@media (prefers-color-scheme: dark){') { + inMediaPrefersColorScheme = selectors.dark || '.dark' + res.push(line) + return } - if (line === "@media (prefers-color-scheme: light){") { - inMediaPrefersColorScheme = selectors.light; - res.push(line); - return; + if (line === '@media (prefers-color-scheme: light){') { + inMediaPrefersColorScheme = selectors.light + res.push(line) + return } - if (inMediaPrefersColorScheme && line == "}") { - inMediaPrefersColorScheme = ""; - res[res.length - 1] += line; - return; + if (inMediaPrefersColorScheme && line === '}') { + inMediaPrefersColorScheme = '' + res[res.length - 1] += line + return } if (inMediaPrefersColorScheme) { if (line.startsWith(`${inMediaPrefersColorScheme}{`)) { - res[res.length - 1] += line.replace(`${inMediaPrefersColorScheme}{`, ":root{"); - return; + res[res.length - 1] += line.replace(`${inMediaPrefersColorScheme}{`, ':root{') + return } - return; + return } const regexStr = new RegExp( keys .map( - (key) => + key => `((.${key}) ((${ selectors[key] ? escapeStringRegexp(selectors[key]) : `.${key}` - }[{|,])|(.${key}\\\\:)))` + }[{|,])|(.${key}\\\\:)))`, ) - .join("|"), - "g" - ); + .join('|'), + 'g', + ) const replacedLine = line.replace(regexStr, (matchStr, ...params) => { - const matchGroup = params.slice(0, -2); - const matchIndex = params[params.length - 2]; - const input = params[params.length - 1]; - console.log(regexStr, matchStr, matchGroup, matchIndex, input); - let replacement = ""; + const matchGroup = params.slice(0, -2) + // const matchIndex = params[params.length - 2]; + // const input = params[params.length - 1]; + // console.log(regexStr, matchStr, matchGroup, matchIndex, input); + let replacement = '' for (let i = 0; i < matchGroup.length / 5; i++) { - const startIndex = i * 5; - if (!matchGroup[startIndex]) continue; + const startIndex = i * 5 + if (!matchGroup[startIndex]) + continue if (matchGroup[startIndex + 3]) { // ".light .lightclass" => ".lightclass" // ".dark [data-theme="dark"]" => "[data-theme="dark"]" - replacement = matchGroup[startIndex + 3]; - } else { + replacement = matchGroup[startIndex + 3] + } + else { // ".light .light\\:" => ".lightclass .light\\:" // ".dark .dark\\:" => "[data-theme="dark"] .dark\\:" - const key = matchGroup[startIndex + 1].substring(1); - replacement = `${selectors[key]} ${matchGroup[startIndex + 2]}`; + const key = matchGroup[startIndex + 1].substring(1) + replacement = `${selectors[key]} ${matchGroup[startIndex + 2]}` } - break; + break } - return replacement; - }); - res.push(replacedLine); - }); + return replacement + }) + res.push(replacedLine) + }) return res .sort((a, b) => { - const regexStr = `^${selectors.light}|^@media \\(prefers-color-scheme:`; - if (a.match(regexStr)?.length) return b.match(regexStr)?.length ? 0 : -1; - return 1; + const regexStr = `^${selectors.light}|^@media \\(prefers-color-scheme:` + if (a.match(regexStr)?.length) + return b.match(regexStr)?.length ? 0 : -1 + return 1 }) - .join("\n"); + .join('\n') }, }, ], postprocess(util) { util.entries.forEach(([, val]) => { - if (typeof val === "string") { - const varName = val.match(varsRE)?.[1]; + if (typeof val === 'string') { + const varName = val.match(varsRE)?.[1] if (varName) { - const values = themeValues.get(varName); - if (values) usedTheme.push(values); + const values = themeValues.get(varName) + if (values) + usedTheme.push(values) } } - }); + }) }, - }; + } } -export default presetTheme; +export default presetTheme diff --git a/tests/index.test.ts b/tests/index.test.ts index aaec59c..2e84820 100644 --- a/tests/index.test.ts +++ b/tests/index.test.ts @@ -1,18 +1,18 @@ -import type { UserConfig } from "@unocss/core"; -import { createGenerator, mergeDeep } from "@unocss/core"; -import { presetUno } from "@unocss/preset-uno"; -import type { PresetUnoOptions, Theme } from "@unocss/preset-uno"; -import { describe, expect, it } from "vitest"; -import type { PresetThemeOptions } from "../src"; -import presetTheme from "../src"; +import type { UserConfig } from '@unocss/core' +import { createGenerator, mergeDeep } from '@unocss/core' +import { presetUno } from '@unocss/preset-uno' +import type { PresetUnoOptions, Theme } from '@unocss/preset-uno' +import { describe, expect, it } from 'vitest' +import type { PresetThemeOptions } from '../src' +import presetTheme from '../src' -describe("theme", () => { +describe('theme', () => { const createUno = ( userConfig?: UserConfig<Theme>, options: { - unoOptions?: PresetUnoOptions; - themeOptions?: PresetThemeOptions<Theme>; - } = {} + unoOptions?: PresetUnoOptions + themeOptions?: PresetThemeOptions<Theme> + } = {}, ) => createGenerator<Theme>( mergeDeep( @@ -20,14 +20,14 @@ describe("theme", () => { theme: { colors: { main: { - 100: "#000001", - 200: "#000002", - 300: "#000003", - 400: "#000004", - 500: "#000004", - 600: "#000006", - 700: "#000007", - 800: "#000008", + 100: '#000001', + 200: '#000002', + 300: '#000003', + 400: '#000004', + 500: '#000004', + 600: '#000006', + 700: '#000007', + 800: '#000008', }, }, }, @@ -37,56 +37,56 @@ describe("theme", () => { mergeDeep( { theme: { - dark: { + 'dark': { colors: { main: { - 100: "#fffff1", - 200: "#fffff2", - 300: "#fffff3", - 400: "#fffff4", - 500: "#fffff4", - 600: "#fffff6", - 700: "#fffff7", - 800: "#fffff8", + 100: '#fffff1', + 200: '#fffff2', + 300: '#fffff3', + 400: '#fffff4', + 500: '#fffff4', + 600: '#fffff6', + 700: '#fffff7', + 800: '#fffff8', }, }, }, - compact: { + 'compact': { fontSize: { - xs: ["1.75rem", "2rem"], - sm: ["1.875rem", "2.25rem"], + xs: ['1.75rem', '2rem'], + sm: ['1.875rem', '2.25rem'], }, }, - "starry-night": { + 'starry-night': { colors: { main: { - 100: "#1ffff1", - 200: "#1ffff2", - 300: "#1ffff3", - 400: "#1ffff4", - 500: "#1ffff4", - 600: "#1ffff6", - 700: "#1ffff7", - 800: "#1ffff8", + 100: '#1ffff1', + 200: '#1ffff2', + 300: '#1ffff3', + 400: '#1ffff4', + 500: '#1ffff4', + 600: '#1ffff6', + 700: '#1ffff7', + 800: '#1ffff8', }, }, }, }, }, - options.themeOptions as any - ) + options.themeOptions as any, + ), ), ], } as UserConfig<Theme>, - userConfig as UserConfig<Theme> - ) - ); + userConfig as UserConfig<Theme>, + ), + ) - it("basic", async () => { - const targets = ["text-main-100", "bg-main-200", "border-main-500", "border-main-6", "text-sm", "text-xs"]; + it('basic', async () => { + const targets = ['text-main-100', 'bg-main-200', 'border-main-500', 'border-main-6', 'text-sm', 'text-xs'] - const uno = createUno(); - const { css } = await uno.generate(targets.join("\n")); + const uno = createUno() + 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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(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: ;} @@ -101,41 +101,41 @@ describe("theme", () => { .text-sm{font-size:var(--un-preset-theme-fontSize-sm-0);line-height:var(--un-preset-theme-fontSize-sm-1);} .text-xs{font-size:var(--un-preset-theme-fontSize-xs-0);line-height:var(--un-preset-theme-fontSize-xs-1);} .text-main-100{--un-text-opacity:1;color:rgb(var(--un-preset-theme-colors-main-100) / var(--un-text-opacity));}" - `); - }); - it("media dark mode", async () => { + `) + }) + it('media dark mode', async () => { const uno = createGenerator({ theme: { colors: { - primary: "#123456", + primary: '#123456', }, fontSize: { - xs: ["1.75rem", "2rem"], + xs: ['1.75rem', '2rem'], }, }, presets: [ presetUno({ - dark: "media", + dark: 'media', }), presetTheme<Theme>({ theme: { dark: { colors: { - primary: "#654321", + primary: '#654321', }, }, compact: { fontSize: { - xs: ["0.75rem", "1rem"], + xs: ['0.75rem', '1rem'], }, }, }, }), ], - }); + }) - const targets = ["text-xs", "text-primary"]; - const { css } = await uno.generate(targets.join("\n")); + const targets = ['text-xs', 'text-primary'] + 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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(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: ;} @@ -146,13 +146,13 @@ describe("theme", () => { /* layer: default */ .text-xs{font-size:var(--un-preset-theme-fontSize-xs-0);line-height:var(--un-preset-theme-fontSize-xs-1);} .text-primary{--un-text-opacity:1;color:rgb(var(--un-preset-theme-colors-primary) / var(--un-text-opacity));}" - `); - }); - it("selectors", async () => { + `) + }) + it('selectors', async () => { const uno = createGenerator({ theme: { colors: { - primary: "#123456", + primary: '#123456', }, }, presets: [ @@ -161,20 +161,20 @@ describe("theme", () => { theme: { dark: { colors: { - primary: "#654321", + primary: '#654321', }, }, }, selectors: { - dark: "body.dark", - light: ".light", + dark: 'body.dark', + light: '.light', }, }), ], - }); + }) - const targets = ["text-primary"]; - const { css } = await uno.generate(targets.join("\n")); + const targets = ['text-primary'] + 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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(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: ;} @@ -183,18 +183,18 @@ describe("theme", () => { body.dark{--un-preset-theme-colors-primary:101 67 33;} /* layer: default */ .text-primary{--un-text-opacity:1;color:rgb(var(--un-preset-theme-colors-primary) / var(--un-text-opacity));}" - `); - }); + `) + }) - it("color opacity", async () => { + it('color opacity', async () => { const uno = createUno( { theme: { colors: { - rgb: "rgb(255, 0, 0)", - rgba: "rgba(255, 0, 0, 0.5)", - hsl: "hsl(0, 100%, 50%)", - hsla: "hsl(0, 100%, 50%, 0.5)", + rgb: 'rgb(255, 0, 0)', + rgba: 'rgba(255, 0, 0, 0.5)', + hsl: 'hsl(0, 100%, 50%)', + hsla: 'hsl(0, 100%, 50%, 0.5)', }, }, }, @@ -203,20 +203,20 @@ describe("theme", () => { theme: { dark: { colors: { - rgb: "rgb(0, 255, 0)", - rgba: "rgba(0, 255, 0, 0.5)", - hsl: "hsl(0, 100%, 50%)", - hsla: "hsl(100, 100%, 50%, 0.5)", + rgb: 'rgb(0, 255, 0)', + rgba: 'rgba(0, 255, 0, 0.5)', + hsl: 'hsl(0, 100%, 50%)', + hsla: 'hsl(100, 100%, 50%, 0.5)', }, }, }, }, - } - ); + }, + ) const { css } = await uno.generate( - "text-main text-rgb text-rgba text-rgb/40 text-rgba/50 text-hsl text-hsl/60 text-hsla text-hsla/60" - ); + 'text-main text-rgb text-rgba text-rgb/40 text-rgba/50 text-hsl text-hsl/60 text-hsla text-hsla/60', + ) 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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(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: ;} @@ -232,10 +232,10 @@ describe("theme", () => { .text-rgb\\\\/40{color:rgb(var(--un-preset-theme-colors-rgb) / 0.4);} .text-rgba{--un-text-opacity:0.5;color:rgb(var(--un-preset-theme-colors-rgba) / var(--un-text-opacity));} .text-rgba\\\\/50{color:rgb(var(--un-preset-theme-colors-rgba) / 0.5);}" - `); - }); + `) + }) - it("spacing", async () => { + it('spacing', async () => { const uno = createUno( {}, { @@ -243,20 +243,20 @@ describe("theme", () => { theme: { dark: { spacing: { - lg: "15px", + lg: '15px', }, }, compact: { spacing: { - lg: "12px", - md: "10px", + lg: '12px', + md: '10px', }, }, }, }, - } - ); - const { css } = await uno.generate("px-5 py-6 pt-7 pb-8 px-md p-lg"); + }, + ) + const { css } = await uno.generate('px-5 py-6 pt-7 pb-8 px-md p-lg') 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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(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: ;} @@ -271,16 +271,16 @@ describe("theme", () => { .py-6{padding-top:1.5rem;padding-bottom:1.5rem;} .pb-8{padding-bottom:2rem;} .pt-7{padding-top:1.75rem;}" - `); - }); + `) + }) - it("color-keyword-and-custom-vars", async () => { + it('color-keyword-and-custom-vars', async () => { const uno = createGenerator({ theme: { colors: { - primary: "#123456", - colorKey: "red", - customVar: "var(--fd-color-light)", + primary: '#123456', + colorKey: 'red', + customVar: 'var(--fd-color-light)', }, }, presets: [ @@ -289,18 +289,18 @@ describe("theme", () => { theme: { dark: { colors: { - primary: "#654321", - colorKey: "blue", - customVar: "var(--fd-color-dark)", + primary: '#654321', + colorKey: 'blue', + customVar: 'var(--fd-color-dark)', }, }, }, }), ], - }); + }) - const targets = ["text-color-key", "text-custom-var"]; - const { css } = await uno.generate(targets.join("\n")); + const targets = ['text-color-key', 'text-custom-var'] + 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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(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: ;} @@ -310,10 +310,10 @@ describe("theme", () => { /* layer: default */ .text-color-key{color:var(--un-preset-theme-colors-colorKey);} .text-custom-var{color:var(--un-preset-theme-colors-customVar);}" - `); - }); + `) + }) - it("all theme use same selector content", async () => { + it('all theme use same selector content', async () => { const uno = createGenerator({ presets: [ presetUno(), @@ -321,27 +321,27 @@ describe("theme", () => { theme: { light: { colors: { - primary: "var(--el-color-primary)", + primary: 'var(--el-color-primary)', }, }, dark: { colors: { - primary: "var(--el-color-primary)", + primary: 'var(--el-color-primary)', }, }, blue: { colors: { - primary: "var(--el-color-primary)", - dd: "var(--el-color-primary)", + primary: 'var(--el-color-primary)', + dd: 'var(--el-color-primary)', }, }, }, }), ], - }); + }) - const targets = ["text-primary", "text-dd"]; - const { css } = await uno.generate(targets.join("\n")); + const targets = ['text-primary', 'text-dd'] + 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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(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: ;} @@ -351,15 +351,15 @@ describe("theme", () => { /* layer: default */ .text-dd{color:var(--un-preset-theme-colors-dd);} .text-primary{color:var(--un-preset-theme-colors-primary);}" - `); - }); + `) + }) - it("custom-selectors", async () => { + it('custom-selectors', async () => { const uno = createGenerator({ theme: { colors: { - primary: "#123456", - colorKey: "red", + primary: '#123456', + colorKey: 'red', }, }, presets: [ @@ -368,27 +368,27 @@ describe("theme", () => { selectors: { light: '[data-theme="light"]', dark: '[data-theme="dark"]', - test: ".test", + test: '.test', }, theme: { dark: { colors: { - primary: "#654321", - colorKey: "blue", + primary: '#654321', + colorKey: 'blue', }, }, test: { colors: { - primary: "#123123", + primary: '#123123', }, }, }, }), ], - }); + }) - const targets = ["text-primary", "text-color-key"]; - const { css } = await uno.generate(targets.join("\n")); + 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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(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: ;} @@ -399,18 +399,18 @@ describe("theme", () => { /* layer: default */ .text-color-key{color:var(--un-preset-theme-colors-colorKey);} .text-primary{--un-text-opacity:1;color:rgb(var(--un-preset-theme-colors-primary) / var(--un-text-opacity));}" - `); - }); + `) + }) - it("breakpoints", async () => { + it('breakpoints', async () => { const uno = createGenerator({ theme: { colors: { - primary: "#123456", - colorKey: "red", + primary: '#123456', + colorKey: 'red', }, fontSize: { - xs: ["1.75rem", "2rem"], + xs: ['1.75rem', '2rem'], }, }, presets: [ @@ -419,26 +419,26 @@ describe("theme", () => { theme: { dark: { colors: { - primary: "#654321", - colorKey: "blue", + primary: '#654321', + colorKey: 'blue', }, }, test: { colors: { - primary: "#123123", + primary: '#123123', }, fontSize: { - xs: ["0.75rem", "1rem"], + xs: ['0.75rem', '1rem'], }, }, }, }), ], - safelist: ["md:text-xs"], - }); + safelist: ['md:text-xs'], + }) - const targets = ["md:text-primary", "dark:text-color-key", "md:text-xs"]; - const { css } = await uno.generate(targets.join("\n")); + const targets = ['md:text-primary', 'dark:text-color-key', 'md:text-xs'] + 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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(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 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(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: ;} @@ -455,6 +455,6 @@ describe("theme", () => { .md\\\\:text-xs{font-size:var(--un-preset-theme-fontSize-xs-0);line-height:var(--un-preset-theme-fontSize-xs-1);} .md\\\\:text-primary{--un-text-opacity:1;color:rgb(var(--un-preset-theme-colors-primary) / var(--un-text-opacity));} }" - `); - }); -}); + `) + }) +})