Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Replace default explicit spacing scale with multiplier system #14857

Merged
merged 19 commits into from
Nov 5, 2024
Merged

Replace default explicit spacing scale with multiplier system #14857

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
cd4d8c0
WIP (actual spacing multiplier stuff)
adamwathan Nov 1, 2024
90f5755
Update codemod tests
adamwathan Nov 1, 2024
00c1e0c
Add explicit tests for --spacing: initial
adamwathan Nov 2, 2024
a8c6805
Ensure bare spacing values are a multiple of 0.25
adamwathan Nov 2, 2024
e345199
Handle px values
adamwathan Nov 2, 2024
71c3832
Remove duplicate translate-px utilities
adamwathan Nov 2, 2024
7c4d2ca
Test leading zero is required for fractional bare spacing values
adamwathan Nov 2, 2024
503f45d
Remove spacing scale
adamwathan Nov 2, 2024
c97a31e
Derive numeric line height utilities from spacing scale
adamwathan Nov 2, 2024
a95be45
Update PostCSS plugin test
adamwathan Nov 3, 2024
a313895
Update tests
adamwathan Nov 4, 2024
08f522c
Limit spacing utilities that support fractions
adamwathan Nov 4, 2024
59aae3e
Update changelog
adamwathan Nov 4, 2024
c82e4f2
Update test
adamwathan Nov 4, 2024
4e536cd
Update test
adamwathan Nov 4, 2024
4013c47
Suggest original spacing scale by default
adamwathan Nov 5, 2024
02b4f8d
Don't support negative scroll padding
adamwathan Nov 5, 2024
5ac40b7
Merge branch 'next' into feat/spacing-multiplier
adamwathan Nov 5, 2024
466e137
Update tests
adamwathan Nov 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

### Added

