styimat 1.0.0

package/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2025 王小玗
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the " Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice (including the next paragraph) shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,317 @@
+# styimat
+
+一个功能强大的 CSS 变量预处理库，支持嵌套规则、Lab/LCH 颜色空间转换和 Display P3 广色域。
+
+## 特性
+
+- 🎨 **Lab/LCH 颜色支持** - 将 Lab 和 LCH 颜色转换为 CSS 兼容的 RGB
+- 🌈 **广色域显示** - 自动检测并支持 Display P3 广色域显示器
+- 🔧 **变量系统** - 类似 Sass 的变量系统，支持作用域变量
+- 🏗️ **嵌套规则** - 支持 Sass 风格的嵌套选择器
+- 📱 **十六进制语法** - 支持 `lab#L16A16B16` 和 `lch#L16C16H` 简洁语法
+- ⚡ **轻量高效** - 无依赖，压缩后仅约 20KB
+- 🔄 **多种使用方式** - 浏览器、Node.js、命令行均可使用
+
+## 安装
+
+### NPM
+
+```bash
+npm install styimat
+```
+
+### CDN (unpkg)
+
+```html
+<script src="https://unpkg.com/styimat"></script>
+```
+
+### CDN (jsdelivr)
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/styimat/styimat.min.js"></script>
+```
+
+## 快速开始
+
+### 浏览器中使用
+
+```html
+<!-- 在 HTML 中直接使用 -->
+<style e>
+  $primary-color: lab(54.7 77.9 80.1);
+  $spacing: 1rem;
+  
+  .button {
+    background-color: $primary-color;
+    padding: $spacing;
+    
+    &:hover {
+      background-color: lab(44.7 67.9 70.1);
+    }
+  }
+</style>
+
+<script src="https://cdn.jsdelivr.net/npm/styimat/styimat.min.js"></script>
+```
+
+### Node.js 中使用
+
+```javascript
+const styimat = require('styimat');
+
+const css = `
+  $primary: lab(54.7 77.9 80.1);
+  .button { background-color: $primary; }
+`;
+
+const result = styimat.convert(css);
+console.log(result);
+```
+
+### 命令行使用
+
+```bash
+# 基本用法
+npx styimat input.css output.css
+
+# 输出到 stdout
+npx styimat input.css
+
+# 使用管道
+npx styimat < input.css > output.css
+cat input.css | npx styimat > output.css
+
+# 从 stdin 读取，输出到 stdout
+npx styimat
+
+# 全局安装后使用
+npm install -g styimat
+styimat input.css output.css
+```
+
+## 语法指南
+
+### 变量定义
+
+```css
+/* 全局变量 */
+$primary-color: lab(54.7 77.9 80.1);
+$spacing: 1rem;
+$font-family: 'Inter', sans-serif;
+
+/* 局部变量（在规则块内） */
+.container {
+  $local-var: 20px;
+  margin: $local-var;
+}
+```
+
+### Lab 颜色语法
+
+```css
+/* 标准 lab() 函数 */
+.element {
+  color: lab(54.7 77.9 80.1);
+  background: lab(87.8 -79.3 80.8 / 0.5); /* 带透明度 */
+}
+
+/* 十六进制简写 */
+.element {
+  color: lab#8CFF80; /* L=8C, A=FF, B=80 */
+}
+```
+
+### LCH 颜色语法
+
+```css
+/* 标准 lch() 函数 */
+.element {
+  color: lch(54.7 78.9 38.5);
+  background: lch(87.8 79.3 180 / 30%); /* 带透明度百分比 */
+}
+
+/* 十六进制简写 */
+.element {
+  color: lch#8CFF90; /* L=8C, C=FF, H=90 */
+}
+```
+
+## 十六进制颜色语法详解
+
+### Lab 十六进制格式：`lab#L16A16B16`
+Lab 颜色使用 `lab#` 前缀，后跟 6 个十六进制字符：
+- 前 2 位：L（明度），范围 00-FF，映射到 0-100
+- 中间 2 位：A（红绿轴），范围 00-FF，映射到 -192 到 192
+- 后 2 位：B（黄蓝轴），范围 00-FF，映射到 -192 到 192
+
+示例：`lab#8CFF80` 表示：
+- L = 0x8C = 140 → 140/255 × 100 ≈ 55
+- A = 0xFF = 255 → (255-128) × 1.5 ≈ 190.5
+- B = 0x80 = 128 → (128-128) × 1.5 = 0
+
+### LCH 十六进制格式：`lch#L16C16H`
+LCH 颜色使用 `lch#` 前缀，后跟 6 个字符（最后1-3位是十进制色相值）：
+- 前 2 位：L（明度），范围 00-FF，映射到 0-100
+- 中间 2 位：C（色度），范围 00-FF，映射到 0-150
+- 后 1-3 位：H（色相），范围 0-999，映射到 0-360度
+
+示例：`lch#8CFF090` 表示：
+- L = 0x8C = 140 → 140/255 × 100 ≈ 55
+- C = 0xFF = 255 → 255/255 × 150 = 150
+- H = 090 → 090/100 × 360 = 324度
+
+### 嵌套规则
+
+```css
+/* Sass 风格的嵌套 */
+.container {
+  padding: 1rem;
+
+  .header {
+    font-size: 2rem;
+  }
+
+  @media (min-width: 768px) {
+    padding: 2rem;
+  }
+}
+```
+
+### 嵌套变量
+
+```css
+/* 变量可以引用其他变量 */
+$base-color: lab(54.7 77.9 80.1);
+$text-color: lch(20 30 270);
+$border-color: $base-color;
+
+.element {
+  color: $text-color;
+  border: 1px solid $border-color;
+}
+```
+
+## API 文档
+
+### JavaScript API
+
+```javascript
+const styimat = require('styimat');
+
+// 转换 CSS
+const css = styimat.convert(cssString, config);
+
+// 应用到页面
+styimat.apply(cssString, config);
+
+// 配置全局设置
+styimat.config({
+  rootSelector: ':root',
+  variablePrefix: '--',
+  convertLabToRGB: true,
+  convertLchToRGB: true,
+  enableP3: true,
+  indentSize: 2,
+  enableNesting: true
+});
+
+// 颜色工具
+const rgb = styimat.colorUtils.labToRGB(54.7, 77.9, 80.1);
+const p3 = styimat.colorUtils.labToP3(54.7, 77.9, 80.1);
+const lab = styimat.colorUtils.lchToLab(54.7, 78.9, 38.5);
+```
+
+### 配置选项
+
+| 选项 | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| `rootSelector` | string | `':root'` | CSS 变量定义的根选择器 |
+| `variablePrefix` | string | `'--'` | CSS 变量前缀 |
+| `preserveOriginal` | boolean | `false` | 是否保留原始 `<style e>` 标签 |
+| `indentSize` | number | `2` | 嵌套规则的缩进大小 |
+| `enableNesting` | boolean | `true` | 是否启用嵌套规则 |
+| `autoProcessStyleTags` | boolean | `true` | 是否自动处理页面中的 style 标签 |
+| `styleTagAttribute` | string | `'e'` | 标识需要处理的 style 标签属性 |
+| `convertLabToRGB` | boolean | `true` | 是否转换 Lab 颜色为 RGB |
+| `convertLchToRGB` | boolean | `true` | 是否转换 LCH 颜色为 RGB |
+| `enableP3` | boolean | `true` | 是否启用 Display P3 广色域支持 |
+
+## 示例
+
+### 完整示例
+
+```css
+/* 定义颜色变量 */
+$brand-primary: lab(54.7 77.9 80.1);
+$brand-secondary: lch(44.7 67.9 210);
+$text-primary: lch(20 30 270);
+$spacing-unit: 1rem;
+$border-radius: 0.5rem;
+
+/* 使用变量和嵌套 */
+.button {
+  background-color: $brand-primary;
+  color: white;
+  padding: $spacing-unit calc($spacing-unit * 2);
+  border-radius: $border-radius;
+  border: 2px solid lab(44.7 67.9 70.1);
+
+  &:hover {
+    background-color: lab(64.7 87.9 90.1);
+    transform: translateY(-2px);
+  }
+
+  &.large {
+    padding: calc($spacing-unit * 1.5) calc($spacing-unit * 3);
+    font-size: 1.25rem;
+  }
+}
+
+/* 媒体查询中的嵌套 */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+
+  @media (max-width: 768px) {
+    padding: 0 $spacing-unit;
+  }
+}
+```
+
+### 颜色混合示例
+
+```css
+/* 使用十六进制语法创建调色板 */
+$primary: lab#8CFF80;
+$secondary: lch#8CFF180;
+$accent: lch#6CFF270;
+
+/* 创建变体 */
+$primary-light: lab#B4FFA0;
+$primary-dark: lab#64FF60;
+$primary-transparent: lab(55 190 0 / 0.8);
+
+.theme {
+  --color-primary: var(--primary);
+  --color-secondary: var(--secondary);
+  --color-accent: var(--accent);
+
+  .card {
+    background: linear-gradient(135deg, $primary, $secondary);
+    border: 1px solid $accent;
+  }
+}
+```
+
+## 许可证
+
+MIT © 王小玗 2025
+
+## 贡献
+
+欢迎提交 Issue 和 Pull Request。
+
+## 支持
+
+如果发现 bug 或有功能建议，请在 GitHub 仓库中创建 Issue。

