Improve: Shorthands containing var functions should not autofill in t…

…he `solid` style, resolved #348
master-co · May 7, 2024 · 659f112 · 659f112
1 parent cebdcd9
commit 659f112
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 28 deletions.
diff --git a/packages/core/src/common.ts b/packages/core/src/common.ts
@@ -22,4 +22,5 @@ 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']
-export const CLASS_FUNCTIONS = ['clsx', 'cva', 'ctl', 'cv', 'class', 'classnames', 'classVariant', 'styled(?:\\s+)?(?:\\.\\w+)?', 'classList(?:\\s+)?\\.(?:add|remove|toggle|replace)']
+export const CLASS_FUNCTIONS = ['clsx', 'cva', 'ctl', 'cv', 'class', 'classnames', 'classVariant', 'styled(?:\\s+)?(?:\\.\\w+)?', 'classList(?:\\s+)?\\.(?:add|remove|toggle|replace)']
+export const BORDER_STYLE_VALUES = ['none', 'auto', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']
diff --git a/packages/core/src/config/rules.ts b/packages/core/src/config/rules.ts
@@ -1,25 +1,8 @@
 import cssEscape from '@master/css-shared/utils/css-escape'
 import type { Rule, RuleDefinition } from '../rule'
 import Layer from '../layer'
-import { COLOR_VALUE_REGEX, IMAGE_VALUE_REGEX, NUMBER_VALUE_REGEX, VALUE_DELIMITERS } from '../common'
-
-// values
-const BORDER_STYLE_VALUES = ['none', 'auto', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']
-
-export const autofillSolidToValueComponent: RuleDefinition['transformValueComponents'] = function (valueComponents) {
-    if (valueComponents.length < 2) return valueComponents
-    const styleValueComponent = valueComponents.find((valueComponent) => {
-        return valueComponent.type === 'string' && BORDER_STYLE_VALUES.includes(valueComponent.value) ||
-            valueComponent.type === 'variable' && BORDER_STYLE_VALUES.includes(String(valueComponent.variable?.value))
-    })
-    if (!styleValueComponent) {
-        valueComponents.push(
-            { type: 'separator', value: ' ', token: '|' },
-            { type: 'string', value: 'solid', token: 'solid' }
-        )
-    }
-    return valueComponents
-}
+import { BORDER_STYLE_VALUES, COLOR_VALUE_REGEX, IMAGE_VALUE_REGEX, NUMBER_VALUE_REGEX, VALUE_DELIMITERS } from '../common'
+import autofillSolidStyle from '../utils/autofill-solid-style'
 
 const rules = {
     group: {
@@ -1188,31 +1171,31 @@ const rules = {
         key: 'bt',
         layer: Layer.NativeShorthand,
         unit: 'rem',
-        transformValueComponents: autofillSolidToValueComponent,
+        transformValueComponents: autofillSolidStyle,
     } as RuleDefinition,
     'border-bottom': {
         key: 'bb',
         layer: Layer.NativeShorthand,
         unit: 'rem',
-        transformValueComponents: autofillSolidToValueComponent,
+        transformValueComponents: autofillSolidStyle,
     } as RuleDefinition,
     'border-left': {
         key: 'bl',
         layer: Layer.NativeShorthand,
         unit: 'rem',
-        transformValueComponents: autofillSolidToValueComponent,
+        transformValueComponents: autofillSolidStyle,
     } as RuleDefinition,
     'border-right': {
         key: 'br',
         layer: Layer.NativeShorthand,
         unit: 'rem',
-        transformValueComponents: autofillSolidToValueComponent,
+        transformValueComponents: autofillSolidStyle,
     } as RuleDefinition,
     'border-x': {
         key: 'bx',
         unit: 'rem',
         layer: Layer.Shorthand,
-        transformValueComponents: autofillSolidToValueComponent,
+        transformValueComponents: autofillSolidStyle,
         declare(value) {
             return {
                 'border-left': value,
@@ -1224,7 +1207,7 @@ const rules = {
         key: 'by',
         unit: 'rem',
         layer: Layer.Shorthand,
-        transformValueComponents: autofillSolidToValueComponent,
+        transformValueComponents: autofillSolidStyle,
         declare(value) {
             return {
                 'border-top': value,
@@ -1236,7 +1219,7 @@ const rules = {
         key: 'b',
         unit: 'rem',
         layer: Layer.NativeShorthand,
-        transformValueComponents: autofillSolidToValueComponent,
+        transformValueComponents: autofillSolidStyle,
     } as RuleDefinition,
     'background-attachment': {
         ambiguousKeys: ['bg'],
@@ -1582,7 +1565,7 @@ const rules = {
             'outline-offset',
             'outline-color'
         ],
-        transformValueComponents: autofillSolidToValueComponent
+        transformValueComponents: autofillSolidStyle
     } as RuleDefinition,
     'accent-color': {
         key: 'accent',

diff --git a/packages/core/src/utils/autofill-solid-style.ts b/packages/core/src/utils/autofill-solid-style.ts
@@ -0,0 +1,28 @@
+import { BORDER_STYLE_VALUES } from '../common'
+import { RuleDefinition } from '../rule'
+
+const autofillSolidStyle: RuleDefinition['transformValueComponents'] = function (valueComponents) {
+    if (valueComponents.length < 2) return valueComponents
+    let styleIncluded = false
+    let varIncluded = false
+    for (const valueComponent of valueComponents) {
+        if (
+            valueComponent.type === 'string' && BORDER_STYLE_VALUES.includes(valueComponent.value)
+            || valueComponent.type === 'variable' && BORDER_STYLE_VALUES.includes(String(valueComponent.variable?.value))
+        ) {
+            styleIncluded = true
+        }
+        if (valueComponent.type === 'function' && valueComponent.name === 'var') {
+            varIncluded = true
+        }
+    }
+    if (!styleIncluded && !varIncluded) {
+        valueComponents.push(
+            { type: 'separator', value: ' ', token: '|' },
+            { type: 'string', value: 'solid', token: 'solid' }
+        )
+    }
+    return valueComponents
+}
+
+export default autofillSolidStyle
diff --git a/packages/core/tests/rules/border.test.ts b/packages/core/tests/rules/border.test.ts
@@ -61,6 +61,7 @@ it('checks border order', () => {
 test('autofill solid', () => {
     expect(new MasterCSS().create('border:16|black')?.text).toContain('border:1rem rgb(0 0 0) solid')
     expect(new MasterCSS().create('border:16|black|solid')?.text).toContain('border:1rem rgb(0 0 0) solid')
+    expect(new MasterCSS().create('border:16|var(--style)')?.text).not.toContain('solid')
     expect(new MasterCSS({ variables: { line: 'solid' } }).create('border:16|black|line')?.text).toContain('border:1rem rgb(0 0 0) solid')
     expect(new MasterCSS({
         variables: {