Skip to content

Commit 4041d04

Browse files
thecrypticaceRobinMalfait
thecrypticace
and
RobinMalfait
authored
Move defaults to their own always-on layer (#6500)
Default's declarations are now processed and merged even when there is no tailwind base directive included in the stylesheet. Without this applying tailwind utilities in css modules would break if they relied on defaults rules. Co-authored-by: Robin Malfait <[email protected]>
1 parent 47e8556 commit 4041d04

9 files changed

+265
-157
lines changed

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1616

1717
- Don't output unparsable values ([#6469](https://github.com/tailwindlabs/tailwindcss/pull/6469))
1818
- Fix text decoration utilities from overriding the new text decoration color/style/thickness utilities when used with a modifier ([#6378](https://github.com/tailwindlabs/tailwindcss/pull/6378))
19+
- Move defaults to their own always-on layer ([#6500](https://github.com/tailwindlabs/tailwindcss/pull/6500))
1920

2021
## [3.0.2] - 2021-12-13
2122

‎src/corePlugins.js

+96-110
Original file line numberDiff line numberDiff line change
@@ -529,27 +529,26 @@ export let corePlugins = {
529529
{ supportsNegativeValues: true }
530530
),
531531

532-
transform: ({ addBase, addUtilities }) => {
533-
addBase({
534-
'@defaults transform': {
535-
'--tw-translate-x': '0',
536-
'--tw-translate-y': '0',
537-
'--tw-rotate': '0',
538-
'--tw-skew-x': '0',
539-
'--tw-skew-y': '0',
540-
'--tw-scale-x': '1',
541-
'--tw-scale-y': '1',
542-
'--tw-transform': [
543-
'translateX(var(--tw-translate-x))',
544-
'translateY(var(--tw-translate-y))',
545-
'rotate(var(--tw-rotate))',
546-
'skewX(var(--tw-skew-x))',
547-
'skewY(var(--tw-skew-y))',
548-
'scaleX(var(--tw-scale-x))',
549-
'scaleY(var(--tw-scale-y))',
550-
].join(' '),
551-
},
532+
transform: ({ addDefaults, addUtilities }) => {
533+
addDefaults('transform', {
534+
'--tw-translate-x': '0',
535+
'--tw-translate-y': '0',
536+
'--tw-rotate': '0',
537+
'--tw-skew-x': '0',
538+
'--tw-skew-y': '0',
539+
'--tw-scale-x': '1',
540+
'--tw-scale-y': '1',
541+
'--tw-transform': [
542+
'translateX(var(--tw-translate-x))',
543+
'translateY(var(--tw-translate-y))',
544+
'rotate(var(--tw-rotate))',
545+
'skewX(var(--tw-skew-x))',
546+
'skewY(var(--tw-skew-y))',
547+
'scaleX(var(--tw-scale-x))',
548+
'scaleY(var(--tw-scale-y))',
549+
].join(' '),
552550
})
551+
553552
addUtilities({
554553
'.transform': { '@defaults transform': {}, transform: 'var(--tw-transform)' },
555554
'.transform-cpu': {
@@ -611,14 +610,12 @@ export let corePlugins = {
611610

612611
cursor: createUtilityPlugin('cursor'),
613612

614-
touchAction: ({ addBase, addUtilities }) => {
615-
addBase({
616-
'@defaults touch-action': {
617-
'--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)',
618-
'--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)',
619-
'--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)',
620-
'--tw-touch-action': 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)',
621-
},
613+
touchAction: ({ addDefaults, addUtilities }) => {
614+
addDefaults('touch-action', {
615+
'--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)',
616+
'--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)',
617+
'--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)',
618+
'--tw-touch-action': 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)',
622619
})
623620

624621
addUtilities({
@@ -681,11 +678,9 @@ export let corePlugins = {
681678
})
682679
},
683680

684-
scrollSnapType: ({ addUtilities, addBase }) => {
685-
addBase({
686-
'@defaults scroll-snap-type': {
687-
'--tw-scroll-snap-strictness': 'proximity',
688-
},
681+
scrollSnapType: ({ addDefaults, addUtilities }) => {
682+
addDefaults('scroll-snap-type', {
683+
'--tw-scroll-snap-strictness': 'proximity',
689684
})
690685

691686
addUtilities({
@@ -1182,22 +1177,21 @@ export let corePlugins = {
11821177
})
11831178
},
11841179

1185-
borderColor: ({ addBase, matchUtilities, theme, corePlugins }) => {
1180+
borderColor: ({ addDefaults, matchUtilities, theme, corePlugins }) => {
11861181
if (!corePlugins('borderOpacity')) {
11871182
let value = theme('borderColor.DEFAULT', 'currentColor')
1188-
addBase({
1189-
'@defaults border-width': {
1190-
'border-color': toColorValue(value),
1191-
},
1183+
addDefaults('border-width', {
1184+
'border-color': toColorValue(value),
11921185
})
11931186
} else {
1194-
addBase({
1195-
'@defaults border-width': withAlphaVariable({
1187+
addDefaults(
1188+
'border-width',
1189+
withAlphaVariable({
11961190
color: theme('borderColor.DEFAULT', 'currentColor'),
11971191
property: 'border-color',
11981192
variable: '--tw-border-opacity',
1199-
}),
1200-
})
1193+
})
1194+
)
12011195
}
12021196

12031197
matchUtilities(
@@ -1823,14 +1817,12 @@ export let corePlugins = {
18231817
`var(--tw-shadow)`,
18241818
].join(', ')
18251819

1826-
return function ({ matchUtilities, addBase, theme }) {
1827-
addBase({
1828-
'@defaults box-shadow': {
1829-
'--tw-ring-offset-shadow': '0 0 #0000',
1830-
'--tw-ring-shadow': '0 0 #0000',
1831-
'--tw-shadow': '0 0 #0000',
1832-
'--tw-shadow-colored': '0 0 #0000',
1833-
},
1820+
return function ({ matchUtilities, addDefaults, theme }) {
1821+
addDefaults(' box-shadow', {
1822+
'--tw-ring-offset-shadow': '0 0 #0000',
1823+
'--tw-ring-shadow': '0 0 #0000',
1824+
'--tw-shadow': '0 0 #0000',
1825+
'--tw-shadow-colored': '0 0 #0000',
18341826
})
18351827

18361828
matchUtilities(
@@ -1908,25 +1900,23 @@ export let corePlugins = {
19081900
)
19091901
},
19101902

1911-
ringWidth: ({ matchUtilities, addBase, addUtilities, theme }) => {
1903+
ringWidth: ({ matchUtilities, addDefaults, addUtilities, theme }) => {
19121904
let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
19131905
let ringColorDefault = withAlphaValue(
19141906
theme('ringColor.DEFAULT'),
19151907
ringOpacityDefault,
19161908
`rgb(147 197 253 / ${ringOpacityDefault})`
19171909
)
19181910

1919-
addBase({
1920-
'@defaults ring-width': {
1921-
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
1922-
'--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
1923-
'--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
1924-
'--tw-ring-color': ringColorDefault,
1925-
'--tw-ring-offset-shadow': '0 0 #0000',
1926-
'--tw-ring-shadow': '0 0 #0000',
1927-
'--tw-shadow': '0 0 #0000',
1928-
'--tw-shadow-colored': '0 0 #0000',
1929-
},
1911+
addDefaults('ring-width', {
1912+
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
1913+
'--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
1914+
'--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
1915+
'--tw-ring-color': ringColorDefault,
1916+
'--tw-ring-offset-shadow': '0 0 #0000',
1917+
'--tw-ring-shadow': '0 0 #0000',
1918+
'--tw-shadow': '0 0 #0000',
1919+
'--tw-shadow-colored': '0 0 #0000',
19301920
})
19311921

19321922
matchUtilities(
@@ -2133,30 +2123,28 @@ export let corePlugins = {
21332123
)
21342124
},
21352125

2136-
filter: ({ addBase, addUtilities }) => {
2137-
addBase({
2138-
'@defaults filter': {
2139-
'--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
2140-
'--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
2141-
'--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
2142-
'--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
2143-
'--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
2144-
'--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)',
2145-
'--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
2146-
'--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
2147-
'--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)',
2148-
'--tw-filter': [
2149-
'var(--tw-blur)',
2150-
'var(--tw-brightness)',
2151-
'var(--tw-contrast)',
2152-
'var(--tw-grayscale)',
2153-
'var(--tw-hue-rotate)',
2154-
'var(--tw-invert)',
2155-
'var(--tw-saturate)',
2156-
'var(--tw-sepia)',
2157-
'var(--tw-drop-shadow)',
2158-
].join(' '),
2159-
},
2126+
filter: ({ addDefaults, addUtilities }) => {
2127+
addDefaults('filter', {
2128+
'--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
2129+
'--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
2130+
'--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
2131+
'--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
2132+
'--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
2133+
'--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)',
2134+
'--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
2135+
'--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
2136+
'--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)',
2137+
'--tw-filter': [
2138+
'var(--tw-blur)',
2139+
'var(--tw-brightness)',
2140+
'var(--tw-contrast)',
2141+
'var(--tw-grayscale)',
2142+
'var(--tw-hue-rotate)',
2143+
'var(--tw-invert)',
2144+
'var(--tw-saturate)',
2145+
'var(--tw-sepia)',
2146+
'var(--tw-drop-shadow)',
2147+
].join(' '),
21602148
})
21612149
addUtilities({
21622150
'.filter': { '@defaults filter': {}, filter: 'var(--tw-filter)' },
@@ -2299,30 +2287,28 @@ export let corePlugins = {
22992287
)
23002288
},
23012289

2302-
backdropFilter: ({ addBase, addUtilities }) => {
2303-
addBase({
2304-
'@defaults backdrop-filter': {
2305-
'--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
2306-
'--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
2307-
'--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
2308-
'--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
2309-
'--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
2310-
'--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)',
2311-
'--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)',
2312-
'--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
2313-
'--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
2314-
'--tw-backdrop-filter': [
2315-
'var(--tw-backdrop-blur)',
2316-
'var(--tw-backdrop-brightness)',
2317-
'var(--tw-backdrop-contrast)',
2318-
'var(--tw-backdrop-grayscale)',
2319-
'var(--tw-backdrop-hue-rotate)',
2320-
'var(--tw-backdrop-invert)',
2321-
'var(--tw-backdrop-opacity)',
2322-
'var(--tw-backdrop-saturate)',
2323-
'var(--tw-backdrop-sepia)',
2324-
].join(' '),
2325-
},
2290+
backdropFilter: ({ addDefaults, addUtilities }) => {
2291+
addDefaults('backdrop-filter', {
2292+
'--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
2293+
'--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
2294+
'--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
2295+
'--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
2296+
'--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
2297+
'--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)',
2298+
'--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)',
2299+
'--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
2300+
'--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
2301+
'--tw-backdrop-filter': [
2302+
'var(--tw-backdrop-blur)',
2303+
'var(--tw-backdrop-brightness)',
2304+
'var(--tw-backdrop-contrast)',
2305+
'var(--tw-backdrop-grayscale)',
2306+
'var(--tw-backdrop-hue-rotate)',
2307+
'var(--tw-backdrop-invert)',
2308+
'var(--tw-backdrop-opacity)',
2309+
'var(--tw-backdrop-saturate)',
2310+
'var(--tw-backdrop-sepia)',
2311+
].join(' '),
23262312
})
23272313
addUtilities({
23282314
'.backdrop-filter': {

‎src/lib/expandTailwindAtRules.js

+16
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ function buildStylesheet(rules, context) {
9999

100100
let returnValue = {
101101
base: new Set(),
102+
defaults: new Set(),
102103
components: new Set(),
103104
utilities: new Set(),
104105
variants: new Set(),
@@ -125,6 +126,11 @@ function buildStylesheet(rules, context) {
125126
continue
126127
}
127128

129+
if (sort & context.layerOrder.defaults) {
130+
returnValue.defaults.add(rule)
131+
continue
132+
}
133+
128134
if (sort & context.layerOrder.components) {
129135
returnValue.components.add(rule)
130136
continue
@@ -144,6 +150,8 @@ function buildStylesheet(rules, context) {
144150
return returnValue
145151
}
146152

153+
export const DEFAULTS_LAYER = Symbol('defaults-layer')
154+
147155
export default function expandTailwindAtRules(context) {
148156
return (root) => {
149157
let layerNodes = {
@@ -202,6 +210,7 @@ export default function expandTailwindAtRules(context) {
202210
env.DEBUG && console.timeEnd('Build stylesheet')
203211

204212
let {
213+
defaults: defaultNodes,
205214
base: baseNodes,
206215
components: componentNodes,
207216
utilities: utilityNodes,
@@ -212,6 +221,13 @@ export default function expandTailwindAtRules(context) {
212221

213222
// Replace any Tailwind directives with generated CSS
214223

224+
// @defaults rules are unconditionally added first to ensure that
225+
// using any utility that relies on defaults will work even when
226+
// compiled in an isolated environment like CSS modules
227+
if (context.tailwindConfig[DEFAULTS_LAYER] !== false) {
228+
root.prepend(cloneNodes([...defaultNodes], root.source))
229+
}
230+
215231
if (layerNodes.base) {
216232
layerNodes.base.before(cloneNodes([...baseNodes], layerNodes.base.source))
217233
layerNodes.base.remove()

0 commit comments

Comments
 (0)