Skip to content

Commit ac6d4a6

Browse files
philipp-spiessphilipp-spiess
authored
Spreading tailwindcss/defaultTheme exports keeps bare values (#14257)
In #14221 we added a new export to the `tailwindcss` package: `tailwindcss/defaultTheme`. This is build on top of the full config from V3 and will allow plugins to keep being compatible. However, spreading in from this package has overwritten the bare value callback handler. This PR fixes it by sharing the bare value callbacks with the compat config.
1 parent fa8253e commit ac6d4a6

File tree

5 files changed

+625
-177
lines changed

5 files changed

+625
-177
lines changed

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1414
- Handle arrays in the CSS `theme()` function when using plugins ([#14262](https://github.com/tailwindlabs/tailwindcss/pull/14262))
1515
- Fix fallback values when using the CSS `theme()` function ([#14262](https://github.com/tailwindlabs/tailwindcss/pull/14262))
1616
- Fix support for declaration fallbacks in plugins ([#14265](https://github.com/tailwindlabs/tailwindcss/pull/14265))
17+
- Support bare values when using `tailwindcss/defaultTheme` ([#14257](https://github.com/tailwindlabs/tailwindcss/pull/14257))
1718

1819
## [4.0.0-alpha.20] - 2024-08-23
1920

‎packages/tailwindcss/src/compat/config/create-compat-config.ts

+13-166
Original file line numberDiff line numberDiff line change
@@ -1,179 +1,26 @@
1-
import type { NamedUtilityValue } from '../../candidate'
21
import type { Theme } from '../../theme'
3-
import { segment } from '../../utils/segment'
2+
import defaultTheme from '../default-theme'
43
import type { UserConfig } from './types'
54

6-
function bareValues(fn: (value: NamedUtilityValue) => string | undefined) {
7-
return {
8-
// Ideally this would be a Symbol but some of the ecosystem assumes object with
9-
// string / number keys for example by using `Object.entries()` which means that
10-
// the function that handles the bare value would be lost
11-
__BARE_VALUE__: fn,
12-
}
13-
}
14-
15-
let bareIntegers = bareValues((value) => {
16-
if (!Number.isNaN(Number(value.value))) {
17-
return value.value
18-
}
19-
})
20-
21-
let barePercentages = bareValues((value: NamedUtilityValue) => {
22-
if (!Number.isNaN(Number(value.value))) {
23-
return `${value.value}%`
24-
}
25-
})
26-
27-
let barePixels = bareValues((value: NamedUtilityValue) => {
28-
if (!Number.isNaN(Number(value.value))) {
29-
return `${value.value}px`
30-
}
31-
})
32-
33-
let bareMilliseconds = bareValues((value: NamedUtilityValue) => {
34-
if (!Number.isNaN(Number(value.value))) {
35-
return `${value.value}ms`
36-
}
37-
})
38-
39-
let bareDegrees = bareValues((value: NamedUtilityValue) => {
40-
if (!Number.isNaN(Number(value.value))) {
41-
return `${value.value}deg`
42-
}
43-
})
44-
45-
export function createCompatConfig(theme: Theme): UserConfig {
5+
export function createCompatConfig(cssTheme: Theme): UserConfig {
466
return {
477
theme: {
8+
...defaultTheme,
9+
10+
// In the defaultTheme config, the `colors` key is not a function but a
11+
// shallow object. We don't want to define the color namespace unless it
12+
// is in the CSS theme so here we explicitly overwrite the defaultTheme
13+
// and only allow colors from the CSS theme.
4814
colors: ({ theme }) => theme('color', {}),
49-
accentColor: ({ theme }) => theme('colors'),
50-
aspectRatio: bareValues((value) => {
51-
if (value.fraction === null) return
52-
let [lhs, rhs] = segment(value.fraction, '/')
53-
if (!Number.isInteger(Number(lhs)) || !Number.isInteger(Number(rhs))) return
54-
return value.fraction
55-
}),
56-
backdropBlur: ({ theme }) => theme('blur'),
57-
backdropBrightness: ({ theme }) => ({
58-
...theme('brightness'),
59-
...barePercentages,
60-
}),
61-
backdropContrast: ({ theme }) => ({
62-
...theme('contrast'),
63-
...barePercentages,
64-
}),
65-
backdropGrayscale: ({ theme }) => ({
66-
...theme('grayscale'),
67-
...barePercentages,
68-
}),
69-
backdropHueRotate: ({ theme }) => ({
70-
...theme('hueRotate'),
71-
...bareDegrees,
72-
}),
73-
backdropInvert: ({ theme }) => ({
74-
...theme('invert'),
75-
...barePercentages,
76-
}),
77-
backdropOpacity: ({ theme }) => ({
78-
...theme('opacity'),
79-
...barePercentages,
80-
}),
81-
backdropSaturate: ({ theme }) => ({
82-
...theme('saturate'),
83-
...barePercentages,
84-
}),
85-
backdropSepia: ({ theme }) => ({
86-
...theme('sepia'),
87-
...barePercentages,
88-
}),
89-
backgroundColor: ({ theme }) => theme('colors'),
90-
backgroundOpacity: ({ theme }) => theme('opacity'),
91-
border: barePixels,
92-
borderColor: ({ theme }) => theme('colors'),
93-
borderOpacity: ({ theme }) => theme('opacity'),
94-
borderSpacing: ({ theme }) => theme('spacing'),
95-
boxShadowColor: ({ theme }) => theme('colors'),
96-
brightness: barePercentages,
97-
caretColor: ({ theme }) => theme('colors'),
98-
columns: bareIntegers,
99-
contrast: barePercentages,
100-
divideColor: ({ theme }) => theme('borderColor'),
101-
divideOpacity: ({ theme }) => theme('borderOpacity'),
102-
divideWidth: ({ theme }) => ({
103-
...theme('borderWidth'),
104-
...barePixels,
105-
}),
106-
fill: ({ theme }) => theme('colors'),
107-
flexBasis: ({ theme }) => theme('spacing'),
108-
flexGrow: bareIntegers,
109-
flexShrink: bareIntegers,
110-
gap: ({ theme }) => theme('spacing'),
111-
gradientColorStopPositions: barePercentages,
112-
gradientColorStops: ({ theme }) => theme('colors'),
113-
grayscale: barePercentages,
114-
gridRowEnd: bareIntegers,
115-
gridRowStart: bareIntegers,
116-
gridTemplateColumns: bareValues((value) => {
117-
if (!Number.isNaN(Number(value.value))) {
118-
return `repeat(${value.value}, minmax(0, 1fr))`
119-
}
120-
}),
121-
gridTemplateRows: bareValues((value) => {
122-
if (!Number.isNaN(Number(value.value))) {
123-
return `repeat(${value.value}, minmax(0, 1fr))`
124-
}
125-
}),
126-
height: ({ theme }) => theme('spacing'),
127-
hueRotate: bareDegrees,
128-
inset: ({ theme }) => theme('spacing'),
129-
invert: barePercentages,
130-
lineClamp: bareIntegers,
131-
margin: ({ theme }) => theme('spacing'),
132-
maxHeight: ({ theme }) => theme('spacing'),
133-
maxWidth: ({ theme }) => theme('spacing'),
134-
minHeight: ({ theme }) => theme('spacing'),
135-
minWidth: ({ theme }) => theme('spacing'),
136-
opacity: barePercentages,
137-
order: bareIntegers,
138-
outlineColor: ({ theme }) => theme('colors'),
139-
outlineOffset: barePixels,
140-
outlineWidth: barePixels,
141-
padding: ({ theme }) => theme('spacing'),
142-
placeholderColor: ({ theme }) => theme('colors'),
143-
placeholderOpacity: ({ theme }) => theme('opacity'),
144-
ringColor: ({ theme }) => theme('colors'),
145-
ringOffsetColor: ({ theme }) => theme('colors'),
146-
ringOffsetWidth: barePixels,
147-
ringOpacity: ({ theme }) => theme('opacity'),
148-
ringWidth: barePixels,
149-
rotate: bareDegrees,
150-
saturate: barePercentages,
151-
scale: barePercentages,
152-
scrollMargin: ({ theme }) => theme('spacing'),
153-
scrollPadding: ({ theme }) => theme('spacing'),
154-
sepia: barePercentages,
155-
size: ({ theme }) => theme('spacing'),
156-
skew: bareDegrees,
157-
space: ({ theme }) => theme('spacing'),
158-
stroke: ({ theme }) => theme('colors'),
159-
strokeWidth: barePixels,
160-
textColor: ({ theme }) => theme('colors'),
161-
textDecorationColor: ({ theme }) => theme('colors'),
162-
textDecorationThickness: barePixels,
163-
textIndent: ({ theme }) => theme('spacing'),
164-
textOpacity: ({ theme }) => theme('opacity'),
165-
textUnderlineOffset: barePixels,
166-
transitionDelay: bareMilliseconds,
15+
16716
transitionDuration: {
168-
DEFAULT: theme.get(['--default-transition-duration']) ?? null,
169-
...bareMilliseconds,
17+
...defaultTheme.transitionDuration,
18+
DEFAULT: cssTheme.get(['--default-transition-duration']) ?? null,
17019
},
17120
transitionTimingFunction: {
172-
DEFAULT: theme.get(['--default-transition-timing-function']) ?? null,
21+
...defaultTheme.transitionTimingFunction,
22+
DEFAULT: cssTheme.get(['--default-transition-timing-function']) ?? null,
17323
},
174-
translate: ({ theme }) => theme('spacing'),
175-
width: ({ theme }) => theme('spacing'),
176-
zIndex: bareIntegers,
17724
},
17825
}
17926
}

0 commit comments

Comments
 (0)