@master/css 2.0.0-rc.26 → 2.0.0-rc.27

package/dist/index.cjs

@@ -4,33 +4,51 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var index = require('./config/index.cjs');
 var rule = require('./rule.cjs');
-var layer = require('./layer.cjs');
+var common = require('./common.cjs');
 var core = require('./core.cjs');
-var extendConfig = require('./functions/extend-config.cjs');
-var reorderForReadableClasses = require('./functions/reorder-for-readable-classes.cjs');
-var areRuleModesEqual = require('./functions/are-rule-modes-equal.cjs');
-var areRuleQueriesEqual = require('./functions/are-rule-queries-equal.cjs');
-var areRuleSelectorsEqual = require('./functions/are-rule-selectors-equal.cjs');
-var areRuleStatesEqual = require('./functions/are-rule-states-equal.cjs');
-var areRulesDuplicated = require('./functions/are-rules-duplicated.cjs');
+var layer = require('./layer.cjs');
+var extendConfig = require('./utils/extend-config.cjs');
+var reorderForReadableClasses = require('./utils/reorder-for-readable-classes.cjs');
+var areRuleModesEqual = require('./utils/are-rule-modes-equal.cjs');
+var areRuleQueriesEqual = require('./utils/are-rule-queries-equal.cjs');
+var areRuleSelectorsEqual = require('./utils/are-rule-selectors-equal.cjs');
+var areRuleStatesEqual = require('./utils/are-rule-states-equal.cjs');
+var areRulesDuplicated = require('./utils/are-rules-duplicated.cjs');
+var generateCss = require('./utils/generate-css.cjs');
+var isCoreRule = require('./utils/is-core-rule.cjs');
 var queries = require('./config/queries.cjs');
 var selectors = require('./config/selectors.cjs');
-var semantics = require('./config/semantics.cjs');
-var rules = require('./config/rules.cjs');
+var utilities = require('./config/utilities.cjs');
 var functions = require('./config/functions.cjs');
 var animations = require('./config/animations.cjs');
 var variables = require('./config/variables.cjs');
+var rules = require('./config/rules.cjs');
 
 
 
 exports.config = index.config;
 exports.Rule = rule.Rule;
-Object.defineProperty(exports, "Layer", {
-	enumerable: true,
-	get: function () { return layer.Layer; }
-});
+exports.ANIMATION_SIGN = common.ANIMATION_SIGN;
+exports.AT_SIGN = common.AT_SIGN;
+exports.BASE_UNIT_REGEX = common.BASE_UNIT_REGEX;
+exports.COLOR_VALUE_REGEX = common.COLOR_VALUE_REGEX;
+exports.DELIMITER_SIGN = common.DELIMITER_SIGN;
+exports.IMAGE_VALUE_REGEX = common.IMAGE_VALUE_REGEX;
+exports.NUMBER_VALUE_REGEX = common.NUMBER_VALUE_REGEX;
+exports.OFFICIAL_URL = common.OFFICIAL_URL;
+exports.QUERY_COMPARISON_OPERATORS = common.QUERY_COMPARISON_OPERATORS;
+exports.QUERY_LOGICAL_OPERATORS = common.QUERY_LOGICAL_OPERATORS;
+exports.SELECTOR_SIGNS = common.SELECTOR_SIGNS;
+exports.SEPARATOR_SIGN = common.SEPARATOR_SIGN;
+exports.SEPARATOR_SIGNS = common.SEPARATOR_SIGNS;
+exports.TRANSITION_SIGN = common.TRANSITION_SIGN;
+exports.UNIT_REGEX = common.UNIT_REGEX;
+exports.VALUE_DELIMITERS = common.VALUE_DELIMITERS;
+exports.VALUE_UNITS = common.VALUE_UNITS;
 exports.MasterCSS = core.default;
 exports.default = core.default;
+exports.masterCSSs = core.masterCSSs;
+exports.Layer = layer;
 exports.extendConfig = extendConfig;
 exports.reorderForReadableClasses = reorderForReadableClasses;
 exports.areRuleModesEqual = areRuleModesEqual;
@@ -38,10 +56,12 @@ exports.areRuleQueriesEqual = areRuleQueriesEqual;
 exports.areRuleSelectorsEqual = areRuleSelectorsEqual;
 exports.areRuleStatesEqual = areRuleStatesEqual;
 exports.areRulesDuplicated = areRulesDuplicated;
