8000 feat(preset-wind4): add `utilityResolver ` option support utility con… · unocss/unocss@a8864af · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
< 8000 header class="HeaderMktg header-logged-out js-details-container js-header Details f4 py-3" role="banner" data-is-top="true" data-color-mode=light data-light-theme=light data-dark-theme=dark>

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit a8864af

Browse files
zyyvzyyv
authored
feat(preset-wind4): add utilityResolver option support utility convert (#4544)
1 parent 7b99bf7 commit a8864af

File tree

12 files changed

+89
-31
lines changed

12 files changed

+89
-31
lines changed

‎packages-engine/core/src/types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ export interface ExtractorContext {
143143
envMode?: 'dev' | 'build'
144144
}
145145

146-
interface BaseContext<Theme extends object = object> {
146+
export interface BaseContext<Theme extends object = object> {
147147
/**
148148
* UnoCSS generator instance
149149
*/

‎packages-presets/preset-wind4/src/index.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { PreflightContext, PresetOptions } from '@unocss/core'
1+
import type { Arrayable, BaseContext, CSSEntry, PresetOptions } from '@unocss/core'
22
import type { Theme } from './theme'
33
import { definePreset } from '@unocss/core'
44
import { extractorArbitraryVariants } from '@unocss/extractor-arbitrary-variants'
@@ -101,13 +101,14 @@ export interface PresetWind4Options extends PresetOptions {
101101
themePreflight?: boolean | 'on-demand'
102102

103103
/**
104-
* Process theme variables before generating CSS variables.
104+
* Resolve the layer utilits with custom logic.
105105
*
106-
* @param vars [key, value][]
107-
* @param ctx {@link PreflightContext}
106+
* @param utility [key, value] {@link CSSEntry}
107+
* @param layer Layer name
108+
* @param ctx base generator context {@link BaseContext<Theme>}
108109
* @returns
109110
*/
110-
processThemeVars?: (vars 6D47 : [string, string][], ctx: PreflightContext) => void | [string, string][]
111+
utilityResolver?: Arrayable<(utility: CSSEntry, layer: string, ctx: BaseContext<Theme>) => void>
111112
}
112113

113114
export const presetWind4 = definePreset<PresetWind4Options, Theme>((options = {}) => {

‎packages-presets/preset-wind4/src/postprocess/default.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import type { Postprocessor } from '@unocss/core'
22
import type { PresetWind4Options } from '..'
33
import { important } from './important'
4+
import { utility } from './utility'
45
import { varPrefix } from './varPrefix'
56

67
export function postprocessors(options: PresetWind4Options): Postprocessor[] {
78
return [
8-
...important(options.important),
9-
...varPrefix(options.variablePrefix),
10-
]
9+
important,
10+
varPrefix,
11+
utility,
12+
].flatMap(i => i(options))
1113
}

‎packages-presets/preset-wind4/src/postprocess/important.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { Postprocessor } from '@unocss/core'
22
import type { PresetWind4Options } from '..'
33

4-
export function important(option: PresetWind4Options['important']): Postprocessor[] {
4+
export function important({ important: option }: PresetWind4Options): Postprocessor[] {
55
if (option == null || option === false)
66
return []
77

‎packages-presets/preset-wind4/src/postprocess/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export * from './default'
22
export * from './important'
3+
export * from './utility'
34
export * from './varPrefix'

‎packages-presets/preset-wind4/src/postprocess/utility.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import type { BaseContext, Postprocessor } from '@unocss/core'
2+
import type { PresetWind4Options } from '..'
3+
import { toArray } from '@unocss/core'
4+
5+
export function utility({ utilityResolver }: PresetWind4Options): Postprocessor[] {
6+
const processor: Postprocessor = (util) => {
7+
const resolvers = toArray(utilityResolver)
8+
util.entries.forEach((i) => {
9+
for (const resolver of resolvers) {
10+
resolver(i, 'default', {} as BaseContext)
11+
}
12+
})
13+
}
14+
15+
return utilityResolver ? [processor] : []
16+
}

‎packages-presets/preset-wind4/src/postprocess/varPrefix.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { Postprocessor } from '@unocss/core'
22
import type { PresetWind4Options } from '..'
33

4-
export function varPrefix(prefix: PresetWind4Options['variablePrefix']): Postprocessor[] {
4+
export function varPrefix({ variablePrefix: prefix }: PresetWind4Options): Postprocessor[] {
55
const processor: Postprocessor = (obj) => {
66
obj.entries.forEach((i) => {
77
i[0] = i[0].replace(/^--un-/, `--${prefix}`)

‎packages-presets/preset-wind4/src/preflights/theme.ts

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import type { Preflight } from '@unocss/core'
1+
import type { CSSEntry, Preflight } from '@unocss/core'
22
import type { PresetWind4Options } from '..'
33
import type { Theme } from '../theme/types'
4+
import { toArray } from '@unocss/core'
45
import { alphaPlaceholdersRE } from '@unocss/rule-utils'
56
import { compressCSS, getThemeByKey, hyphenate, passThemeKey, PRESET_NAME } from '../utils'
67

@@ -65,14 +66,21 @@ export function theme(options: PresetWind4Options): Preflight<Theme> {
6566
}
6667

6768
let deps
68-
const generateCSS = (deps: [string, string][]) => {
69-
if (options.processThemeVars) {
70-
deps = options.processThemeVars(deps, ctx) ?? deps
69+
const generateCSS = (deps: CSSEntry[]) => {
70+
if (options.utilityResolver) {
71+
const resolver = toArray(options.utilityResolver)
72+
for (const utility of deps) {
73+
for (const r of resolver) {
74+
r(utility, 'theme', ctx)
75+
}
76+
}
7177
}
72-
if (deps.length === 0)
73-
return undefined
7478

75-
const depCSS = deps.map(([key, value]) => `${key}: ${value};`).join('\n')
79+
const resovledDeps = deps.map(([key, value]) => (key && value) ? `${key}: ${value};` : undefined).filter(Boolean)
80+
if (resovledDeps.length === 0) {
81+
return undefined
82+
}
83+
const depCSS = resovledDeps.join('\n')
7684

7785
return compressCSS(`
7886
:root, :host {
@@ -98,7 +106,7 @@ ${depCSS}
98106
}
99107

100108
return undefined
101-
}).filter(Boolean) as [string, string][]
109+
}).filter(Boolean) as CSSEntry[]
102110
}
103111
else {
104112
const keys = Object.keys(theme).filter(k => !ExcludeCssVarKeys.includes(k))

‎packages-presets/preset-wind4/src/rules/position.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,6 @@ function handleInsetValues([, d, v]: string[]): CSSEntries | undefined {
130130
const r = handleInsetValue(v)
131131
if (r != null && d in insetMap) {
132132
return insetMap[d].map(i => [i.slice(1), r])
133-
// return insetMap[d].map(i => [`inset${i}` , r])
134133
}
135134
}
136135

‎packages-presets/preset-wind4/src/utils/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export * from './constant'
22
export * from './handlers'
33
export * from './mappings'
4+
export * from './unit-resolver'
45
export * from './utilities'
56
export * from '@unocss/rule-utils'

‎packages-presets/preset-wind4/src/utils/unit-resolver.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import type { CSSEntry } from '@unocss/core'
2+
3+
export function createRemToPxResolver(base: number = 16) {
4+
return (utility: CSSEntry) => {
5+
const remRE = /(-?[.\d]+)rem/g
6+
if (typeof utility[1] === 'string' && remRE.test(utility[1]))
7+
utility[1] = utility[1].replace(remRE, (_, p1) => `${p1 * base}px`)
8+
}
9+
}

‎test/preset-wind4.test.ts

Lines changed: 32 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { createGenerator, escapeSelector } from '@unocss/core'
22
import presetWind4 from '@unocss/preset-wind4'
3+
import { createRemToPxResolver } from '@unocss/preset-wind4/utils'
34
import { describe, expect, it } from 'vitest'
45
import { presetWind4Targets } from './assets/preset-wind4-targets'
56

@@ -173,24 +174,22 @@ describe('preset-wind4', () => {
173174
`)
174175
})
175176

176-
it('processThemeVars', async () => {
177+
it('custom theme vars', async () => {
177178
const uno = await createGenerator({
178179
envMode: 'dev',
179180
presets: [
180181
presetWind4({
181182
reset: false,
182-
processThemeVars(vars) {
183-
return vars.map(([k, v]) => {
184-
if (k.includes('colors')) {
185-
k = k.replace('colors', 'ui')
183+
utilityResolver(vars, layer) {
184+
if (layer === 'theme') {
185+
const [key, value] = vars
186+
if (key.includes('colors')) {
187+
vars[0] = key.replace('colors', 'ui')
186188
}
187-
188-
if (v.includes('rem')) {
189-
v = v.replace('rem', 'px')
189+
if ((value as string).includes('rem')) {
190+
vars[1] = (value as string).replace('rem', 'px')
190191
}
191-
192-
return [k, v]
193-
})
192+
}
194193
},
195194
}),
196195
],
@@ -207,4 +206,26 @@ describe('preset-wind4', () => {
207206
}"
208207
`)
209208
})
209+
210+
it('unitResolver', async () => {
211+
const uno = await createGenerator({
212+
envMode: 'dev',
213+
presets: [
214+
presetWind4({
215+
reset: false,
216+
utilityResolver: createRemToPxResolver(),
217+
}),
218+
],
219+
})
220+
const { css } = await uno.generate('p-4 m-5rem')
221+
expect(css).toMatchInlineSnapshot(`
222+
"/* layer: theme */
223+
:root, :host {
224+
--spacing: 4px;
225+
}
226+
/* layer: default */
227+
.m-5rem{margin:80px;}
228+
.p-4{padding:calc(var(--spacing) * 4);}"
229+
`)
230+
})
210231
})

0 commit comments

Comments
 (0)
0