Skip to content

Commit

Permalink
Move defaults to their own always-on layer (#6500)
Browse files Browse the repository at this point in the history 
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]>
  • Loading branch information
@thecrypticace @RobinMalfait
thecrypticace and RobinMalfait authored Dec 14, 2021
1 parent 47e8556 commit 4041d04
Show file tree
Hide file tree
Showing 9 changed files with 265 additions and 157 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

- Don't output unparsable values ([#6469](https://github.com/tailwindlabs/tailwindcss/pull/6469))
- 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))
- Move defaults to their own always-on layer ([#6500](https://github.com/tailwindlabs/tailwindcss/pull/6500))

## [3.0.2] - 2021-12-13

Expand Down
206 changes: 96 additions & 110 deletions src/corePlugins.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -529,27 +529,26 @@ export let corePlugins = {
{ supportsNegativeValues: true }
),

transform: ({ addBase, addUtilities }) => {
addBase({
'@defaults transform': {
'--tw-translate-x': '0',
'--tw-translate-y': '0',
'--tw-rotate': '0',
'--tw-skew-x': '0',
'--tw-skew-y': '0',
'--tw-scale-x': '1',
'--tw-scale-y': '1',
'--tw-transform': [
'translateX(var(--tw-translate-x))',
'translateY(var(--tw-translate-y))',
'rotate(var(--tw-rotate))',
'skewX(var(--tw-skew-x))',
'skewY(var(--tw-skew-y))',
'scaleX(var(--tw-scale-x))',
'scaleY(var(--tw-scale-y))',
].join(' '),
},
transform: ({ addDefaults, addUtilities }) => {
addDefaults('transform', {
'--tw-translate-x': '0',
'--tw-translate-y': '0',
'--tw-rotate': '0',
'--tw-skew-x': '0',
'--tw-skew-y': '0',
'--tw-scale-x': '1',
'--tw-scale-y': '1',
'--tw-transform': [
'translateX(var(--tw-translate-x))',
'translateY(var(--tw-translate-y))',
'rotate(var(--tw-rotate))',
'skewX(var(--tw-skew-x))',
'skewY(var(--tw-skew-y))',
'scaleX(var(--tw-scale-x))',
'scaleY(var(--tw-scale-y))',
].join(' '),
})

addUtilities({
'.transform': { '@defaults transform': {}, transform: 'var(--tw-transform)' },
'.transform-cpu': {
Expand Down Expand Up @@ -611,14 +610,12 @@ export let corePlugins = {

cursor: createUtilityPlugin('cursor'),

touchAction: ({ addBase, addUtilities }) => {
addBase({
'@defaults touch-action': {
'--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-touch-action': 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)',
},
touchAction: ({ addDefaults, addUtilities }) => {
addDefaults('touch-action', {
'--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-touch-action': 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)',
})

addUtilities({
Expand Down Expand Up @@ -681,11 +678,9 @@ export let corePlugins = {
})
},

scrollSnapType: ({ addUtilities, addBase }) => {
addBase({
'@defaults scroll-snap-type': {
'--tw-scroll-snap-strictness': 'proximity',
},
scrollSnapType: ({ addDefaults, addUtilities }) => {
addDefaults('scroll-snap-type', {
'--tw-scroll-snap-strictness': 'proximity',
})

addUtilities({
Expand Down Expand Up @@ -1182,22 +1177,21 @@ export let corePlugins = {
})
},

borderColor: ({ addBase, matchUtilities, theme, corePlugins }) => {
borderColor: ({ addDefaults, matchUtilities, theme, corePlugins }) => {
if (!corePlugins('borderOpacity')) {
let value = theme('borderColor.DEFAULT', 'currentColor')
addBase({
'@defaults border-width': {
'border-color': toColorValue(value),
},
addDefaults('border-width', {
'border-color': toColorValue(value),
})
} else {
addBase({
'@defaults border-width': withAlphaVariable({
addDefaults(
'border-width',
withAlphaVariable({
color: theme('borderColor.DEFAULT', 'currentColor'),
property: 'border-color',
variable: '--tw-border-opacity',
}),
})
})
)
}

matchUtilities(
Expand Down Expand Up @@ -1823,14 +1817,12 @@ export let corePlugins = {
`var(--tw-shadow)`,
].join(', ')

return function ({ matchUtilities, addBase, theme }) {
addBase({
'@defaults box-shadow': {
'--tw-ring-offset-shadow': '0 0 #0000',
'--tw-ring-shadow': '0 0 #0000',
'--tw-shadow': '0 0 #0000',
'--tw-shadow-colored': '0 0 #0000',
},
return function ({ matchUtilities, addDefaults, theme }) {
addDefaults(' box-shadow', {
'--tw-ring-offset-shadow': '0 0 #0000',
'--tw-ring-shadow': '0 0 #0000',
'--tw-shadow': '0 0 #0000',
'--tw-shadow-colored': '0 0 #0000',
})

matchUtilities(
Expand Down Expand Up @@ -1908,25 +1900,23 @@ export let corePlugins = {
)
},

ringWidth: ({ matchUtilities, addBase, addUtilities, theme }) => {
ringWidth: ({ matchUtilities, addDefaults, addUtilities, theme }) => {
let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
let ringColorDefault = withAlphaValue(
theme('ringColor.DEFAULT'),
ringOpacityDefault,
`rgb(147 197 253 / ${ringOpacityDefault})`
)

addBase({
'@defaults ring-width': {
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
'--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
'--tw-ring-color': ringColorDefault,
'--tw-ring-offset-shadow': '0 0 #0000',
'--tw-ring-shadow': '0 0 #0000',
'--tw-shadow': '0 0 #0000',
'--tw-shadow-colored': '0 0 #0000',
},
addDefaults('ring-width', {
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
'--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
'--tw-ring-color': ringColorDefault,
'--tw-ring-offset-shadow': '0 0 #0000',
'--tw-ring-shadow': '0 0 #0000',
'--tw-shadow': '0 0 #0000',
'--tw-shadow-colored': '0 0 #0000',
})

matchUtilities(
Expand Down Expand Up @@ -2133,30 +2123,28 @@ export let corePlugins = {
)
},

filter: ({ addBase, addUtilities }) => {
addBase({
'@defaults filter': {
'--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-filter': [
'var(--tw-blur)',
'var(--tw-brightness)',
'var(--tw-contrast)',
'var(--tw-grayscale)',
'var(--tw-hue-rotate)',
'var(--tw-invert)',
'var(--tw-saturate)',
'var(--tw-sepia)',
'var(--tw-drop-shadow)',
].join(' '),
},
filter: ({ addDefaults, addUtilities }) => {
addDefaults('filter', {
'--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-filter': [
'var(--tw-blur)',
'var(--tw-brightness)',
'var(--tw-contrast)',
'var(--tw-grayscale)',
'var(--tw-hue-rotate)',
'var(--tw-invert)',
'var(--tw-saturate)',
'var(--tw-sepia)',
'var(--tw-drop-shadow)',
].join(' '),
})
addUtilities({
'.filter': { '@defaults filter': {}, filter: 'var(--tw-filter)' },
Expand Down Expand Up @@ -2299,30 +2287,28 @@ export let corePlugins = {
)
},

backdropFilter: ({ addBase, addUtilities }) => {
addBase({
'@defaults backdrop-filter': {
'--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-filter': [
'var(--tw-backdrop-blur)',
'var(--tw-backdrop-brightness)',
'var(--tw-backdrop-contrast)',
'var(--tw-backdrop-grayscale)',
'var(--tw-backdrop-hue-rotate)',
'var(--tw-backdrop-invert)',
'var(--tw-backdrop-opacity)',
'var(--tw-backdrop-saturate)',
'var(--tw-backdrop-sepia)',
].join(' '),
},
backdropFilter: ({ addDefaults, addUtilities }) => {
addDefaults('backdrop-filter', {
'--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-filter': [
'var(--tw-backdrop-blur)',
'var(--tw-backdrop-brightness)',
'var(--tw-backdrop-contrast)',
'var(--tw-backdrop-grayscale)',
'var(--tw-backdrop-hue-rotate)',
'var(--tw-backdrop-invert)',
'var(--tw-backdrop-opacity)',
'var(--tw-backdrop-saturate)',
'var(--tw-backdrop-sepia)',
].join(' '),
})
addUtilities({
'.backdrop-filter': {
Expand Down
16 changes: 16 additions & 0 deletions src/lib/expandTailwindAtRules.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ function buildStylesheet(rules, context) {

let returnValue = {
base: new Set(),
defaults: new Set(),
components: new Set(),
utilities: new Set(),
variants: new Set(),
Expand All @@ -125,6 +126,11 @@ function buildStylesheet(rules, context) {
continue
}

if (sort & context.layerOrder.defaults) {
returnValue.defaults.add(rule)
continue
}

if (sort & context.layerOrder.components) {
returnValue.components.add(rule)
continue
Expand All @@ -144,6 +150,8 @@ function buildStylesheet(rules, context) {
return returnValue
}

export const DEFAULTS_LAYER = Symbol('defaults-layer')

export default function expandTailwindAtRules(context) {
return (root) => {
let layerNodes = {
Expand Down Expand Up @@ -202,6 +210,7 @@ export default function expandTailwindAtRules(context) {
env.DEBUG && console.timeEnd('Build stylesheet')

let {
defaults: defaultNodes,
base: baseNodes,
components: componentNodes,
utilities: utilityNodes,
Expand All @@ -212,6 +221,13 @@ export default function expandTailwindAtRules(context) {

// Replace any Tailwind directives with generated CSS

// @defaults rules are unconditionally added first to ensure that
// using any utility that relies on defaults will work even when
// compiled in an isolated environment like CSS modules
if (context.tailwindConfig[DEFAULTS_LAYER] !== false) {
root.prepend(cloneNodes([...defaultNodes], root.source))
}

if (layerNodes.base) {
layerNodes.base.before(cloneNodes([...baseNodes], layerNodes.base.source))
layerNodes.base.remove()
Expand Down
Loading

0 comments on commit 4041d04

Please sign in to comment.