Skip to content

Commit 2fa0dfe

Browse files
zyyvzyyv
authored
fix(preset-wind4): improve regex accuracy (#4776)
1 parent 39420a4 commit 2fa0dfe

2 files changed

Lines changed: 55 additions & 13 deletions

File tree

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

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -159,14 +159,27 @@ export function parseColor(body: string, theme: Theme) {
159159
}
160160

161161
const colors = main
162-
.replace(/([a-z])(\d)/g, '$1-$2')
162+
.replace(/([a-z])(\d)(?![-_a-z])/g, '$1-$2')
163163
.split(/-/g)
164164
const [name] = colors
165165

166166
if (!name)
167167
return
168168

169-
let { no, keys, color } = parseThemeColor(theme, colors) ?? {}
169+
let parsed = parseThemeColor(theme, colors)
170+
if (!parsed && colors.length >= 2) {
171+
// If the last part of the color is numbers, merge the last two parts
172+
// e.g. ['foo', 'bar', '1'] should be parsed as ['foo', 'bar1']
173+
// try the last key is `bar1` in the theme.
174+
const last = colors.at(-1)
175+
const secondLast = colors.at(-2)
176+
if (/^\d+$/.test(last!)) {
177+
const keys = colors.slice(0, -2).concat([`${secondLast}${last}`])
178+
parsed = parseThemeColor(theme, keys)
179+
}
180+
}
181+
182+
let { no, keys, color } = parsed ?? {}
170183

171184
if (!color) {
172185
const bracket = h.bracketOfColor(main)

‎test/preset-wind4.test.ts‎

Lines changed: 40 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -273,22 +273,36 @@ describe('preset-wind4', () => {
273273
},
274274
},
275275
},
276+
'baz1': {
277+
DEFAULT: '#000',
278+
qux1: '#fff',
279+
},
280+
'qux': {
281+
2: '#000',
282+
},
283+
'quxx_1': '#000',
284+
'a2b': '#000',
276285
},
277286
},
278287
})
279288

280-
const template = `
281-
<div class="text-foo-bar">1</div>
282-
<div class="text-foo-100-bar">2</div>
283-
<div class="text-foo-baz-qux">3</div>
284-
<div class="text-foo-primary-1">4</div>
285-
<div class="text-foo-primary-2">5</div>
286-
<div class="text-foo-primary-3-kebab-value">6</div>
287-
<div class="text-foo-primary-veryCool-kebab-value-test">7</div>
288-
<div class="text-red">8</div>
289-
`
289+
const templates = [
290+
'text-foo-bar',
291+
'text-foo-100-bar',
292+
'text-foo-baz-qux',
293+
'text-foo-primary-1',
294+
'text-foo-primary-2',
295+
'text-foo-primary-3-kebab-value',
296+
'text-foo-primary-veryCool-kebab-value-test',
297+
'text-red',
298+
'text-baz1',
299+
'text-baz1-qux1',
300+
'text-qux2',
301+
'text-quxx_1',
302+
'text-a2b',
303+
]
290304

