styimat 1.7.0 → 1.8.0

package/README.md

@@ -272,7 +272,35 @@ $font-family: 'Inter', sans-serif;
   margin: $local-var;
       
   &::before {
-   content: $$ctx;  //获取元素属性ctx
+   content: $$ctx;  // 获取元素属性ctx
+  }
+}
+```
+
+### 配置头语法
+
+您可以在CSS文件的开头使用配置头来设置预处理选项，配置行以 `#` 开头：
+
+```css
+#indentSize 4
+#autoProcessStyleTags true
+#preserveOriginal true
+#enableP3 false
+#rootSelector :root
+#enableNesting true
+#enableMath true
+#mathPrecision 8
+
+/* 然后写您的CSS代码 */
+$primary-color: lab#32a852;
+$spacing: math(16px * 2 + 4px);
+
+body {
+  color: $primary-color;
+  padding: $spacing;
+  
+  .container {
+    margin: math($spacing / 2);
   }
 }
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styimat",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "一个高效的CSS变量预处理库，支持Lab/LCH颜色空间自动转换、嵌套选择器和Display P3广色域，让现代CSS开发更简洁强大。",
   "keywords": [
     "css",

package/styimat.js

@@ -9,6 +9,7 @@
  * 支持 lab# 和 lch# 十六进制语法
  * 支持 Display P3 广色域显示器
  * 增强 math() 函数，支持复杂数学计算
+ * 支持配置头
  */
 (function(root, factory) {
     if (typeof define === 'function' && define.amd) {
@@ -27,7 +28,7 @@
         rootSelector: ':root',
         variablePrefix: '--',
         preserveOriginal: false,
-        indentSize: 2,
+        indentSize: 4,
         enableNesting: true,
         autoProcessStyleTags: true,
         styleTagAttribute: 'e',
@@ -41,6 +42,70 @@
     // 全局P3支持检测结果
     let p3Supported = null;
 
+    /**
+     * 解析配置头
+     * @param {string} cssText - CSS文本
+     * @returns {Object} {config: 配置对象, css: 清理后的CSS}
+     */
+    function parseConfigHeader(cssText) {
+        const config = { ...defaultConfig };
+        const lines = cssText.split('\n');
+        const cleanLines = [];
+        
+        for (let line of lines) {
+            const trimmed = line.trim();
+            
+            // 检查是否是配置行（以 # 开头）
+            if (trimmed.startsWith('#')) {
+                const configLine = trimmed.substring(1).trim();
+                const firstSpace = configLine.indexOf(' ');
+                
+                if (firstSpace !== -1) {
+                    const key = configLine.substring(0, firstSpace).trim();
+                    const value = configLine.substring(firstSpace + 1).trim();
+                    
+                    // 转换配置值
+                    const configKey = camelCase(key);
+                    
+                    if (configKey in config) {
+                        // 根据值的类型进行转换
+                        if (value === 'true' || value === 'false') {
+                            config[configKey] = value === 'true';
+                        } else if (!isNaN(value) && value.trim() !== '') {
+                            // 数字类型
+                            config[configKey] = Number(value);
+                        } else {
+                            // 字符串类型
+                            config[configKey] = value;
+                        }
+                    } else {
+                        console.warn(`未知的配置项: ${key}`);
+                    }
+                } else {
+                    console.warn(`无效的配置行: ${trimmed}`);
+                }
+            } else {
+                cleanLines.push(line);
+            }
+        }
+        
+        return {
+            config,
+            css: cleanLines.join('\n')
+        };
+    }
+
+    /**
+     * 将连字符分隔的字符串转换为驼峰命名
+     * @param {string} str - 输入字符串
+     * @returns {string} 驼峰命名字符串
+     */
+    function camelCase(str) {
+        return str.replace(/-([a-z])/g, function(match, letter) {
+            return letter.toUpperCase();
+        });
+    }
+
     /**
      * 检测浏览器是否支持 Display P3
      * @returns {boolean} 是否支持P3
@@ -958,10 +1023,10 @@
             
             // 更新缩进级别
             if (line.includes('{')) {
-                currentIndent += 2;
+                currentIndent += config.indentSize;
             }
             if (line.includes('}')) {
-                currentIndent = Math.max(0, currentIndent - 2);
+                currentIndent = Math.max(0, currentIndent - config.indentSize);
             }
         }
         
@@ -987,7 +1052,6 @@
             
             // 计算缩进级别（假设使用空格缩进）
             const indent = line.match(/^(\s*)/)[0].length;
-            const indentLevel = Math.floor(indent / config.indentSize);
             
             // 处理规则块结束
             if (trimmed === '}') {
@@ -1015,8 +1079,7 @@
                 const rule = {
                     selector: selector,
                     properties: [],
-                    children: [],
-                    indentLevel: indentLevel
+                    children: []
                 };
                 
                 // 推入堆栈
@@ -1064,7 +1127,7 @@
         for (const rule of rules) {
             // 构建完整选择器
             const isAt = rule.selector.startsWith("@");
-            let fullSelector = (isParentAt ? '  ' : '') + rule.selector;
+            let fullSelector = (isParentAt ? " ".repeat(config.indentSize) : '') + rule.selector;
             
             if (isAt) {
                 fullSelector = rule.selector + " {\n";
@@ -1090,10 +1153,10 @@
                     parsed.forEach(obj => {
                         const key = Object.keys(obj)[0];
                         const value = processCSSValue(obj[key], config);
-                        result += (isParentAt ? '  ' : '') + `  ${key}: ${value};\n`;
+                        result += (isParentAt ? " ".repeat(config.indentSize) : '') + " ".repeat(config.indentSize) +`${key}: ${value};\n`;
                     });
                 }
-                result += isParentAt ? '  }\n' : '}\n\n';
+                result += isParentAt ? " ".repeat(config.indentSize) + '}\n' : '}\n\n';
             }
             
             // 递归处理子规则
@@ -1106,7 +1169,7 @@
             }
         }
         
-        return result.trim() + (isParentAt ? "\n\n" : "");
+        return result.trim() + "\n\n";
     }
 
     // 替换变量值中的变量引用
@@ -1172,7 +1235,7 @@
                     const vars = selectorVariables.get(currentSelector);
                     const indent = line.match(/^(\s*)/)[0];
                     for (const [varName, varValue] of Object.entries(vars)) {
-                        result += indent + '  --' + varName + ': ' + varValue + ';\n';
+                        result += '  --' + varName + ': ' + varValue + ';\n';
                     }
                 }
                 currentSelector = null;
@@ -1187,11 +1250,13 @@
 
     // 主转换函数
     function convert(cssText, customConfig = {}) {
-        const config = { ...defaultConfig, ...customConfig };
+        // 先解析配置头
+        const { config: headerConfig, css: cleanedCSS } = parseConfigHeader(cssText);
+        const config = { ...defaultConfig, ...customConfig,...headerConfig };
         
         // 1. 提取变量定义（区分全局和选择器局部）
         const { globalVariables, selectorVariables, cssWithoutVars } = 
-            extractVariablesAndCSS(cssText, config);
+            extractVariablesAndCSS(cleanedCSS, config);
         
         // 2. 解析嵌套规则（如果启用）
         let processedCSS = cssWithoutVars.trim();
@@ -1505,7 +1570,7 @@
 
     // 将API的所有方法复制到主函数上
     Object.assign(styimat, api);
-        Object.setPrototypeOf(styimat, Function.prototype);
+    Object.setPrototypeOf(styimat, Function.prototype);
 
     // 自动初始化
     if (typeof window !== 'undefined') {

package/styimat.min.js

@@ -9,6 +9,7 @@
  * 支持 lab# 和 lch# 十六进制语法
  * 支持 Display P3 广色域显示器
  * 增强 math() 函数，支持复杂数学计算
+ * 支持配置头
  */
 (function(root,factory){if(typeof define==="function"&&define.amd){
 // AMD 支持 (RequireJS)
@@ -18,10 +19,30 @@ module.exports=factory()}else{
 // 浏览器全局变量
 root.styimat=factory()}})(typeof self!=="undefined"?self:this,function(){
 // 默认配置
-let defaultConfig={rootSelector:":root",variablePrefix:"--",preserveOriginal:false,indentSize:2,enableNesting:true,autoProcessStyleTags:true,styleTagAttribute:"e",convertLabToRGB:true,convertLchToRGB:true,enableP3:true,enableMath:true,// 启用math()函数增强
+let defaultConfig={rootSelector:":root",variablePrefix:"--",preserveOriginal:false,indentSize:4,enableNesting:true,autoProcessStyleTags:true,styleTagAttribute:"e",convertLabToRGB:true,convertLchToRGB:true,enableP3:true,enableMath:true,// 启用math()函数增强
 mathPrecision:6};
 // 全局P3支持检测结果
 let p3Supported=null;
+/**
+     * 解析配置头
+     * @param {string} cssText - CSS文本
+     * @returns {Object} {config: 配置对象, css: 清理后的CSS}
+     */function parseConfigHeader(cssText){const config={...defaultConfig};const lines=cssText.split("\n");const cleanLines=[];for(let line of lines){const trimmed=line.trim();
+// 检查是否是配置行（以 # 开头）
+if(trimmed.startsWith("#")){const configLine=trimmed.substring(1).trim();const firstSpace=configLine.indexOf(" ");if(firstSpace!==-1){const key=configLine.substring(0,firstSpace).trim();const value=configLine.substring(firstSpace+1).trim();
+// 转换配置值
+const configKey=camelCase(key);if(configKey in config){
+// 根据值的类型进行转换
+if(value==="true"||value==="false"){config[configKey]=value==="true"}else if(!isNaN(value)&&value.trim()!==""){
+// 数字类型
+config[configKey]=Number(value)}else{
+// 字符串类型
+config[configKey]=value}}else{console.warn(`未知的配置项: ${key}`)}}else{console.warn(`无效的配置行: ${trimmed}`)}}else{cleanLines.push(line)}}return{config:config,css:cleanLines.join("\n")}}
+/**
+     * 将连字符分隔的字符串转换为驼峰命名
+     * @param {string} str - 输入字符串
+     * @returns {string} 驼峰命名字符串
+     */function camelCase(str){return str.replace(/-([a-z])/g,function(match,letter){return letter.toUpperCase()})}
 /**
      * 检测浏览器是否支持 Display P3
      * @returns {boolean} 是否支持P3
@@ -350,12 +371,12 @@ if(trimmed==="}"){if(inSelectorBlock){
 // 在选择器结束前插入变量声明
 if(currentSelector&&selectorVariables.has(currentSelector)){const vars=selectorVariables.get(currentSelector);const indent=" ".repeat(currentIndent);for(const[varName,varValue]of Object.entries(vars)){cssWithoutVars+=`${indent}  --${varName}: ${varValue};\n`}}}inSelectorBlock=false;currentSelector=null}cssWithoutVars+=line+"\n";
 // 更新缩进级别
-if(line.includes("{")){currentIndent+=2}if(line.includes("}")){currentIndent=Math.max(0,currentIndent-2)}}return{globalVariables:globalVariables,selectorVariables:selectorVariables,cssWithoutVars:cssWithoutVars.trim()}}
+if(line.includes("{")){currentIndent+=config.indentSize}if(line.includes("}")){currentIndent=Math.max(0,currentIndent-config.indentSize)}}return{globalVariables:globalVariables,selectorVariables:selectorVariables,cssWithoutVars:cssWithoutVars.trim()}}
 // 修复的嵌套解析函数
 function parseNestedRules(cssText,config){const lines=cssText.split("\n");const stack=[];// 存储规则信息：{selector, properties, children}
 const rootRules=[];let currentIndent=0;for(let i=0;i<lines.length;i++){const line=lines[i];const trimmed=line.trim();if(!trimmed)continue;
 // 计算缩进级别（假设使用空格缩进）
-const indent=line.match(/^(\s*)/)[0].length;const indentLevel=Math.floor(indent/config.indentSize);
+const indent=line.match(/^(\s*)/)[0].length;
 // 处理规则块结束
 if(trimmed==="}"){if(stack.length>0){const rule=stack.pop();
 // 如果这个规则有父规则，添加到父规则的children中
@@ -365,7 +386,7 @@ rootRules.push(rule)}}continue}
 // 处理规则开始
 if(trimmed.endsWith("{")){const selector=trimmed.slice(0,-1).trim();
 // 创建新规则
-const rule={selector:selector,properties:[],children:[],indentLevel:indentLevel};
+const rule={selector:selector,properties:[],children:[]};
 // 推入堆栈
 stack.push(rule);continue}
 // 处理属性行（不包含 { 或 } 的行）
@@ -379,15 +400,15 @@ return convertRulesToCSS(rootRules,config)}
 // 将规则树转换为CSS字符串
 function convertRulesToCSS(rules,config,parentSelector=""){let result="";const isParentAt=parentSelector.startsWith("@");for(const rule of rules){
 // 构建完整选择器
-const isAt=rule.selector.startsWith("@");let fullSelector=(isParentAt?"  ":"")+rule.selector;if(isAt){fullSelector=rule.selector+" {\n"}if(parentSelector){
+const isAt=rule.selector.startsWith("@");let fullSelector=(isParentAt?" ".repeat(config.indentSize):"")+rule.selector;if(isAt){fullSelector=rule.selector+" {\n"}if(parentSelector){
 // 处理 & 选择器
 if(fullSelector.includes("&")){fullSelector=fullSelector.replace(/&/g,parentSelector)}else if(fullSelector.trim().startsWith(":")){fullSelector=parentSelector+fullSelector}else{fullSelector=parentSelector+(isParentAt?"":" ")+fullSelector}}
 // 如果有属性，生成规则块
 if(rule.properties.length>0){result+=(isAt?"":fullSelector)+" {\n";for(const prop of rule.properties){
 // 再次处理属性值（确保math()函数和颜色被转换）
-const parsed=parseSingleLineCSS(prop);parsed.forEach(obj=>{const key=Object.keys(obj)[0];const value=processCSSValue(obj[key],config);result+=(isParentAt?"  ":"")+`  ${key}: ${value};\n`})}result+=isParentAt?"  }\n":"}\n\n"}
+const parsed=parseSingleLineCSS(prop);parsed.forEach(obj=>{const key=Object.keys(obj)[0];const value=processCSSValue(obj[key],config);result+=(isParentAt?" ".repeat(config.indentSize):"")+" ".repeat(config.indentSize)+`${key}: ${value};\n`})}result+=isParentAt?" ".repeat(config.indentSize)+"}\n":"}\n\n"}
 // 递归处理子规则
-if(rule.children&&rule.children.length>0){result+=convertRulesToCSS(rule.children,config,fullSelector)}if(isParentAt){result+="}\n\n"}}return result.trim()+(isParentAt?"\n\n":"")}
+if(rule.children&&rule.children.length>0){result+=convertRulesToCSS(rule.children,config,fullSelector)}if(isParentAt){result+="}\n\n"}}return result.trim()+"\n\n"}
 // 替换变量值中的变量引用
 function replaceVariableUsesInValue(value,variables){return value.replace(/\$([a-zA-Z0-9_-]+)/g,(match,varName)=>{if(variables[varName]){return`var(--${varName})`}return match})}
 // 替换变量使用
@@ -401,13 +422,15 @@ function generateRootRule(variables,config){if(Object.keys(variables).length===0
 // 处理选择器内部的变量
 function injectSelectorVariables(cssText,selectorVariables,config){let result="";const lines=cssText.split("\n");let currentSelector=null;for(let line of lines){const trimmed=line.trim();if(trimmed.endsWith("{")){currentSelector=trimmed.slice(0,-1).trim()}if(trimmed==="}"&&currentSelector){
 // 在选择器结束前插入变量声明
-if(selectorVariables.has(currentSelector)){const vars=selectorVariables.get(currentSelector);const indent=line.match(/^(\s*)/)[0];for(const[varName,varValue]of Object.entries(vars)){result+=indent+"  --"+varName+": "+varValue+";\n"}}currentSelector=null}
+if(selectorVariables.has(currentSelector)){const vars=selectorVariables.get(currentSelector);const indent=line.match(/^(\s*)/)[0];for(const[varName,varValue]of Object.entries(vars)){result+="  --"+varName+": "+varValue+";\n"}}currentSelector=null}
 // 使用全局处理函数处理所有math()和颜色
 result+=processCSSValue(line,config)+"\n"}return result.trim()}
 // 主转换函数
-function convert(cssText,customConfig={}){const config={...defaultConfig,...customConfig};
+function convert(cssText,customConfig={}){
+// 先解析配置头
+const{config:headerConfig,css:cleanedCSS}=parseConfigHeader(cssText);const config={...defaultConfig,...customConfig,...headerConfig};
 // 1. 提取变量定义（区分全局和选择器局部）
-const{globalVariables:globalVariables,selectorVariables:selectorVariables,cssWithoutVars:cssWithoutVars}=extractVariablesAndCSS(cssText,config);
+const{globalVariables:globalVariables,selectorVariables:selectorVariables,cssWithoutVars:cssWithoutVars}=extractVariablesAndCSS(cleanedCSS,config);
 // 2. 解析嵌套规则（如果启用）
 let processedCSS=cssWithoutVars.trim();if(config.enableNesting&&cssWithoutVars.includes("{")){try{processedCSS=parseNestedRules(cssWithoutVars,config)}catch(error){console.warn("嵌套解析失败，使用原始CSS:",error)}}
 // 3. 生成根规则（全局变量）