styimat 1.6.4 → 1.8.0

package/README.md

@@ -1,12 +1,9 @@
 # styimat
-
 [![Stars](https://img.shields.io/badge/dynamic/json?label=Stars&query=%24.stargazers_count&url=https%3A%2F%2Fgitee.com%2Fapi%2Fv5%2Frepos%2Fwxy6987%2Fstyimat&color=FFD700&style=yellow)](https://gitee.com/wxy6987/styimat/stargazers)
 [![Forks](https://img.shields.io/badge/dynamic/json?label=Forks&query=%24.forks_count&url=https%3A%2F%2Fgitee.com%2Fapi%2Fv5%2Frepos%2Fwxy6987%2Fstyimat&color=red)](https://gitee.com/wxy6987/styimat/members)
 [![version](https://img.shields.io/npm/v/styimat.svg?color=brightgreen)](https://www.npmjs.com/package/styimat)
 [![license](https://img.shields.io/npm/l/styimat.svg?color=lightgrey)](LICENSE)
-[![size](https://img.shields.io/bundlephobia/minzip/styimat?label=size&color=blue)](https://bundlephobia.com/package/styimat)
-
-
+![size](https://img.shields.io/bundlephobia/minzip/styimat?label=size&color=blue)
 
 一个功能强大的 CSS 变量预处理库，支持嵌套规则、Lab/LCH 颜色空间转换、Display P3 广色域和增强的数学计算功能。
 
@@ -273,6 +270,38 @@ $font-family: 'Inter', sans-serif;
 .container {
   $local-var: 20px;
   margin: $local-var;
+      
+  &::before {
+   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);
+  }
 }
 ```
 
@@ -326,7 +355,7 @@ $font-family: 'Inter', sans-serif;
 
 ## 十六进制颜色语法详解
 
-### Lab 十六进制格式：`lab#L16A16B16`
+### Lab 十六进制格式：`lab#LLAABB`
 Lab 颜色使用 `lab#` 前缀，后跟 6 个十六进制字符：
 - 前 2 位：L（明度），范围 00-FF，映射到 0-100
 - 中间 2 位：A（红绿轴），范围 00-FF，映射到 -192 到 192
@@ -337,11 +366,11 @@ Lab 颜色使用 `lab#` 前缀，后跟 6 个十六进制字符：
 - A = 0xFF = 255 → (255-128) × 1.5 ≈ 190.5
 - B = 0x80 = 128 → (128-128) × 1.5 = 0
 
-### LCH 十六进制格式：`lch#L16C16H`
+### LCH 十六进制格式：`lch#LLCCHHH`
 LCH 颜色使用 `lch#` 前缀，后跟 6 个字符（最后1-3位是十进制色相值）：
 - 前 2 位：L（明度），范围 00-FF，映射到 0-100
 - 中间 2 位：C（色度），范围 00-FF，映射到 0-150
-- 后 1-3 位：H（色相），范围 0-999，映射到 0-360度
+- 后 1-3 位：H（色相），范围 0-100，映射到 0-360度
 
 示例：`lch#8CFF090` 表示：
 - L = 0x8C = 140 → 140/255 × 100 ≈ 55
@@ -362,8 +391,10 @@ LCH 颜色使用 `lch#` 前缀，后跟 6 个字符（最后1-3位是十进制
       color: lab(20 40 60);
     }
   }
+}
 
-  @media (min-width: 768px) {
+@media (min-width: 768px) {
+  .container {
     padding: 2rem;
     
     .header {
@@ -493,12 +524,12 @@ $border-radius: 0.5rem;
 ```css
 /* 使用十六进制语法创建调色板 */
 $primary: lab#8CFF80;
-$secondary: lch#8CFF180;
-$accent: lch#6CFF270;
+$secondary: lch#8CFF18;
+$accent: lch#6CFF27;
 
 /* 创建变体 */
-$primary-light: lab#B4FFA0;
-$primary-dark: lab#64FF60;
+$primary-light: lab#B4FF0A;
+$primary-dark: lab#64FF06;
 $primary-transparent: lab(55 190 0 / 0.8);
 
 .theme {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styimat",
-  "version": "1.6.4",
+  "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";
     }
 
     // 替换变量值中的变量引用
@@ -1123,15 +1186,9 @@
     function replaceVariableUses(cssText, globalVariables, selectorVariables, config) {
         let result = cssText;
         
-        // 先替换全局变量
-        for (const [varName, varValue] of Object.entries(globalVariables)) {
-            const varRegex = new RegExp(`\\$${varName}(?![a-zA-Z0-9_-])`, 'g');
-            result = result.replace(varRegex, `var(--${varName})`);
-        }
-        
-        // 然后处理选择器特定的变量
-        result = result.replace(/\$([a-zA-Z0-9_-]+)/g, (match, varName) => {
-            return `var(--${varName})`;
+        // 处理变量
+        result = result.replace(/(?:\$\$|\$)([a-zA-Z0-9_-]+)/g, (match, varName) => {
+          return match.startsWith('$$') ? `attr(${varName})` : `var(--${varName})`;
         });
         
         // 最后处理所有的LAB、LCH颜色和math()函数
@@ -1178,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;
@@ -1193,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();

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,23 +400,21 @@ 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})}
 // 替换变量使用
 function replaceVariableUses(cssText,globalVariables,selectorVariables,config){let result=cssText;
-// 先替换全局变量
-for(const[varName,varValue]of Object.entries(globalVariables)){const varRegex=new RegExp(`\\$${varName}(?![a-zA-Z0-9_-])`,"g");result=result.replace(varRegex,`var(--${varName})`)}
-// 然后处理选择器特定的变量
-result=result.replace(/\$([a-zA-Z0-9_-]+)/g,(match,varName)=>`var(--${varName})`);
+// 处理变量
+result=result.replace(/(?:\$\$|\$)([a-zA-Z0-9_-]+)/g,(match,varName)=>match.startsWith("$$")?`attr(${varName})`:`var(--${varName})`);
 // 最后处理所有的LAB、LCH颜色和math()函数
 result=processCSSValue(result,config);return result}
 // 生成根规则
@@ -403,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. 生成根规则（全局变量）