From 512f226c0972dfd2f06f014d7a11b3c820e0085d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B4=AA=E5=B8=83=E6=96=AF?= Date: Fri, 6 Jan 2023 17:38:23 +0800 Subject: [PATCH] feat(preset-uno,preset-wind): support variablePrefix (#2046) fix https://github.com/unocss/unocss/issues/2045 --- packages/preset-mini/src/index.ts | 2 +- packages/preset-uno/src/index.ts | 5 ++++- packages/preset-wind/src/index.ts | 5 ++++- test/__snapshots__/preset-uno.test.ts.snap | 7 +++++++ test/__snapshots__/preset-wind.test.ts.snap | 7 +++++++ test/preset-uno.test.ts | 18 ++++++++++++++++++ test/preset-wind.test.ts | 18 ++++++++++++++++++ 7 files changed, 59 insertions(+), 3 deletions(-) diff --git a/packages/preset-mini/src/index.ts b/packages/preset-mini/src/index.ts index b57169aac2..83309636c5 100644 --- a/packages/preset-mini/src/index.ts +++ b/packages/preset-mini/src/index.ts @@ -81,7 +81,7 @@ export const presetMini = (options: PresetMiniOptions = {}): Preset => { export default presetMini -function VarPrefixPostprocessor(prefix: string): Postprocessor { +export function VarPrefixPostprocessor(prefix: string): Postprocessor { return (obj) => { obj.entries.forEach((i) => { i[0] = i[0].replace(/^--un-/, `--${prefix}`) diff --git a/packages/preset-uno/src/index.ts b/packages/preset-uno/src/index.ts index b5c0b76831..2d65b7fd70 100644 --- a/packages/preset-uno/src/index.ts +++ b/packages/preset-uno/src/index.ts @@ -1,7 +1,7 @@ import type { Preset } from '@unocss/core' import type { PresetMiniOptions, Theme } from '@unocss/preset-mini' import { rules, shortcuts, theme, variants } from '@unocss/preset-wind' -import { preflights } from '@unocss/preset-mini' +import { VarPrefixPostprocessor, preflights } from '@unocss/preset-mini' import { variantColorMix } from './variants/mix' export type { Theme } @@ -23,6 +23,9 @@ export const presetUno = (options: PresetUnoOptions = {}): Preset => { variantColorMix, ], options, + postprocess: options.variablePrefix && options.variablePrefix !== 'un-' + ? VarPrefixPostprocessor(options.variablePrefix) + : undefined, preflights: options.preflight ? preflights : [], prefix: options.prefix, } diff --git a/packages/preset-wind/src/index.ts b/packages/preset-wind/src/index.ts index 76538e21ff..84ace1d859 100644 --- a/packages/preset-wind/src/index.ts +++ b/packages/preset-wind/src/index.ts @@ -1,6 +1,6 @@ import type { Preset } from '@unocss/core' import type { PresetMiniOptions, Theme } from '@unocss/preset-mini' -import { preflights } from '@unocss/preset-mini' +import { VarPrefixPostprocessor, preflights } from '@unocss/preset-mini' import { rules } from './rules' import { shortcuts } from './shortcuts' import { theme } from './theme' @@ -26,6 +26,9 @@ export const presetWind = (options: PresetWindOptions = {}): Preset => { shortcuts, variants: variants(options), options, + postprocess: options.variablePrefix && options.variablePrefix !== 'un-' + ? VarPrefixPostprocessor(options.variablePrefix) + : undefined, preflights: options.preflight ? preflights : [], prefix: options.prefix, } diff --git a/test/__snapshots__/preset-uno.test.ts.snap b/test/__snapshots__/preset-uno.test.ts.snap index 60429a0b67..e25af04f71 100644 --- a/test/__snapshots__/preset-uno.test.ts.snap +++ b/test/__snapshots__/preset-uno.test.ts.snap @@ -1,5 +1,12 @@ // Vitest Snapshot v1 +exports[`custom var prefix 1`] = ` +"/* layer: default */ +.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));} +.text-red{--hi-text-opacity:1;color:rgba(248,113,113,var(--hi-text-opacity));} +.text-opacity-50{--hi-text-opacity:0.5;}" +`; + exports[`targets 1`] = ` "/* layer: default */ .border-custom-b{border-color:rgba(var(--custom), 1);} diff --git a/test/__snapshots__/preset-wind.test.ts.snap b/test/__snapshots__/preset-wind.test.ts.snap index ac1f2ab1bc..8b52a6fdfe 100644 --- a/test/__snapshots__/preset-wind.test.ts.snap +++ b/test/__snapshots__/preset-wind.test.ts.snap @@ -54,6 +54,13 @@ exports[`preset-wind > containers 1`] = ` }" `; +exports[`preset-wind > custom var prefix 1`] = ` +"/* layer: default */ +.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));} +.text-red{--hi-text-opacity:1;color:rgba(248,113,113,var(--hi-text-opacity));} +.text-opacity-50{--hi-text-opacity:0.5;}" +`; + exports[`preset-wind > targets 1`] = ` "/* 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: ;} diff --git a/test/preset-uno.test.ts b/test/preset-uno.test.ts index de9002df52..9d01c6ce59 100644 --- a/test/preset-uno.test.ts +++ b/test/preset-uno.test.ts @@ -167,3 +167,21 @@ test('non-targets', async () => { expect(Array.from(matched)).toEqual([]) expect(css).toBe('') }) + +test('custom var prefix', async () => { + const uno = createGenerator({ + presets: [ + presetUno({ + variablePrefix: 'hi-', + }), + ], + }) + + const { css } = await uno.generate([ + 'text-opacity-50', + 'text-red', + 'scale-100', + ].join(' '), { preflights: false }) + + expect(css).toMatchSnapshot() +}) diff --git a/test/preset-wind.test.ts b/test/preset-wind.test.ts index d26148074d..9d57b1fe5d 100644 --- a/test/preset-wind.test.ts +++ b/test/preset-wind.test.ts @@ -92,4 +92,22 @@ describe('preset-wind', () => { expect(matched).toEqual(new Set(targets)) expect(css).toMatchSnapshot() }) + + test('custom var prefix', async () => { + const uno = createGenerator({ + presets: [ + presetWind({ + variablePrefix: 'hi-', + }), + ], + }) + + const { css } = await uno.generate([ + 'text-opacity-50', + 'text-red', + 'scale-100', + ].join(' '), { preflights: false }) + + expect(css).toMatchSnapshot() + }) })