Add(CSS): translate / scale / rotate individual transform properties

packages/core/src/config/rules.ts

@@ -589,6 +589,18 @@ 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'
     // View Transitions API (CSS View Transitions Level 1 / 2). #265 foundation.
     'view-transition-name': {
         key: 'vt-name',

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)')
+    })
+})