Skip to content

Commit bfcc144

Browse files
philipp-spiessphilipp-spiess
authored
Reduce precision of oklab() arguments in test snapshots (#15210)
After the changes in #15201, our Windows CI started to fail. The problem is that lightningcss now needs to convert `oklch` colors into the `oklab` space to inline some `color-mix()` functions. The problem, though, is that this calculation seems to have rounding differences between macOS, Linux, and Windows. Since we still want to _define the default color space in `oklch`_ and _use lightningcss as a post-processor in our unit tests so we have a better coverage of the output_, this PR attempts to fix the issue by adding a custom vitest serializer. It will find usages of the `oklab()` function with arguments that have lots of decimal places (at least 6 decimal places). What it then does is simply cut off any excess decimal places to truncate the output to 5 places. E.g.: ```diff - oklab(62.7955% .224863 .125846 / .75); + oklab(62.7955% .22486 .12584 / .75); ``` ## Test Plan I updated the CI workflow file to make all three builds run in CI and observed that they are now all green again. <img width="609" alt="Screenshot 2024-11-27 at 14 54 52" src="https://github.com/user-attachments/assets/73fe6da5-30e3-4fd4-83ea-115b1f1602a6">
1 parent 6aac3cb commit bfcc144

File tree

7 files changed

+66
-45
lines changed

7 files changed

+66
-45
lines changed

‎packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ exports[`border-* 1`] = `
6363
}
6464
6565
.border-\\[\\#0088cc\\]\\/50 {
66-
border-color: oklab(59.9824% -.0672516 -.124144 / .5);
66+
border-color: oklab(59.9824% -.06725 -.12414 / .5);
6767
}
6868
6969
.border-\\[color\\:var\\(--my-color\\)\\] {
@@ -196,7 +196,7 @@ exports[`border-b-* 1`] = `
196196
}
197197
198198
.border-b-\\[\\#0088cc\\]\\/50 {
199-
border-bottom-color: oklab(59.9824% -.0672516 -.124144 / .5);
199+
border-bottom-color: oklab(59.9824% -.06725 -.12414 / .5);
200200
}
201201
202202
.border-b-\\[color\\:var\\(--my-color\\)\\] {
@@ -329,7 +329,7 @@ exports[`border-e-* 1`] = `
329329
}
330330
331331
.border-e-\\[\\#0088cc\\]\\/50 {
332-
border-inline-end-color: oklab(59.9824% -.0672516 -.124144 / .5);
332+
border-inline-end-color: oklab(59.9824% -.06725 -.12414 / .5);
333333
}
334334
335335
.border-e-\\[color\\:var\\(--my-color\\)\\] {
@@ -462,7 +462,7 @@ exports[`border-l-* 1`] = `
462462
}
463463
464464
.border-l-\\[\\#0088cc\\]\\/50 {
465-
border-left-color: oklab(59.9824% -.0672516 -.124144 / .5);
465+
border-left-color: oklab(59.9824% -.06725 -.12414 / .5);
466466
}
467467
468468
.border-l-\\[color\\:var\\(--my-color\\)\\] {
@@ -595,7 +595,7 @@ exports[`border-r-* 1`] = `
595595
}
596596
597597
.border-r-\\[\\#0088cc\\]\\/50 {
598-
border-right-color: oklab(59.9824% -.0672516 -.124144 / .5);
598+
border-right-color: oklab(59.9824% -.06725 -.12414 / .5);
599599
}
600600
601601
.border-r-\\[color\\:var\\(--my-color\\)\\] {
@@ -728,7 +728,7 @@ exports[`border-s-* 1`] = `
728728
}
729729
730730
.border-s-\\[\\#0088cc\\]\\/50 {
731-
border-inline-start-color: oklab(59.9824% -.0672516 -.124144 / .5);
731+
border-inline-start-color: oklab(59.9824% -.06725 -.12414 / .5);
732732
}
733733
734734
.border-s-\\[color\\:var\\(--my-color\\)\\] {
@@ -861,7 +861,7 @@ exports[`border-t-* 1`] = `
861861
}
862862
863863
.border-t-\\[\\#0088cc\\]\\/50 {
864-
border-top-color: oklab(59.9824% -.0672516 -.124144 / .5);
864+
border-top-color: oklab(59.9824% -.06725 -.12414 / .5);
865865
}
866866
867867
.border-t-\\[color\\:var\\(--my-color\\)\\] {
@@ -994,7 +994,7 @@ exports[`border-x-* 1`] = `
994994
}
995995
996996
.border-x-\\[\\#0088cc\\]\\/50 {
997-
border-inline-color: oklab(59.9824% -.0672516 -.124144 / .5);
997+
border-inline-color: oklab(59.9824% -.06725 -.12414 / .5);
998998
}
999999
10001000
.border-x-\\[color\\:var\\(--my-color\\)\\] {
@@ -1127,7 +1127,7 @@ exports[`border-y-* 1`] = `
11271127
}
11281128
11291129
.border-y-\\[\\#0088cc\\]\\/50 {
1130-
border-block-color: oklab(59.9824% -.0672516 -.124144 / .5);
1130+
border-block-color: oklab(59.9824% -.06725 -.12414 / .5);
11311131
}
11321132
11331133
.border-y-\\[color\\:var\\(--my-color\\)\\] {

‎packages/tailwindcss/src/compat/plugin-api.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3462,7 +3462,7 @@ describe('matchUtilities()', () => {
34623462
}
34633463
34643464
.scrollbar-\\[\\#08c\\]\\/50 {
3465-
scrollbar-color: oklab(59.9824% -.0672516 -.124144 / .5);
3465+
scrollbar-color: oklab(59.9824% -.06725 -.12414 / .5);
34663466
}
34673467
34683468
.scrollbar-\\[2px\\] {

‎packages/tailwindcss/src/css-functions.test.ts‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ describe('theme function', () => {
152152
}
153153
154154
.red {
155-
color: oklab(62.7955% .224863 .125846 / .75);
155+
color: oklab(62.7955% .22486 .12584 / .75);
156156
}"
157157
`)
158158
})
@@ -173,7 +173,7 @@ describe('theme function', () => {
173173
}
174174
175175
.red {
176-
color: oklab(62.7955% .224863 .125846 / .75);
176+
color: oklab(62.7955% .22486 .12584 / .75);
177177
}"
178178
`)
179179
})
@@ -194,7 +194,7 @@ describe('theme function', () => {
194194
}
195195
196196
.red {
197-
color: oklab(62.7955% .224863 .125846 / .75);
197+
color: oklab(62.7955% .22486 .12584 / .75);
198198
}"
199199
`)
200200
})
@@ -455,7 +455,7 @@ describe('theme function', () => {
455455
}
456456
457457
.red {
458-
color: oklab(62.7955% .224863 .125846 / .25);
458+
color: oklab(62.7955% .22486 .12584 / .25);
459459
}"
460460
`)
461461
})
@@ -533,11 +533,11 @@ describe('theme function', () => {
533533
).toMatchInlineSnapshot(`
534534
":root {
535535
--color-red-500: red;
536-
--color-foo: oklab(62.7955% .224863 .125846 / .5);
536+
--color-foo: oklab(62.7955% .22486 .12584 / .5);
537537
}
538538
539539
.red {
540-
color: oklab(62.7955% .224863 .125846 / .25);
540+
color: oklab(62.7955% .22486 .12584 / .25);
541541
}"
542542
`)
543543
})
@@ -581,7 +581,7 @@ describe('theme function', () => {
581581
}
582582
583583
.red {
584-
color: oklab(62.7955% .224863 .125846 / .5);
584+
color: oklab(62.7955% .22486 .12584 / .5);
585585
}"
586586
`)
587587
})
@@ -873,13 +873,7 @@ describe('in plugins', () => {
873873
--color-red: oklch(62% 0.25 30);
874874
--color-orange: oklch(79% 0.17 70);
875875
--color-blue: oklch(45% 0.31 264);
876-
877-
/*
878-
Using oklab because Lightning converts the color to oklab when using
879-
color-mix() and the results are off by 0.00000001 between macOS and
880-
Linux.
881-
*/
882-
--color-pink: oklab(87% 0.07 0);
876+
--color-pink: oklch(87% 0.07 7);
883877
}
884878
@layer utilities {
885879
@tailwind utilities;
@@ -915,8 +909,8 @@ describe('in plugins', () => {
915909
.my-base-rule {
916910
color: oklch(62% .25 30);
917911
background-color: oklch(45% .31 264);
918-
border-color: oklab(87% .07 0 / .1);
919-
outline-color: oklab(79% .0581434 .159748 / .15);
912+
border-color: oklab(87% .06947 .00853 / .1);
913+
outline-color: oklab(79% .05814 .15974 / .15);
920914
}
921915
}
922916

‎packages/tailwindcss/src/index.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ describe('arbitrary properties', () => {
182182
it('should generate arbitrary properties with modifiers', async () => {
183183
expect(await run(['[color:red]/50'])).toMatchInlineSnapshot(`
184184
".\\[color\\:red\\]\\/50 {
185-
color: oklab(62.7955% .224863 .125846 / .5);
185+
color: oklab(62.7955% .22486 .12584 / .5);
186186
}"
187187
`)
188188
})

‎packages/tailwindcss/src/test-utils/custom-serializer.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import type { SnapshotSerializer } from 'vitest'
2+
3+
// We're reducing the precision of parameters to the `oklab()` function from
4+
// our snapshots as we've observed lightningcss generating different decimal
5+
// places in the last position when run on different operating systems.
6+
const HIGH_PRECISION_OKLAB = /oklab\(\d{1,2}\.?\d{0,4}% -?\.(\d{6,8}) -?\.(\d{6,8}) \/ \.\d{1,2}\)/g
7+
8+
export default {
9+
test(val) {
10+
return typeof val === 'string' && val.match(HIGH_PRECISION_OKLAB) !== null
11+
},
12+
serialize(val, config, indentation, depth, refs, printer) {
13+
if (typeof val !== 'string') {
14+
throw new Error('This was already tested in the test() callback')
15+
}
16+
17+
let replaced = val.replaceAll(HIGH_PRECISION_OKLAB, (match, first, second) => {
18+
return match.replaceAll(first, first.slice(0, 5)).replaceAll(second, second.slice(0, 5))
19+
})
20+
return printer(replaced, config, indentation, depth, refs)
21+
},
22+
} satisfies SnapshotSerializer

‎packages/tailwindcss/src/utilities.test.ts‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8373,7 +8373,7 @@ test('accent', async () => {
83738373
}
83748374
83758375
.accent-\\[\\#0088cc\\]\\/50, .accent-\\[\\#0088cc\\]\\/\\[0\\.5\\], .accent-\\[\\#0088cc\\]\\/\\[50\\%\\] {
8376-
accent-color: oklab(59.9824% -.0672516 -.124144 / .5);
8376+
accent-color: oklab(59.9824% -.06725 -.12414 / .5);
83778377
}
83788378
83798379
.accent-current {
@@ -8488,7 +8488,7 @@ test('caret', async () => {
84888488
}
84898489
84908490
.caret-\\[\\#0088cc\\]\\/50, .caret-\\[\\#0088cc\\]\\/\\[0\\.5\\], .caret-\\[\\#0088cc\\]\\/\\[50\\%\\] {
8491-
caret-color: oklab(59.9824% -.0672516 -.124144 / .5);
8491+
caret-color: oklab(59.9824% -.06725 -.12414 / .5);
84928492
}
84938493
84948494
.caret-current {
@@ -8601,7 +8601,7 @@ test('divide-color', async () => {
86018601
}
86028602
86038603
:where(.divide-\\[\\#0088cc\\]\\/50 > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-\\[\\#0088cc\\]\\/\\[50\\%\\] > :not(:last-child)) {
8604-
border-color: oklab(59.9824% -.0672516 -.124144 / .5);
8604+
border-color: oklab(59.9824% -.06725 -.12414 / .5);
86058605
}
86068606
86078607
:where(.divide-current > :not(:last-child)) {
@@ -10499,7 +10499,7 @@ test('bg', async () => {
1049910499
}
1050010500
1050110501
.bg-\\[\\#0088cc\\]\\/50, .bg-\\[\\#0088cc\\]\\/\\[0\\.5\\], .bg-\\[\\#0088cc\\]\\/\\[50\\%\\] {
10502-
background-color: oklab(59.9824% -.0672516 -.124144 / .5);
10502+
background-color: oklab(59.9824% -.06725 -.12414 / .5);
1050310503
}
1050410504
1050510505
.bg-\\[color\\:var\\(--some-var\\)\\] {
@@ -11113,7 +11113,7 @@ test('from', async () => {
1111311113
}
1111411114
1111511115
.from-\\[\\#0088cc\\]\\/50, .from-\\[\\#0088cc\\]\\/\\[0\\.5\\], .from-\\[\\#0088cc\\]\\/\\[50\\%\\] {
11116-
--tw-gradient-from: oklab(59.9824% -.0672516 -.124144 / .5);
11116+
--tw-gradient-from: oklab(59.9824% -.06725 -.12414 / .5);
1111711117
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1111811118
}
1111911119
@@ -11349,7 +11349,7 @@ test('via', async () => {
1134911349
}
1135011350
1135111351
.via-\\[\\#0088cc\\]\\/50, .via-\\[\\#0088cc\\]\\/\\[0\\.5\\], .via-\\[\\#0088cc\\]\\/\\[50\\%\\] {
11352-
--tw-gradient-via: oklab(59.9824% -.0672516 -.124144 / .5);
11352+
--tw-gradient-via: oklab(59.9824% -.06725 -.12414 / .5);
1135311353
--tw-gradient-via-stops: var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
1135411354
--tw-gradient-stops: var(--tw-gradient-via-stops);
1135511355
}
@@ -11593,7 +11593,7 @@ test('to', async () => {
1159311593
}
1159411594
1159511595
.to-\\[\\#0088cc\\]\\/50, .to-\\[\\#0088cc\\]\\/\\[0\\.5\\], .to-\\[\\#0088cc\\]\\/\\[50\\%\\] {
11596-
--tw-gradient-to: oklab(59.9824% -.0672516 -.124144 / .5);
11596+
--tw-gradient-to: oklab(59.9824% -.06725 -.12414 / .5);
1159711597
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, ) var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1159811598
}
1159911599
@@ -12157,7 +12157,7 @@ test('fill', async () => {
1215712157
}
1215812158
1215912159
.fill-\\[\\#0088cc\\]\\/50, .fill-\\[\\#0088cc\\]\\/\\[0\\.5\\], .fill-\\[\\#0088cc\\]\\/\\[50\\%\\] {
12160-
fill: oklab(59.9824% -.0672516 -.124144 / .5);
12160+
fill: oklab(59.9824% -.06725 -.12414 / .5);
1216112161
}
1216212162
1216312163
.fill-current {
@@ -12278,7 +12278,7 @@ test('stroke', async () => {
1227812278
}
1227912279
1228012280
.stroke-\\[\\#0088cc\\]\\/50, .stroke-\\[\\#0088cc\\]\\/\\[0\\.5\\], .stroke-\\[\\#0088cc\\]\\/\\[50\\%\\] {
12281-
stroke: oklab(59.9824% -.0672516 -.124144 / .5);
12281+
stroke: oklab(59.9824% -.06725 -.12414 / .5);
1228212282
}
1228312283
1228412284
.stroke-\\[color\\:var\\(--my-color\\)\\] {
@@ -13276,7 +13276,7 @@ test('placeholder', async () => {
1327613276
}
1327713277
1327813278
.placeholder-\\[\\#0088cc\\]\\/50::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[0\\.5\\]::placeholder, .placeholder-\\[\\#0088cc\\]\\/\\[50\\%\\]::placeholder {
13279-
color: oklab(59.9824% -.0672516 -.124144 / .5);
13279+
color: oklab(59.9824% -.06725 -.12414 / .5);
1328013280
}
1328113281
1328213282
.placeholder-current::placeholder {
@@ -13401,7 +13401,7 @@ test('decoration', async () => {
1340113401
}
1340213402
1340313403
.decoration-\\[\\#0088cc\\]\\/50, .decoration-\\[\\#0088cc\\]\\/\\[0\\.5\\], .decoration-\\[\\#0088cc\\]\\/\\[50\\%\\] {
13404-
text-decoration-color: oklab(59.9824% -.0672516 -.124144 / .5);
13404+
text-decoration-color: oklab(59.9824% -.06725 -.12414 / .5);
1340513405
}
1340613406
1340713407
.decoration-\\[color\\:var\\(--my-color\\)\\] {
@@ -15180,7 +15180,7 @@ test('outline', async () => {
1518015180
}
1518115181
1518215182
.outline-\\[\\#0088cc\\]\\/50, .outline-\\[\\#0088cc\\]\\/\\[0\\.5\\], .outline-\\[\\#0088cc\\]\\/\\[50\\%\\] {
15183-
outline-color: oklab(59.9824% -.0672516 -.124144 / .5);
15183+
outline-color: oklab(59.9824% -.06725 -.12414 / .5);
1518415184
}
1518515185
1518615186
.outline-\\[black\\] {
@@ -15612,7 +15612,7 @@ test('text', async () => {
1561215612
}
1561315613
1561415614
.text-\\[\\#0088cc\\]\\/50, .text-\\[\\#0088cc\\]\\/\\[0\\.5\\], .text-\\[\\#0088cc\\]\\/\\[50\\%\\] {
15615-
color: oklab(59.9824% -.0672516 -.124144 / .5);
15615+
color: oklab(59.9824% -.06725 -.12414 / .5);
1561615616
}
1561715617
1561815618
.text-\\[color\\:var\\(--my-color\\)\\] {
@@ -15781,7 +15781,7 @@ test('shadow', async () => {
1578115781
}
1578215782
1578315783
.shadow-\\[\\#0088cc\\]\\/50, .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
15784-
--tw-shadow-color: oklab(59.9824% -.0672516 -.124144 / .5);
15784+
--tw-shadow-color: oklab(59.9824% -.06725 -.12414 / .5);
1578515785
}
1578615786
1578715787
.shadow-\\[color\\:var\\(--value\\)\\] {
@@ -16024,7 +16024,7 @@ test('inset-shadow', async () => {
1602416024
}
1602516025
1602616026
.inset-shadow-\\[\\#0088cc\\]\\/50, .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
16027-
--tw-inset-shadow-color: oklab(59.9824% -.0672516 -.124144 / .5);
16027+
--tw-inset-shadow-color: oklab(59.9824% -.06725 -.12414 / .5);
1602816028
}
1602916029
1603016030
.inset-shadow-\\[color\\:var\\(--value\\)\\] {
@@ -16273,7 +16273,7 @@ test('ring', async () => {
1627316273
}
1627416274
1627516275
.ring-\\[\\#0088cc\\]\\/50, .ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-\\[\\#0088cc\\]\\/\\[50\\%\\] {
16276-
--tw-ring-color: oklab(59.9824% -.0672516 -.124144 / .5);
16276+
--tw-ring-color: oklab(59.9824% -.06725 -.12414 / .5);
1627716277
}
1627816278
1627916279
.ring-\\[color\\:var\\(--my-color\\)\\] {
@@ -16548,7 +16548,7 @@ test('inset-ring', async () => {
1654816548
}
1654916549
1655016550
.inset-ring-\\[\\#0088cc\\]\\/50, .inset-ring-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-ring-\\[\\#0088cc\\]\\/\\[50\\%\\] {
16551-
--tw-inset-ring-color: oklab(59.9824% -.0672516 -.124144 / .5);
16551+
--tw-inset-ring-color: oklab(59.9824% -.06725 -.12414 / .5);
1655216552
}
1655316553
1655416554
.inset-ring-\\[color\\:var\\(--my-color\\)\\] {
@@ -16811,7 +16811,7 @@ test('ring-offset', async () => {
1681116811
}
1681216812
1681316813
.ring-offset-\\[\\#0088cc\\]\\/50, .ring-offset-\\[\\#0088cc\\]\\/\\[0\\.5\\], .ring-offset-\\[\\#0088cc\\]\\/\\[50\\%\\] {
16814-
--tw-ring-offset-color: oklab(59.9824% -.0672516 -.124144 / .5);
16814+
--tw-ring-offset-color: oklab(59.9824% -.06725 -.12414 / .5);
1681516815
}
1681616816
1681716817
.ring-offset-\\[color\\:var\\(--my-color\\)\\] {

‎packages/tailwindcss/vitest.config.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1+
import path from 'node:path'
2+
import { fileURLToPath } from 'node:url'
13
import { defineConfig } from 'vitest/config'
24

5+
const __dirname = fileURLToPath(new URL('.', import.meta.url))
6+
37
export default defineConfig({
48
test: {
9+
snapshotSerializers: [path.resolve(__dirname, 'src/test-utils/custom-serializer.ts')],
510
exclude: ['**/*.spec.?(c|m)[jt]s?(x)', 'integrations/**/*'],
611
},
712
})

0 commit comments

Comments
 (0)