Fix: Numeric functions cause incorrect shorthand matching, resolved #347

master-co · May 7, 2024 · cebdcd9 · cebdcd9
1 parent 14e5c97
commit cebdcd9
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/packages/core/src/common.ts b/packages/core/src/common.ts
@@ -18,7 +18,7 @@ export const VALUE_UNITS = ['%', 'cm', 'mm', 'q', 'in', 'pt', 'pc', 'px', 'em',
 export const UNIT_REGEX = /^([+-.]?\d+(\.?\d+)?)(%|cm|mm|q|in|pt|pc|px|em|rem|ex|rex|cap|rcap|ch|rch|ic|ric|lh|rlh|vw|svw|lvw|dvw|vh|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax|cqw|cqh|cqi|cqb|cqmin|cqmax|deg|grad|rad|turn|s|ms|hz|khz|dpi|dpcm|dppx|x|fr|db|st)?$/
 export const IMAGE_VALUE_REGEX = /(?:url|linear-gradient|radial-gradient|repeating-linear-gradient|repeating-radial-gradient|conic-gradient)\(.*\)/
 export const COLOR_VALUE_REGEX = /(?:#|(?:color|color-contrast|color-mix|hwb|lab|lch|oklab|oklch|rgb|rgba|hsl|hsla)\(.*\)|(?:\$colors)(?![a-zA-Z0-9-]))/
-export const NUMBER_VALUE_REGEX = /(?:[\d.]|(?:max|min|calc|clamp)\(.*\))/
+export const NUMBER_VALUE_REGEX = /(?:[\d.]|(?:max|min|calc|clamp)\([^|]*\))/
 export const OFFICIAL_URL = new URL('https://rc.css.master.co')
 export const CLASS_ATTRIBUTES = ['class', 'className']
 export const CLASS_DECLARATIONS = ['styles']

diff --git a/packages/core/tests/rules/border.test.ts b/packages/core/tests/rules/border.test.ts
@@ -18,6 +18,10 @@ test('border', () => {
     expect(new MasterCSS().create('border:auto|1')?.text).toContain('border:auto 0.0625rem')
 })
 
+test('shorthand', () => {
+    expect(new MasterCSS().create('border:calc(100%-20)|solid')?.text).toContain('border:calc(100% - 1.25rem) solid')
+})
+
 it('validates border rules', () => {
     expect(new MasterCSS().create('b:16|solid')?.text).toContain('border:1rem solid')
     expect(new MasterCSS().create('border:16|solid')?.text).toContain('border:1rem solid')