- Support derived spacing scales based on a single `--spacing` theme value ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857))
- Add `svh`, `dvh`, `svw`, `dvw`, and `auto` values to all width/height/size utilities ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857))
- _Upgrade (experimental)_: Migrate `grid-cols-[subgrid]` and `grid-rows-[subgrid]` to `grid-cols-subgrid` and `grid-rows-subgrid` ([#14840](https://github.com/tailwindlabs/tailwindcss/pull/14840))
- _Upgrade (experimental)_: Support migrating projects with multiple config files ([#14863](https://github.com/tailwindlabs/tailwindcss/pull/14863))

Expand All @@ -29,7 +31,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Rename `drop-shadow` to `drop-shadow-sm` and `drop-shadow-sm` to `drop-shadow-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849))
- Rename `rounded` to `rounded-sm` and `rounded-sm` to `rounded-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849))
- Rename `blur` to `blur-sm` and `blur-sm` to `blur-xs` ([#14849](https://github.com/tailwindlabs/tailwindcss/pull/14849))
- Remove fixed line-height theme values and derive `leading-*` utilites from `--spacing-*` scale ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857))
- Remove `--transition-timing-function-linear` from the default theme in favor of a static `ease-linear` utility ([#14880](https://github.com/tailwindlabs/tailwindcss/pull/14880))
- Remove default `--spacing-*` scale in favor of `--spacing` multiplier ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857))

## [4.0.0-alpha.31] - 2024-10-29

Expand Down
6 changes: 3 additions & 3 deletions integrations/upgrade/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ test(
'src/index.html': html`
<h1>🤠👋</h1>
<div
class="!flex sm:!block bg-gradient-to-t bg-[--my-red] max-w-screen-md ml-[theme(spacing[1.5])]"
class="!flex sm:!block bg-gradient-to-t bg-[--my-red] max-w-screen-md ml-[theme(screens.md)]"
></div>
`,
'src/input.css': css`
Expand All @@ -93,7 +93,7 @@ test(
--- ./src/index.html ---
<h1>🤠👋</h1>
<div
class="flex! sm:block! bg-linear-to-t bg-[var(--my-red)] max-w-[var(--breakpoint-md)] ml-[var(--spacing-1_5)]"
class="flex! sm:block! bg-linear-to-t bg-[var(--my-red)] max-w-[var(--breakpoint-md)] ml-[var(--breakpoint-md)]"
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed this to something else until we work on the codemod for this new spacing stuff.

></div>
--- ./src/input.css ---
Expand Down Expand Up @@ -154,7 +154,7 @@ test(
candidate`bg-linear-to-t`,
candidate`bg-[var(--my-red)]`,
candidate`max-w-[var(--breakpoint-md)]`,
candidate`ml-[var(--spacing-1\_5)`,
candidate`ml-[var(--breakpoint-md)`,
])
},
)
Expand Down
44 changes: 1 addition & 43 deletions packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,41 +296,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
--drop-shadow-lg: 0 10px 8px #0000000a, 0 4px 3px #0000001a;
--drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014;
--drop-shadow-2xl: 0 25px 25px #00000026;
--spacing-px: 1px;
--spacing-0: 0px;
--spacing-0_5: .125rem;
--spacing-1: .25rem;
--spacing-1_5: .375rem;
--spacing-2: .5rem;
--spacing-2_5: .625rem;
--spacing-3: .75rem;
--spacing-3_5: .875rem;
--spacing-4: 1rem;
--spacing-5: 1.25rem;
--spacing-6: 1.5rem;
--spacing-7: 1.75rem;
--spacing-8: 2rem;
--spacing-9: 2.25rem;
--spacing-10: 2.5rem;
--spacing-11: 2.75rem;
--spacing-12: 3rem;
--spacing-14: 3.5rem;
--spacing-16: 4rem;
--spacing-20: 5rem;
--spacing-24: 6rem;
--spacing-28: 7rem;
--spacing-32: 8rem;
--spacing-36: 9rem;
--spacing-40: 10rem;
--spacing-44: 11rem;
--spacing-48: 12rem;
--spacing-52: 13rem;
--spacing-56: 14rem;
--spacing-60: 15rem;
--spacing-64: 16rem;
--spacing-72: 18rem;
--spacing-80: 20rem;
--spacing-96: 24rem;
--spacing: .25rem;
--width-3xs: 16rem;
--width-2xs: 18rem;
--width-xs: 20rem;
Expand Down Expand Up @@ -386,14 +352,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
--line-height-3: .75rem;
--line-height-4: 1rem;
--line-height-5: 1.25rem;
--line-height-6: 1.5rem;
--line-height-7: 1.75rem;
--line-height-8: 2rem;
--line-height-9: 2.25rem;
--line-height-10: 2.5rem;
--perspective-dramatic: 100px;
--perspective-near: 300px;
--perspective-normal: 500px;
Expand Down
4 changes: 2 additions & 2 deletions packages/@tailwindcss-upgrade/src/codemods/migrate-theme-to-var.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ async function migrate(input: string) {
it('should migrate `theme(…)` to `var(…)`', async () => {
expect(
await migrate(css`
@media theme(spacing.4) {
@media theme(screens.sm) {
.foo {
background-color: theme(colors.red.900);
color: theme(colors.red.900 / 75%);
Expand All @@ -33,7 +33,7 @@ it('should migrate `theme(…)` to `var(…)`', async () => {
}
`),
).toMatchInlineSnapshot(`
"@media theme(--spacing-4) {
"@media theme(--breakpoint-sm) {
.foo {
background-color: var(--color-red-900);
color: theme(--color-red-900 / 75%);
Expand Down
50 changes: 47 additions & 3 deletions packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { __unstable__loadDesignSystem } from '@tailwindcss/node'
import { expect, test } from 'vitest'
import { themeToVar } from './theme-to-var'

let css = String.raw

test.each([
// Keep candidates that don't contain `theme(…)` or `theme(…, …)`
['[color:red]', '[color:red]'],
Expand Down Expand Up @@ -107,9 +109,51 @@ test.each([
'[--foo:theme(colors.red.500/50/50)_var(--color-blue-200)]/50',
],
])('%s => %s', async (candidate, result) => {
let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
base: __dirname,
})
let designSystem = await __unstable__loadDesignSystem(
css`
@import 'tailwindcss';
@theme {
--spacing-px: 1px;
--spacing-0: 0px;
--spacing-0_5: 0.125rem;
--spacing-1: 0.25rem;
--spacing-1_5: 0.375rem;
--spacing-2: 0.5rem;
--spacing-2_5: 0.625rem;
--spacing-3: 0.75rem;
--spacing-3_5: 0.875rem;
--spacing-4: 1rem;
--spacing-5: 1.25rem;
--spacing-6: 1.5rem;
--spacing-7: 1.75rem;
--spacing-8: 2rem;
--spacing-9: 2.25rem;
--spacing-10: 2.5rem;
--spacing-11: 2.75rem;
--spacing-12: 3rem;
--spacing-14: 3.5rem;
--spacing-16: 4rem;
--spacing-20: 5rem;
--spacing-24: 6rem;
--spacing-28: 7rem;
--spacing-32: 8rem;
--spacing-36: 9rem;
--spacing-40: 10rem;
--spacing-44: 11rem;
--spacing-48: 12rem;
--spacing-52: 13rem;
--spacing-56: 14rem;
--spacing-60: 15rem;
--spacing-64: 16rem;
--spacing-72: 18rem;
--spacing-80: 20rem;
--spacing-96: 24rem;
}
`,
{
base: __dirname,
},
)

expect(themeToVar(designSystem, {}, candidate)).toEqual(result)
})
46 changes: 2 additions & 44 deletions packages/tailwindcss/src/__snapshots__/index.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,41 +295,7 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
--drop-shadow-lg: 0 10px 8px #0000000a, 0 4px 3px #0000001a;
--drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014;
--drop-shadow-2xl: 0 25px 25px #00000026;
--spacing-px: 1px;
--spacing-0: 0px;
--spacing-0_5: .125rem;
--spacing-1: .25rem;
--spacing-1_5: .375rem;
--spacing-2: .5rem;
--spacing-2_5: .625rem;
--spacing-3: .75rem;
--spacing-3_5: .875rem;
--spacing-4: 1rem;
--spacing-5: 1.25rem;
--spacing-6: 1.5rem;
--spacing-7: 1.75rem;
--spacing-8: 2rem;
--spacing-9: 2.25rem;
--spacing-10: 2.5rem;
--spacing-11: 2.75rem;
--spacing-12: 3rem;
--spacing-14: 3.5rem;
--spacing-16: 4rem;
--spacing-20: 5rem;
--spacing-24: 6rem;
--spacing-28: 7rem;
--spacing-32: 8rem;
--spacing-36: 9rem;
--spacing-40: 10rem;
--spacing-44: 11rem;
--spacing-48: 12rem;
--spacing-52: 13rem;
--spacing-56: 14rem;
--spacing-60: 15rem;
--spacing-64: 16rem;
--spacing-72: 18rem;
--spacing-80: 20rem;
--spacing-96: 24rem;
--spacing: .25rem;
--width-3xs: 16rem;
--width-2xs: 18rem;
--width-xs: 20rem;
Expand Down Expand Up @@ -385,14 +351,6 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
--line-height-3: .75rem;
--line-height-4: 1rem;
--line-height-5: 1.25rem;
--line-height-6: 1.5rem;
--line-height-7: 1.75rem;
--line-height-8: 2rem;
--line-height-9: 2.25rem;
--line-height-10: 2.5rem;
--perspective-dramatic: 100px;
--perspective-near: 300px;
--perspective-normal: 500px;
Expand All @@ -404,7 +362,7 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
}

.w-4 {
width: var(--spacing-4, 1rem);
width: calc(var(--spacing, .25rem) * 4);
}

.bg-red-500 {
Expand Down
Loading