+exports.generateCSS = generateCss;
+exports.isCoreRule = isCoreRule;
 exports.queries = queries;
 exports.selectors = selectors;
-exports.semantics = semantics;
-exports.rules = rules.default;
+exports.utilities = utilities;
 exports.functions = functions;
 exports.animations = animations;
 exports.variables = variables;
+exports.rules = rules.default;

package/dist/index.d.ts

@@ -1,12 +1,17 @@
 export * from './config';
+export * from './rule';
+export * from './common';
+export * from './core';
 export { Rule } from './rule';
-export { Layer } from './layer';
+export { default as Layer } from './layer';
 export { default as MasterCSS, default } from './core';
-export { default as extendConfig } from './functions/extend-config';
-export { default as reorderForReadableClasses } from './functions/reorder-for-readable-classes';
-export { default as areRuleModesEqual } from './functions/are-rule-modes-equal';
-export { default as areRuleQueriesEqual } from './functions/are-rule-queries-equal';
-export { default as areRuleSelectorsEqual } from './functions/are-rule-selectors-equal';
-export { default as areRuleStatesEqual } from './functions/are-rule-states-equal';
-export { default as areRulesDuplicated } from './functions/are-rules-duplicated';
+export { default as extendConfig } from './utils/extend-config';
+export { default as reorderForReadableClasses } from './utils/reorder-for-readable-classes';
+export { default as areRuleModesEqual } from './utils/are-rule-modes-equal';
+export { default as areRuleQueriesEqual } from './utils/are-rule-queries-equal';
+export { default as areRuleSelectorsEqual } from './utils/are-rule-selectors-equal';
+export { default as areRuleStatesEqual } from './utils/are-rule-states-equal';
+export { default as areRulesDuplicated } from './utils/are-rules-duplicated';
+export { default as generateCSS } from './utils/generate-css';
+export { default as isCoreRule } from './utils/is-core-rule';
 export type { NativeRule, MediaFeatureComponent, MediaQuery } from './rule';

package/dist/index.mjs

@@ -1,18 +1,21 @@
 export { config } from './config/index.mjs';
 export { Rule } from './rule.mjs';
-export { Layer } from './layer.mjs';
-export { default as MasterCSS, default } from './core.mjs';
-export { default as extendConfig } from './functions/extend-config.mjs';
-export { default as reorderForReadableClasses } from './functions/reorder-for-readable-classes.mjs';
-export { default as areRuleModesEqual } from './functions/are-rule-modes-equal.mjs';
-export { default as areRuleQueriesEqual } from './functions/are-rule-queries-equal.mjs';
-export { default as areRuleSelectorsEqual } from './functions/are-rule-selectors-equal.mjs';
-export { default as areRuleStatesEqual } from './functions/are-rule-states-equal.mjs';
-export { default as areRulesDuplicated } from './functions/are-rules-duplicated.mjs';
+export { ANIMATION_SIGN, AT_SIGN, BASE_UNIT_REGEX, COLOR_VALUE_REGEX, DELIMITER_SIGN, IMAGE_VALUE_REGEX, NUMBER_VALUE_REGEX, OFFICIAL_URL, QUERY_COMPARISON_OPERATORS, QUERY_LOGICAL_OPERATORS, SELECTOR_SIGNS, SEPARATOR_SIGN, SEPARATOR_SIGNS, TRANSITION_SIGN, UNIT_REGEX, VALUE_DELIMITERS, VALUE_UNITS } from './common.mjs';
+export { default as MasterCSS, default, masterCSSs } from './core.mjs';
+export { default as Layer } from './layer.mjs';
+export { default as extendConfig } from './utils/extend-config.mjs';
+export { default as reorderForReadableClasses } from './utils/reorder-for-readable-classes.mjs';
+export { default as areRuleModesEqual } from './utils/are-rule-modes-equal.mjs';
+export { default as areRuleQueriesEqual } from './utils/are-rule-queries-equal.mjs';
+export { default as areRuleSelectorsEqual } from './utils/are-rule-selectors-equal.mjs';
+export { default as areRuleStatesEqual } from './utils/are-rule-states-equal.mjs';
+export { default as areRulesDuplicated } from './utils/are-rules-duplicated.mjs';
+export { default as generateCSS } from './utils/generate-css.mjs';
+export { default as isCoreRule } from './utils/is-core-rule.mjs';
 export { default as queries } from './config/queries.mjs';
 export { default as selectors } from './config/selectors.mjs';
