Skip to content

3D transform utilities #13248

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

Merged
merged 32 commits into from
Mar 19, 2024
Merged

3D transform utilities #13248

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
1ea840c
3D rotation utilities
KrisBraun Mar 14, 2024
1ea65e6
Validate rotate values
KrisBraun Mar 14, 2024
9bf2a5a
Replace forEach with for loop
KrisBraun Mar 14, 2024
4d56228
transform-style, transform-box, and backface-visibility utilities
KrisBraun Mar 14, 2024
eba491e
Tests for transform utilities
KrisBraun Mar 14, 2024
10f479f
'perspective' utility
KrisBraun Mar 14, 2024
4eb6052
Fix tests
KrisBraun Mar 14, 2024
55572d0
Remove unnecessary suggestion; move function comments
KrisBraun Mar 15, 2024
c7e8404
scale-z
KrisBraun Mar 15, 2024
9a0f278
Fix Intellisense test
KrisBraun Mar 15, 2024
c7ed758
perspective-origin
KrisBraun Mar 15, 2024
6b52d31
scale-3d
KrisBraun Mar 15, 2024
fcf1efc
Only include the z component of scale if it's defined
KrisBraun Mar 15, 2024
2c0bbeb
Comment the reason for setting --tw-rotate
KrisBraun Mar 15, 2024
8e1a983
Test full bare rotate
KrisBraun Mar 15, 2024
ef72110
Fix merge
KrisBraun Mar 15, 2024
cb73190
Comment on rotate arbitrary value
KrisBraun Mar 15, 2024
f2d5aa8
perspective bare values
KrisBraun Mar 18, 2024
03a5c47
scale-3d as a static modifier to scale
KrisBraun Mar 18, 2024
72bc00d
Test that scale-x overrides scale
KrisBraun Mar 18, 2024
d9d7df1
scale arbitrary values
KrisBraun Mar 18, 2024
d5a2f47
Specify rotation axis using a modifier
KrisBraun Mar 18, 2024
17077b7
Use property defaults for scale-3d
KrisBraun Mar 18, 2024
052647f
`transform` arbitrary values
KrisBraun Mar 18, 2024
1ecd23b
Add translate-z and translate-3d
KrisBraun Mar 19, 2024
7baf744
Add translate-[xyz]-px
KrisBraun Mar 19, 2024
4364362
Comment on how skewX and skewY are applied
KrisBraun Mar 19, 2024
77752cd
Remove unnecessary suggest
KrisBraun Mar 19, 2024
2efbac1
Simplify translate
KrisBraun Mar 19, 2024
68672e2
Fix up comment on rotate syntax
KrisBraun Mar 19, 2024
58ea669
Back to rotate-x and rotate-y rather than rotate modifiers
KrisBraun Mar 19, 2024
f5537cc
3D transform test fixes
KrisBraun Mar 19, 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
5 changes: 5 additions & 0 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 @@ -393,6 +393,11 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
--line-height-8: 2rem;
--line-height-9: 2.25rem;
--line-height-10: 2.5rem;
--perspective-dramatic: 100px;
--perspective-near: 300px;
--perspective-normal: 500px;
--perspective-midrange: 800px;
--perspective-distant: 1200px;
--transition-timing-function-linear: linear;
--transition-timing-function-in: cubic-bezier(.4, 0, 1, 1);
--transition-timing-function-out: cubic-bezier(0, 0, .2, 1);
Expand Down
5 changes: 5 additions & 0 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 @@ -392,6 +392,11 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
--line-height-8: 2rem;
--line-height-9: 2.25rem;
--line-height-10: 2.5rem;
--perspective-dramatic: 100px;
--perspective-near: 300px;
--perspective-normal: 500px;
--perspective-midrange: 800px;
--perspective-distant: 1200px;
--transition-timing-function-linear: linear;
--transition-timing-function-in: cubic-bezier(.4, 0, 1, 1);
--transition-timing-function-out: cubic-bezier(0, 0, .2, 1);
Expand Down
93 changes: 93 additions & 0 deletions packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,24 @@ exports[`getClassList 1`] = `
"-rotate-45",
"-rotate-6",
"-rotate-90",
"-rotate-x-0",
"-rotate-x-1",
"-rotate-x-12",
"-rotate-x-180",
"-rotate-x-2",
"-rotate-x-3",
"-rotate-x-45",
"-rotate-x-6",
"-rotate-x-90",
"-rotate-y-0",
"-rotate-y-1",
"-rotate-y-12",
"-rotate-y-180",
"-rotate-y-2",
"-rotate-y-3",
"-rotate-y-45",
"-rotate-y-6",
"-rotate-y-90",
"-scale-0",
"-scale-100",
"-scale-105",
Expand Down Expand Up @@ -124,6 +142,17 @@ exports[`getClassList 1`] = `
"-scale-y-75",
"-scale-y-90",
"-scale-y-95",
"-scale-z-0",
"-scale-z-100",
"-scale-z-105",
"-scale-z-110",
"-scale-z-125",
"-scale-z-150",
"-scale-z-200",
"-scale-z-50",
"-scale-z-75",
"-scale-z-90",
"-scale-z-95",
"-scroll-m-0.5",
"-scroll-m-1",
"-scroll-m-3",
Expand Down Expand Up @@ -242,6 +271,10 @@ exports[`getClassList 1`] = `
"-translate-y-1",
"-translate-y-3",
"-translate-y-4",
"-translate-z-0.5",
"-translate-z-1",
"-translate-z-3",
"-translate-z-4",
"-underline-offset-0",
"-underline-offset-1",
"-underline-offset-2",
Expand Down Expand Up @@ -346,6 +379,8 @@ exports[`getClassList 1`] = `
"backdrop-sepia-0",
"backdrop-sepia-100",
"backdrop-sepia-50",
"backface-hidden",
"backface-visible",
"basis-0.5",
"basis-1",
"basis-3",
Expand Down Expand Up @@ -1161,6 +1196,18 @@ exports[`getClassList 1`] = `
"pe-1",
"pe-3",
"pe-4",
"perspective-dramatic",
"perspective-none",
"perspective-normal",
"perspective-origin-bottom",
"perspective-origin-bottom-left",
"perspective-origin-bottom-right",
"perspective-origin-center",
"perspective-origin-left",
"perspective-origin-right",
"perspective-origin-top",
"perspective-origin-top-left",
"perspective-origin-top-right",
"pl-0.5",
"pl-1",
"pl-3",
Expand Down Expand Up @@ -1244,6 +1291,24 @@ exports[`getClassList 1`] = `
"rotate-45",
"rotate-6",
"rotate-90",
"rotate-x-0",
"rotate-x-1",
"rotate-x-12",
"rotate-x-180",
"rotate-x-2",
"rotate-x-3",
"rotate-x-45",
"rotate-x-6",
"rotate-x-90",
"rotate-y-0",
"rotate-y-1",
"rotate-y-12",
"rotate-y-180",
"rotate-y-2",
"rotate-y-3",
"rotate-y-45",
"rotate-y-6",
"rotate-y-90",
"rounded-b-full",
"rounded-b-none",
"rounded-bl-full",
Expand Down Expand Up @@ -1328,6 +1393,7 @@ exports[`getClassList 1`] = `
"scale-125",
"scale-150",
"scale-200",
"scale-3d",
"scale-50",
"scale-75",
"scale-90",
Expand All @@ -1354,6 +1420,17 @@ exports[`getClassList 1`] = `
"scale-y-75",
"scale-y-90",
"scale-y-95",
"scale-z-0",
"scale-z-100",
"scale-z-105",
"scale-z-110",
"scale-z-125",
"scale-z-150",
"scale-z-200",
"scale-z-50",
"scale-z-75",
"scale-z-90",
"scale-z-95",
"scroll-auto",
"scroll-m-0.5",
"scroll-m-1",
Expand Down Expand Up @@ -1582,9 +1659,16 @@ exports[`getClassList 1`] = `
"touch-pan-y",
"touch-pinch-zoom",
"transform",
"transform-3d",
"transform-border",
"transform-content",
"transform-cpu",
"transform-fill",
"transform-flat",
"transform-gpu",
"transform-none",
"transform-stroke",
"transform-view",
"transition",
"transition-all",
"transition-colors",
Expand All @@ -1595,18 +1679,27 @@ exports[`getClassList 1`] = `
"translate-0.5",
"translate-1",
"translate-3",
"translate-3d",
"translate-4",
"translate-full",
"translate-x-0.5",
"translate-x-1",
"translate-x-3",
"translate-x-4",
"translate-x-full",
"translate-x-px",
"translate-y-0.5",
"translate-y-1",
"translate-y-3",
"translate-y-4",
"translate-y-full",
"translate-y-px",
"translate-z-0.5",
"translate-z-1",
"translate-z-3",
"translate-z-4",
"translate-z-full",
"translate-z-px",
"truncate",
"underline",
"underline-offset-0",
Expand Down
6 changes: 6 additions & 0 deletions packages/tailwindcss/src/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,12 @@ describe('@apply', () => {
syntax: "<length-percentage>";
inherits: false;
initial-value: 0;
}

@property --tw-translate-z {
syntax: "<length-percentage>";
inherits: false;
initial-value: 0;
}"
`)
})
Expand Down
2 changes: 2 additions & 0 deletions packages/tailwindcss/src/intellisense.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ function loadDesignSystem() {
theme.add('--breakpoint-sm', '640px')
theme.add('--font-size-xs', '0.75rem')
theme.add('--font-size-xs--line-height', '1rem')
theme.add('--perspective-dramatic', '100px')
theme.add('--perspective-normal', '500px')
return buildDesignSystem(theme)
}

Expand Down
5 changes: 3 additions & 2 deletions packages/tailwindcss/src/property-order.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,10 @@ export default [
// '--tw-rotate',
'--tw-skew-x',
'--tw-skew-y',
'--tw-scale-x',
'--tw-scale-y',
'--tw-scale-z',
'scale',
// '--tw-scale-x',
// '--tw-scale-y',
'transform',

'animation',
Expand Down
2 changes: 2 additions & 0 deletions packages/tailwindcss/src/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,8 @@ export type ThemeKey =
| '--outline-offset'
| '--padding'
| '--placeholder-color'
| '--perspective'
| '--perspective-origin'
| '--radius'
| '--ring-color'
| '--ring-offset-color'
Expand Down
Loading