Skip to content

Commit 04d10f0

Browse files
sonofmagicsonofmagic
committed
fix(weapp-tailwindcss): replace v4 default colors for weapp
1 parent 63f0740 commit 04d10f0

7 files changed

Lines changed: 79 additions & 149 deletions

File tree

‎.changeset/generator-plugin-compatibility.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
"weapp-tailwindcss": patch
33
---
44

5-
修复 Tailwind CSS v3 生成器在插件 class cache 中过滤通配符候选时的兼容问题，补充 v3/v4 生成器对官方插件、自定义插件和 Iconify 图标插件的回归覆盖，并在 Tailwind CSS v4 小程序生成输出中将 OKLCH/OKLAB 颜色降级为小程序可识别的 RGB/RGBA。
5+
修复 Tailwind CSS v3 生成器在插件 class cache 中过滤通配符候选时的兼容问题，补充 v3/v4 生成器对官方插件、自定义插件和 Iconify 图标插件的回归覆盖，并在 Tailwind CSS v4 小程序生成模式下将默认颜色变量替换为小程序可识别的 hex 色值。

‎packages/weapp-tailwindcss/src/tailwindcss/v4-engine/color-compatibility.ts‎

Lines changed: 0 additions & 122 deletions
This file was deleted.

‎packages/weapp-tailwindcss/src/tailwindcss/v4-engine/generator.ts‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@ import type { TailwindV4Engine, TailwindV4GenerateOptions, TailwindV4ResolvedSou
22
import { createTailwindV4Engine as createPatchTailwindV4Engine } from 'tailwindcss-patch'
33
import { transformTailwindV4CssByTarget } from './miniprogram'
44
import { applyTailwindV3CompatibilityCss } from './tailwind-v3-compatibility'
5+
import { createTailwindV4DefaultColorThemeCss } from './tailwind-v4-default-colors'
6+
7+
function applyMiniProgramTailwindV4DefaultColorCss(css: string) {
8+
return `${createTailwindV4DefaultColorThemeCss()}\n${css}`
9+
}
510

611
export function createTailwindV4Engine(source: TailwindV4ResolvedSource): TailwindV4Engine {
712
async function generate(options: TailwindV4GenerateOptions = {}) {
@@ -12,13 +17,13 @@ export function createTailwindV4Engine(source: TailwindV4ResolvedSource): Tailwi
1217
...patchOptions
1318
} = options
1419
const shouldApplyTailwindV3Compatibility = tailwindcssV3Compatibility ?? target === 'weapp'
20+
const sourceCss = shouldApplyTailwindV3Compatibility
21+
? applyTailwindV3CompatibilityCss(source.css)
22+
: target === 'weapp'
23+
? applyMiniProgramTailwindV4DefaultColorCss(source.css)
24+
: source.css
1525
const engine = createPatchTailwindV4Engine(
16-
shouldApplyTailwindV3Compatibility
17-
? {
18-
...source,
19-
css: applyTailwindV3CompatibilityCss(source.css),
20-
}
21-
: source,
26+
sourceCss === source.css ? source : { ...source, css: sourceCss },
2227
)
2328
const result = await engine.generate({
2429
scanSources: true,

‎packages/weapp-tailwindcss/src/tailwindcss/v4-engine/miniprogram.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import type { IStyleHandlerOptions } from '@weapp-tailwindcss/postcss/types'
22
import type { TailwindV4GenerateTarget } from './types'
33
import { createStyleHandler } from '@weapp-tailwindcss/postcss'
44
import { pruneMiniProgramGeneratedCss } from '../miniprogram'
5-
import { lowerModernColorFunctionsForMiniProgram } from './color-compatibility'
65

76
const defaultStyleHandler = createStyleHandler({
87
cssChildCombinatorReplaceValue: ['view', 'text'],
@@ -15,8 +14,7 @@ export async function transformTailwindV4CssToWeapp(
1514
css: string,
1615
options?: Partial<IStyleHandlerOptions>,
1716
) {
18-
const compatibleCss = lowerModernColorFunctionsForMiniProgram(css)
19-
const result = await defaultStyleHandler(compatibleCss, {
17+
const result = await defaultStyleHandler(css, {
2018
cssChildCombinatorReplaceValue: ['view', 'text'],
2119
cssRemoveHoverPseudoClass: true,
2220
isMainChunk: true,

‎packages/weapp-tailwindcss/src/tailwindcss/v4-engine/tailwind-v4-default-colors.ts‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
const TAILWIND_V4_COLOR_STEPS = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'] as const
2+
3+
const TAILWIND_V4_COLOR_PALETTE: Record<string, string[]> = {
4+
slate: ['#f8fafc', '#f1f5f9', '#e2e8f0', '#cad5e2', '#90a1b9', '#62748e', '#45556c', '#314158', '#1d293d', '#0f172b', '#020618'],
5+
gray: ['#f9fafb', '#f3f4f6', '#e5e7eb', '#d1d5dc', '#99a1af', '#6a7282', '#4a5565', '#364153', '#1e2939', '#101828', '#030712'],
6+
zinc: ['#fafafa', '#f4f4f5', '#e4e4e7', '#d4d4d8', '#9f9fa9', '#71717b', '#52525c', '#3f3f46', '#27272a', '#18181b', '#09090b'],
7+
neutral: ['#fafafa', '#f5f5f5', '#e5e5e5', '#d4d4d4', '#a1a1a1', '#737373', '#525252', '#404040', '#262626', '#171717', '#0a0a0a'],
8+
stone: ['#fafaf9', '#f5f5f4', '#e7e5e4', '#d6d3d1', '#a6a09b', '#79716b', '#57534d', '#44403b', '#292524', '#1c1917', '#0c0a09'],
9+
mauve: ['#fafafa', '#f3f1f3', '#e7e4e7', '#d7d0d7', '#a89ea9', '#79697b', '#594c5b', '#463947', '#2a212c', '#1d161e', '#0c090c'],
10+
olive: ['#fbfbf9', '#f4f4f0', '#e8e8e3', '#d8d8d0', '#abab9c', '#7c7c67', '#5b5b4b', '#474739', '#2b2b22', '#1d1d16', '#0c0c09'],
11+
mist: ['#f9fbfb', '#f1f3f3', '#e3e7e8', '#d0d6d8', '#9ca8ab', '#67787c', '#4b585b', '#394447', '#22292b', '#161b1d', '#090b0c'],
12+
taupe: ['#fbfaf9', '#f3f1f1', '#e8e4e3', '#d8d2d0', '#aba09c', '#7c6d67', '#5b4f4b', '#473c39', '#2b2422', '#1d1816', '#0c0a09'],
13+
red: ['#fef2f2', '#ffe2e2', '#ffc9c9', '#ffa2a2', '#ff6467', '#fb2c36', '#e7000b', '#c10007', '#9f0712', '#82181a', '#460809'],
14+
orange: ['#fff7ed', '#ffedd4', '#ffd6a7', '#ffb86a', '#ff8904', '#ff6900', '#f54900', '#ca3500', '#9f2d00', '#7e2a0c', '#441306'],
15+
amber: ['#fffbeb', '#fef3c6', '#fee685', '#ffd230', '#ffb900', '#fe9a00', '#e17100', '#bb4d00', '#973c00', '#7b3306', '#461901'],
16+
yellow: ['#fefce8', '#fef9c2', '#fff085', '#ffdf20', '#fdc700', '#f0b100', '#d08700', '#a65f00', '#894b00', '#733e0a', '#432004'],
17+
lime: ['#f7fee7', '#ecfcca', '#d8f999', '#bbf451', '#9ae600', '#7ccf00', '#5ea500', '#497d00', '#3c6300', '#35530e', '#192e03'],
18+
green: ['#f0fdf4', '#dcfce7', '#b9f8cf', '#7bf1a8', '#05df72', '#00c950', '#00a63e', '#008236', '#016630', '#0d542b', '#032e15'],
19+
emerald: ['#ecfdf5', '#d0fae5', '#a4f4cf', '#5ee9b5', '#00d492', '#00bc7d', '#009966', '#007a55', '#006045', '#004f3b', '#002c22'],
20+
teal: ['#f0fdfa', '#cbfbf1', '#96f7e4', '#46ecd5', '#00d5be', '#00bba7', '#009689', '#00786f', '#005f5a', '#0b4f4a', '#022f2e'],
21+
cyan: ['#ecfeff', '#cefafe', '#a2f4fd', '#53eafd', '#00d3f2', '#00b8db', '#0092b8', '#007595', '#005f78', '#104e64', '#053345'],
22+
sky: ['#f0f9ff', '#dff2fe', '#b8e6fe', '#74d4ff', '#00bcff', '#00a6f4', '#0084d1', '#0069a8', '#00598a', '#024a70', '#052f4a'],
23+
blue: ['#eff6ff', '#dbeafe', '#bedbff', '#8ec5ff', '#51a2ff', '#2b7fff', '#155dfc', '#1447e6', '#193cb8', '#1c398e', '#162456'],
24+
indigo: ['#eef2ff', '#e0e7ff', '#c6d2ff', '#a3b3ff', '#7c86ff', '#615fff', '#4f39f6', '#432dd7', '#372aac', '#312c85', '#1e1a4d'],
25+
violet: ['#f5f3ff', '#ede9fe', '#ddd6ff', '#c4b4ff', '#a684ff', '#8e51ff', '#7f22fe', '#7008e7', '#5d0ec0', '#4d179a', '#2f0d68'],
26+
purple: ['#faf5ff', '#f3e8ff', '#e9d4ff', '#dab2ff', '#c27aff', '#ad46ff', '#9810fa', '#8200db', '#6e11b0', '#59168b', '#3c0366'],
27+
fuchsia: ['#fdf4ff', '#fae8ff', '#f6cfff', '#f4a8ff', '#ed6aff', '#e12afb', '#c800de', '#a800b7', '#8a0194', '#721378', '#4b004f'],
28+
pink: ['#fdf2f8', '#fce7f3', '#fccee8', '#fda5d5', '#fb64b6', '#f6339a', '#e60076', '#c6005c', '#a3004c', '#861043', '#510424'],
29+
rose: ['#fff1f2', '#ffe4e6', '#ffccd3', '#ffa1ad', '#ff637e', '#ff2056', '#ec003f', '#c70036', '#a50036', '#8b0836', '#4d0218'],
30+
}
31+
32+
export function createTailwindV4DefaultColorThemeCss() {
33+
const declarations = [
34+
' --color-black: #000;',
35+
' --color-white: #fff;',
36+
]
37+
for (const [color, values] of Object.entries(TAILWIND_V4_COLOR_PALETTE)) {
38+
for (let index = 0; index < TAILWIND_V4_COLOR_STEPS.length; index++) {
39+
declarations.push(` --color-${color}-${TAILWIND_V4_COLOR_STEPS[index]}: ${values[index]};`)
40+
}
41+
}
42+
return [
43+
'@theme {',
44+
...declarations,
45+
'}',
46+
].join('\n')
47+
}

‎packages/weapp-tailwindcss/test/tailwindcss/v4-engine.test.ts‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,12 @@ describe('tailwindcss v4 engine', () => {
3838
expect(result.css).not.toContain('not-a-tailwind-class')
3939
})
4040

41-
it('lowers user-defined OKLCH and OKLAB theme colors for mini-program output', async () => {
41+
it('uses mini-program-safe Tailwind v4 default color variables for native v4 weapp output', async () => {
4242
const source = await resolveTailwindV4Source({
4343
css: `
44-
@theme {
45-
--color-brand: oklch(62.3% 0.214 259.815);
46-
--color-accent: oklab(63.7% 0.224 0.125 / 50%);
44+
@theme default {
45+
--color-blue-500: oklch(62.3% 0.214 259.815);
46+
--color-red-500: oklch(63.7% 0.237 25.331);
4747
}
4848
@tailwind utilities;
4949
`,
@@ -52,24 +52,23 @@ describe('tailwindcss v4 engine', () => {
5252
const engine = createTailwindV4Engine(source)
5353

5454
const result = await engine.generate({
55-
candidates: ['bg-brand', 'text-accent'],
55+
tailwindcssV3Compatibility: false,
56+
candidates: ['bg-blue-500', 'text-red-500'],
5657
})
5758

58-
expect(result.rawCss).toContain('--color-brand: oklch(62.3% 0.214 259.815)')
59-
expect(result.rawCss).toContain('--color-accent: oklab(63.7% 0.224 0.125 / 50%)')
60-
expect(result.css).toContain('--color-brand: rgb(43, 127, 255)')
61-
expect(result.css).toContain('--color-accent: rgba(255, 17, 12, 0.5)')
62-
expect(result.css).toContain('background-color: var(--color-brand)')
63-
expect(result.css).toContain('color: var(--color-accent)')
59+
expect(result.css).toContain('--color-blue-500: #2b7fff')
60+
expect(result.css).toContain('--color-red-500: #fb2c36')
61+
expect(result.css).toContain('background-color: var(--color-blue-500)')
62+
expect(result.css).toContain('color: var(--color-red-500)')
6463
expect(result.css).not.toContain('oklch(')
6564
expect(result.css).not.toContain('oklab(')
6665
})
6766

68-
it('keeps native OKLCH theme colors for web output', async () => {
67+
it('keeps native Tailwind v4 OKLCH default color variables for web output', async () => {
6968
const source = await resolveTailwindV4Source({
7069
css: `
71-
@theme {
72-
--color-brand: oklch(62.3% 0.214 259.815);
70+
@theme default {
71+
--color-blue-500: oklch(62.3% 0.214 259.815);
7372
}
7473
@tailwind utilities;
7574
`,
@@ -78,12 +77,12 @@ describe('tailwindcss v4 engine', () => {
7877
const engine = createTailwindV4Engine(source)
7978

8079
const result = await engine.generate({
81-
candidates: ['bg-brand'],
80+
candidates: ['bg-blue-500'],
8281
target: 'web',
8382
})
8483

85-
expect(result.css).toContain('--color-brand: oklch(62.3% 0.214 259.815)')
86-
expect(result.css).toContain('background-color: var(--color-brand)')
84+
expect(result.css).toContain('--color-blue-500: oklch(62.3% 0.214 259.815)')
85+
expect(result.css).toContain('background-color: var(--color-blue-500)')
8786
})
8887

8988
it('extracts candidates from runtime sources', async () => {

‎packages/weapp-tailwindcss/test/v5/tailwind-v4-upgrade-generator-coverage.test.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,12 +234,15 @@ describe('v5 Tailwind CSS v4 upgrade generator coverage', () => {
234234
expect(result.css).toContain('calc(1px + var(--tw-ring-offset-width))')
235235
expect(result.css).toContain('var(--tw-ring-color, currentcolor)')
236236
expect(result.css).toContain('outline-width: 1px')
237+
expect(result.css).toContain('--color-red-500: #fb2c36')
238+
expect(result.css).toContain('--color-slate-700: #314158')
237239
expect(result.css).toContain('--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgba(0, 0, 0, 0.1))')
238240
expect(result.css).toContain('border-radius: var(--radius-sm)')
239241
expect(result.css).toContain('--tw-blur: blur(var(--blur-sm))')
240242
expect(result.css).not.toContain('border-color: var(--color-gray-200, currentcolor)')
241243
expect(result.css).not.toContain('calc(3px + var(--tw-ring-offset-width))')
242244
expect(result.css).not.toContain('.shadow-sm {\n --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.05))')
245+
expect(result.css).not.toContain('oklch(')
243246
})
244247

245248
it('keeps user-defined theme colors ahead of Tailwind v3 compatibility color defaults', async () => {

0 commit comments

Comments
 (0)