-export { default as semantics } from './config/semantics.mjs';
-export { default as rules } from './config/rules.mjs';
+export { default as utilities } from './config/utilities.mjs';
 export { default as functions } from './config/functions.mjs';
 export { default as animations } from './config/animations.mjs';
 export { default as variables } from './config/variables.mjs';
+export { default as rules } from './config/rules.mjs';

package/dist/layer.cjs

@@ -1,23 +1,28 @@
 'use strict';
 
-exports.Layer = void 0;
+var Layer;
 (function(Layer) {
-    // semantic
-    Layer[Layer["Semantic"] = -8] = "Semantic";
-    // native shorthand
-    Layer[Layer["CoreNativeShorthand"] = -7] = "CoreNativeShorthand";
-    // native shorthand
-    Layer[Layer["NativeShorthand"] = -6] = "NativeShorthand";
-    // shorthand
-    Layer[Layer["CoreShorthand"] = -5] = "CoreShorthand";
-    // shorthand
-    Layer[Layer["Shorthand"] = -4] = "Shorthand";
-    // native
-    Layer[Layer["CoreNative"] = -3] = "CoreNative";
-    // native
-    Layer[Layer["Native"] = -2] = "Native";
-    // normal
-    Layer[Layer["Core"] = -1] = "Core";
-    // normal
-    Layer[Layer["Normal"] = 0] = "Normal";
-})(exports.Layer || (exports.Layer = {}));
+    /**
+     * utility classes
+     * @example block, inline
+     */ Layer[Layer["Utility"] = -4] = "Utility";
+    /**
+     * native shorthand
+     * @example border, padding, margin
+     */ Layer[Layer["NativeShorthand"] = -3] = "NativeShorthand";
+    /**
+     * shorthand
+     * @example px, py, mx, my
+     */ Layer[Layer["Shorthand"] = -2] = "Shorthand";
+    /**
+     * native properties
+     * @example color, background-color, font-size
+     */ Layer[Layer["Native"] = -1] = "Native";
+    /**
+     * normal
+     * @example grid-cols
+     */ Layer[Layer["Normal"] = 0] = "Normal";
+})(Layer || (Layer = {}));
+var Layer$1 = Layer;
+
+module.exports = Layer$1;

package/dist/layer.d.ts

