styimat 10.2.0 → 10.3.0

package/dist/build-manifest.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-01-07T01:57:29.391Z",
+  "generatedAt": "2026-01-08T02:20:22.011Z",
   "files": [
     {
       "name": "dist/styimat.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styimat",
-  "version": "10.2.0",
+  "version": "10.3.0",
   "description": "一个高效的CSS变量预处理库，支持Lab/LCH颜色空间自动转换、嵌套选择器和Display P3广色域，让现代CSS开发更简洁强大。",
   "keywords": [
     "css",
@@ -32,7 +32,9 @@
     "./umd": "./dist/styimat.umd.min.js",
     "./esm": "./dist/styimat.min.mjs",
     "./dist/*": "./dist/*",
-    "./bin/*": "./bin/*"
+    "./bin/*": "./bin/*",
+    "./plugin/": "./plugin/",
+    "./*": "./dist/*"
   },
   "browser": "dist/styimat.min.js",
   "unpkg": "dist/styimat.min.js",
@@ -41,7 +43,8 @@
     "README.md",
     "bin",
     "src",
-    "dist"
+    "dist",
+    "plugin"
   ],
   "bin": {
     "styimat": "bin/cli.min.js"

package/plugin/hex2rgb.js

@@ -0,0 +1,95 @@
+export default class extends styimat.Plugin {
+    name = 'hex2rgb';
+    
+    convert(cssText, config = {}) {
+        const options = {
+            format: config.format || 'rgb', // 'rgb', 'rgba', 'hex'
+            preserveAlpha: config.preserveAlpha ?? true,
+            ...config
+        };
+        
+        // 匹配3位、4位、6位、8位十六进制颜色
+        const hexRegex = /#([0-9a-f]{3,8})\b/gi;
+        
+        return cssText.replace(hexRegex, (match, hex) => {
+            const rgb = this.hexToRgb(hex);
+            if (!rgb) return match;
+            
+            const alpha = hex.length <= 5 ? 1 : this.hexToAlpha(hex);
+            return this.formatRgb(rgb, alpha, options);
+        });
+    }
+    
+    /**
+     * 十六进制转RGB
+     * @param {string} hex - 十六进制颜色值
+     * @returns {Object|null} RGB颜色对象 {r, g, b} 或 null
+     */
+    hexToRgb(hex) {
+        // 处理3位/4位十六进制
+        if (hex.length === 3 || hex.length === 4) {
+            hex = hex.split('').map(char => char + char).join('');
+        }
+        
+        if (hex.length === 6 || hex.length === 8) {
+            const r = parseInt(hex.substr(0, 2), 16);
+            const g = parseInt(hex.substr(2, 2), 16);
+            const b = parseInt(hex.substr(4, 2), 16);
+            
+            return { r, g, b };
+        }
+        
+        return null;
+    }
+    
+    /**
+     * 从十六进制提取透明度
+     * @param {string} hex - 十六进制颜色值
+     * @returns {number} 透明度 (0-1)
+     */
+    hexToAlpha(hex) {
+        if (hex.length === 4) {
+            const alphaHex = hex.charAt(3) + hex.charAt(3);
+            return parseInt(alphaHex, 16) / 255;
+        }
+        
+        if (hex.length === 8) {
+            const alphaHex = hex.substr(6, 2);
+            return parseInt(alphaHex, 16) / 255;
+        }
+        
+        return 1;
+    }
+    
+    /**
+     * 格式化RGB输出
+     */
+    formatRgb(rgb, alpha, options) {
+        const { r, g, b } = rgb;
+        
+        switch(options.format.toLowerCase()) {
+            case 'hex':
+                if (alpha < 1 && options.preserveAlpha) {
+                    const alphaHex = Math.round(alpha * 255).toString(16).padStart(2, '0');
+                    return `#${this.toHex(r)}${this.toHex(g)}${this.toHex(b)}${alphaHex}`;
+                }
+                return `#${this.toHex(r)}${this.toHex(g)}${this.toHex(b)}`;
+                
+            case 'rgba':
+                if (alpha < 1) {
+                    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+                }
+                return `rgb(${r}, ${g}, ${b})`;
+                
+            case 'rgb':
+            default:
+                return `rgb(${r}, ${g}, ${b})`;
+        }
+    }
+    
+    toHex(value) {
+        return Math.max(0, Math.min(255, value))
+            .toString(16)
+            .padStart(2, '0');
+    }
+}

package/plugin/hsl2rgb.js

@@ -0,0 +1,154 @@
+export default class extends styimat.Plugin {
+    name = 'hsl2rgb';
+    
+    // 存储已处理元素，用于清理
+    processedElements = new WeakMap();
+    
+    install() {
+        // 可以在这里添加初始化逻辑，如果需要的话
+        console.log('HSL to sRGB 插件已安装');
+    }
+
+    destroy() {
+        // 清理资源
+        this.processedElements = new WeakMap();
+        console.log('HSL to sRGB 插件已销毁');
+    }
+    
+    convert(cssText, config = {}) {
+        // 配置选项
+        const options = {
+            preserveOriginal: config.preserveOriginal || false,
+            format: config.format || 'rgb', // 'rgb', 'rgba', 'hex'
+            ...config
+        };
+        
+        // 使用正则表达式匹配HSL/HSLA颜色
+        const hslRegex = /hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)%\s*,\s*(\d+(?:\.\d+)?)%\s*(?:,\s*(\d+(?:\.\d+)?))?\s*\)/gi;
+        
+        // 替换所有HSL颜色为sRGB
+        return cssText.replace(hslRegex, (match, h, s, l, a) => {
+            const rgb = this.hslToRgb(
+                parseFloat(h),
+                parseFloat(s),
+                parseFloat(l)
+            );
+            
+            const alpha = a !== undefined ? parseFloat(a) : 1;
+            
+            // 根据配置返回不同格式
+            return this.formatRgb(rgb, alpha, options.format);
+        });
+    }
+
+    /**
+     * HSL转sRGB的辅助函数
+     * @param {number} h - 色相 (0-360)
+     * @param {number} s - 饱和度 (0-100)
+     * @param {number} l - 亮度 (0-100)
+     * @returns {Object} RGB颜色对象 {r, g, b}
+     */
+    hslToRgb(h, s, l) {
+        // 规范化输入值
+        h = h % 360;
+        if (h < 0) h += 360;
+        
+        s = Math.max(0, Math.min(100, s)) / 100;
+        l = Math.max(0, Math.min(100, l)) / 100;
+        
+        // HSL转RGB算法
+        const chroma = (1 - Math.abs(2 * l - 1)) * s;
+        const huePrime = h / 60;
+        const secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
+        
+        let r, g, b;
+        
+        if (huePrime >= 0 && huePrime < 1) {
+            [r, g, b] = [chroma, secondComponent, 0];
+        } else if (huePrime >= 1 && huePrime < 2) {
+            [r, g, b] = [secondComponent, chroma, 0];
+        } else if (huePrime >= 2 && huePrime < 3) {
+            [r, g, b] = [0, chroma, secondComponent];
+        } else if (huePrime >= 3 && huePrime < 4) {
+            [r, g, b] = [0, secondComponent, chroma];
+        } else if (huePrime >= 4 && huePrime < 5) {
+            [r, g, b] = [secondComponent, 0, chroma];
+        } else {
+            [r, g, b] = [chroma, 0, secondComponent];
+        }
+        
+        // 调整亮度
+        const lightnessAdjustment = l - chroma / 2;
+        r += lightnessAdjustment;
+        g += lightnessAdjustment;
+        b += lightnessAdjustment;
+        
+        // 转换为0-255范围并四舍五入
+        return {
+            r: Math.round(r * 255),
+            g: Math.round(g * 255),
+            b: Math.round(b * 255)
+        };
+    }
+
+    /**
+     * 格式化RGB输出
+     * @param {Object} rgb - RGB颜色对象
+     * @param {number} alpha - 透明度 (0-1)
+     * @param {string} format - 输出格式
+     * @returns {string} 格式化后的颜色字符串
+     */
+    formatRgb(rgb, alpha, format = 'rgb') {
+        const { r, g, b } = rgb;
+        
+        switch(format.toLowerCase()) {
+            case 'hex':
+                if (alpha < 1) {
+                    // 带透明度的十六进制
+                    const alphaHex = Math.round(alpha * 255).toString(16).padStart(2, '0');
+                    return `#${this.toHex(r)}${this.toHex(g)}${this.toHex(b)}${alphaHex}`;
+                }
+                return `#${this.toHex(r)}${this.toHex(g)}${this.toHex(b)}`;
+                
+            case 'rgba':
+                return alpha < 1 
+                    ? `rgba(${r}, ${g}, ${b}, ${alpha})`
+                    : `rgb(${r}, ${g}, ${b})`;
+                    
+            case 'rgb':
+            default:
+                return `rgb(${r}, ${g}, ${b})`;
+        }
+    }
+
+    /**
+     * 将数字转换为两位十六进制
+     * @param {number} value - 0-255之间的数字
+     * @returns {string} 两位十六进制字符串
+     */
+    toHex(value) {
+        return Math.max(0, Math.min(255, value))
+            .toString(16)
+            .padStart(2, '0');
+    }
+
+    /**
+     * 处理CSS样式对象（可选扩展功能）
+     * @param {Object} style - CSS样式对象
+     * @param {Object} config - 配置选项
+     * @returns {Object} 处理后的样式对象
+     */
+    processStyle(style, config = {}) {
+        const processedStyle = {};
+        
+        for (const [property, value] of Object.entries(style)) {
+            if (typeof value === 'string' && value.includes('hsl')) {
+                processedStyle[property] = this.convert(value, config);
+            } else {
+                processedStyle[property] = value;
+            }
+        }
+        
+        return processedStyle;
+    }
+};