From 659f112a605a3d3bf20add3bbca617bd9459a66f Mon Sep 17 00:00:00 2001 From: Aron Date: Tue, 7 May 2024 10:56:34 +0800 Subject: [PATCH] Improve: Shorthands containing var functions should not autofill in the `solid` style, resolved #348 --- packages/core/src/common.ts | 3 +- packages/core/src/config/rules.ts | 37 +++++-------------- .../core/src/utils/autofill-solid-style.ts | 28 ++++++++++++++ packages/core/tests/rules/border.test.ts | 1 + 4 files changed, 41 insertions(+), 28 deletions(-) create mode 100644 packages/core/src/utils/autofill-solid-style.ts diff --git a/packages/core/src/common.ts b/packages/core/src/common.ts index 9eb862104..5a4a285cb 100644 --- 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)'] \ No newline at end of file +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 index 5dc12f7c3..92afba892 100644 --- 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 new file mode 100644 index 000000000..0c6a2e1e0 --- /dev/null +++ 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 \ No newline at end of file diff --git a/packages/core/tests/rules/border.test.ts b/packages/core/tests/rules/border.test.ts index 1648d088d..09f35170a 100644 --- 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: {