Do not generate grid-column when configuring grid-column-start or grid-column-end (#18907)
This PR fixes an issue where configuring a custom `--grid-column-start`
or
`--grid-column-end` also generated a `grid-column` utility due to the
overlapping namespace.
```css
@theme {
--grid-column-start-custom: custom-start;
--grid-column-end-custom: custom-end;
}
```
Would then generate:
```css
.col-end-custom {
grid-column: var(--grid-column-end-custom);
}
.col-start-custom {
grid-column: var(--grid-column-start-custom);
}
.col-start-custom {
grid-column-start: var(--grid-column-start-custom);
}
.col-end-custom {
grid-column-end: var(--grid-column-end-custom);
}
```
Instead of the expected:
```css
.col-start-custom {
grid-column-start: var(--grid-column-start-custom);
}
.col-end-custom {
grid-column-end: var(--grid-column-end-custom);
}
```
Fixes: #18906
This commit is contained in:
Robin Malfait
GitHub
parent
ee1c7a69dc
commit
340b59dcde
3 changed files with 124 additions and 40 deletions
|
|
@ -17,6 +17,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|||
- Handle `@variant` inside `@custom-variant` ([#18885](https://github.com/tailwindlabs/tailwindcss/pull/18885))
|
||||
- Merge suggestions when using `@utility` ([#18900](https://github.com/tailwindlabs/tailwindcss/pull/18900))
|
||||
- Ensure that file system watchers created when using the CLI are always cleaned up ([#18905](https://github.com/tailwindlabs/tailwindcss/pull/18905))
|
||||
- Do not generate `grid-column` utilities when configuring `grid-column-start` or `grid-column-end` ([#18907](https://github.com/tailwindlabs/tailwindcss/pull/18907))
|
||||
- Do not generate `grid-row` utilities when configuring `grid-row-start` or `grid-row-end` ([#18907](https://github.com/tailwindlabs/tailwindcss/pull/18907))
|
||||
|
||||
## [4.1.13] - 2025-09-03
|
||||
|
||||
|
|
|
|||
|
|
@ -28,6 +28,8 @@ const ignoredThemeKeyMap = new Map([
|
|||
'--text-underline-offset',
|
||||
],
|
||||
],
|
||||
['--grid-column', ['--grid-column-start', '--grid-column-end']],
|
||||
['--grid-row', ['--grid-row-start', '--grid-row-end']],
|
||||
])
|
||||
|
||||
function isIgnoredThemeKey(themeKey: ThemeKey, namespace: ThemeKey) {
|
||||
|
|
|
|||
|
|
@ -1180,9 +1180,28 @@ test('col', async () => {
|
|||
|
||||
test('col-start', async () => {
|
||||
expect(
|
||||
await run(['col-start-auto', 'col-start-4', 'col-start-99', 'col-start-[123]', '-col-start-4']),
|
||||
await compileCss(
|
||||
css`
|
||||
@theme {
|
||||
--grid-column-start-custom: 1 column-start;
|
||||
}
|
||||
@tailwind utilities;
|
||||
`,
|
||||
[
|
||||
'col-start-auto',
|
||||
'col-start-4',
|
||||
'col-start-99',
|
||||
'col-start-[123]',
|
||||
'-col-start-4',
|
||||
'col-start-custom',
|
||||
],
|
||||
),
|
||||
).toMatchInlineSnapshot(`
|
||||
".-col-start-4 {
|
||||
":root, :host {
|
||||
--grid-column-start-custom: 1 column-start;
|
||||
}
|
||||
|
||||
.-col-start-4 {
|
||||
grid-column-start: calc(4 * -1);
|
||||
}
|
||||
|
||||
|
|
@ -1200,6 +1219,10 @@ test('col-start', async () => {
|
|||
|
||||
.col-start-auto {
|
||||
grid-column-start: auto;
|
||||
}
|
||||
|
||||
.col-start-custom {
|
||||
grid-column-start: var(--grid-column-start-custom);
|
||||
}"
|
||||
`)
|
||||
expect(
|
||||
|
|
@ -1217,28 +1240,45 @@ test('col-start', async () => {
|
|||
})
|
||||
|
||||
test('col-end', async () => {
|
||||
expect(await run(['col-end-auto', 'col-end-4', 'col-end-99', 'col-end-[123]', '-col-end-4']))
|
||||
.toMatchInlineSnapshot(`
|
||||
".-col-end-4 {
|
||||
grid-column-end: calc(4 * -1);
|
||||
}
|
||||
expect(
|
||||
await compileCss(
|
||||
css`
|
||||
@theme {
|
||||
--grid-column-end-custom: 1 column-end;
|
||||
}
|
||||
@tailwind utilities;
|
||||
`,
|
||||
['col-end-auto', 'col-end-4', 'col-end-99', 'col-end-[123]', '-col-end-4', 'col-end-custom'],
|
||||
),
|
||||
).toMatchInlineSnapshot(`
|
||||
":root, :host {
|
||||
--grid-column-end-custom: 1 column-end;
|
||||
}
|
||||
|
||||
.col-end-4 {
|
||||
grid-column-end: 4;
|
||||
}
|
||||
.-col-end-4 {
|
||||
grid-column-end: calc(4 * -1);
|
||||
}
|
||||
|
||||
.col-end-99 {
|
||||
grid-column-end: 99;
|
||||
}
|
||||
.col-end-4 {
|
||||
grid-column-end: 4;
|
||||
}
|
||||
|
||||
.col-end-\\[123\\] {
|
||||
grid-column-end: 123;
|
||||
}
|
||||
.col-end-99 {
|
||||
grid-column-end: 99;
|
||||
}
|
||||
|
||||
.col-end-auto {
|
||||
grid-column-end: auto;
|
||||
}"
|
||||
`)
|
||||
.col-end-\\[123\\] {
|
||||
grid-column-end: 123;
|
||||
}
|
||||
|
||||
.col-end-auto {
|
||||
grid-column-end: auto;
|
||||
}
|
||||
|
||||
.col-end-custom {
|
||||
grid-column-end: var(--grid-column-end-custom);
|
||||
}"
|
||||
`)
|
||||
expect(
|
||||
await run([
|
||||
'col-end',
|
||||
|
|
@ -1317,9 +1357,28 @@ test('row', async () => {
|
|||
|
||||
test('row-start', async () => {
|
||||
expect(
|
||||
await run(['row-start-auto', 'row-start-4', 'row-start-99', 'row-start-[123]', '-row-start-4']),
|
||||
await compileCss(
|
||||
css`
|
||||
@theme {
|
||||
--grid-row-start-custom: 1 row-start;
|
||||
}
|
||||
@tailwind utilities;
|
||||
`,
|
||||
[
|
||||
'row-start-auto',
|
||||
'row-start-4',
|
||||
'row-start-99',
|
||||
'row-start-[123]',
|
||||
'-row-start-4',
|
||||
'row-start-custom',
|
||||
],
|
||||
),
|
||||
).toMatchInlineSnapshot(`
|
||||
".-row-start-4 {
|
||||
":root, :host {
|
||||
--grid-row-start-custom: 1 row-start;
|
||||
}
|
||||
|
||||
.-row-start-4 {
|
||||
grid-row-start: calc(4 * -1);
|
||||
}
|
||||
|
||||
|
|
@ -1337,6 +1396,10 @@ test('row-start', async () => {
|
|||
|
||||
.row-start-auto {
|
||||
grid-row-start: auto;
|
||||
}
|
||||
|
||||
.row-start-custom {
|
||||
grid-row-start: var(--grid-row-start-custom);
|
||||
}"
|
||||
`)
|
||||
expect(
|
||||
|
|
@ -1354,28 +1417,45 @@ test('row-start', async () => {
|
|||
})
|
||||
|
||||
test('row-end', async () => {
|
||||
expect(await run(['row-end-auto', 'row-end-4', 'row-end-99', 'row-end-[123]', '-row-end-4']))
|
||||
.toMatchInlineSnapshot(`
|
||||
".-row-end-4 {
|
||||
grid-row-end: calc(4 * -1);
|
||||
}
|
||||
expect(
|
||||
await compileCss(
|
||||
css`
|
||||
@theme {
|
||||
--grid-row-end-custom: 1 row-end;
|
||||
}
|
||||
@tailwind utilities;
|
||||
`,
|
||||
['row-end-auto', 'row-end-4', 'row-end-99', 'row-end-[123]', '-row-end-4', 'row-end-custom'],
|
||||
),
|
||||
).toMatchInlineSnapshot(`
|
||||
":root, :host {
|
||||
--grid-row-end-custom: 1 row-end;
|
||||
}
|
||||
|
||||
.row-end-4 {
|
||||
grid-row-end: 4;
|
||||
}
|
||||
.-row-end-4 {
|
||||
grid-row-end: calc(4 * -1);
|
||||
}
|
||||
|
||||
.row-end-99 {
|
||||
grid-row-end: 99;
|
||||
}
|
||||
.row-end-4 {
|
||||
grid-row-end: 4;
|
||||
}
|
||||
|
||||
.row-end-\\[123\\] {
|
||||
grid-row-end: 123;
|
||||
}
|
||||
.row-end-99 {
|
||||
grid-row-end: 99;
|
||||
}
|
||||
|
||||
.row-end-auto {
|
||||
grid-row-end: auto;
|
||||
}"
|
||||
`)
|
||||
.row-end-\\[123\\] {
|
||||
grid-row-end: 123;
|
||||
}
|
||||
|
||||
.row-end-auto {
|
||||
grid-row-end: auto;
|
||||
}
|
||||
|
||||
.row-end-custom {
|
||||
grid-row-end: var(--grid-row-end-custom);
|
||||
}"
|
||||
`)
|
||||
expect(
|
||||
await run([
|
||||
'row-end',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue