diff --git a/packages/core/src/config/rules.ts b/packages/core/src/config/rules.ts index 0d71d0af4..c9083c4e5 100644 --- a/packages/core/src/config/rules.ts +++ b/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', 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)') + }) +})