@master/css 2.0.0-rc.68 → 2.0.0-rc.69

package/dist/syntax-rule.mjs

@@ -1,12 +1,15 @@
 import cssEscape from './shared/utils/css-escape.mjs';
 import SyntaxRuleType from './syntax-rule-type.mjs';
-import { VALUE_DELIMITERS, AT_IDENTIFIERS, BASE_UNIT_REGEX } from './common.mjs';
+import { AT_IDENTIFIERS, VALUE_DELIMITERS, BASE_UNIT_REGEX } from './common.mjs';
 import parseValue from './utils/parse-value.mjs';
 import parseAt from './utils/parse-at.mjs';
 import generateAt from './utils/generate-at.mjs';
 import parseSelector from './utils/parse-selector.mjs';
 import generateSelector from './utils/generate-selector.mjs';
 import { calcRulePriority } from './utils/compare-rule-priority.mjs';
+import declarers from './declarers/index.mjs';
+import transformers from './transformers/index.mjs';
+import functionTransformers from './function-transformers/index.mjs';
 
 class SyntaxRule {
     name;
@@ -16,10 +19,10 @@ class SyntaxRule {
     native;
     atRules;
     priority;
-    type;
+    type = SyntaxRuleType.Normal;
     declarations;
     layer;
-    valid;
+    valid = true;
     animationNames;
     variableNames;
     constructor(name, css, registeredSyntax, fixedClass, mode){
@@ -27,263 +30,24 @@ class SyntaxRule {
         this.css = css;
         this.registeredSyntax = registeredSyntax;
         this.fixedClass = fixedClass;
-        this.type = SyntaxRuleType.Normal;
-        this.valid = true;
-        this.resolveValue = (valueComponents, unit, bypassVariableNames, bypassParsing)=>{
-            const { functions } = this.css.config;
-            let currentValue = '';
-            for (const eachValueComponent of valueComponents){
-                switch(eachValueComponent.type){
-                    case 'function':
-                        const functionDefinition = functions && functions[eachValueComponent.name];
-                        if (functionDefinition?.transform && !eachValueComponent.bypassTransform) {
-                            const result = functionDefinition.transform.call(this, this.resolveValue(eachValueComponent.children, functionDefinition.unit ?? unit, bypassVariableNames, bypassParsing || eachValueComponent.name === 'calc'), bypassVariableNames);
-                            currentValue += eachValueComponent.token = eachValueComponent.text = typeof result === 'string' ? result : this.resolveValue(result, functionDefinition?.unit ?? unit, bypassVariableNames, bypassParsing);
-                        } else {
-                            currentValue += eachValueComponent.token = eachValueComponent.text = eachValueComponent.name + eachValueComponent.symbol + this.resolveValue(eachValueComponent.children, functionDefinition?.unit ?? unit, bypassVariableNames, bypassParsing) + VALUE_DELIMITERS[eachValueComponent.symbol];
-                        }
-                        break;
-                    // todo: 應挪到 parseValues 階段處理才能支援 variables: { x: 'calc(20vw-30px)' } 這種情況，並且解析上可能會比較合理、精簡
-                    case 'variable':
-                        const variable = this.css.variables.get(eachValueComponent.name);
-                        if (variable) {
-                            const handleVariable = (normalHandler, varHandler)=>{
-                                if (variable.modes) {
-                                    if (this.mode) {
-                                        const themeVariable = variable.modes[this.mode] ?? variable;
-                                        if (themeVariable?.value) {
-                                            normalHandler(themeVariable);
-                                        }
-                                    } else {
-                                        if (this.variableNames) {
-                                            this.variableNames.add(eachValueComponent.name);
-                                        } else {
-                                            this.variableNames = new Set([
-                                                eachValueComponent.name
-                                            ]);
-                                        }
-                                        varHandler();
-                                    }
-                                } else {
-                                    normalHandler(variable);
-                                }
-                            };
-                            switch(variable.type){
-                                case 'string':
-                                    handleVariable((variable)=>{
-                                        const valueComponents = [];
-                                        this.parseValues(valueComponents, 0, variable.value, unit, '', undefined, bypassParsing, [
-                                            ...bypassVariableNames,
-                                            eachValueComponent.name
-                                        ]);
-                                        currentValue += eachValueComponent.text = this.resolveValue(valueComponents, unit, [
-                                            ...bypassVariableNames,
-                                            eachValueComponent.name
-                                        ], bypassParsing);
-                                    }, ()=>{
-                                        currentValue += eachValueComponent.text = `var(--${eachValueComponent.name})`;
-                                    });
-                                    break;
-                                case 'number':
-                                    handleVariable((variable)=>{
-                                        if (bypassParsing) {
-                                            currentValue += eachValueComponent.text = String(variable.value);
-                                        } else {
-                                            const valueComponent = this.parseValue(variable.value, unit);
-                                            currentValue += eachValueComponent.text = valueComponent.value + (valueComponent.unit ?? '');
-                                        }
-                                    }, ()=>{
-                                        currentValue += eachValueComponent.text = unit ? `calc(var(--${eachValueComponent.name}) / 16 * 1rem)` : `var(--${eachValueComponent.name})`;
-                                    });
-                                    break;
-                                case 'color':
-                                    const alpha = eachValueComponent.alpha ? '/' + eachValueComponent.alpha : '';
-                                    handleVariable((variable)=>{
-                                        currentValue += eachValueComponent.text = `${variable['space']}(${variable.value}${alpha})`;
-                                    }, ()=>{
-                                        currentValue += eachValueComponent.text = `${variable.space}(var(--${eachValueComponent.name})${alpha})`;
-                                    });
-                                    break;
-                            }
-                        } else {
-                            currentValue += eachValueComponent.text = `var(--${eachValueComponent.name}${eachValueComponent.fallback ? ',' + eachValueComponent.fallback : ''})`;
-                        }
-                        break;
-                    case 'separator':
-                        currentValue += eachValueComponent.text ? eachValueComponent.text : eachValueComponent.text = eachValueComponent.value;
-                        break;
-                    case 'number':
-                        currentValue += eachValueComponent.text = eachValueComponent.value + (eachValueComponent.unit || '');
-                        break;
-                    default:
-                        currentValue += eachValueComponent.text = eachValueComponent.value;
-                        break;
-                }
-            }
-            return currentValue;
-        };
-        this.parseValues = (currentValueComponents, i, value, unit, endSymbol, parentFunctionName, bypassParsing = false, bypassVariableNames = [])=>{
-            const root = parentFunctionName === undefined;
-            const isVarFunction = !root && (parentFunctionName.endsWith('$') || parentFunctionName.endsWith('var'));
-            const checkIsString = (value)=>value === '\'' || value === '"';
-            const isString = checkIsString(endSymbol);
-            const separators = [
-                ','
-            ];
-            if (this.definition.separators?.length) {
-                separators.push(...this.definition.separators);
-            }
-            let currentValue = '';
-            const parse = ()=>{
-                if (currentValue) {
-                    let handled = false;
-                    if (!isVarFunction || currentValueComponents.length) {
-                        const handleVariable = (variableName, alpha)=>{
-                            const globalVariableValue = this.css.variables.get(variableName);
-                            const variable = Object.prototype.hasOwnProperty.call(this.variables, variableName) ? this.variables[variableName] : globalVariableValue;
-                            if (variable) {
-                                const name = variable.name ?? variableName;
-                                if (!bypassVariableNames.includes(name)) {
-                                    handled = true;
-                                    const valueComponent = {
-                                        type: 'variable',
-                                        name,
-                                        variable: this.css.variables.get(name),
-                                        token: currentValue
-                                    };
-                                    if (alpha) valueComponent.alpha = alpha;
-                                    currentValueComponents.push(valueComponent);
-                                }
-                            }
-                        };
-                        if (/^\$[a-zA-Z0-9-]+(?:\/[^\/]+)?$/.test(currentValue)) {
-                            const [raw, alpha] = currentValue.slice(1).split('/');
-                            handleVariable(raw, alpha);
-                        } else {
-                            handleVariable(currentValue);
-                            if (!handled) {
-                                const [colorName, alpha] = currentValue.split('/');
-                                handleVariable(colorName, alpha);
-                            }
-                        }
-                    }
-                    if (!handled) {
-                        if (!isVarFunction) {
-                            const result = BASE_UNIT_REGEX.exec(currentValue);
-                            if (result) {
-                                currentValue = String(+result[1] * (this.css.config.baseUnit ?? 1));
-                            }
-                        }
-                        if (bypassParsing) {
-                            currentValueComponents.push({
-                                type: 'string',
-                                value: currentValue,
-                                token: currentValue
-                            });
-                        } else {
-                            const parsedValue = this.parseValue(currentValue, unit);
-                            currentValueComponents.push({
-                                ...parsedValue,
-                                token: currentValue
-                            });
-                        }
-                    }
-                    currentValue = '';
-                }
-            };
-            for(; i < value.length; i++){
-                const val = value[i];
-                if (val === endSymbol) {
-                    if (isString) {
-                        let count = 0;
-                        for(let j = currentValue.length - 1;; j--){
-                            if (currentValue[j] !== '\\') break;
-                            count++;
-                        }
-                        if (count % 2) {
-                            currentValue += val;
-                            continue;
-                        } else {
-                            parse();
-                        }
-                    } else {
-                        parse();
-                    }
-                    return i;
-                } else if (!isString && val in VALUE_DELIMITERS) {
-                    const functionName = currentValue;
-                    const newValueComponent = {
-                        type: 'function',
-                        name: functionName,
-                        symbol: val,
-                        children: [],
-                        token: ''
-                    };
-                    currentValueComponents.push(newValueComponent);
-                    currentValue = '';
-                    const functionDefinition = val === '(' ? this.css.config.functions?.[functionName] : undefined;
-                    i = this.parseValues(newValueComponent.children, ++i, value, functionDefinition?.unit ?? unit, VALUE_DELIMITERS[val], functionName || parentFunctionName || '', bypassParsing || functionName === 'calc');
-                } else if ((val === '|' || val === ' ') && endSymbol !== '}' && (!isString || parentFunctionName === 'path')) {
-                    parse();
-                    currentValueComponents.push({
-                        type: 'separator',
-                        value: ' ',
-                        token: val
-                    });
-                } else {
-                    if (!isString) {
-                        if (val === '.') {
-                            if (isNaN(+value[i + 1])) {
-                                if (root) break;
-                            } else if (value[i - 1] === '-') {
-                                currentValue += '0';
-                            }
-                        } else if (separators.includes(val)) {
-                            parse();
-                            currentValueComponents.push({
-                                type: 'separator',
-                                value: val,
-                                text: (val === ',' ? '' : ' ') + val + (val === ',' ? '' : ' '),
-                                token: val
-                            });
-                            continue;
-                        } else if (root && (val === '#' && (currentValue || currentValueComponents.length && currentValueComponents[currentValueComponents.length - 1]['type'] !== 'separator') || [
-                            '!',
-                            '*',
-                            '>',
-                            '+',
-                            '~',
-                            ':',
-                            '[',
-                            '@',
-                            '_'
-                        ].includes(val))) {
-                            break;
-                        }
-                    }
-                    currentValue += val;
-                }
-            }
-            parse();
-            return i;
-        };
         this.mode = mode;
         this.layer = css.generalLayer;
         Object.assign(this, registeredSyntax);
         const { id, definition } = registeredSyntax;
-        const { analyze, transformValue, declare, transformValueComponents, create, type, unit } = definition;
+        const { declarer, transformer, type, unit, sign } = definition;
         this.type = type;
-        if (create) create.call(this, name);
         // 1. value / selectorToken
-        this.declarations = definition.declarations;
         let stateToken;
         if (this.type === SyntaxRuleType.Utility) {
-            // TODO: id 使用其他方式傳遞
             stateToken = name.slice(id.length - 1);
         } else {
             let valueToken;
-            if (analyze) {
-                [valueToken] = analyze.call(this, name);
+            if (sign && name.startsWith(sign)) {
+                valueToken = name.slice(1);
+            } else if (id.endsWith('()')) {
+                valueToken = name;
+            } else if (id === 'group') {
+                valueToken = name;
             } else {
                 const indexOfColon = name.indexOf(':');
                 this.keyToken = name.slice(0, indexOfColon + 1);
@@ -325,7 +89,7 @@ class SyntaxRule {
                 };
             }
         }
-        if (this.mode && css.config.modes?.[this.mode] === 'media') {
+        if (this.mode && css.config.modeTrigger === 'media') {
             const atComp = {
                 name: 'prefers-color-scheme',
                 value: this.mode
@@ -357,20 +121,46 @@ class SyntaxRule {
         // 7. value
         let newValue;
         if (this.valueComponents) {
-            if (transformValueComponents) {
-                this.valueComponents = transformValueComponents.call(this, this.valueComponents);
+            if (transformer) {
+                if (typeof transformer === 'string') {
+                    const transform = transformers[transformer];
+                    this.valueComponents = transform.call(this, this.valueComponents);
+                } else {
+                    const [name, data] = transformer;
+                    const transform = transformers[name];
+                    this.valueComponents = transform.call(this, this.valueComponents, data);
+                }
             }
             newValue = this.resolveValue(this.valueComponents, unit, [], false);
-            if (transformValue) {
-                newValue = transformValue.call(this, newValue);
-            }
-            if (declare) {
-                this.declarations = declare.call(this, newValue, this.valueComponents);
+            if (definition.declarations) {
+                const declarations = {};
+                if (Array.isArray(definition.declarations)) {
+                    for (const property of definition.declarations){
+                        declarations[property] = newValue;
+                    }
+                } else {
+                    for(const propertyName in definition.declarations){
+                        const propertyValue = definition.declarations[propertyName];
+                        declarations[propertyName] = propertyValue === undefined ? newValue : Array.isArray(propertyValue) ? propertyValue.map((v)=>v === undefined ? newValue : v).join('') : propertyValue;
+                    }
+                }
+                this.declarations = declarations;
+            } else if (declarer) {
+                if (typeof declarer === 'string') {
+                    const declare = declarers[declarer];
+                    this.declarations = declare.call(this, newValue, this.valueComponents);
+                } else {
+                    const [name, data] = declarer;
+                    const declare = declarers[name];
+                    this.declarations = declare.call(this, newValue, this.valueComponents, data);
+                }
             } else if (id) {
                 this.declarations = {
                     [id]: newValue
                 };
             }
+        } else {
+            this.declarations = definition.declarations;
         }
         if (!Object.entries(this.declarations ?? {}).length) {
             this.valid = false;
@@ -430,8 +220,265 @@ class SyntaxRule {
         const body = pre + '.' + cssEscape(this.fixedClass ?? this.name);
         return this.selectorNodes ? generateSelector(this.selectorNodes, body) : body;
     }
-    resolveValue;
-    parseValues;
+    resolveValue = (valueComponents, unit, bypassVariableNames, bypassParsing)=>{
+        const { functions } = this.css.config;
+        let currentValue = '';
+        for (const eachValueComponent of valueComponents){
+            switch(eachValueComponent.type){
+                case 'function':
+                    const functionDefinition = functions && functions[eachValueComponent.name];
+                    const fnTransformer = functionDefinition?.transformer;
+                    if (fnTransformer && !eachValueComponent.bypassTransform) {
+                        const resolvedValue = this.resolveValue(eachValueComponent.children, functionDefinition.unit ?? unit, bypassVariableNames, bypassParsing || eachValueComponent.name === 'calc');
+                        let result;
+                        if (typeof fnTransformer === 'string') {
+                            const fnTransform = functionTransformers[fnTransformer];
+                            result = fnTransform.call(this, resolvedValue, bypassVariableNames);
+                        } else {
+                            const [name, data] = fnTransformer;
+                            const fnTransform = functionTransformers[name];
+                            result = fnTransform.call(this, resolvedValue, bypassVariableNames, data);
+                        }
+                        currentValue += eachValueComponent.token = eachValueComponent.text = typeof result === 'string' ? result : this.resolveValue(result, functionDefinition?.unit ?? unit, bypassVariableNames, bypassParsing);
+                    } else {
+                        currentValue += eachValueComponent.token = eachValueComponent.text = eachValueComponent.name + eachValueComponent.symbol + this.resolveValue(eachValueComponent.children, functionDefinition?.unit ?? unit, bypassVariableNames, bypassParsing) + VALUE_DELIMITERS[eachValueComponent.symbol];
+                    }
+                    break;
+                // todo: 應挪到 parseValues 階段處理才能支援 variables: { x: 'calc(20vw-30px)' } 這種情況，並且解析上可能會比較合理、精簡
+                case 'variable':
+                    const variable = this.css.variables.get(eachValueComponent.name);
+                    if (variable) {
+                        const handleVariable = (normalHandler, varHandler)=>{
+                            if (variable.modes) {
+                                if (this.mode) {
+                                    const themeVariable = variable.modes[this.mode] ?? variable;
+                                    if (themeVariable?.value) {
+                                        normalHandler(themeVariable);
+                                    }
+                                } else {
+                                    if (this.variableNames) {
+                                        this.variableNames.add(eachValueComponent.name);
+                                    } else {
+                                        this.variableNames = new Set([
+                                            eachValueComponent.name
+                                        ]);
+                                    }
+                                    varHandler();
+                                }
+                            } else {
+                                normalHandler(variable);
+                            }
+                        };
+                        switch(variable.type){
+                            case 'string':
+                                handleVariable((variable)=>{
+                                    const valueComponents = [];
+                                    this.parseValues(valueComponents, 0, variable.value, unit, '', undefined, bypassParsing, [
+                                        ...bypassVariableNames,
+                                        eachValueComponent.name
+                                    ]);
+                                    currentValue += eachValueComponent.text = this.resolveValue(valueComponents, unit, [
+                                        ...bypassVariableNames,
+                                        eachValueComponent.name
+                                    ], bypassParsing);
+                                }, ()=>{
+                                    currentValue += eachValueComponent.text = `var(--${eachValueComponent.name})`;
+                                });
+                                break;
+                            case 'number':
+                                handleVariable((variable)=>{
+                                    if (bypassParsing) {
+                                        currentValue += eachValueComponent.text = String(variable.value);
+                                    } else {
+                                        const valueComponent = this.parseValue(variable.value, unit);
+                                        currentValue += eachValueComponent.text = valueComponent.value + (valueComponent.unit ?? '');
+                                    }
+                                }, ()=>{
+                                    currentValue += eachValueComponent.text = unit ? `calc(var(--${eachValueComponent.name}) / 16 * 1rem)` : `var(--${eachValueComponent.name})`;
+                                });
+                                break;
+                            case 'color':
+                                let alpha = eachValueComponent.alpha;
+                                handleVariable((variable)=>{
+                                    const colorVariable = variable;
+                                    alpha = (alpha || 1) * (colorVariable.alpha || 1);
+                                    if (alpha < 1) {
+                                        currentValue += eachValueComponent.text = `${colorVariable.space}(${colorVariable.value}/${alpha})`;
+                                    } else {
+                                        currentValue += eachValueComponent.text = `${colorVariable.space}(${colorVariable.value})`;
+                                    }
+                                }, ()=>{
+                                    if (alpha !== undefined) {
+                                        // use color-mix
+                                        currentValue += eachValueComponent.text = `color-mix(in oklab,var(--${eachValueComponent.name}) ${Number(alpha) * 100}%,transparent)`;
+                                    } else {
+                                        currentValue += eachValueComponent.text = `var(--${eachValueComponent.name})`;
+                                    }
+                                });
+                                break;
+                        }
+                    } else {
+                        currentValue += eachValueComponent.text = `var(--${eachValueComponent.name}${eachValueComponent.fallback ? ',' + eachValueComponent.fallback : ''})`;
+                    }
+                    break;
+                case 'separator':
+                    currentValue += eachValueComponent.text ? eachValueComponent.text : eachValueComponent.text = eachValueComponent.value;
+                    break;
+                case 'number':
+                    currentValue += eachValueComponent.text = eachValueComponent.value + (eachValueComponent.unit || '');
+                    break;
+                default:
+                    currentValue += eachValueComponent.text = eachValueComponent.value;
+                    break;
+            }
+        }
+        return currentValue;
+    };
+    parseValues = (currentValueComponents, i, value, unit, endSymbol, parentFunctionName, bypassParsing = false, bypassVariableNames = [])=>{
+        const root = parentFunctionName === undefined;
+        const isVarFunction = !root && (parentFunctionName.endsWith('$') || parentFunctionName.endsWith('var'));
+        const checkIsString = (value)=>value === '\'' || value === '"';
+        const isString = checkIsString(endSymbol);
+        const separators = [
+            ','
+        ];
+        if (this.definition.separators?.length) {
+            separators.push(...this.definition.separators);
+        }
+        let currentValue = '';
+        const parse = ()=>{
+            if (currentValue) {
+                let handled = false;
+                if (!isVarFunction || currentValueComponents.length) {
+                    const handleVariable = (variableName, alpha)=>{
+                        const globalVariableValue = this.css.variables.get(variableName);
+                        const variable = this.variables?.get(variableName) || globalVariableValue;
+                        if (variable) {
+                            const name = variable.name ?? variableName;
+                            if (!bypassVariableNames.includes(name)) {
+                                handled = true;
+                                const valueComponent = {
+                                    type: 'variable',
+                                    name,
+                                    variable: this.css.variables.get(name),
+                                    token: currentValue
+                                };
+                                if (alpha) valueComponent.alpha = Number(alpha);
+                                currentValueComponents.push(valueComponent);
+                            }
+                        }
+                    };
+                    if (/^\$[a-zA-Z0-9-]+(?:\/[^\/]+)?$/.test(currentValue)) {
+                        const [raw, alpha] = currentValue.slice(1).split('/');
+                        handleVariable(raw, alpha);
+                    } else {
+                        handleVariable(currentValue);
+                        if (!handled) {
+                            const [colorName, alpha] = currentValue.split('/');
+                            handleVariable(colorName, alpha);
+                        }
+                    }
+                }
+                if (!handled) {
+                    if (!isVarFunction) {
+                        const result = BASE_UNIT_REGEX.exec(currentValue);
+                        if (result) {
+                            currentValue = String(+result[1] * (this.css.config.baseUnit ?? 1));
+                        }
+                    }
+                    if (bypassParsing) {
+                        currentValueComponents.push({
+                            type: 'string',
+                            value: currentValue,
+                            token: currentValue
+                        });
+                    } else {
+                        const parsedValue = this.parseValue(currentValue, unit);
+                        currentValueComponents.push({
+                            ...parsedValue,
+                            token: currentValue
+                        });
+                    }
+                }
+                currentValue = '';
+            }
+        };
+        for(; i < value.length; i++){
+            const val = value[i];
+            if (val === endSymbol) {
+                if (isString) {
+                    let count = 0;
+                    for(let j = currentValue.length - 1;; j--){
+                        if (currentValue[j] !== '\\') break;
+                        count++;
+                    }
+                    if (count % 2) {
+                        currentValue += val;
+                        continue;
+                    } else {
+                        parse();
+                    }
+                } else {
+                    parse();
+                }
+                return i;
+            } else if (!isString && val in VALUE_DELIMITERS) {
+                const functionName = currentValue;
+                const newValueComponent = {
+                    type: 'function',
+                    name: functionName,
+                    symbol: val,
+                    children: [],
+                    token: ''
+                };
+                currentValueComponents.push(newValueComponent);
+                currentValue = '';
+                const functionDefinition = val === '(' ? this.css.config.functions?.[functionName] : undefined;
+                i = this.parseValues(newValueComponent.children, ++i, value, functionDefinition?.unit ?? unit, VALUE_DELIMITERS[val], functionName || parentFunctionName || '', bypassParsing || functionName === 'calc');
+            } else if ((val === '|' || val === ' ') && endSymbol !== '}' && (!isString || parentFunctionName === 'path')) {
+                parse();
+                currentValueComponents.push({
+                    type: 'separator',
+                    value: ' ',
+                    token: val
+                });
+            } else {
+                if (!isString) {
+                    if (val === '.') {
+                        if (isNaN(+value[i + 1])) {
+                            if (root) break;
+                        } else if (value[i - 1] === '-') {
+                            currentValue += '0';
+                        }
+                    } else if (separators.includes(val)) {
+                        parse();
+                        currentValueComponents.push({
+                            type: 'separator',
+                            value: val,
+                            text: (val === ',' ? '' : ' ') + val + (val === ',' ? '' : ' '),
+                            token: val
+                        });
+                        continue;
+                    } else if (root && (val === '#' && (currentValue || currentValueComponents.length && currentValueComponents[currentValueComponents.length - 1]['type'] !== 'separator') || [
+                        '!',
+                        '*',
+                        '>',
+                        '+',
+                        '~',
+                        ':',
+                        '[',
+                        '@',
+                        '_'
+                    ].includes(val))) {
+                        break;
+                    }
+                }
+                currentValue += val;
+            }
+        }
+        parse();
+        return i;
+    };
     parseValue(token, unit = this.definition.unit) {
         const parsed = parseValue(token, unit, this.css.config.rootSize);
         // exclude like `aspect:1/2` from being parsed as 50%

package/dist/{utils/autofill-solid-style.cjs → transformers/auto-fill-solid.cjs}

@@ -2,7 +2,7 @@
 
 var common = require('../common.cjs');
 
-const autofillSolidStyle = function(valueComponents) {
+function autoFillSolid(valueComponents) {
     if (valueComponents.length < 2) return valueComponents;
     let styleIncluded = false;
     let varIncluded = false;
@@ -26,6 +26,6 @@ const autofillSolidStyle = function(valueComponents) {
         });
     }
     return valueComponents;
-};
+}
 
-module.exports = autofillSolidStyle;
+module.exports = autoFillSolid;

package/dist/transformers/auto-fill-solid.d.ts

@@ -0,0 +1,2 @@
+import { ValueComponent } from '../types/syntax';
+export default function autoFillSolid(valueComponents: ValueComponent[]): ValueComponent[];

package/dist/{utils/autofill-solid-style.mjs → transformers/auto-fill-solid.mjs}

@@ -1,6 +1,6 @@
 import { BORDER_STYLE_VALUES } from '../common.mjs';
 
-const autofillSolidStyle = function(valueComponents) {
+function autoFillSolid(valueComponents) {
     if (valueComponents.length < 2) return valueComponents;
     let styleIncluded = false;
     let varIncluded = false;
@@ -24,6 +24,6 @@ const autofillSolidStyle = function(valueComponents) {
         });
     }
     return valueComponents;
-};
+}
 
-export { autofillSolidStyle as default };
+export { autoFillSolid as default };