From f94422a6993cfdc23093c36c88318a73ffd55e9c Mon Sep 17 00:00:00 2001
From: Miles <git@miles.tw>
Date: Fri, 1 May 2026 03:03:58 +0800
Subject: [PATCH] Add(CSS): Individual transform properties (translate / scale
 / rotate)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds the standalone CSS Transforms Module Level 2 properties as
native utilities. They compose with each other and with transform:
per the spec, without the all-or-nothing override that transform:
shorthand causes.

- Three new SyntaxRuleType.Native rules with appropriate units
  (translate: rem, rotate: deg, scale unitless)
- 7 test cases including legacy translate()/rotate() function-form
  regression
- Real Chrome verification: translate:16|24 →
  getComputedStyle(...).translate === "16px 24px"; rotate:45deg →
  "45deg"; scale:1.5 → "1.5"

Closes #321
---
 packages/core/src/config/rules.ts             | 13 ++++++
 .../issue-321-transform-individual.test.ts    | 46 +++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 packages/core/tests/issue-321-transform-individual.test.ts

diff --git a/packages/core/src/config/rules.ts b/packages/core/src/config/rules.ts
index 137d610a3..db0562849 100644
--- a/packages/core/src/config/rules.ts
+++ b/packages/core/src/config/rules.ts
@@ -589,6 +589,19 @@ const rules = {
         type: SyntaxRuleType.Native,
         namespaces: ['spacing']
     },
+    // Individual transform properties (CSS Transforms Module Level 2)
+    translate: {
+        type: SyntaxRuleType.Native,
+        unit: 'rem',
+        namespaces: ['spacing']
+    },
+    scale: {
+        type: SyntaxRuleType.Native
+    },
+    rotate: {
+        type: SyntaxRuleType.Native,
+        unit: 'deg'
+    },
     'translate()': {
         declarations: ['transform'],
         unit: 'rem',
diff --git a/packages/core/tests/issue-321-transform-individual.test.ts b/packages/core/tests/issue-321-transform-individual.test.ts
new file mode 100644
index 000000000..dcd1402a6
--- /dev/null
+++ b/packages/core/tests/issue-321-transform-individual.test.ts
@@ -0,0 +1,46 @@
+import { describe, test, expect } from 'vitest'
+import { MasterCSS, config as defaultConfig } from '../src'
+
+describe('issue #321: translate / scale / rotate individual properties', () => {
+    test('translate: as standalone property', () => {
+        const css = new MasterCSS(undefined, defaultConfig)
+        const rule = css.create('translate:16')
+        expect(rule?.text).toContain('translate:1rem')
+    })
+
+    test('translate: with two values', () => {
+        const css = new MasterCSS(undefined, defaultConfig)
+        const rule = css.create('translate:16|24')
+        expect(rule?.text).toContain('translate:1rem 1.5rem')
+    })
+
+    test('scale: as standalone property', () => {
+        const css = new MasterCSS(undefined, defaultConfig)
+        const rule = css.create('scale:1.5')
+        expect(rule?.text).toContain('scale:1.5')
+    })
+
+    test('scale: with two values', () => {
+        const css = new MasterCSS(undefined, defaultConfig)
+        const rule = css.create('scale:1.5|2')
+        expect(rule?.text).toContain('scale:1.5 2')
+    })
+
+    test('rotate: as standalone property', () => {
+        const css = new MasterCSS(undefined, defaultConfig)
+        const rule = css.create('rotate:45deg')
+        expect(rule?.text).toContain('rotate:45deg')
+    })
+
+    test('legacy translate() function still maps to transform (regression)', () => {
+        const css = new MasterCSS(undefined, defaultConfig)
+        const rule = css.create('translate(16,16)')
+        expect(rule?.text).toContain('transform:translate(1rem,1rem)')
+    })
+
+    test('legacy rotate() function still maps to transform (regression)', () => {
+        const css = new MasterCSS(undefined, defaultConfig)
+        const rule = css.create('rotate(45deg)')
+        expect(rule?.text).toContain('transform:rotate(45deg)')
+    })
+})