package/convert-styimat.js

@@ -0,0 +1,89 @@
+#!/usr/bin/env node
+
+// 1. 只做一件事，做好
+// 2. 输入 stdin，输出 stdout
+// 3. 错误输出到 stderr
+// 4. 安静模式可用
+// 5. 返回正确的退出码
+
+const fs = require('fs');
+const path = require('path');
+
+function main() {
+    const args = process.argv.slice(2);
+    
+    let inputContent = '';
+    let outputFile = null;
+    
+    // 处理参数
+    if (args.length === 0) {
+        // 从 stdin 读取
+        inputContent = fs.readFileSync(0, 'utf8'); // 文件描述符 0 = stdin
+    } else if (args.length === 1) {
+        // 从文件读取，输出到 stdout
+        const inputFile = args[0];
+        inputContent = fs.readFileSync(inputFile, 'utf8');
+    } else if (args.length === 2) {
+        // 从文件读取，输出到文件
+        const inputFile = args[0];
+        outputFile = args[1];
+        inputContent = fs.readFileSync(inputFile, 'utf8');
+    } else {
+        // 参数过多，显示用法
+        console.error('用法:');
+        console.error('  huecss-converter                     # 从 stdin 读取，输出到 stdout');
+        console.error('  huecss-converter input.css          # 从文件读取，输出到 stdout');
+        console.error('  huecss-converter input.css output.css # 从文件读取，输出到文件');
+        process.exit(1);
+    }
+    
+    // 检查是否在相同目录
+    try {
+        // 尝试从多个位置加载 styimat.js
+        const possiblePaths = [
+            path.join(__dirname, 'styimat.js'),
+            path.join(process.cwd(), 'styimat.js'),
+            path.join(process.cwd(), 'node_modules', 'styimat', 'styimat.js')
+        ];
+        
+        let huecssModule = null;
+        for (const modulePath of possiblePaths) {
+            try {
+                if (fs.existsSync(modulePath)) {
+                    huecssModule = require(modulePath);
+                    break;
+                }
+            } catch (e) {
+                // 继续尝试下一个路径
+            }
+        }
+        
+        if (!huecssModule) {
+            throw new Error('找不到 styimat.js 模块');
+        }
+        
+        // 获取转换函数
+        const huecss = huecssModule.huecss || huecssModule;
+        
+        if (typeof huecss.convert !== 'function') {
+            throw new Error('styimat.convert 不是函数');
+        }
+        
+        // 执行转换
+        const outputContent = huecss.convert(inputContent);
+        
+        // 输出结果
+        if (outputFile) {
+            fs.writeFileSync(outputFile, outputContent, 'utf8');
+        } else {
+            process.stdout.write(outputContent + '\n');
+        }
+        
+    } catch (error) {
+        console.error('错误:', error.message);
+        process.exit(1);
+    }
+}
+
+// 如果是直接运行
+main();

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "styimat",
+  "version": "1.0.0",
+  "description": "A powerful CSS variable preprocessor with nested selectors, Lab/LCH color spaces conversion and modern color features.",
+  "keywords": [
+    "css",
+    "preprocessor",
+    "css-variables",
+    "nested-css",
+    "lab-color",
+    "lch-color",
+    "color-conversion",
+    "styimat",
+    "color",
+    "css-in-js"
+  ],
+  "license": "MIT",
+  "author": "王小玗",
+  "type": "commonjs",
+  "main": "styimat.min.js",
+  "browser": "styimat.min.js",
+  "unpkg": "styimat.min.js",
+  "jsdelivr": "styimat.min.js",
+  "files": [
+    "styimat.js",
+    "styimat.min.js",
+    "LICENSE",
+    "README.md",
+    "convert-styimat.js"
+  ],
+  "bin": {
+    "styimat": "convert-styimat.js"
+  },
+  "scripts": {
+    "test": "echo \"No tests yet\" && exit 0",
+    "build:min": "npx terser styimat.js -o styimat.min.js --comments '/^!/'",
+    "prepare": "npm run build:min",
+    "prepublishOnly": "npm run build:min && echo 'Built successfully!'"
+  }
+}