Skip to content

Commit 2e302b1

Browse files
KrisBraunKrisBraun
committed
Specify rotation axis using a modifier
Support single rotation angles in line with the [CSS `rotate` property](https://developer.mozilla.org/en-US/docs/Web/CSS/rotate). Using modifiers (e.g. `rotate-45/x`) makes it clearer that the axis of rotation is modified. Thanks @adamwathan for this suggestion. Composing angles is only supported in CSS via a pipeline of `transform` functions. I'll add arbitrary value support to `transform` next as an escape hatch for those cases that need more complex transformations.
1 parent d9d7df1 commit 2e302b1

File tree

3 files changed

+26
-335
lines changed

3 files changed

+26
-335
lines changed

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1269,9 +1269,6 @@ exports[`getClassList 1`] = `
12691269
"rotate-45",
12701270
"rotate-6",
12711271
"rotate-90",
1272-
"rotate-x",
1273-
"rotate-y",
1274-
"rotate-z",
12751272
"rounded-b-full",
12761273
"rounded-b-none",
12771274
"rounded-bl-full",

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

Lines changed: 17 additions & 303 deletions
Original file line numberDiff line numberDiff line change
@@ -2549,330 +2549,44 @@ test('translate-y', () => {
25492549
})
25502550

25512551
test('rotate', () => {
2552-
expect(run(['rotate-45', '-rotate-45', 'rotate-[123deg]'])).toMatchInlineSnapshot(`
2552+
expect(run(['rotate-45', '-rotate-45', 'rotate-[123deg]', 'rotate-[0.3_0.7_1_45deg]']))
2553+
.toMatchInlineSnapshot(`
25532554
".-rotate-45 {
2554-
--tw-rotate: calc(45deg * -1);
25552555
rotate: -45deg;
25562556
}
25572557
25582558
.rotate-45 {
2559-
--tw-rotate: 45deg;
2560-
rotate: 45deg;
2561-
}
2562-
2563-
.rotate-\\[123deg\\] {
2564-
--tw-rotate: 123deg;
2565-
rotate: 123deg;
2566-
}
2567-
2568-
@property --tw-rotate {
2569-
syntax: "<angle>";
2570-
inherits: false;
2571-
initial-value: 0deg;
2572-
}
2573-
2574-
@property --tw-rotate-x {
2575-
syntax: "<number>";
2576-
inherits: false;
2577-
initial-value: 0;
2578-
}
2579-
2580-
@property --tw-rotate-y {
2581-
syntax: "<number>";
2582-
inherits: false;
2583-
initial-value: 0;
2584-
}
2585-
2586-
@property --tw-rotate-z {
2587-
syntax: "<number>";
2588-
inherits: false;
2589-
initial-value: 0;
2590-
}"
2591-
`)
2592-
expect(run(['rotate-45', 'rotate-[0.3_0.7_1]'])).toMatchInlineSnapshot(`
2593-
".rotate-45 {
2594-
--tw-rotate: 45deg;
25952559
rotate: 45deg;
25962560
}
25972561
2598-
.rotate-\\[0\\.3_0\\.7_1\\] {
2599-
rotate: .3 .7 1 var(--tw-rotate);
2600-
}
2601-
2602-
@property --tw-rotate {
2603-
syntax: "<angle>";
2604-
inherits: false;
2605-
initial-value: 0deg;
2606-
}
2607-
2608-
@property --tw-rotate-x {
2609-
syntax: "<number>";
2610-
inherits: false;
2611-
initial-value: 0;
2612-
}
2613-
2614-
@property --tw-rotate-y {
2615-
syntax: "<number>";
2616-
inherits: false;
2617-
initial-value: 0;
2618-
}
2619-
2620-
@property --tw-rotate-z {
2621-
syntax: "<number>";
2622-
inherits: false;
2623-
initial-value: 0;
2624-
}"
2625-
`)
2626-
expect(run(['rotate-[0.3_0.7_1_45deg]'])).toMatchInlineSnapshot(`
2627-
".rotate-\\[0\\.3_0\\.7_1_45deg\\] {
2562+
.rotate-\\[0\\.3_0\\.7_1_45deg\\] {
26282563
rotate: .3 .7 1 45deg;
2629-
}"
2630-
`)
2631-
expect(run(['rotate', 'rotate-unknown'])).toEqual('')
2632-
})
2633-
2634-
test('rotate-x', () => {
2635-
expect(run(['rotate-45', 'rotate-x'])).toMatchInlineSnapshot(`
2636-
".rotate-45 {
2637-
--tw-rotate: 45deg;
2638-
rotate: 45deg;
2639-
}
2640-
2641-
.rotate-x {
2642-
--tw-rotate-x: 1;
2643-
rotate: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-rotate);
2644-
}
2645-
2646-
@property --tw-rotate {
2647-
syntax: "<angle>";
2648-
inherits: false;
2649-
initial-value: 0deg;
2650-
}
2651-
2652-
@property --tw-rotate-x {
2653-
syntax: "<number>";
2654-
inherits: false;
2655-
initial-value: 0;
2656-
}
2657-
2658-
@property --tw-rotate-y {
2659-
syntax: "<number>";
2660-
inherits: false;
2661-
initial-value: 0;
2662-
}
2663-
2664-
@property --tw-rotate-z {
2665-
syntax: "<number>";
2666-
inherits: false;
2667-
initial-value: 0;
2668-
}"
2669-
`)
2670-
expect(run(['rotate-45', 'rotate-x', 'rotate-y'])).toMatchInlineSnapshot(`
2671-
".rotate-45 {
2672-
--tw-rotate: 45deg;
2673-
rotate: 45deg;
2674-
}
2675-
2676-
.rotate-x {
2677-
--tw-rotate-x: 1;
2678-
rotate: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-rotate);
2679-
}
2680-
2681-
.rotate-y {
2682-
--tw-rotate-y: 1;
2683-
rotate: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-rotate);
2684-
}
2685-
2686-
@property --tw-rotate {
2687-
syntax: "<angle>";
2688-
inherits: false;
2689-
initial-value: 0deg;
2690-
}
2691-
2692-
@property --tw-rotate-x {
2693-
syntax: "<number>";
2694-
inherits: false;
2695-
initial-value: 0;
2696-
}
2697-
2698-
@property --tw-rotate-y {
2699-
syntax: "<number>";
2700-
inherits: false;
2701-
initial-value: 0;
2702-
}
2703-
2704-
@property --tw-rotate-z {
2705-
syntax: "<number>";
2706-
inherits: false;
2707-
initial-value: 0;
2708-
}"
2709-
`)
2710-
expect(run(['rotate-x'])).toMatchInlineSnapshot(`
2711-
".rotate-x {
2712-
--tw-rotate-x: 1;
2713-
rotate: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-rotate);
2714-
}
2715-
2716-
@property --tw-rotate {
2717-
syntax: "<angle>";
2718-
inherits: false;
2719-
initial-value: 0deg;
2720-
}
2721-
2722-
@property --tw-rotate-x {
2723-
syntax: "<number>";
2724-
inherits: false;
2725-
initial-value: 0;
2726-
}
2727-
2728-
@property --tw-rotate-y {
2729-
syntax: "<number>";
2730-
inherits: false;
2731-
initial-value: 0;
2732-
}
2733-
2734-
@property --tw-rotate-z {
2735-
syntax: "<number>";
2736-
inherits: false;
2737-
initial-value: 0;
2738-
}"
2739-
`)
2740-
})
2741-
2742-
test('rotate-y', () => {
2743-
expect(run(['rotate-45', 'rotate-y'])).toMatchInlineSnapshot(`
2744-
".rotate-45 {
2745-
--tw-rotate: 45deg;
2746-
rotate: 45deg;
2747-
}
2748-
2749-
.rotate-y {
2750-
--tw-rotate-y: 1;
2751-
rotate: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-rotate);
27522564
}
27532565
2754-
@property --tw-rotate {
2755-
syntax: "<angle>";
2756-
inherits: false;
2757-
initial-value: 0deg;
2758-
}
2759-
2760-
@property --tw-rotate-x {
2761-
syntax: "<number>";
2762-
inherits: false;
2763-
initial-value: 0;
2764-
}
2765-
2766-
@property --tw-rotate-y {
2767-
syntax: "<number>";
2768-
inherits: false;
2769-
initial-value: 0;
2770-
}
2771-
2772-
@property --tw-rotate-z {
2773-
syntax: "<number>";
2774-
inherits: false;
2775-
initial-value: 0;
2776-
}"
2777-
`)
2778-
expect(run(['rotate-y'])).toMatchInlineSnapshot(`
2779-
".rotate-y {
2780-
--tw-rotate-y: 1;
2781-
rotate: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-rotate);
2782-
}
2783-
2784-
@property --tw-rotate {
2785-
syntax: "<angle>";
2786-
inherits: false;
2787-
initial-value: 0deg;
2788-
}
2789-
2790-
@property --tw-rotate-x {
2791-
syntax: "<number>";
2792-
inherits: false;
2793-
initial-value: 0;
2794-
}
2795-
2796-
@property --tw-rotate-y {
2797-
syntax: "<number>";
2798-
inherits: false;
2799-
initial-value: 0;
2800-
}
2801-
2802-
@property --tw-rotate-z {
2803-
syntax: "<number>";
2804-
inherits: false;
2805-
initial-value: 0;
2806-
}"
2807-
`)
2808-
})
2809-
2810-
test('rotate-z', () => {
2811-
expect(run(['rotate-45', 'rotate-z'])).toMatchInlineSnapshot(`
2812-
".rotate-45 {
2813-
--tw-rotate: 45deg;
2814-
rotate: 45deg;
2815-
}
2816-
2817-
.rotate-z {
2818-
--tw-rotate-z: 1;
2819-
rotate: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-rotate);
2820-
}
2821-
2822-
@property --tw-rotate {
2823-
syntax: "<angle>";
2824-
inherits: false;
2825-
initial-value: 0deg;
2826-
}
2827-
2828-
@property --tw-rotate-x {
2829-
syntax: "<number>";
2830-
inherits: false;
2831-
initial-value: 0;
2832-
}
2833-
2834-
@property --tw-rotate-y {
2835-
syntax: "<number>";
2836-
inherits: false;
2837-
initial-value: 0;
2838-
}
2839-
2840-
@property --tw-rotate-z {
2841-
syntax: "<number>";
2842-
inherits: false;
2843-
initial-value: 0;
2566+
.rotate-\\[123deg\\] {
2567+
rotate: 123deg;
28442568
}"
28452569
`)
2846-
expect(run(['rotate-z'])).toMatchInlineSnapshot(`
2847-
".rotate-z {
2848-
--tw-rotate-z: 1;
2849-
rotate: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-rotate);
2850-
}
2851-
2852-
@property --tw-rotate {
2853-
syntax: "<angle>";
2854-
inherits: false;
2855-
initial-value: 0deg;
2570+
expect(
2571+
run(['rotate-45/x', 'rotate-45/y', 'rotate-45/[1_2_3]', 'rotate-[123deg]/[0.3_0.7_1]']),
2572+
).toMatchInlineSnapshot(`
2573+
".rotate-45\\/\\[1_2_3\\] {
2574+
rotate: 1 2 3 45deg;
28562575
}
28572576
2858-
@property --tw-rotate-x {
2859-
syntax: "<number>";
2860-
inherits: false;
2861-
initial-value: 0;
2577+
.rotate-45\\/x {
2578+
rotate: x 45deg;
28622579
}
28632580
2864-
@property --tw-rotate-y {
2865-
syntax: "<number>";
2866-
inherits: false;
2867-
initial-value: 0;
2581+
.rotate-45\\/y {
2582+
rotate: y 45deg;
28682583
}
28692584
2870-
@property --tw-rotate-z {
2871-
syntax: "<number>";
2872-
inherits: false;
2873-
initial-value: 0;
2585+
.rotate-\\[123deg\\]\\/\\[0\\.3_0\\.7_1\\] {
2586+
rotate: .3 .7 1 123deg;
28742587
}"
28752588
`)
2589+
expect(run(['rotate', 'rotate-x', 'rotate-y', 'rotate-z', 'rotate-unknown'])).toEqual('')
28762590
})
28772591

28782592
test('skew', () => {

0 commit comments

Comments
 (0)