291-
const { css } = await uno.generate(template)
305+
const { css } = await uno.generate(templates)
292306
expect(css).toMatchInlineSnapshot(`
293307
"/* layer: properties */
294308
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*, ::before, ::after, ::backdrop{--un-text-opacity:100%;}}
@@ -303,24 +317,39 @@ describe('preset-wind4', () => {
303317
--colors-foo-primary-3-kebab-value: red;
304318
--colors-foo-primary-veryCool-kebab-value-test: red;
305319
--colors-red-DEFAULT: oklch(70.4% 0.191 22.216);
320+
--colors-baz1-DEFAULT: #000;
321+
--colors-baz1-qux1: #fff;
322+
--colors-qux-2: #000;
323+
--colors-quxx_1: #000;
324+
--colors-a2b: #000;
306325
}
307326
/* layer: default */
327+
.text-a2b{color:color-mix(in srgb, var(--colors-a2b) var(--un-text-opacity), transparent) /* #000 */;}
328+
.text-baz1{color:color-mix(in srgb, var(--colors-baz1-DEFAULT) var(--un-text-opacity), transparent) /* #000 */;}
329+
.text-baz1-qux1{color:color-mix(in srgb, var(--colors-baz1-qux1) var(--un-text-opacity), transparent) /* #fff */;}
308330
.text-foo-100-bar{color:color-mix(in srgb, var(--colors-foo-100-bar) var(--un-text-opacity), transparent) /* #000 */;}
309331
.text-foo-bar{color:color-mix(in srgb, var(--colors-foo-bar) var(--un-text-opacity), transparent) /* #fff */;}
310332
.text-foo-baz-qux{color:color-mix(in srgb, var(--colors-foo-baz-qux) var(--un-text-opacity), transparent) /* #f00 */;}
311333
.text-foo-primary-1{color:color-mix(in srgb, var(--colors-foo-primary-1-DEFAULT) var(--un-text-opacity), transparent) /* red */;}
312334
.text-foo-primary-2{color:color-mix(in srgb, var(--colors-foo-primary-2) var(--un-text-opacity), transparent) /* red */;}
313335
.text-foo-primary-3-kebab-value{color:color-mix(in srgb, var(--colors-foo-primary-3-kebab-value) var(--un-text-opacity), transparent) /* red */;}
314336
.text-foo-primary-veryCool-kebab-value-test{color:color-mix(in srgb, var(--colors-foo-primary-veryCool-kebab-value-test) var(--un-text-opacity), transparent) /* red */;}
337+
.text-qux2{color:color-mix(in srgb, var(--colors-qux-2) var(--un-text-opacity), transparent) /* #000 */;}
338+
.text-quxx_1{color:color-mix(in srgb, var(--colors-quxx_1) var(--un-text-opacity), transparent) /* #000 */;}
315339
.text-red{color:color-mix(in srgb, var(--colors-red-DEFAULT) var(--un-text-opacity), transparent) /* oklch(70.4% 0.191 22.216) */;}
316340
@supports (color: color-mix(in lab, red, red)){
341+
.text-a2b{color:color-mix(in oklab, var(--colors-a2b) var(--un-text-opacity), transparent) /* #000 */;}
342+
.text-baz1{color:color-mix(in oklab, var(--colors-baz1-DEFAULT) var(--un-text-opacity), transparent) /* #000 */;}
343+
.text-baz1-qux1{color:color-mix(in oklab, var(--colors-baz1-qux1) var(--un-text-opacity), transparent) /* #fff */;}
317344
.text-foo-100-bar{color:color-mix(in oklab, var(--colors-foo-100-bar) var(--un-text-opacity), transparent) /* #000 */;}
318345
.text-foo-bar{color:color-mix(in oklab, var(--colors-foo-bar) var(--un-text-opacity), transparent) /* #fff */;}
319346
.text-foo-baz-qux{color:color-mix(in oklab, var(--colors-foo-baz-qux) var(--un-text-opacity), transparent) /* #f00 */;}
320347
.text-foo-primary-1{color:color-mix(in oklab, var(--colors-foo-primary-1-DEFAULT) var(--un-text-opacity), transparent) /* red */;}
321348
.text-foo-primary-2{color:color-mix(in oklab, var(--colors-foo-primary-2) var(--un-text-opacity), transparent) /* red */;}
322349
.text-foo-primary-3-kebab-value{color:color-mix(in oklab, var(--colors-foo-primary-3-kebab-value) var(--un-text-opacity), transparent) /* red */;}
323350
.text-foo-primary-veryCool-kebab-value-test{color:color-mix(in oklab, var(--colors-foo-primary-veryCool-kebab-value-test) var(--un-text-opacity), transparent) /* red */;}
351+
.text-qux2{color:color-mix(in oklab, var(--colors-qux-2) var(--un-text-opacity), transparent) /* #000 */;}
352+
.text-quxx_1{color:color-mix(in oklab, var(--colors-quxx_1) var(--un-text-opacity), transparent) /* #000 */;}
324353
.text-red{color:color-mix(in oklab, var(--colors-red-DEFAULT) var(--un-text-opacity), transparent) /* oklch(70.4% 0.191 22.216) */;}
325354
}"
326355
`)

0 commit comments

Comments
 (0)