Skip to content

Commit 9e15551

Browse files
RobinMalfaitRobinMalfait
authored
Merge branch 'main' into feat/add-tab
2 parents 07b63ed + 90a2373 commit 9e15551

7 files changed

Lines changed: 111 additions & 17 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1010
### Added
1111

1212
- _Experimental_: add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901))
13-
- _Experimental_: add `scrollbar-{auto,thin,none}` utilities for `scrollbar-width`, and `scrollbar-thumb-*` / `scrollbar-track-*` color utilities for `scrollbar-color` ([#19981](https://github.com/tailwindlabs/tailwindcss/pull/19981))
13+
- _Experimental_: add `scrollbar-{auto,thin,none}` utilities for `scrollbar-width`, and `scrollbar-thumb-*` / `scrollbar-track-*` color utilities for `scrollbar-color` ([#19981](https://github.com/tailwindlabs/tailwindcss/pull/19981), [#20019](https://github.com/tailwindlabs/tailwindcss/pull/20019))
1414
- Allow using `@variant` with stacked variants (e.g. `@variant hover:focus { … }`) ([#19996](https://github.com/tailwindlabs/tailwindcss/pull/19996))
1515
- Allow using `@variant` with compound variants (e.g. `@variant hover, focus { … }`) ([#19996](https://github.com/tailwindlabs/tailwindcss/pull/19996))
1616
- Support `--default(…)` in `--value(…)` and `--modifier(…)` for functional `@utility` definitions ([#19989](https://github.com/tailwindlabs/tailwindcss/pull/19989))
17+
- Add `zoom-*` utilities ([#20020](https://github.com/tailwindlabs/tailwindcss/pull/20020))
18+
- Add `scrollbar-gutter-*` utilities ([#20018](https://github.com/tailwindlabs/tailwindcss/pull/20018))
1719

1820
### Fixed
1921

‎packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11014,6 +11014,9 @@ exports[`getClassList 1`] = `
1101411014
"scroll-py-px",
1101511015
"scroll-smooth",
1101611016
"scrollbar-auto",
11017+
"scrollbar-gutter-auto",
11018+
"scrollbar-gutter-both",
11019+
"scrollbar-gutter-stable",
1101711020
"scrollbar-none",
1101811021
"scrollbar-thin",
1101911022
"scrollbar-thumb-current",
@@ -12247,6 +12250,16 @@ exports[`getClassList 1`] = `
1224712250
"z-40",
1224812251
"z-50",
1224912252
"z-auto",
12253+
"zoom-50",
12254+
"zoom-75",
12255+
"zoom-90",
12256+
"zoom-95",
12257+
"zoom-100",
12258+
"zoom-105",
12259+
"zoom-110",
12260+
"zoom-125",
12261+
"zoom-150",
12262+
"zoom-200",
1225012263
]
1225112264
`;
1225212265

‎packages/tailwindcss/src/compat/config.test.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -215,12 +215,12 @@ test('Config files can affect the theme', async () => {
215215

216216
expect(pretty(compiler.build(['bg-primary', 'scrollbar-primary']))).toMatchInlineSnapshot(`
217217
"
218-
.bg-primary {
219-
background-color: #c0ffee;
220-
}
221218
.scrollbar-primary {
222219
scrollbar-color: #c0ffee;
223220
}
221+
.bg-primary {
222+
background-color: #c0ffee;
223+
}
224224
"
225225
`)
226226
})

‎packages/tailwindcss/src/compat/plugin-api.test.ts‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3953,17 +3953,17 @@ describe('matchUtilities()', () => {
39533953
expect(optimizeCss(await run(['scrollbar-[2px]', 'scrollbar-[#08c]', 'scrollbar-[#08c]/50'])))
39543954
.toMatchInlineSnapshot(`
39553955
"
3956+
.scrollbar-\\[2px\\] {
3957+
scrollbar-width: 2px;
3958+
}
3959+
39563960
.scrollbar-\\[\\#08c\\] {
39573961
scrollbar-color: #08c;
39583962
}
39593963
39603964
.scrollbar-\\[\\#08c\\]\\/50 {
39613965
scrollbar-color: oklab(59.9824% -.067 -.124 / .5);
39623966
}
3963-
3964-
.scrollbar-\\[2px\\] {
3965-
scrollbar-width: 2px;
3966-
}
39673967
"
39683968
`)
39693969
expect(optimizeCss(await run(['scrollbar-[2px]/50']))).toEqual('')
@@ -4117,10 +4117,14 @@ describe('matchUtilities()', () => {
41174117
),
41184118
).toMatchInlineSnapshot(`
41194119
"
4120-
.scrollbar-2 {
4120+
.scrollbar-2, .scrollbar-\\[2px\\] {
41214121
scrollbar-width: 2px;
41224122
}
41234123
4124+
.scrollbar-\\[length\\:var\\(--my-width\\)\\] {
4125+
scrollbar-width: var(--my-width);
4126+
}
4127+
41244128
.scrollbar-\\[\\#fff\\] {
41254129
scrollbar-color: #fff;
41264130
}
@@ -4129,10 +4133,6 @@ describe('matchUtilities()', () => {
41294133
scrollbar-color: oklab(100% 0 5.96046e-8 / .5);
41304134
}
41314135
4132-
.scrollbar-\\[2px\\] {
4133-
scrollbar-width: 2px;
4134-
}
4135-
41364136
.scrollbar-\\[color\\:var\\(--my-color\\)\\], .scrollbar-\\[color\\:var\\(--my-color\\)\\]\\/50 {
41374137
scrollbar-color: var(--my-color);
41384138
}
@@ -4143,10 +4143,6 @@ describe('matchUtilities()', () => {
41434143
}
41444144
}
41454145
4146-
.scrollbar-\\[length\\:var\\(--my-width\\)\\] {
4147-
scrollbar-width: var(--my-width);
4148-
}
4149-
41504146
.scrollbar-\\[var\\(--my-color\\)\\], .scrollbar-\\[var\\(--my-color\\)\\]\\/50 {
41514147
scrollbar-color: var(--my-color);
41524148
}

‎packages/tailwindcss/src/property-order.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,8 @@ export default [
9292
'--tw-skew-y',
9393
'transform',
9494

95+
'zoom',
96+
9597
'animation',
9698

9799
'cursor',
@@ -131,6 +133,10 @@ export default [
131133
'scroll-padding-bottom',
132134
'scroll-padding-left',
133135

136+
'scrollbar-width',
137+
'scrollbar-color',
138+
'scrollbar-gutter',
139+
134140
'list-style-position',
135141
'list-style-type',
136142
'list-style-image',

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6899,6 +6899,34 @@ test('transform', async () => {
68996899
).toEqual('')
69006900
})
69016901

6902+
test('zoom', async () => {
6903+
expect(
6904+
await compileCss(
6905+
css`
6906+
@tailwind utilities;
6907+
`,
6908+
['zoom-50', 'zoom-100', 'zoom-[var(--zoom)]'],
6909+
),
6910+
).toMatchInlineSnapshot(`
6911+
"
6912+
.zoom-50 {
6913+
zoom: 50%;
6914+
}
6915+
6916+
.zoom-100 {
6917+
zoom: 100%;
6918+
}
6919+
6920+
.zoom-\\[var\\(--zoom\\)\\] {
6921+
zoom: var(--zoom);
6922+
}
6923+
"
6924+
`)
6925+
expect(
6926+
await run(['zoom', '-zoom-50', 'zoom--50', 'zoom-1.5', 'zoom-unknown', 'zoom-50/foo']),
6927+
).toEqual('')
6928+
})
6929+
69026930
test('perspective', async () => {
69036931
expect(
69046932
await compileCss(
@@ -11439,6 +11467,36 @@ test('scrollbar-width', async () => {
1143911467
).toEqual('')
1144011468
})
1144111469

11470+
test('scrollbar-gutter', async () => {
11471+
expect(await run(['scrollbar-gutter-auto', 'scrollbar-gutter-stable', 'scrollbar-gutter-both']))
11472+
.toMatchInlineSnapshot(`
11473+
"
11474+
.scrollbar-gutter-auto {
11475+
scrollbar-gutter: auto;
11476+
}
11477+
11478+
.scrollbar-gutter-both {
11479+
scrollbar-gutter: stable both-edges;
11480+
}
11481+
11482+
.scrollbar-gutter-stable {
11483+
scrollbar-gutter: stable;
11484+
}
11485+
"
11486+
`)
11487+
expect(
11488+
await run([
11489+
'scrollbar-gutter',
11490+
'-scrollbar-gutter-auto',
11491+
'-scrollbar-gutter-stable',
11492+
'-scrollbar-gutter-both',
11493+
'scrollbar-gutter-auto/foo',
11494+
'scrollbar-gutter-stable/foo',
11495+
'scrollbar-gutter-both/foo',
11496+
]),
11497+
).toEqual('')
11498+
})
11499+
1144211500
test('scrollbar-thumb', async () => {
1144311501
expect(
1144411502
await compileCss(

‎packages/tailwindcss/src/utilities.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1706,6 +1706,21 @@ export function createUtilities(theme: Theme) {
17061706
staticUtility('transform-none', [['transform', 'none']])
17071707
}
17081708

1709+
/**
1710+
* @css `zoom`
1711+
*/
1712+
functionalUtility('zoom', {
1713+
handleBareValue: ({ value }) => {
1714+
if (!isPositiveInteger(value)) return null
1715+
return `${value}%`
1716+
},
1717+
handle: (value) => [decl('zoom', value)],
1718+
})
1719+
1720+
suggest('zoom', () => [
1721+
{ values: ['50', '75', '90', '95', '100', '105', '110', '125', '150', '200'] },
1722+
])
1723+
17091724
/**
17101725
* @css `transform-style`
17111726
*/
@@ -2218,6 +2233,10 @@ export function createUtilities(theme: Theme) {
22182233
staticUtility('scrollbar-thin', [['scrollbar-width', 'thin']])
22192234
staticUtility('scrollbar-none', [['scrollbar-width', 'none']])
22202235

2236+
staticUtility('scrollbar-gutter-auto', [['scrollbar-gutter', 'auto']])
2237+
staticUtility('scrollbar-gutter-stable', [['scrollbar-gutter', 'stable']])
2238+
staticUtility('scrollbar-gutter-both', [['scrollbar-gutter', 'stable both-edges']])
2239+
22212240
{
22222241
let scrollbarColorProperties = () => {
22232242
return atRoot([

0 commit comments

Comments
 (0)