styimat 1.6.3 → 1.7.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,10 @@ $font-family: 'Inter', sans-serif;
 .container {
   $local-var: 20px;
   margin: $local-var;
+      
+  &::before {
+   content: $$ctx;  //获取元素属性ctx
+  }
 }
 ```
 
@@ -326,7 +327,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 +338,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 +363,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 +496,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.3",
+  "version": "1.7.0",
   "description": "一个高效的CSS变量预处理库，支持Lab/LCH颜色空间自动转换、嵌套选择器和Display P3广色域，让现代CSS开发更简洁强大。",
   "keywords": [
     "css",
@@ -44,7 +44,7 @@
     "build:min": "npx terser styimat.js -o styimat.min.js --comments '/^!'",
     "prepare": "npm run build:min",
     "prepublishOnly": "npm run build:min",
-    "postpublish": "git:auto-commit && npm run git:auto-tag",
+    "postpublish": "npm run git:auto-commit && npm run git:auto-tag",
     "release": "npm publish",
     "publish:patch": "npm version patch --no-git-tag-version && npm publish",
     "publish:minor": "npm version minor --no-git-tag-version && npm publish",

package/styimat.js

@@ -1123,15 +1123,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()函数
@@ -1511,7 +1505,7 @@
 
     // 将API的所有方法复制到主函数上
     Object.assign(styimat, api);
-    Object.setPrototypeOf(styimat, Function.prototype);
+        Object.setPrototypeOf(styimat, Function.prototype);
 
     // 自动初始化
     if (typeof window !== 'undefined') {

package/styimat.min.js

@@ -392,10 +392,8 @@ if(rule.children&&rule.children.length>0){result+=convertRulesToCSS(rule.childre
 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}
 // 生成根规则