Skip to content

Commit

Permalink
Ensure --spacing-* variables take precedence over --container-* v…
Browse files Browse the repository at this point in the history 
…ariables (#15180)

Fixes #15146.

This PR updates the `w-*`, `max-w-*`, `min-w-*`, and `basis-*` utilities
to make sure that `--spacing-*` values are preferred over
`--container-*` values when there is a conflict.


Given this theme configuration:

```css
@theme {
 --spacing-sm: 8px;
 --container-sm: 256px;
}
```

…utilities like `max-w-sm` will use `8px` instead of `256px` after this
change.

Users can still be explicit about the value they want to use if they've
introduced a naming collision like this by using our variable shorthand
like `max-w-(--container-sm)`.

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
  • Loading branch information
@adamwathan
adamwathan and adamwathan authored Nov 26, 2024
1 parent 068b1c2 commit a022905
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 34 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Ensure any necessary vendor prefixes are generated for iOS Safari, Firefox, and Chrome ([#15166](https://github.com/tailwindlabs/tailwindcss/pull/15166))
- Ensure `.group` and `.peer` are prefixed when using the `prefix(…)` option ([#15174](https://github.com/tailwindlabs/tailwindcss/pull/15174))
- Ensure 3D transforms render correctly in Safari ([#15179](https://github.com/tailwindlabs/tailwindcss/pull/15179))
- Ensure `--spacing-*` variables take precedence over `--container-*` variables ([#15180](https://github.com/tailwindlabs/tailwindcss/pull/15180))

## [4.0.0-beta.2] - 2024-11-22

Expand Down
34 changes: 34 additions & 0 deletions packages/tailwindcss/src/utilities.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17025,6 +17025,40 @@ describe('spacing utilities', () => {

expect(optimizeCss(compiled).trim()).toEqual('')
})

test('--spacing-* variables take precedence over --container-* variables', async () => {
let { build } = await compile(css`
@theme {
--spacing-sm: 8px;
--container-sm: 256px;
}
@tailwind utilities;
`)
let compiled = build(['w-sm', 'max-w-sm', 'min-w-sm', 'basis-sm'])

expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
":root {
--spacing-sm: 8px;
--container-sm: 256px;
}
.w-sm {
width: var(--spacing-sm);
}
.max-w-sm {
max-width: var(--spacing-sm);
}
.min-w-sm {
min-width: var(--spacing-sm);
}
.basis-sm {
flex-basis: var(--spacing-sm);
}"
`)
})
})

describe('custom utilities', () => {
Expand Down
82 changes: 48 additions & 34 deletions packages/tailwindcss/src/utilities.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -374,7 +374,7 @@ export function createUtilities(theme: Theme) {

function spacingUtility(
name: string,
themeNamespace: ThemeKey | ThemeKey[],
themeKeys: ThemeKey[],
handle: (value: string) => AstNode[] | undefined,
{
supportsNegative = false,
Expand All @@ -388,7 +388,6 @@ export function createUtilities(theme: Theme) {
utilities.static(`-${name}-px`, () => handle('-1px'))
}
utilities.static(`${name}-px`, () => handle('1px'))
let themeKeys = ([] as ThemeKey[]).concat(themeNamespace, '--spacing')
functionalUtility(name, {
themeKeys,
supportsFractions,
Expand Down Expand Up @@ -522,7 +521,7 @@ export function createUtilities(theme: Theme) {
staticUtility(`${name}-auto`, [[property, 'auto']])
staticUtility(`${name}-full`, [[property, '100%']])
staticUtility(`-${name}-full`, [[property, '-100%']])
spacingUtility(name, '--inset', (value) => [decl(property, value)], {
spacingUtility(name, ['--inset', '--spacing'], (value) => [decl(property, value)], {
supportsNegative: true,
supportsFractions: true,
})
Expand Down Expand Up @@ -751,7 +750,7 @@ export function createUtilities(theme: Theme) {
['ml', 'margin-left'],
] as const) {
staticUtility(`${namespace}-auto`, [[property, 'auto']])
spacingUtility(namespace, '--margin', (value) => [decl(property, value)], {
spacingUtility(namespace, ['--margin', '--spacing'], (value) => [decl(property, value)], {
supportsNegative: true,
})
}
Expand Down Expand Up @@ -890,20 +889,20 @@ export function createUtilities(theme: Theme) {

spacingUtility(
'size',
['--size'],
['--size', '--spacing'],
(value) => [decl('--tw-sort', 'size'), decl('width', value), decl('height', value)],
{
supportsFractions: true,
},
)

for (let [name, namespaces, property] of [
['w', ['--width', '--container'], 'width'],
['min-w', ['--min-width', '--container'], 'min-width'],
['max-w', ['--max-width', '--container'], 'max-width'],
['h', ['--height'], 'height'],
['min-h', ['--min-height', '--height'], 'min-height'],
['max-h', ['--max-height', '--height'], 'max-height'],
['w', ['--width', '--spacing', '--container'], 'width'],
['min-w', ['--min-width', '--spacing', '--container'], 'min-width'],
['max-w', ['--max-width', '--spacing', '--container'], 'max-width'],
['h', ['--height', '--spacing'], 'height'],
['min-h', ['--min-height', '--height', '--spacing'], 'min-height'],
['max-h', ['--max-height', '--height', '--spacing'], 'max-height'],
] as [string, ThemeKey[], string][]) {
spacingUtility(name, namespaces, (value) => [decl(property, value)], {
supportsFractions: true,
Expand Down Expand Up @@ -997,9 +996,14 @@ export function createUtilities(theme: Theme) {
*/
staticUtility('basis-auto', [['flex-basis', 'auto']])
staticUtility('basis-full', [['flex-basis', '100%']])
spacingUtility('basis', ['--flex-basis', '--container'], (value) => [decl('flex-basis', value)], {
supportsFractions: true,
})
spacingUtility(
'basis',
['--flex-basis', '--spacing', '--container'],
(value) => [decl('flex-basis', value)],
{
supportsFractions: true,
},
)

/**
* @css `table-layout`
Expand Down Expand Up @@ -1028,20 +1032,20 @@ export function createUtilities(theme: Theme) {
/**
* @css `border-spacing`
*/
spacingUtility('border-spacing', ['--border-spacing'], (value) => [
spacingUtility('border-spacing', ['--border-spacing', '--spacing'], (value) => [
borderSpacingProperties(),
decl('--tw-border-spacing-x', value),
decl('--tw-border-spacing-y', value),
decl('border-spacing', 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)'),
])

spacingUtility('border-spacing-x', ['--border-spacing'], (value) => [
spacingUtility('border-spacing-x', ['--border-spacing', '--spacing'], (value) => [
borderSpacingProperties(),
decl('--tw-border-spacing-x', value),
decl('border-spacing', 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)'),
])

spacingUtility('border-spacing-y', ['--border-spacing'], (value) => [
spacingUtility('border-spacing-y', ['--border-spacing', '--spacing'], (value) => [
borderSpacingProperties(),
decl('--tw-border-spacing-y', value),
decl('border-spacing', 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)'),
Expand Down Expand Up @@ -1113,7 +1117,7 @@ export function createUtilities(theme: Theme) {

spacingUtility(
'translate',
['--translate'],
['--translate', '--spacing'],
(value) => [
translateProperties(),
decl('--tw-translate-x', value),
Expand All @@ -1136,7 +1140,7 @@ export function createUtilities(theme: Theme) {
])
spacingUtility(
`translate-${axis}`,
['--translate'],
['--translate', '--spacing'],
(value) => [
translateProperties(),
decl(`--tw-translate-${axis}`, value),
Expand All @@ -1151,7 +1155,7 @@ export function createUtilities(theme: Theme) {

spacingUtility(
`translate-z`,
['--translate'],
['--translate', '--spacing'],
(value) => [
translateProperties(),
decl(`--tw-translate-z`, value),
Expand Down Expand Up @@ -1615,9 +1619,14 @@ export function createUtilities(theme: Theme) {
['scroll-mb', 'scroll-margin-bottom'],
['scroll-ml', 'scroll-margin-left'],
] as const) {
spacingUtility(namespace, '--scroll-margin', (value) => [decl(property, value)], {
supportsNegative: true,
})
spacingUtility(
namespace,
['--scroll-margin', '--spacing'],
(value) => [decl(property, value)],
{
supportsNegative: true,
},
)
}

/**
Expand All @@ -1634,7 +1643,7 @@ export function createUtilities(theme: Theme) {
['scroll-pb', 'scroll-padding-bottom'],
['scroll-pl', 'scroll-padding-left'],
] as const) {
spacingUtility(namespace, '--scroll-padding', (value) => [decl(property, value)])
spacingUtility(namespace, ['--scroll-padding', '--spacing'], (value) => [decl(property, value)])
}

staticUtility('list-inside', [['list-style-position', 'inside']])
Expand Down Expand Up @@ -1816,13 +1825,13 @@ export function createUtilities(theme: Theme) {
staticUtility('justify-items-end', [['justify-items', 'end']])
staticUtility('justify-items-stretch', [['justify-items', 'stretch']])

spacingUtility('gap', ['--gap'], (value) => [decl('gap', value)])
spacingUtility('gap-x', ['--gap'], (value) => [decl('column-gap', value)])
spacingUtility('gap-y', ['--gap'], (value) => [decl('row-gap', value)])
spacingUtility('gap', ['--gap', '--spacing'], (value) => [decl('gap', value)])
spacingUtility('gap-x', ['--gap', '--spacing'], (value) => [decl('column-gap', value)])
spacingUtility('gap-y', ['--gap', '--spacing'], (value) => [decl('row-gap', value)])

spacingUtility(
'space-x',
['--space'],
['--space', '--spacing'],
(value) => [
atRoot([property('--tw-space-x-reverse', '0', '<number>')]),

Expand All @@ -1838,7 +1847,7 @@ export function createUtilities(theme: Theme) {

spacingUtility(
'space-y',
['--space'],
['--space', '--spacing'],
(value) => [
atRoot([property('--tw-space-y-reverse', '0', '<number>')]),
styleRule(':where(& > :not(:last-child))', [
Expand Down Expand Up @@ -2822,7 +2831,7 @@ export function createUtilities(theme: Theme) {
['pb', 'padding-bottom'],
['pl', 'padding-left'],
] as const) {
spacingUtility(name, '--padding', (value) => [decl(property, value)])
spacingUtility(name, ['--padding', '--spacing'], (value) => [decl(property, value)])
}

staticUtility('text-left', [['text-align', 'left']])
Expand All @@ -2832,9 +2841,14 @@ export function createUtilities(theme: Theme) {
staticUtility('text-start', [['text-align', 'start']])
staticUtility('text-end', [['text-align', 'end']])

spacingUtility('indent', ['--text-indent'], (value) => [decl('text-indent', value)], {
supportsNegative: true,
})
spacingUtility(
'indent',
['--text-indent', '--spacing'],
(value) => [decl('text-indent', value)],
{
supportsNegative: true,
},
)

staticUtility('align-baseline', [['vertical-align', 'baseline']])
staticUtility('align-top', [['vertical-align', 'top']])
Expand Down Expand Up @@ -3727,7 +3741,7 @@ export function createUtilities(theme: Theme) {
['--tw-leading', '1'],
['line-height', '1'],
])
spacingUtility('leading', ['--leading'], (value) => [
spacingUtility('leading', ['--leading', '--spacing'], (value) => [
atRoot([property('--tw-leading')]),
decl('--tw-leading', value),
decl('line-height', value),
Expand Down

0 comments on commit a022905

Please sign in to comment.