@@ -1,11 +1,28 @@
-export declare const enum Layer {
-    Semantic = -8,
-    CoreNativeShorthand = -7,
-    NativeShorthand = -6,
-    CoreShorthand = -5,
-    Shorthand = -4,
-    CoreNative = -3,
-    Native = -2,
-    Core = -1,
+declare const enum Layer {
+    /**
+     * utility classes
+     * @example block, inline
+     */
+    Utility = -4,
+    /**
+     * native shorthand
+     * @example border, padding, margin
+     */
+    NativeShorthand = -3,
+    /**
+     * shorthand
+     * @example px, py, mx, my
+     */
+    Shorthand = -2,
+    /**
+     * native properties
+     * @example color, background-color, font-size
+     */
+    Native = -1,
+    /**
+     * normal
+     * @example grid-cols
+     */
     Normal = 0
 }
+export default Layer;

package/dist/layer.mjs

@@ -1,23 +1,26 @@
 var Layer;
 (function(Layer) {
-    // semantic
-    Layer[Layer["Semantic"] = -8] = "Semantic";
-    // native shorthand
-    Layer[Layer["CoreNativeShorthand"] = -7] = "CoreNativeShorthand";
-    // native shorthand
-    Layer[Layer["NativeShorthand"] = -6] = "NativeShorthand";
-    // shorthand
-    Layer[Layer["CoreShorthand"] = -5] = "CoreShorthand";
-    // shorthand
-    Layer[Layer["Shorthand"] = -4] = "Shorthand";
-    // native
-    Layer[Layer["CoreNative"] = -3] = "CoreNative";
-    // native
-    Layer[Layer["Native"] = -2] = "Native";
-    // normal
-    Layer[Layer["Core"] = -1] = "Core";
-    // normal
-    Layer[Layer["Normal"] = 0] = "Normal";
+    /**
+     * utility classes
+     * @example block, inline
+     */ Layer[Layer["Utility"] = -4] = "Utility";
+    /**
+     * native shorthand
+     * @example border, padding, margin
+     */ Layer[Layer["NativeShorthand"] = -3] = "NativeShorthand";
+    /**
+     * shorthand
+     * @example px, py, mx, my
+     */ Layer[Layer["Shorthand"] = -2] = "Shorthand";
+    /**
+     * native properties
+     * @example color, background-color, font-size
+     */ Layer[Layer["Native"] = -1] = "Native";
+    /**
+     * normal
+     * @example grid-cols
+     */ Layer[Layer["Normal"] = 0] = "Normal";
 })(Layer || (Layer = {}));
+var Layer$1 = Layer;
 
-export { Layer };
+export { Layer$1 as default };

package/dist/rule.cjs

@@ -1,32 +1,30 @@
 'use strict';
 
-var startSymbol = require('./constants/start-symbol.cjs');
 var cssEscape = require('./shared/utils/css-escape.cjs');
 var layer = require('./layer.cjs');
-var baseUnitRegex = require('./constants/base-unit-regex.cjs');
+var common = require('./common.cjs');
 
 class Rule {
     className;
+    RegisteredRule;
     css;
     at;
     priority;
     natives;
     order;
     layer;
-    atToken;
-    stateToken;
     declarations;
     animationNames;
     variableNames;
     constructor(className, RegisteredRule, css){
         this.className = className;
+        this.RegisteredRule = RegisteredRule;
         this.css = css;
         this.at = {};
         this.priority = -1;
         this.natives = [];
         this.order = 0;
         this.layer = 0;
-        this.atToken = '';
         this.resolveValue = (valueComponents, unit, bypassVariableNames, bypassParsing)=>{
             const { functions } = this.css.config;
             let currentValue = '';
@@ -37,12 +35,12 @@ class Rule {
                         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.text = typeof result === 'string' ? result : this.resolveValue(result, functionDefinition?.unit ?? unit, bypassVariableNames, bypassParsing);
+                            currentValue += eachValueComponent.token = eachValueComponent.text = typeof result === 'string' ? result : this.resolveValue(result, functionDefinition?.unit ?? unit, bypassVariableNames, bypassParsing);
                         } else {
-                            currentValue += eachValueComponent.text = eachValueComponent.name + eachValueComponent.symbol + this.resolveValue(eachValueComponent.children, functionDefinition?.unit ?? unit, bypassVariableNames, bypassParsing) + startSymbol.START_SYMBOLS[eachValueComponent.symbol];
+                            currentValue += eachValueComponent.token = eachValueComponent.text = eachValueComponent.name + eachValueComponent.symbol + this.resolveValue(eachValueComponent.children, functionDefinition?.unit ?? unit, bypassVariableNames, bypassParsing) + common.VALUE_DELIMITERS[eachValueComponent.symbol];
                         }
                         break;
-                    // todo: 應挪到 parseValue 階段處理才能支援 variables: { x: 'calc(20vw-30px)' } 這種情況，並且解析上可能會比較合理、精簡
+                    // todo: 應挪到 parseValues 階段處理才能支援 variables: { x: 'calc(20vw-30px)' } 這種情況，並且解析上可能會比較合理、精簡
                     case 'variable':
                         // eslint-disable-next-line no-case-declarations
                         const variable = this.css.variables[eachValueComponent.name];
@@ -71,7 +69,7 @@ class Rule {
                                 case 'string':
                                     handleVariable((variable)=>{
                                         const valueComponents = [];
-                                        this.parseValue(valueComponents, 0, variable.value, unit, '', undefined, bypassParsing, [
+                                        this.parseValues(valueComponents, 0, variable.value, unit, '', undefined, bypassParsing, [
                                             ...bypassVariableNames,
                                             eachValueComponent.name
                                         ]);
@@ -86,9 +84,9 @@ class Rule {
                                 case 'number':
                                     handleVariable((variable)=>{
                                         if (bypassParsing) {
-                                            currentValue += eachValueComponent.text = variable.value;
+                                            currentValue += eachValueComponent.text = String(variable.value);
                                         } else {
-                                            const valueComponent = this.parseValueComponent(variable.value, unit);
+                                            const valueComponent = this.parseValue(variable.value, unit);
                                             currentValue += eachValueComponent.text = valueComponent.value + (valueComponent.unit ?? '');
                                         }
                                     }, ()=>{
@@ -122,7 +120,7 @@ class Rule {
             }
             return currentValue;
         };
-        this.parseValue = (currentValueComponents, i, value, unit, endSymbol, parentFunctionName, bypassParsing = false, bypassVariableNames = [])=>{
+        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 === '"';
@@ -147,7 +145,8 @@ class Rule {
                                     const valueComponent = {
                                         type: 'variable',
                                         name,
-                                        variable: this.css.variables[name]
+                                        variable: this.css.variables[name],
+                                        token: currentValue
                                     };
                                     if (alpha) valueComponent.alpha = alpha;
                                     currentValueComponents.push(valueComponent);
@@ -155,14 +154,14 @@ class Rule {
                             }
                         };
                         handleVariable(currentValue);
-                        if (!handled && this.colored) {
+                        if (!handled) {
                             const [colorName, alpha] = currentValue.split('/');
                             handleVariable(colorName, alpha);
                         }
                     }
                     if (!handled) {
                         if (!isVarFunction) {
-                            const result = baseUnitRegex.BASE_UNIT_REGEX.exec(currentValue);
+                            const result = common.BASE_UNIT_REGEX.exec(currentValue);
                             if (result) {
                                 currentValue = String(+result[1] * (this.css.config.baseUnit ?? 1));
                             }
@@ -170,10 +169,14 @@ class Rule {
                         if (bypassParsing) {
                             currentValueComponents.push({
                                 type: 'string',
-                                value: currentValue
+                                value: currentValue,
+                                token: currentValue
                             });
                         } else {
-                            currentValueComponents.push(this.parseValueComponent(currentValue, unit));
+                            currentValueComponents.push({
+                                ...this.parseValue(currentValue, unit),
+                                token: currentValue
+                            });
                         }
                     }
                     currentValue = '';
@@ -198,27 +201,25 @@ class Rule {
                         parse();
                     }
                     return i;
-                } else if (!isString && val in startSymbol.START_SYMBOLS) {
+                } else if (!isString && val in common.VALUE_DELIMITERS) {
                     const functionName = currentValue;
                     const newValueComponent = {
                         type: 'function',
                         name: functionName,
                         symbol: val,
-                        children: []
+                        children: [],
+                        token: ''
                     };
                     currentValueComponents.push(newValueComponent);
                     currentValue = '';
                     const functionDefinition = val === '(' ? this.css.config.functions?.[functionName] : undefined;
-                    if (!this.colored && functionDefinition?.colored) {
-                        // @ts-ignore
-                        this.colored = true;
-                    }
-                    i = this.parseValue(newValueComponent.children, ++i, value, functionDefinition?.unit ?? unit, startSymbol.START_SYMBOLS[val], functionName || parentFunctionName || '', bypassParsing || functionName === 'calc');
+                    i = this.parseValues(newValueComponent.children, ++i, value, functionDefinition?.unit ?? unit, common.VALUE_DELIMITERS[val], functionName || parentFunctionName || '', bypassParsing || functionName === 'calc');
                 } else if ((val === '|' || val === ' ') && endSymbol !== '}' && (!isString || parentFunctionName === 'path')) {
                     parse();
                     currentValueComponents.push({
                         type: 'separator',
-                        value: ' '
+                        value: ' ',
+                        token: val
                     });
                 } else {
                     if (!isString) {
@@ -233,7 +234,8 @@ class Rule {
                             currentValueComponents.push({
                                 type: 'separator',
                                 value: val,
-                                text: (val === ',' ? '' : ' ') + val + (val === ',' ? '' : ' ')
+                                text: (val === ',' ? '' : ' ') + val + (val === ',' ? '' : ' '),
+                                token: val
                             });
                             continue;
                         } else if (root && (val === '#' && (currentValue || currentValueComponents.length && currentValueComponents[currentValueComponents.length - 1]['type'] !== 'separator') || [
@@ -258,9 +260,8 @@ class Rule {
         };
         Object.assign(this, RegisteredRule);
         const { id, definition } = RegisteredRule;
-        const { analyze, transformValue, declare, transformValueComponents, create, layer: layer$1, unit, colored } = definition;
+        const { analyze, transformValue, declare, transformValueComponents, create, layer: layer$1, unit } = definition;
         this.layer = layer$1;
-        this.colored = !!colored;
         if (!definition.unit) definition.unit = '';
         if (!definition.separators) definition.separators = [
             ','
@@ -273,7 +274,7 @@ class Rule {
         this.declarations = definition.declarations;
         let stateToken;
         let prefixToken;
-        if (layer$1 === layer.Layer.Semantic) {
+        if (layer$1 === layer.Utility) {
             // TODO: id 使用其他方式傳遞
             stateToken = className.slice(id.length - 1);
         } else {
@@ -282,11 +283,13 @@ class Rule {
                 [valueToken, prefixToken] = analyze.call(this, className);
             } else {
                 const indexOfColon = className.indexOf(':');
-                this.prefix = className.slice(0, indexOfColon + 1);
+                this.keyToken = className.slice(0, indexOfColon + 1);
                 valueToken = className.slice(indexOfColon + 1);
             }
             this.valueComponents = [];
-            stateToken = valueToken.slice(this.parseValue(this.valueComponents, 0, valueToken, unit, '', undefined, false, id === 'animation' || id === 'animation-name' ? Object.keys(this.css.animations) : []));
+            const parsedValueIndex = this.parseValues(this.valueComponents, 0, valueToken, unit, '', undefined, false, definition.includeAnimations ? Object.keys(this.css.animations) : []);
+            this.valueToken = valueToken.slice(0, parsedValueIndex);
+            stateToken = valueToken.slice(parsedValueIndex);
         }
         // 2. !important
         if (stateToken[0] === '!') {
@@ -451,8 +454,8 @@ class Rule {
         // 5. atTokens
         for(let i = 1; i < stateTokens.length; i++){
             const atToken = stateTokens[i];
+            this.atToken = (this.atToken || '') + '@' + atToken;
             if (atToken) {
-                this.atToken += '@' + atToken;
                 if (atToken === 'rtl' || atToken === 'ltr') {
                     this.direction = atToken;
                 } else {
@@ -470,14 +473,7 @@ class Rule {
                         });
                     } else {
                         const analyzeToken = (atComponentToken)=>{
-                            if (atComponentToken === 'all' || atComponentToken === 'print' || atComponentToken === 'screen' || atComponentToken === 'speech') {
-                                queryType = 'media';
-                                atComponents.push({
-                                    type: 'media-type',
-                                    token: atComponentToken,
-                                    value: atComponentToken
-                                });
-                            } else if (atComponentToken === '&') {
+                            if (atComponentToken === '&') {
                                 atComponents.push({
                                     type: 'operator',
                                     token: atComponentToken,
@@ -529,7 +525,7 @@ class Rule {
                                                     unit: 'px'
                                                 });
                                             } else {
-                                                const valueComponent = this.parseValueComponent(token, 'px');
+                                                const valueComponent = this.parseValue(token, 'px');
                                                 if (valueComponent.type === 'number') {
                                                     atComponents.push({
                                                         type: 'feature',
@@ -607,14 +603,14 @@ class Rule {
                 }
                 propertiesText.push(propertyText + ((this.important || important) && !propertyText.endsWith('!important') ? '!important' : ''));
             };
-            const prefix = propertyName + ':';
+            const keyToken = propertyName + ':';
             const declarations = this.declarations[propertyName];
             if (Array.isArray(declarations)) {
                 for (const value of declarations){
-                    push(prefix + String(value));
+                    push(keyToken + String(value));
                 }
             } else {
-                push(prefix + String(declarations));
+                push(keyToken + String(declarations));
             }
         }
         // 創建 Natives
@@ -653,8 +649,6 @@ class Rule {
         switch(atComponent.type){
             case 'arbitrary':
                 return atComponent.value;
-            case 'media-type':
-                return atComponent.value;
             case 'feature':
                 return '(' + atComponent.name + ':' + atComponent.value + (atComponent.unit || '') + ')';
             case 'operator':
@@ -665,8 +659,8 @@ class Rule {
     get text() {
         return this.natives.map((eachNative)=>eachNative.text).join('');
     }
-    parseValue;
-    parseValueComponent(token, unit = this.definition.unit) {
+    parseValues;
+    parseValue(token, unit = this.definition.unit) {
         const defaultUnit = unit ?? this.definition.unit;
         let newUnit = '';
         let value;
@@ -697,7 +691,7 @@ class Rule {
                     type: 'number'
                 };
             }
-            const matches = token.match(/^([+-.]?\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)?$/);
+            const matches = token.match(common.UNIT_REGEX);
             // ['0.5deg', '0.5', 'deg', index: 0, input: '0.5deg', groups: undefined]
             if (matches) {
                 value = +matches[1];