Skip to content

Commit 340b59d

Browse files
RobinMalfaitRobinMalfait
authored
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
1 parent ee1c7a6 commit 340b59d

File tree

3 files changed

+124
-40
lines changed

3 files changed

+124
-40
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1717
- Handle `@variant` inside `@custom-variant` ([#18885](https://github.com/tailwindlabs/tailwindcss/pull/18885))
1818
- Merge suggestions when using `@utility` ([#18900](https://github.com/tailwindlabs/tailwindcss/pull/18900))
1919
- Ensure that file system watchers created when using the CLI are always cleaned up ([#18905](https://github.com/tailwindlabs/tailwindcss/pull/18905))
20+
- Do not generate `grid-column` utilities when configuring `grid-column-start` or `grid-column-end` ([#18907](https://github.com/tailwindlabs/tailwindcss/pull/18907))
21+
- Do not generate `grid-row` utilities when configuring `grid-row-start` or `grid-row-end` ([#18907](https://github.com/tailwindlabs/tailwindcss/pull/18907))
2022

2123
## [4.1.13] - 2025-09-03
2224

‎packages/tailwindcss/src/theme.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ const ignoredThemeKeyMap = new Map([
2828
'--text-underline-offset',
2929
],
3030
],
31+
['--grid-column', ['--grid-column-start', '--grid-column-end']],
32+
['--grid-row', ['--grid-row-start', '--grid-row-end']],
3133
])
3234

3335
function isIgnoredThemeKey(themeKey: ThemeKey, namespace: ThemeKey) {

‎packages/tailwindcss/src/utilities.test.ts‎

Lines changed: 120 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1180,9 +1180,28 @@ test('col', async () => {
11801180

11811181
test('col-start', async () => {
11821182
expect(
1183-
await run(['col-start-auto', 'col-start-4', 'col-start-99', 'col-start-[123]', '-col-start-4']),
1183+
await compileCss(
1184+
css`
1185+
@theme {
1186+
--grid-column-start-custom: 1 column-start;
1187+
}
1188+
@tailwind utilities;
1189+
`,
1190+
[
1191+
'col-start-auto',
1192+
'col-start-4',
1193+
'col-start-99',
1194+
'col-start-[123]',
1195+
'-col-start-4',
1196+
'col-start-custom',
1197+
],
1198+
),
11841199
).toMatchInlineSnapshot(`
1185-
".-col-start-4 {
1200+
":root, :host {
1201+
--grid-column-start-custom: 1 column-start;
1202+
}
1203+
1204+
.-col-start-4 {
11861205
grid-column-start: calc(4 * -1);
11871206
}
11881207

@@ -1200,6 +1219,10 @@ test('col-start', async () => {
12001219

12011220
.col-start-auto {
12021221
grid-column-start: auto;
1222+
}
1223+
1224+
.col-start-custom {
1225+
grid-column-start: var(--grid-column-start-custom);
12031226
}"
12041227
`)
12051228
expect(
@@ -1217,28 +1240,45 @@ test('col-start', async () => {
12171240
})
12181241

12191242
test('col-end', async () => {
1220-
expect(await run(['col-end-auto', 'col-end-4', 'col-end-99', 'col-end-[123]', '-col-end-4']))
1221-
.toMatchInlineSnapshot(`
1222-
".-col-end-4 {
1223-
grid-column-end: calc(4 * -1);
1224-
}
1243+
expect(
1244+
await compileCss(
1245+
css`
1246+
@theme {
1247+
--grid-column-end-custom: 1 column-end;
1248+
}
1249+
@tailwind utilities;
1250+
`,
1251+
['col-end-auto', 'col-end-4', 'col-end-99', 'col-end-[123]', '-col-end-4', 'col-end-custom'],
1252+
),
1253+
).toMatchInlineSnapshot(`
1254+
":root, :host {
1255+
--grid-column-end-custom: 1 column-end;
1256+
}
12251257

1226-
.col-end-4 {
1227-
grid-column-end: 4;
1228-
}
1258+
.-col-end-4 {
1259+
grid-column-end: calc(4 * -1);
1260+
}
12291261

1230-
.col-end-99 {
1231-
grid-column-end: 99;
1232-
}
1262+
.col-end-4 {
1263+
grid-column-end: 4;
1264+
}
12331265

1234-
.col-end-\\[123\\] {
1235-
grid-column-end: 123;
1236-
}
1266+
.col-end-99 {
1267+
grid-column-end: 99;
1268+
}
12371269

1238-
.col-end-auto {
1239-
grid-column-end: auto;
1240-
}"
1241-
`)
1270+
.col-end-\\[123\\] {
1271+
grid-column-end: 123;
1272+
}
1273+
1274+
.col-end-auto {
1275+
grid-column-end: auto;
1276+
}
1277+
1278+
.col-end-custom {
1279+
grid-column-end: var(--grid-column-end-custom);
1280+
}"
1281+
`)
12421282
expect(
12431283
await run([
12441284
'col-end',
@@ -1317,9 +1357,28 @@ test('row', async () => {
13171357

13181358
test('row-start', async () => {
13191359
expect(
1320-
await run(['row-start-auto', 'row-start-4', 'row-start-99', 'row-start-[123]', '-row-start-4']),
1360+
await compileCss(
1361+
css`
1362+
@theme {
1363+
--grid-row-start-custom: 1 row-start;
1364+
}
1365+
@tailwind utilities;
1366+
`,
1367+
[
1368+
'row-start-auto',
1369+
'row-start-4',
1370+
'row-start-99',
1371+
'row-start-[123]',
1372+
'-row-start-4',
1373+
'row-start-custom',
1374+
],
1375+
),
13211376
).toMatchInlineSnapshot(`
1322-
".-row-start-4 {
1377+
":root, :host {
1378+
--grid-row-start-custom: 1 row-start;
1379+
}
1380+
1381+
.-row-start-4 {
13231382
grid-row-start: calc(4 * -1);
13241383
}
13251384

@@ -1337,6 +1396,10 @@ test('row-start', async () => {
13371396

13381397
.row-start-auto {
13391398
grid-row-start: auto;
1399+
}
1400+
1401+
.row-start-custom {
1402+
grid-row-start: var(--grid-row-start-custom);
13401403
}"
13411404
`)
13421405
expect(
@@ -1354,28 +1417,45 @@ test('row-start', async () => {
13541417
})
13551418

13561419
test('row-end', async () => {
1357-
expect(await run(['row-end-auto', 'row-end-4', 'row-end-99', 'row-end-[123]', '-row-end-4']))
1358-
.toMatchInlineSnapshot(`
1359-
".-row-end-4 {
1360-
grid-row-end: calc(4 * -1);
1361-
}
1420+
expect(
1421+
await compileCss(
1422+
css`
1423+
@theme {
1424+
--grid-row-end-custom: 1 row-end;
1425+
}
1426+
@tailwind utilities;
1427+
`,
1428+
['row-end-auto', 'row-end-4', 'row-end-99', 'row-end-[123]', '-row-end-4', 'row-end-custom'],
1429+
),
1430+
).toMatchInlineSnapshot(`
1431+
":root, :host {
1432+
--grid-row-end-custom: 1 row-end;
1433+
}
13621434

1363-
.row-end-4 {
1364-
grid-row-end: 4;
1365-
}
1435+
.-row-end-4 {
1436+
grid-row-end: calc(4 * -1);
1437+
}
13661438

1367-
.row-end-99 {
1368-
grid-row-end: 99;
1369-
}
1439+
.row-end-4 {
1440+
grid-row-end: 4;
1441+
}
13701442

1371-
.row-end-\\[123\\] {
1372-
grid-row-end: 123;
1373-
}
1443+
.row-end-99 {
1444+
grid-row-end: 99;
1445+
}
13741446

1375-
.row-end-auto {
1376-
grid-row-end: auto;
1377-
}"
1378-
`)
1447+
.row-end-\\[123\\] {
1448+
grid-row-end: 123;
1449+
}
1450+
1451+
.row-end-auto {
1452+
grid-row-end: auto;
1453+
}
1454+
1455+
.row-end-custom {
1456+
grid-row-end: var(--grid-row-end-custom);
1457+
}"
1458+
`)
13791459
expect(
13801460
await run([
13811461
'row-end',

0 commit comments

Comments
 (0)