styimat 4.2.1 → 5.0.0

package/README.md

@@ -62,7 +62,7 @@ const css = `
   .button { background-color: $primary; }
 `;
 
-const result = styimat.convert(css);
+const result = await styimat.convert(css);
 console.log(result);
 ```
 
@@ -97,7 +97,7 @@ apply();
 
 ## 使用方法
 
-### 一、JavaScript调用
+### JavaScript调用
 
 #### 1. 作为函数调用
 ```javascript
@@ -110,8 +110,7 @@ const css = await styimat(`
 // 方式2：传入配置对象（返回函数本身）
 styimat({
   enableP3: true,
-  enableMath: true,
-  mathPrecision: 8
+  enableMath: true
 });
 
 // 方式3：无参数调用（自动处理页面中所有标记的<style>标签）
@@ -162,7 +161,7 @@ styimat.config({
 });
 
 // 4. 使用工具方法
-const mathResult = styimat.math.evaluate('100px / 2'); // "50px"
+const mathResult = styimat.math.evaluate('100px/2'); // "calc(100px / 2)"
 const rgbColor = styimat.colorUtils.labToRGB(54.7, 77.9, 80.1);
 ```
 
@@ -202,7 +201,7 @@ const designSystem = await styimat`
 styimat.apply(designSystem);
 ```
 
-### 二、命令行使用
+### 命令行使用
 
 ```bash
 # 基本用法
@@ -225,9 +224,9 @@ styimat input.css output.css
 
 **更多使用方法请 `npx styimat -h`**
 
-### 三、Styimat语法
+## Styimat语法
 
-#### 1. 变量定义
+### 1. 变量定义
 ```css
 /* 全局变量 */
 $primary-color: lab(54.7 77.9 80.1);
@@ -245,7 +244,7 @@ $font-family: 'Inter', sans-serif;
 }
 ```
 
-#### 2. 配置头语法
+### 2. 配置头语法
 ```css
 #indent-size 4
 #auto-process-style-tags true
@@ -254,43 +253,42 @@ $font-family: 'Inter', sans-serif;
 #root-selector :root
 #enable-nesting true
 #enable-math true
-#math-precision 8
 
 /* 然后写您的CSS代码 */
 $primary-color: lab#32a852;
-$spacing: math(16px * 2 + 4px);
+$spacing: math(16px*2+4px);
 
 body {
   color: $primary-color;
   padding: $spacing;
   
   .container {
-    margin: math($spacing / 2);
+    margin: math($spacing/2);
   }
 }
 ```
 
 **注意**：配置头既支持驼峰命名也支持连字符命名，例如 `indent-size` 和 `indentSize` 效果相同。
 
-#### 3. 导入语法
+### 3. 导入语法
 ```css
 @import yourcss.css;
 
 /* 然后写您的CSS代码 */
 $primary-color: lab#32a852;
-$spacing: math(16px * 2 + 4px);
+$spacing: math(16px*2+4px);
 
 body {
   color: $primary-color;
   padding: $spacing;
   
   .container {
-    margin: math($spacing / 2);
+    margin: math($spacing/2);
   }
 }
 ```
 
-#### 4. 别名语法
+### 4. 别名语法
 ```css
 @alias bg background-color;
 
@@ -302,7 +300,7 @@ body {
 }
 ```
 
-#### 5. 宏语法
+### 5. 宏语法
 ```css
 @macro grid($columns, $gap: 10px) {
   display: grid;
@@ -312,10 +310,12 @@ body {
 
 .container {
   @grid(3, 20px);
+  // 也可以
+  @grid: 3 20px;
 }
 ```
 
-#### 6. Math计算语法
+### 6. Math计算语法
 ```css
 /* math() 函数 */
 .element {
@@ -332,7 +332,7 @@ body {
 }
 ```
 
-#### 7. Lab颜色语法
+### 7. Lab颜色语法
 ```css
 /* 标准 lab() 函数 */
 .element {
@@ -346,7 +346,7 @@ body {
 }
 ```
 
-#### 8. LCH颜色语法
+### 8. LCH颜色语法
 ```css
 /* 标准 lch() 函数 */
 .element {
@@ -360,7 +360,7 @@ body {
 }
 ```
 
-#### 9. 嵌套规则
+### 9. 嵌套规则
 ```css
 /* Sass 风格的嵌套 */
 .container {
@@ -386,7 +386,7 @@ body {
 }
 ```
 
-#### 10. 嵌套变量
+### 10. 嵌套变量
 ```css
 /* 变量可以引用其他变量 */
 $base-color: lab(54.7 77.9 80.1);
@@ -411,7 +411,7 @@ $padding-large: math(2rem * 1.5);
 const styimat = require('styimat');
 
 // 转换 CSS
-const css = styimat.convert(cssString, config);
+const cssPromise = styimat.convert(cssString, config);
 
 // 应用到页面
 styimat.apply(cssString, config);
@@ -424,7 +424,6 @@ styimat.config({
   convertLchToRGB: true,
   enableP3: true,
   enableMath: true,
-  mathPrecision: 6,
   indentSize: 4,
   enableNesting: true,
   importBaseUrl: '',        // 导入基础URL
@@ -436,8 +435,8 @@ styimat.config({
 });
 
 // 数学工具
-styimat.math.evaluate('100px / 2'); // "50px"
-styimat.math.evaluate('(16px * 1.5) + 4px'); // "28px"
+styimat.math.evaluate('100px/2'); // "calc(100px / 2)"
+styimat.math.evaluate('(16px*1.5)+4px'); // "calc((16px * 1.5) + 4px)"
 
 // 颜色工具
 const rgb = styimat.colorUtils.labToRGB(54.7, 77.9, 80.1);
@@ -452,6 +451,26 @@ styimat.imports.clearCache();            // 清除导入缓存
 styimat.imports.setBaseUrl('/css/');     // 设置导入基础URL
 styimat.imports.setCacheEnabled(false);  // 禁用导入缓存
 styimat.imports.setTimeout(10000);       // 设置导入超时时间
+
+// 设置插件
+styimat.plugins.compress = {
+    enable: true,
+    convert: function(css, config) {
+        return css.replace(/[\n\b]/g, "");
+    },
+    created() {
+        // 创建时调用
+    },
+    deleted() {
+        // 删除时调用
+    }
+};
+
+delete styimat.plugins.compress;        // 删除插件
+
+for(const name in styimat.plugins) {
+    console.log(name);
+}
 ```
 
 ### 配置选项
@@ -469,7 +488,6 @@ styimat.imports.setTimeout(10000);       // 设置导入超时时间
 | `convertLchToRGB` | boolean | `true` | 是否转换 LCH 颜色为 RGB |
 | `enableP3` | boolean | `true` | 是否启用 Display P3 广色域支持 |
 | `enableMath` | boolean | `true` | 是否启用 `math()` 函数增强 |
-| `mathPrecision` | number | `6` | 数学计算的精度 |
 | `importBaseUrl` | string | ` | 导入的基础URL |
 | `importCache` | boolean | `true` | 是否缓存导入的文件 |
 | `importTimeout` | number | `5000` | 导入超时时间（毫秒） |

package/bin/cli.js

@@ -163,7 +163,7 @@ async function convertAndOutput(inputContent, outputFile) {
         if (outputFile) {
             fs.writeFileSync(outputFile, outputContent, 'utf8');
         } else {
-            process.stdout.write(outputContent + '\n');
+            process.stdout.write(outputContent);
         }
     } catch (error) {
         console.error('转换错误:', error.message);