styimat 1.11.2 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -17
- package/{styimat.js → dist/styimat.js} +4 -4
- package/dist/styimat.min.js +29 -0
- package/package.json +10 -10
- package/styimat.min.js +0 -29
- /package/{convert-styimat.js → bin/convert-styimat.js} +0 -0
package/README.md
CHANGED
|
@@ -130,13 +130,15 @@ styimat input.css output.css
|
|
|
130
130
|
|
|
131
131
|
## 高级用法
|
|
132
132
|
|
|
133
|
+
**重要!如果用了import语法一定加上await,没用可以不加,但是加上了一直不错!**
|
|
134
|
+
|
|
133
135
|
### 1. 作为函数直接调用
|
|
134
136
|
|
|
135
137
|
`styimat` 本身是一个可调用的函数,支持多种调用方式:
|
|
136
138
|
|
|
137
139
|
```javascript
|
|
138
140
|
// 方式1:直接传入CSS字符串
|
|
139
|
-
const css1 = styimat(`
|
|
141
|
+
const css1 = await styimat(`
|
|
140
142
|
$primary: lab(54.7 77.9 80.1);
|
|
141
143
|
.button { color: $primary; }
|
|
142
144
|
`);
|
|
@@ -158,7 +160,7 @@ styimat();
|
|
|
158
160
|
|
|
159
161
|
```javascript
|
|
160
162
|
// 基本模板标签用法
|
|
161
|
-
const css = styimat`
|
|
163
|
+
const css = await styimat`
|
|
162
164
|
$primary: lab(54.7 77.9 80.1);
|
|
163
165
|
$secondary: lch(44.7 67.9 210);
|
|
164
166
|
|
|
@@ -174,7 +176,7 @@ const css = styimat`
|
|
|
174
176
|
|
|
175
177
|
// 模板标签支持插值
|
|
176
178
|
const theme = 'dark';
|
|
177
|
-
const cssWithVars = styimat`
|
|
179
|
+
const cssWithVars = await styimat`
|
|
178
180
|
$primary: ${theme === 'dark' ? 'lab(30 40 50)' : 'lab(70 20 -10)'};
|
|
179
181
|
|
|
180
182
|
body {
|
|
@@ -184,7 +186,7 @@ const cssWithVars = styimat`
|
|
|
184
186
|
|
|
185
187
|
// 复杂的插值示例
|
|
186
188
|
const spacing = 1.5;
|
|
187
|
-
const cssComplex = styimat`
|
|
189
|
+
const cssComplex = await styimat`
|
|
188
190
|
$base-spacing: ${spacing}rem;
|
|
189
191
|
$large-spacing: math(${spacing} * 2);
|
|
190
192
|
|
|
@@ -201,7 +203,7 @@ const cssComplex = styimat`
|
|
|
201
203
|
|
|
202
204
|
```javascript
|
|
203
205
|
// 1. 转换CSS
|
|
204
|
-
const converted = styimat.convert(cssString, config);
|
|
206
|
+
const converted = await styimat.convert(cssString, config);
|
|
205
207
|
|
|
206
208
|
// 2. 应用到页面
|
|
207
209
|
const styleElement = styimat.apply(cssString, config);
|
|
@@ -236,7 +238,7 @@ ele.cssVar[prop] // 获取prop变量的值
|
|
|
236
238
|
// 先配置,然后使用模板标签
|
|
237
239
|
styimat.config({ enableP3: true });
|
|
238
240
|
|
|
239
|
-
const designSystem = styimat`
|
|
241
|
+
const designSystem = await styimat`
|
|
240
242
|
/* 设计系统变量 */
|
|
241
243
|
$primary: lab#8CFF80;
|
|
242
244
|
$secondary: lch#6CFF180;
|
|
@@ -283,8 +285,7 @@ $font-family: 'Inter', sans-serif;
|
|
|
283
285
|
#### 您可以在CSS文件的开头使用导入文件来导入其他css文件,应该以`@import开头`:
|
|
284
286
|
|
|
285
287
|
```css
|
|
286
|
-
@import
|
|
287
|
-
@import url("tail.css");
|
|
288
|
+
@import yourcss.css;
|
|
288
289
|
|
|
289
290
|
/* 然后写您的CSS代码 */
|
|
290
291
|
$primary-color: lab#32a852;
|
|
@@ -308,17 +309,17 @@ body {
|
|
|
308
309
|
|
|
309
310
|
### 配置头语法
|
|
310
311
|
|
|
311
|
-
您可以在CSS文件的开头使用配置头来设置预处理选项,配置行以
|
|
312
|
+
您可以在CSS文件的开头使用配置头来设置预处理选项,配置行以 `#` 开头:
|
|
312
313
|
|
|
313
314
|
```css
|
|
314
|
-
#
|
|
315
|
-
#
|
|
316
|
-
#
|
|
317
|
-
#
|
|
318
|
-
#
|
|
319
|
-
#
|
|
320
|
-
#
|
|
321
|
-
#
|
|
315
|
+
#indent-size 4
|
|
316
|
+
#auto-process-style-tags true
|
|
317
|
+
#preserve-original true
|
|
318
|
+
#enable-p3 false
|
|
319
|
+
#root-selector :root
|
|
320
|
+
#enable-nesting true
|
|
321
|
+
#enable-math true
|
|
322
|
+
#math-precision 8
|
|
322
323
|
|
|
323
324
|
/* 然后写您的CSS代码 */
|
|
324
325
|
$primary-color: lab#32a852;
|
|
@@ -1263,7 +1263,7 @@
|
|
|
1263
1263
|
*/
|
|
1264
1264
|
async function processImports(cssText, config) {
|
|
1265
1265
|
// 匹配所有@import语句
|
|
1266
|
-
const importRegex = /@import\s+(
|
|
1266
|
+
const importRegex = /@import\s+([^;]+?)\s*;/g;
|
|
1267
1267
|
|
|
1268
1268
|
// 递归处理函数
|
|
1269
1269
|
const processRecursive = async (text) => {
|
|
@@ -1428,7 +1428,7 @@
|
|
|
1428
1428
|
};
|
|
1429
1429
|
|
|
1430
1430
|
// 检查是否有@import语句(需要异步处理)
|
|
1431
|
-
const hasImports = cssText && /@import\s+(
|
|
1431
|
+
const hasImports = cssText && /@import\s+([^;]+?)\s*;/g.test(cssText);
|
|
1432
1432
|
const finalConfig = { ...defaultConfig, ...customConfig };
|
|
1433
1433
|
|
|
1434
1434
|
if (!hasImports) {
|
|
@@ -1464,7 +1464,7 @@
|
|
|
1464
1464
|
const processStyleTag = async () => {
|
|
1465
1465
|
try {
|
|
1466
1466
|
if (styleTag.getAttribute("src")){
|
|
1467
|
-
originalCSS = "@import
|
|
1467
|
+
originalCSS = "@import "+styleTag.getAttribute("src")+";";
|
|
1468
1468
|
}
|
|
1469
1469
|
const convertedCSS = await convert(originalCSS, config);
|
|
1470
1470
|
|
|
@@ -1502,7 +1502,7 @@
|
|
|
1502
1502
|
|
|
1503
1503
|
if (cssText) {
|
|
1504
1504
|
// 检查是否有@import
|
|
1505
|
-
const hasImports = /@import\s+(
|
|
1505
|
+
const hasImports = /@import\s+([^;]+?)\s*;/g.test(cssText);
|
|
1506
1506
|
|
|
1507
1507
|
if (hasImports) {
|
|
1508
1508
|
// 异步处理
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* MIT License
|
|
3
|
+
* Copyright (c) 2025 王小玗
|
|
4
|
+
*/(function(d,C){typeof define=="function"&&define.amd?define([],C):typeof module=="object"&&module.exports?module.exports=C():d.styimat=C()})(typeof self<"u"?self:this,function(){let d={rootSelector:":root",variablePrefix:"--",preserveOriginal:!1,indentSize:4,enableNesting:!0,autoProcessStyleTags:!0,styleTagAttribute:"e",convertLabToRGB:!0,convertLchToRGB:!0,enableP3:!0,enableMath:!0,mathPrecision:6,importBaseUrl:"",importCache:!0,importTimeout:5e3},C=null;const F=new Map;function q(t){const e={...d},r=t.split(`
|
|
5
|
+
`),n=[];for(let o of r){const s=o.trim();if(s.startsWith("#")){const i=s.substring(1).trim(),c=i.indexOf(" ");if(c!==-1){const a=i.substring(0,c).trim(),l=i.substring(c+1).trim(),u=Y(a);u in e?l==="true"||l==="false"?e[u]=l==="true":!isNaN(l)&&l.trim()!==""?e[u]=Number(l):e[u]=l:console.warn(`\u672A\u77E5\u7684\u914D\u7F6E\u9879: ${a}`)}else console.warn(`\u65E0\u6548\u7684\u914D\u7F6E\u884C: ${s}`)}else n.push(o)}return{config:e,css:n.join(`
|
|
6
|
+
`)}}function Y(t){return t.replace(/-([a-z])/g,function(e,r){return r.toUpperCase()})}function z(){if(C!==null)return C;if(typeof window>"u"||!window.CSS)return C=!1,!1;try{C=CSS.supports("color","color(display-p3 1 0 0)")}catch(t){console.warn("P3\u652F\u6301\u68C0\u6D4B\u5931\u8D25:",t),C=!1}return C}function V(t){let e=t.trim();if(e.endsWith(";")&&(e=e.slice(0,-1)),!e)return[];const r=[];let n="",o=0,s=!1,i="";for(let a=0;a<e.length;a++){const l=e[a];(l==='"'||l==="'")&&!s?(s=!0,i=l):l===i&&s&&(s=!1,i=""),s||(l==="("?o++:l===")"&&o--),l===";"&&!s&&o===0?n.trim()&&(r.push(n.trim()),n=""):n+=l}n.trim()&&r.push(n.trim());const c=[];for(const a of r){if(!a.trim())continue;const l=D(a);if(l===-1){console.warn(`\u65E0\u6548\u7684CSS\u58F0\u660E: "${a}"`);continue}const u=a.substring(0,l).trim();let f=a.substring(l+1).trim();f.endsWith(";")&&(f=f.slice(0,-1).trim()),c.push({[u]:f})}return c}function D(t){let e=!1,r="";for(let n=0;n<t.length;n++){const o=t[n];if((o==='"'||o==="'")&&!e?(e=!0,r=o):o===r&&e&&(e=!1,r=""),o===":"&&!e)return n}return-1}function E(t,e){if(!e.enableMath)return`math(${t})`;try{let r=t.replace(/\s+/g,"");const n=_(r,e);return Q(r)?K(r,n):Z(n,e.mathPrecision)}catch(r){return console.warn("math()\u8868\u8FBE\u5F0F\u89E3\u6790\u5931\u8D25:",t,r),`math(${t})`}}function _(t,e){for(;t.includes("(")&&t.includes(")");){const r=t.lastIndexOf("("),n=t.indexOf(")",r);if(n===-1)break;const o=t.substring(r+1,n),s=_(o,e);t=t.substring(0,r)+s+t.substring(n+1)}return W(t,e)}function W(t,e){const r=[{regex:/([\d.]+(?:[a-zA-Z%]+)?)\*([\d.]+(?:[a-zA-Z%]+)?)/,handler:J},{regex:/([\d.]+(?:[a-zA-Z%]+)?)\/([\d.]+(?:[a-zA-Z%]+)?)/,handler:tt},{regex:/([\d.]+(?:[a-zA-Z%]+)?)\+([\d.]+(?:[a-zA-Z%]+)?)/,handler:et},{regex:/([\d.]+(?:[a-zA-Z%]+)?)-([\d.]+(?:[a-zA-Z%]+)?)/,handler:nt}];let n=t;for(const s of r){let i;for(;(i=t.match(s.regex))!==null;){const c=A(i[1]),a=A(i[2]),l=s.handler(c,a);t=t.substring(0,i.index)+l.value+t.substring(i.index+i[0].length)}}return t!==n?W(t,e):A(t).value}function A(t){const e=t.match(/^([\d.]+)([a-zA-Z%]*)$/);if(!e)throw new Error(`\u65E0\u6CD5\u89E3\u6790\u503C: ${t}`);const r=parseFloat(e[1]),n=e[2]||"";return{value:r,unit:n}}function Q(t){return/[a-zA-Z%]/.test(t)}function K(t,e){const r=t.match(/([a-zA-Z%]+)(?!.*[a-zA-Z%])/);return r?e+r[1]:t.includes("%")?e+"%":e+"px"}function J(t,e){return t.unit===e.unit||!t.unit&&!e.unit?{value:t.value*e.value,unit:t.unit||e.unit}:{value:`${t.value}${t.unit}*${e.value}${e.unit}`,unit:""}}function tt(t,e){if(e.value===0)throw new Error("\u9664\u4EE5\u96F6");return t.unit&&!e.unit?{value:t.value/e.value,unit:t.unit}:t.unit===e.unit?{value:t.value/e.value,unit:""}:{value:`${t.value}${t.unit}/${e.value}${e.unit}`,unit:""}}function et(t,e){return t.unit===e.unit?{value:t.value+e.value,unit:t.unit}:{value:`${t.value}${t.unit}+${e.value}${e.unit}`,unit:""}}function nt(t,e){return t.unit===e.unit?{value:t.value-e.value,unit:t.unit}:{value:`${t.value}${t.unit}-${e.value}${e.unit}`,unit:""}}function Z(t,e=6){const r=Math.pow(10,e),o=(Math.round(t*r)/r).toString();return o.includes(".")?o.replace(/(\.\d*?)0+$/,"$1").replace(/\.$/,""):o}function rt(t,e){if(!e.enableMath)return t;let r=t;const n=/math\(([^)]+)\)/gi,o=i=>i.replace(n,(c,a)=>E(a,e));let s;do s=r,r=o(r);while(r!==s&&r.includes("math("));return r}function st(t,e){if(!e.convertLabToRGB&&!e.convertLchToRGB)return t;let r=t;r=ot(r,e);const n=/(lab|lch)\([^)]+\)/gi,o=new Map,s=c=>c.replace(n,a=>{if(o.has(a))return o.get(a);let l=a;return a.toLowerCase().startsWith("lab(")?e.convertLabToRGB&&(l=ct(a,e)):a.toLowerCase().startsWith("lch(")&&e.convertLchToRGB&&(l=it(a,e)),o.set(a,l),l});let i;do i=r,r=s(r);while(r!==i);return r}function ot(t,e){let r=t;const n=/lab#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/gi,o=/lch#([0-9a-f]{2})([0-9a-f]{2})(\d{1,3})/gi,s=new Map;return r=r.replace(n,(i,c,a,l)=>{if(s.has(i))return s.get(i);try{const u=parseInt(c,16)/255*100,f=(parseInt(a,16)-128)*1.5,p=(parseInt(l,16)-128)*1.5,h=L(u,f,p,e);return s.set(i,h),h}catch(u){return console.warn(`\u65E0\u6CD5\u89E3\u6790lab#\u5341\u516D\u8FDB\u5236\u989C\u8272: ${i}`,u),i}}),r=r.replace(o,(i,c,a,l)=>{if(s.has(i))return s.get(i);try{const u=parseInt(c,16)/255*100,f=parseInt(a,16)/255*150,p=parseInt(l)/100*360,h=w(u,f,p),g=L(h.L,h.a,h.b,e);return s.set(i,g),g}catch(u){return console.warn(`\u65E0\u6CD5\u89E3\u6790lch#\u5341\u516D\u8FDB\u5236\u989C\u8272: ${i}`,u),i}}),r}function ct(t,e){const r=/lab\(\s*([\d.]+)(%?)\s+([\d.-]+)\s+([\d.-]+)(?:\s*\/\s*([\d.%]+))?\s*\)/i,n=t.match(r);if(!n)return t;try{let o=parseFloat(n[1]);n[2]==="%"?o=o:(o<0&&(o=0),o>100&&(o=100));const s=parseFloat(n[3]),i=parseFloat(n[4]),c=n[5]!==void 0?n[5].includes("%")?parseFloat(n[5])/100:parseFloat(n[5]):null;return L(o,s,i,e,c)}catch(o){return console.warn(`\u65E0\u6CD5\u8F6C\u6362LAB\u989C\u8272: ${t}`,o),t}}function it(t,e){const r=/lch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)(deg)?(?:\s*\/\s*([\d.%]+))?\s*\)/i,n=t.match(r);if(!n)return t;try{let o=parseFloat(n[1]);n[2]==="%"?o=o:(o<0&&(o=0),o>100&&(o=100));const s=parseFloat(n[3]);let i=parseFloat(n[4]);s<0&&console.warn(`LCH\u4E2D\u7684C\u503C\u4E0D\u80FD\u4E3A\u8D1F: ${s}`),i=(i%360+360)%360;const c=w(o,s,i),a=n[6]!==void 0?n[6].includes("%")?parseFloat(n[6])/100:parseFloat(n[6]):null;return L(c.L,c.a,c.b,e,a)}catch(o){return console.warn(`\u65E0\u6CD5\u8F6C\u6362LCH\u989C\u8272: ${t}`,o),t}}function w(t,e,r){const n=r*Math.PI/180,o=e*Math.cos(n),s=e*Math.sin(n);return{L:t,a:o,b:s}}function S(t,e,r){const n=(m,y,v)=>{const X=(m+16)/116,B=y/500+X,O=X-v/200,bt=B**3>.008856?B**3:(116*B-16)/903.3,yt=m>903.3*.008856?((m+16)/116)**3:m/903.3,$t=O**3>.008856?O**3:(116*O-16)/903.3;return[bt*.95047,yt*1,$t*1.08883]},o=(m,y,v)=>{const $=[[3.2404542,-1.5371385,-.4985314],[-.969266,1.8760108,.041556],[.0556434,-.2040259,1.0572252]],T=$[0][0]*m+$[0][1]*y+$[0][2]*v,N=$[1][0]*m+$[1][1]*y+$[1][2]*v,U=$[2][0]*m+$[2][1]*y+$[2][2]*v;return[T,N,U]},s=m=>{const y=m<0?-1:1,v=Math.abs(m);return v<=.0031308?y*12.92*v:y*(1.055*Math.pow(v,.4166666666666667)-.055)},i=m=>Math.max(0,Math.min(255,Math.round(m*255))),[c,a,l]=n(t,e,r),[u,f,p]=o(c,a,l),h=s(u),g=s(f),b=s(p);return{r:i(h),g:i(g),b:i(b)}}function R(t,e,r){const n=(c,a,l)=>{const b=(c+16)/116,m=a/500+b,y=b-l/200,v=m**3>.008856?m**3:(116*m-16)/903.3,$=c>903.3*.008856?((c+16)/116)**3:c/903.3,T=y**3>.008856?y**3:(116*y-16)/903.3;return[v*.95047,$*1,T*1.08883]},o=(c,a,l)=>{const u=[[2.493496911941425,-.9313836179191239,-.40271078445071684],[-.8294889695615747,1.7626640603183463,.023624685841943577],[.03584583024378447,-.07617238926804182,.9568845240076872]],f=u[0][0]*c+u[0][1]*a+u[0][2]*l,p=u[1][0]*c+u[1][1]*a+u[1][2]*l,h=u[2][0]*c+u[2][1]*a+u[2][2]*l;return[f,p,h]},s=c=>{const a=c<0?-1:1,l=Math.abs(c);return l<=.0031308?a*12.92*l:a*(1.055*Math.pow(l,.4166666666666667)-.055)},i=c=>Math.max(0,Math.min(255,Math.round(c*255)));try{const[c,a,l]=n(t,e,r),[u,f,p]=o(c,a,l),h=s(u),g=s(f),b=s(p);return{r:Math.max(0,Math.min(1,h)),g:Math.max(0,Math.min(1,g)),b:Math.max(0,Math.min(1,b))}}catch(c){console.warn("P3\u8F6C\u6362\u5931\u8D25:",c);const a=S(t,e,r);return{r:a.r/255,g:a.g/255,b:a.b/255}}}function L(t,e,r,n,o=null){if(!n.enableP3||!z()){const s=S(t,e,r);return o!==null?`rgba(${s.r}, ${s.g}, ${s.b}, ${o})`:`rgb(${s.r}, ${s.g}, ${s.b})`}else{const s=R(t,e,r);return o!==null?`color(display-p3 ${s.r.toFixed(4)} ${s.g.toFixed(4)} ${s.b.toFixed(4)} / ${o})`:`color(display-p3 ${s.r.toFixed(4)} ${s.g.toFixed(4)} ${s.b.toFixed(4)})`}}function M(t,e){let r=t;return e.enableMath&&(r=rt(r,e)),(e.convertLabToRGB||e.convertLchToRGB)&&(r=st(r,e)),r}function at(t,e){const r=t.split(`
|
|
7
|
+
`),n={},o=new Map;let s="",i=null,c=!1,a=0;for(let l of r){const u=l.trim(),f=u.match(/^\$([a-zA-Z0-9_-]+)\s*:\s*(.+?);?$/);if(f){const[,p,h]=f,g=M(H(h.trim(),{...n,...i?o.get(i)||{}:{}}),e);i?(o.has(i)||o.set(i,{}),o.get(i)[p]=g):n[p]=g;continue}if(u.endsWith("{")){i=u.slice(0,-1).trim(),c=!0,s+=l+`
|
|
8
|
+
`;continue}if(u==="}"){if(c&&i&&o.has(i)){const p=o.get(i),h=" ".repeat(a);for(const[g,b]of Object.entries(p))s+=`${h} --${g}: ${b};
|
|
9
|
+
`}c=!1,i=null}s+=l+`
|
|
10
|
+
`,l.includes("{")&&(a+=e.indentSize),l.includes("}")&&(a=Math.max(0,a-e.indentSize))}return{globalVariables:n,selectorVariables:o,cssWithoutVars:s.trim()}}function lt(t,e){const r=t.split(`
|
|
11
|
+
`),n=[],o=[];let s=0;for(let i=0;i<r.length;i++){const c=r[i],a=c.trim();if(!a)continue;const l=c.match(/^(\s*)/)[0].length;if(a==="}"){if(n.length>0){const u=n.pop();if(n.length>0){const f=n[n.length-1];f.children||(f.children=[]),f.children.push(u)}else o.push(u)}continue}if(a.endsWith("{")){const f={selector:a.slice(0,-1).trim(),properties:[],children:[]};n.push(f);continue}if(!a.includes("{")&&!a.includes("}")&&a.includes(":")){if(n.length>0){const u=n[n.length-1];V(a).forEach(p=>{const h=Object.keys(p)[0],g=M(p[h],e);u.properties.push(`${h}: ${g}`)})}continue}}for(;n.length>0;){const i=n.pop();if(n.length===0)o.push(i);else{const c=n[n.length-1];c.children||(c.children=[]),c.children.push(i)}}return k(o,e)}function k(t,e,r=""){let n="";const o=r.startsWith("@");for(const s of t){const i=s.selector.startsWith("@");let c=(o?" ".repeat(e.indentSize):"")+s.selector;if(i&&(c=s.selector+` {
|
|
12
|
+
`),r&&(c.includes("&")?c=c.replace(/&/g,r):c.trim().startsWith(":")?c=r+c:c=r+(o?"":" ")+c),s.properties.length>0){n+=(i?"":c)+` {
|
|
13
|
+
`;for(const a of s.properties)V(a).forEach(u=>{const f=Object.keys(u)[0],p=M(u[f],e);n+=(o?" ".repeat(e.indentSize):"")+" ".repeat(e.indentSize)+`${f}: ${p};
|
|
14
|
+
`});n+=o?" ".repeat(e.indentSize)+`}
|
|
15
|
+
`:`}
|
|
16
|
+
|
|
17
|
+
`}s.children&&s.children.length>0&&(n+=k(s.children,e,c)),o&&(n+=`}
|
|
18
|
+
|
|
19
|
+
`)}return n.trim()+`
|
|
20
|
+
|
|
21
|
+
`}function H(t,e){return t.replace(/\$([a-zA-Z0-9_-]+)/g,(r,n)=>e[n]?`var(--${n})`:r)}function ut(t,e,r,n){let o=t;return o=o.replace(/(?:\$\$|\$)([a-zA-Z0-9_-]+)/g,(s,i)=>s.startsWith("$$")?`attr(${i})`:`var(--${i})`),o=M(o,n),o}function ft(t,e){if(Object.keys(t).length===0)return"";const r=Object.entries(t).map(([n,o])=>{const s=M(H(o,t),e);return" ".repeat(e.indentSize)+`--${n}: ${s};`}).join(`
|
|
22
|
+
`);return`${e.rootSelector} {
|
|
23
|
+
${r}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
`}function pt(t,e,r){let n="";const o=t.split(`
|
|
27
|
+
`);let s=null;for(let i of o){const c=i.trim();if(c.endsWith("{")&&(s=c.slice(0,-1).trim()),c==="}"&&s){if(e.has(s)){const a=e.get(s),l=i.match(/^(\s*)/)[0];for(const[u,f]of Object.entries(a))n+=" --"+u+": "+f+`;
|
|
28
|
+
`}s=null}n+=M(i,r)+`
|
|
29
|
+
`}return n.trim()}async function j(t,e){const r=/@import\s+([^;]+?)\s*;/g;return(async o=>{const s=[],i=o.replace(r,(c,a)=>{const l=ht(a,e).then(u=>j(u,e)).catch(u=>(console.warn(`\u65E0\u6CD5\u5BFC\u5165CSS\u6587\u4EF6: ${a}`,u),""));return s.push(l),`__IMPORT_PLACEHOLDER_${s.length-1}__`});if(s.length>0){const c=await Promise.all(s);let a=i;for(let l=0;l<c.length;l++)a=a.replace(`__IMPORT_PLACEHOLDER_${l}__`,c[l]);return a}return i})(t)}async function ht(t,e){if(e.importCache&&F.has(t))return F.get(t);const r=e.importBaseUrl?new URL(t,e.importBaseUrl).href:t;let n;if(typeof process<"u"&&process.versions&&process.versions.node&&typeof require<"u")try{const s=require("fs"),i=require("path");let c=r;r.startsWith(".")&&(c=i.join(process.cwd(),r)),n=s.readFileSync(c,"utf-8")}catch(s){throw new Error(`Node.js\u6587\u4EF6\u8BFB\u53D6\u5931\u8D25: ${r} - ${s.message}`)}else try{const s=new AbortController,i=setTimeout(()=>s.abort(),e.importTimeout),c=await fetch(r,{signal:s.signal,headers:{Accept:"text/css"}});if(clearTimeout(i),!c.ok)throw new Error(`HTTP\u9519\u8BEF: ${c.status} ${c.statusText}`);n=await c.text()}catch(s){throw s.name==="AbortError"?new Error(`\u5BFC\u5165\u8D85\u65F6: ${r}`):new Error(`\u65E0\u6CD5\u83B7\u53D6CSS: ${r} - ${s.message}`)}return e.importCache&&F.set(t,n),n}function x(t,e={}){const r=(s,i)=>{const{config:c,css:a}=q(s),l={...d,...e,...c},{globalVariables:u,selectorVariables:f,cssWithoutVars:p}=at(a,l);let h=p.trim();if(l.enableNesting&&p.includes("{"))try{h=lt(p,l)}catch(m){console.warn("\u5D4C\u5957\u89E3\u6790\u5931\u8D25\uFF0C\u4F7F\u7528\u539F\u59CBCSS:",m)}const g=ft(u,l);let b=h;return f.size>0&&(b=pt(h,f,l)),b=ut(b,u,f,l),g+b},n=t&&/@import\s+([^;]+?)\s*;/g.test(t),o={...d,...e};return n?(async()=>{try{const s=await j(t,o);return r(s,o)}catch(s){return console.error("@import\u5904\u7406\u5931\u8D25:",s),r(cleanedCSS,o)}})():r(t,o)}function G(t={}){const e={...d,...t},r=document.querySelectorAll(`style[${e.styleTagAttribute||"e"}]`);return r.forEach(n=>{let o=n.textContent;(async()=>{try{n.getAttribute("src")&&(o="@import "+n.getAttribute("src")+";");const i=await x(o,e),c=document.createElement("style");c.textContent=i,n.parentNode.insertBefore(c,n.nextSibling),e.preserveOriginal?n.style.display="none":n.remove()}catch(i){console.error("\u5904\u7406style\u6807\u7B7E\u5931\u8D25:",i)}})()}),r.length}function dt(t={}){d={...d,...t}}function I(t,e={}){const r={...d,...e};if(t){if(/@import\s+([^;]+?)\s*;/g.test(t))return(async()=>{try{const o=await x(t,r),s=document.createElement("style");return s.textContent=o,document.head.appendChild(s),s}catch(o){return console.error("\u5E94\u7528CSS\u5931\u8D25:",o),null}})();{const o=x(t,r),s=document.createElement("style");return s.textContent=o,document.head.appendChild(s),s}}else document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>{G(r)}):G(r)}const mt={convert:x,apply:I,config:dt,version:"1.9.0",supportsP3:z(),detectP3Support:z,imports:{clearCache:function(){F.clear()},setBaseUrl:function(t){d.importBaseUrl=t},setCacheEnabled:function(t){d.importCache=t},setTimeout:function(t){d.importTimeout=t}},math:{evaluate:function(t){return E(t,d)},parseUnit:A,round:Z,test:function(t,e={}){const r={...d,...e};try{const n=E(t,r);return{success:!0,expression:t,result:n,parsed:A(n.replace(/^calc\(|\)$/g,""))}}catch(n){return{success:!1,expression:t,error:n.message}}}},colorUtils:{labToRGB:S,lchToLab:w,lchToRGB:function(t,e,r){const n=w(t,e,r);return S(n.L,n.a,n.b)},labToP3:R,lchToP3:function(t,e,r){const n=w(t,e,r);return R(n.L,n.a,n.b)},parseHexLab:function(t){const e=t.match(/lab#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i);if(!e)return null;const r=e[1],n=e[2],o=e[3],s=parseInt(r,16)/255*100,i=(parseInt(n,16)-128)*1.5,c=(parseInt(o,16)-128)*1.5;return S(s,i,c)},parseHexLch:function(t){const e=t.match(/lch#([0-9a-f]{2})([0-9a-f]{2})(\d{1,3})/i);if(!e)return null;const r=e[1],n=e[2],o=e[3],s=parseInt(r,16)/255*100,i=parseInt(n,16)/255*150,c=parseInt(o)/100*360,a=w(s,i,c);return S(a.L,a.a,a.b)},generateColor:function(t,e,r,n=null,o=!0){return L(t,e,r,{enableP3:o},n)},parseColor:function(t){try{const e=t.match(/lab\(\s*([\d.]+)(%?)\s+([\d.-]+)\s+([\d.-]+)(?:\s*\/\s*([\d.%]+))?\s*\)/i);if(e){let n=parseFloat(e[1]);const o=parseFloat(e[3]),s=parseFloat(e[4]),i=e[5]?e[5].includes("%")?parseFloat(e[5])/100:parseFloat(e[5]):null,c=L(n,o,s,d,i);return{L:n,A:o,B:s,alpha:i,rgb:S(n,o,s),p3:R(n,o,s),colorString:c}}const r=t.match(/lch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)(deg)?(?:\s*\/\s*([\d.%]+))?\s*\)/i);if(r){let n=parseFloat(r[1]);const o=parseFloat(r[3]);let s=parseFloat(r[4]);const i=r[6]?r[6].includes("%")?parseFloat(r[6])/100:parseFloat(r[6]):null,c=w(n,o,s),a=L(c.L,c.a,c.b,d,i);return{L:n,C:o,H:s,alpha:i,lab:c,rgb:S(c.L,c.a,c.b),p3:R(c.L,c.a,c.b),colorString:a}}return null}catch(e){return console.warn("\u65E0\u6CD5\u89E3\u6790\u989C\u8272:",t,e),null}}}},P=function(...t){if(t.length>1||t[0]&&t[0].raw)return gt(...t);const e=t[0];if(typeof e=="string"){const r=x(e,{...d,...t[1]});return r&&typeof r.then=="function",r}return typeof e=="object"&&e!==null?(d={...d,...e},P):t.length===0?I():P};function gt(t,...e){let r=t[0];for(let o=0;o<e.length;o++){const s=e[o];let i="";typeof s=="function"?i=s():Array.isArray(s)?i=s.join(" "):i=String(s??""),r+=i+t[o+1]}const n=x(r,d);return n&&typeof n.then=="function",n}return Object.assign(P,mt),Object.setPrototypeOf(P,Function.prototype),typeof window<"u"&&(I(),Object.defineProperty(window.HTMLElement.prototype,"cssVar",{get(){const t=this;return new Proxy(()=>{},{get(e,r){const n=r.startsWith("--")?r:`--${r}`;return t.style.getPropertyValue(n)},set(e,r,n){const o=r.startsWith("--")?r:`--${r}`;return t.style.setProperty(o,n),!0},apply(e,r,n){const o=n[0],s=n[1],i=o.startsWith("--")?o:`--${o}`;if(s===void 0)return t.style.getPropertyValue(i);t.style.setProperty(i,s)}})}})),P});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "styimat",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "一个高效的CSS变量预处理库,支持Lab/LCH颜色空间自动转换、嵌套选择器和Display P3广色域,让现代CSS开发更简洁强大。",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"css",
|
|
@@ -17,19 +17,19 @@
|
|
|
17
17
|
"license": "MIT",
|
|
18
18
|
"author": "王小玗",
|
|
19
19
|
"type": "commonjs",
|
|
20
|
-
"main": "styimat.min.js",
|
|
21
|
-
"browser": "styimat.min.js",
|
|
22
|
-
"unpkg": "styimat.min.js",
|
|
23
|
-
"jsdelivr": "styimat.min.js",
|
|
20
|
+
"main": "dist/styimat.min.js",
|
|
21
|
+
"browser": "dist/styimat.min.js",
|
|
22
|
+
"unpkg": "dist/styimat.min.js",
|
|
23
|
+
"jsdelivr": "dist/styimat.min.js",
|
|
24
24
|
"files": [
|
|
25
|
-
"styimat.js",
|
|
26
|
-
"styimat.min.js",
|
|
25
|
+
"dist/styimat.js",
|
|
26
|
+
"dist/styimat.min.js",
|
|
27
27
|
"LICENSE",
|
|
28
28
|
"README.md",
|
|
29
|
-
"convert-styimat.js"
|
|
29
|
+
"bin/convert-styimat.js"
|
|
30
30
|
],
|
|
31
31
|
"bin": {
|
|
32
|
-
"styimat": "convert-styimat.js"
|
|
32
|
+
"styimat": "bin/convert-styimat.js"
|
|
33
33
|
},
|
|
34
34
|
"repository": {
|
|
35
35
|
"type": "git",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"homepage": "https://gitee.com/wxy6987/styimat#readme",
|
|
42
42
|
"scripts": {
|
|
43
43
|
"test": "echo \"No tests yet\" && exit 0",
|
|
44
|
-
"build:min": "npx esbuild styimat.js --minify --outfile=styimat.min.js",
|
|
44
|
+
"build:min": "npx esbuild dist/styimat.js --minify --outfile=dist/styimat.min.js",
|
|
45
45
|
"prepare": "npm run build:min",
|
|
46
46
|
"prepublishOnly": "npm run build:min",
|
|
47
47
|
"postpublish": "npm run git:auto-commit && npm run git:auto-tag",
|
package/styimat.min.js
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* MIT License
|
|
3
|
-
* Copyright (c) 2025 王小玗
|
|
4
|
-
*/(function(d,C){typeof define=="function"&&define.amd?define([],C):typeof module=="object"&&module.exports?module.exports=C():d.styimat=C()})(typeof self<"u"?self:this,function(){let d={rootSelector:":root",variablePrefix:"--",preserveOriginal:!1,indentSize:4,enableNesting:!0,autoProcessStyleTags:!0,styleTagAttribute:"e",convertLabToRGB:!0,convertLchToRGB:!0,enableP3:!0,enableMath:!0,mathPrecision:6,importBaseUrl:"",importCache:!0,importTimeout:5e3},C=null;const F=new Map;function q(t){const e={...d},r=t.split(`
|
|
5
|
-
`),n=[];for(let o of r){const s=o.trim();if(s.startsWith("#")){const i=s.substring(1).trim(),c=i.indexOf(" ");if(c!==-1){const l=i.substring(0,c).trim(),a=i.substring(c+1).trim(),u=Y(l);u in e?a==="true"||a==="false"?e[u]=a==="true":!isNaN(a)&&a.trim()!==""?e[u]=Number(a):e[u]=a:console.warn(`\u672A\u77E5\u7684\u914D\u7F6E\u9879: ${l}`)}else console.warn(`\u65E0\u6548\u7684\u914D\u7F6E\u884C: ${s}`)}else n.push(o)}return{config:e,css:n.join(`
|
|
6
|
-
`)}}function Y(t){return t.replace(/-([a-z])/g,function(e,r){return r.toUpperCase()})}function z(){if(C!==null)return C;if(typeof window>"u"||!window.CSS)return C=!1,!1;try{C=CSS.supports("color","color(display-p3 1 0 0)")}catch(t){console.warn("P3\u652F\u6301\u68C0\u6D4B\u5931\u8D25:",t),C=!1}return C}function V(t){let e=t.trim();if(e.endsWith(";")&&(e=e.slice(0,-1)),!e)return[];const r=[];let n="",o=0,s=!1,i="";for(let l=0;l<e.length;l++){const a=e[l];(a==='"'||a==="'")&&!s?(s=!0,i=a):a===i&&s&&(s=!1,i=""),s||(a==="("?o++:a===")"&&o--),a===";"&&!s&&o===0?n.trim()&&(r.push(n.trim()),n=""):n+=a}n.trim()&&r.push(n.trim());const c=[];for(const l of r){if(!l.trim())continue;const a=D(l);if(a===-1){console.warn(`\u65E0\u6548\u7684CSS\u58F0\u660E: "${l}"`);continue}const u=l.substring(0,a).trim();let f=l.substring(a+1).trim();f.endsWith(";")&&(f=f.slice(0,-1).trim()),c.push({[u]:f})}return c}function D(t){let e=!1,r="";for(let n=0;n<t.length;n++){const o=t[n];if((o==='"'||o==="'")&&!e?(e=!0,r=o):o===r&&e&&(e=!1,r=""),o===":"&&!e)return n}return-1}function E(t,e){if(!e.enableMath)return`math(${t})`;try{let r=t.replace(/\s+/g,"");const n=_(r,e);return Q(r)?K(r,n):Z(n,e.mathPrecision)}catch(r){return console.warn("math()\u8868\u8FBE\u5F0F\u89E3\u6790\u5931\u8D25:",t,r),`math(${t})`}}function _(t,e){for(;t.includes("(")&&t.includes(")");){const r=t.lastIndexOf("("),n=t.indexOf(")",r);if(n===-1)break;const o=t.substring(r+1,n),s=_(o,e);t=t.substring(0,r)+s+t.substring(n+1)}return W(t,e)}function W(t,e){const r=[{regex:/([\d.]+(?:[a-zA-Z%]+)?)\*([\d.]+(?:[a-zA-Z%]+)?)/,handler:J},{regex:/([\d.]+(?:[a-zA-Z%]+)?)\/([\d.]+(?:[a-zA-Z%]+)?)/,handler:tt},{regex:/([\d.]+(?:[a-zA-Z%]+)?)\+([\d.]+(?:[a-zA-Z%]+)?)/,handler:et},{regex:/([\d.]+(?:[a-zA-Z%]+)?)-([\d.]+(?:[a-zA-Z%]+)?)/,handler:nt}];let n=t;for(const s of r){let i;for(;(i=t.match(s.regex))!==null;){const c=A(i[1]),l=A(i[2]),a=s.handler(c,l);t=t.substring(0,i.index)+a.value+t.substring(i.index+i[0].length)}}return t!==n?W(t,e):A(t).value}function A(t){const e=t.match(/^([\d.]+)([a-zA-Z%]*)$/);if(!e)throw new Error(`\u65E0\u6CD5\u89E3\u6790\u503C: ${t}`);const r=parseFloat(e[1]),n=e[2]||"";return{value:r,unit:n}}function Q(t){return/[a-zA-Z%]/.test(t)}function K(t,e){const r=t.match(/([a-zA-Z%]+)(?!.*[a-zA-Z%])/);return r?e+r[1]:t.includes("%")?e+"%":e+"px"}function J(t,e){return t.unit===e.unit||!t.unit&&!e.unit?{value:t.value*e.value,unit:t.unit||e.unit}:{value:`${t.value}${t.unit}*${e.value}${e.unit}`,unit:""}}function tt(t,e){if(e.value===0)throw new Error("\u9664\u4EE5\u96F6");return t.unit&&!e.unit?{value:t.value/e.value,unit:t.unit}:t.unit===e.unit?{value:t.value/e.value,unit:""}:{value:`${t.value}${t.unit}/${e.value}${e.unit}`,unit:""}}function et(t,e){return t.unit===e.unit?{value:t.value+e.value,unit:t.unit}:{value:`${t.value}${t.unit}+${e.value}${e.unit}`,unit:""}}function nt(t,e){return t.unit===e.unit?{value:t.value-e.value,unit:t.unit}:{value:`${t.value}${t.unit}-${e.value}${e.unit}`,unit:""}}function Z(t,e=6){const r=Math.pow(10,e),o=(Math.round(t*r)/r).toString();return o.includes(".")?o.replace(/(\.\d*?)0+$/,"$1").replace(/\.$/,""):o}function rt(t,e){if(!e.enableMath)return t;let r=t;const n=/math\(([^)]+)\)/gi,o=i=>i.replace(n,(c,l)=>E(l,e));let s;do s=r,r=o(r);while(r!==s&&r.includes("math("));return r}function st(t,e){if(!e.convertLabToRGB&&!e.convertLchToRGB)return t;let r=t;r=ot(r,e);const n=/(lab|lch)\([^)]+\)/gi,o=new Map,s=c=>c.replace(n,l=>{if(o.has(l))return o.get(l);let a=l;return l.toLowerCase().startsWith("lab(")?e.convertLabToRGB&&(a=ct(l,e)):l.toLowerCase().startsWith("lch(")&&e.convertLchToRGB&&(a=it(l,e)),o.set(l,a),a});let i;do i=r,r=s(r);while(r!==i);return r}function ot(t,e){let r=t;const n=/lab#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/gi,o=/lch#([0-9a-f]{2})([0-9a-f]{2})(\d{1,3})/gi,s=new Map;return r=r.replace(n,(i,c,l,a)=>{if(s.has(i))return s.get(i);try{const u=parseInt(c,16)/255*100,f=(parseInt(l,16)-128)*1.5,p=(parseInt(a,16)-128)*1.5,h=L(u,f,p,e);return s.set(i,h),h}catch(u){return console.warn(`\u65E0\u6CD5\u89E3\u6790lab#\u5341\u516D\u8FDB\u5236\u989C\u8272: ${i}`,u),i}}),r=r.replace(o,(i,c,l,a)=>{if(s.has(i))return s.get(i);try{const u=parseInt(c,16)/255*100,f=parseInt(l,16)/255*150,p=parseInt(a)/100*360,h=w(u,f,p),g=L(h.L,h.a,h.b,e);return s.set(i,g),g}catch(u){return console.warn(`\u65E0\u6CD5\u89E3\u6790lch#\u5341\u516D\u8FDB\u5236\u989C\u8272: ${i}`,u),i}}),r}function ct(t,e){const r=/lab\(\s*([\d.]+)(%?)\s+([\d.-]+)\s+([\d.-]+)(?:\s*\/\s*([\d.%]+))?\s*\)/i,n=t.match(r);if(!n)return t;try{let o=parseFloat(n[1]);n[2]==="%"?o=o:(o<0&&(o=0),o>100&&(o=100));const s=parseFloat(n[3]),i=parseFloat(n[4]),c=n[5]!==void 0?n[5].includes("%")?parseFloat(n[5])/100:parseFloat(n[5]):null;return L(o,s,i,e,c)}catch(o){return console.warn(`\u65E0\u6CD5\u8F6C\u6362LAB\u989C\u8272: ${t}`,o),t}}function it(t,e){const r=/lch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)(deg)?(?:\s*\/\s*([\d.%]+))?\s*\)/i,n=t.match(r);if(!n)return t;try{let o=parseFloat(n[1]);n[2]==="%"?o=o:(o<0&&(o=0),o>100&&(o=100));const s=parseFloat(n[3]);let i=parseFloat(n[4]);s<0&&console.warn(`LCH\u4E2D\u7684C\u503C\u4E0D\u80FD\u4E3A\u8D1F: ${s}`),i=(i%360+360)%360;const c=w(o,s,i),l=n[6]!==void 0?n[6].includes("%")?parseFloat(n[6])/100:parseFloat(n[6]):null;return L(c.L,c.a,c.b,e,l)}catch(o){return console.warn(`\u65E0\u6CD5\u8F6C\u6362LCH\u989C\u8272: ${t}`,o),t}}function w(t,e,r){const n=r*Math.PI/180,o=e*Math.cos(n),s=e*Math.sin(n);return{L:t,a:o,b:s}}function S(t,e,r){const n=(m,y,v)=>{const X=(m+16)/116,B=y/500+X,O=X-v/200,bt=B**3>.008856?B**3:(116*B-16)/903.3,yt=m>903.3*.008856?((m+16)/116)**3:m/903.3,$t=O**3>.008856?O**3:(116*O-16)/903.3;return[bt*.95047,yt*1,$t*1.08883]},o=(m,y,v)=>{const $=[[3.2404542,-1.5371385,-.4985314],[-.969266,1.8760108,.041556],[.0556434,-.2040259,1.0572252]],T=$[0][0]*m+$[0][1]*y+$[0][2]*v,N=$[1][0]*m+$[1][1]*y+$[1][2]*v,U=$[2][0]*m+$[2][1]*y+$[2][2]*v;return[T,N,U]},s=m=>{const y=m<0?-1:1,v=Math.abs(m);return v<=.0031308?y*12.92*v:y*(1.055*Math.pow(v,.4166666666666667)-.055)},i=m=>Math.max(0,Math.min(255,Math.round(m*255))),[c,l,a]=n(t,e,r),[u,f,p]=o(c,l,a),h=s(u),g=s(f),b=s(p);return{r:i(h),g:i(g),b:i(b)}}function R(t,e,r){const n=(c,l,a)=>{const b=(c+16)/116,m=l/500+b,y=b-a/200,v=m**3>.008856?m**3:(116*m-16)/903.3,$=c>903.3*.008856?((c+16)/116)**3:c/903.3,T=y**3>.008856?y**3:(116*y-16)/903.3;return[v*.95047,$*1,T*1.08883]},o=(c,l,a)=>{const u=[[2.493496911941425,-.9313836179191239,-.40271078445071684],[-.8294889695615747,1.7626640603183463,.023624685841943577],[.03584583024378447,-.07617238926804182,.9568845240076872]],f=u[0][0]*c+u[0][1]*l+u[0][2]*a,p=u[1][0]*c+u[1][1]*l+u[1][2]*a,h=u[2][0]*c+u[2][1]*l+u[2][2]*a;return[f,p,h]},s=c=>{const l=c<0?-1:1,a=Math.abs(c);return a<=.0031308?l*12.92*a:l*(1.055*Math.pow(a,.4166666666666667)-.055)},i=c=>Math.max(0,Math.min(255,Math.round(c*255)));try{const[c,l,a]=n(t,e,r),[u,f,p]=o(c,l,a),h=s(u),g=s(f),b=s(p);return{r:Math.max(0,Math.min(1,h)),g:Math.max(0,Math.min(1,g)),b:Math.max(0,Math.min(1,b))}}catch(c){console.warn("P3\u8F6C\u6362\u5931\u8D25:",c);const l=S(t,e,r);return{r:l.r/255,g:l.g/255,b:l.b/255}}}function L(t,e,r,n,o=null){if(!n.enableP3||!z()){const s=S(t,e,r);return o!==null?`rgba(${s.r}, ${s.g}, ${s.b}, ${o})`:`rgb(${s.r}, ${s.g}, ${s.b})`}else{const s=R(t,e,r);return o!==null?`color(display-p3 ${s.r.toFixed(4)} ${s.g.toFixed(4)} ${s.b.toFixed(4)} / ${o})`:`color(display-p3 ${s.r.toFixed(4)} ${s.g.toFixed(4)} ${s.b.toFixed(4)})`}}function M(t,e){let r=t;return e.enableMath&&(r=rt(r,e)),(e.convertLabToRGB||e.convertLchToRGB)&&(r=st(r,e)),r}function lt(t,e){const r=t.split(`
|
|
7
|
-
`),n={},o=new Map;let s="",i=null,c=!1,l=0;for(let a of r){const u=a.trim(),f=u.match(/^\$([a-zA-Z0-9_-]+)\s*:\s*(.+?);?$/);if(f){const[,p,h]=f,g=M(H(h.trim(),{...n,...i?o.get(i)||{}:{}}),e);i?(o.has(i)||o.set(i,{}),o.get(i)[p]=g):n[p]=g;continue}if(u.endsWith("{")){i=u.slice(0,-1).trim(),c=!0,s+=a+`
|
|
8
|
-
`;continue}if(u==="}"){if(c&&i&&o.has(i)){const p=o.get(i),h=" ".repeat(l);for(const[g,b]of Object.entries(p))s+=`${h} --${g}: ${b};
|
|
9
|
-
`}c=!1,i=null}s+=a+`
|
|
10
|
-
`,a.includes("{")&&(l+=e.indentSize),a.includes("}")&&(l=Math.max(0,l-e.indentSize))}return{globalVariables:n,selectorVariables:o,cssWithoutVars:s.trim()}}function at(t,e){const r=t.split(`
|
|
11
|
-
`),n=[],o=[];let s=0;for(let i=0;i<r.length;i++){const c=r[i],l=c.trim();if(!l)continue;const a=c.match(/^(\s*)/)[0].length;if(l==="}"){if(n.length>0){const u=n.pop();if(n.length>0){const f=n[n.length-1];f.children||(f.children=[]),f.children.push(u)}else o.push(u)}continue}if(l.endsWith("{")){const f={selector:l.slice(0,-1).trim(),properties:[],children:[]};n.push(f);continue}if(!l.includes("{")&&!l.includes("}")&&l.includes(":")){if(n.length>0){const u=n[n.length-1];V(l).forEach(p=>{const h=Object.keys(p)[0],g=M(p[h],e);u.properties.push(`${h}: ${g}`)})}continue}}for(;n.length>0;){const i=n.pop();if(n.length===0)o.push(i);else{const c=n[n.length-1];c.children||(c.children=[]),c.children.push(i)}}return k(o,e)}function k(t,e,r=""){let n="";const o=r.startsWith("@");for(const s of t){const i=s.selector.startsWith("@");let c=(o?" ".repeat(e.indentSize):"")+s.selector;if(i&&(c=s.selector+` {
|
|
12
|
-
`),r&&(c.includes("&")?c=c.replace(/&/g,r):c.trim().startsWith(":")?c=r+c:c=r+(o?"":" ")+c),s.properties.length>0){n+=(i?"":c)+` {
|
|
13
|
-
`;for(const l of s.properties)V(l).forEach(u=>{const f=Object.keys(u)[0],p=M(u[f],e);n+=(o?" ".repeat(e.indentSize):"")+" ".repeat(e.indentSize)+`${f}: ${p};
|
|
14
|
-
`});n+=o?" ".repeat(e.indentSize)+`}
|
|
15
|
-
`:`}
|
|
16
|
-
|
|
17
|
-
`}s.children&&s.children.length>0&&(n+=k(s.children,e,c)),o&&(n+=`}
|
|
18
|
-
|
|
19
|
-
`)}return n.trim()+`
|
|
20
|
-
|
|
21
|
-
`}function H(t,e){return t.replace(/\$([a-zA-Z0-9_-]+)/g,(r,n)=>e[n]?`var(--${n})`:r)}function ut(t,e,r,n){let o=t;return o=o.replace(/(?:\$\$|\$)([a-zA-Z0-9_-]+)/g,(s,i)=>s.startsWith("$$")?`attr(${i})`:`var(--${i})`),o=M(o,n),o}function ft(t,e){if(Object.keys(t).length===0)return"";const r=Object.entries(t).map(([n,o])=>{const s=M(H(o,t),e);return" ".repeat(e.indentSize)+`--${n}: ${s};`}).join(`
|
|
22
|
-
`);return`${e.rootSelector} {
|
|
23
|
-
${r}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
`}function pt(t,e,r){let n="";const o=t.split(`
|
|
27
|
-
`);let s=null;for(let i of o){const c=i.trim();if(c.endsWith("{")&&(s=c.slice(0,-1).trim()),c==="}"&&s){if(e.has(s)){const l=e.get(s),a=i.match(/^(\s*)/)[0];for(const[u,f]of Object.entries(l))n+=" --"+u+": "+f+`;
|
|
28
|
-
`}s=null}n+=M(i,r)+`
|
|
29
|
-
`}return n.trim()}async function j(t,e){const r=/@import\s+(?:url\()?["']([^"']+)["'](?:\))?[^;]*;/g;return(async o=>{const s=[],i=o.replace(r,(c,l)=>{const a=ht(l,e).then(u=>j(u,e)).catch(u=>(console.warn(`\u65E0\u6CD5\u5BFC\u5165CSS\u6587\u4EF6: ${l}`,u),""));return s.push(a),`__IMPORT_PLACEHOLDER_${s.length-1}__`});if(s.length>0){const c=await Promise.all(s);let l=i;for(let a=0;a<c.length;a++)l=l.replace(`__IMPORT_PLACEHOLDER_${a}__`,c[a]);return l}return i})(t)}async function ht(t,e){if(e.importCache&&F.has(t))return F.get(t);const r=e.importBaseUrl?new URL(t,e.importBaseUrl).href:t;let n;if(typeof process<"u"&&process.versions&&process.versions.node&&typeof require<"u")try{const s=require("fs"),i=require("path");let c=r;r.startsWith(".")&&(c=i.join(process.cwd(),r)),n=s.readFileSync(c,"utf-8")}catch(s){throw new Error(`Node.js\u6587\u4EF6\u8BFB\u53D6\u5931\u8D25: ${r} - ${s.message}`)}else try{const s=new AbortController,i=setTimeout(()=>s.abort(),e.importTimeout),c=await fetch(r,{signal:s.signal,headers:{Accept:"text/css"}});if(clearTimeout(i),!c.ok)throw new Error(`HTTP\u9519\u8BEF: ${c.status} ${c.statusText}`);n=await c.text()}catch(s){throw s.name==="AbortError"?new Error(`\u5BFC\u5165\u8D85\u65F6: ${r}`):new Error(`\u65E0\u6CD5\u83B7\u53D6CSS: ${r} - ${s.message}`)}return e.importCache&&F.set(t,n),n}function x(t,e={}){const r=(s,i)=>{const{config:c,css:l}=q(s),a={...d,...e,...c},{globalVariables:u,selectorVariables:f,cssWithoutVars:p}=lt(l,a);let h=p.trim();if(a.enableNesting&&p.includes("{"))try{h=at(p,a)}catch(m){console.warn("\u5D4C\u5957\u89E3\u6790\u5931\u8D25\uFF0C\u4F7F\u7528\u539F\u59CBCSS:",m)}const g=ft(u,a);let b=h;return f.size>0&&(b=pt(h,f,a)),b=ut(b,u,f,a),g+b},n=t&&/@import\s+(?:url\()?["']([^"']+)["']/i.test(t),o={...d,...e};return n?(async()=>{try{const s=await j(t,o);return r(s,o)}catch(s){return console.error("@import\u5904\u7406\u5931\u8D25:",s),r(cleanedCSS,o)}})():r(t,o)}function G(t={}){const e={...d,...t},r=document.querySelectorAll(`style[${e.styleTagAttribute||"e"}]`);return r.forEach(n=>{let o=n.textContent;(async()=>{try{n.getAttribute("src")&&(o='@import url("'+n.getAttribute("src")+'");');const i=await x(o,e),c=document.createElement("style");c.textContent=i,n.parentNode.insertBefore(c,n.nextSibling),e.preserveOriginal?n.style.display="none":n.remove()}catch(i){console.error("\u5904\u7406style\u6807\u7B7E\u5931\u8D25:",i)}})()}),r.length}function dt(t={}){d={...d,...t}}function I(t,e={}){const r={...d,...e};if(t){if(/@import\s+(?:url\()?["']([^"']+)["']/i.test(t))return(async()=>{try{const o=await x(t,r),s=document.createElement("style");return s.textContent=o,document.head.appendChild(s),s}catch(o){return console.error("\u5E94\u7528CSS\u5931\u8D25:",o),null}})();{const o=x(t,r),s=document.createElement("style");return s.textContent=o,document.head.appendChild(s),s}}else document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>{G(r)}):G(r)}const mt={convert:x,apply:I,config:dt,version:"1.9.0",supportsP3:z(),detectP3Support:z,imports:{clearCache:function(){F.clear()},setBaseUrl:function(t){d.importBaseUrl=t},setCacheEnabled:function(t){d.importCache=t},setTimeout:function(t){d.importTimeout=t}},math:{evaluate:function(t){return E(t,d)},parseUnit:A,round:Z,test:function(t,e={}){const r={...d,...e};try{const n=E(t,r);return{success:!0,expression:t,result:n,parsed:A(n.replace(/^calc\(|\)$/g,""))}}catch(n){return{success:!1,expression:t,error:n.message}}}},colorUtils:{labToRGB:S,lchToLab:w,lchToRGB:function(t,e,r){const n=w(t,e,r);return S(n.L,n.a,n.b)},labToP3:R,lchToP3:function(t,e,r){const n=w(t,e,r);return R(n.L,n.a,n.b)},parseHexLab:function(t){const e=t.match(/lab#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i);if(!e)return null;const r=e[1],n=e[2],o=e[3],s=parseInt(r,16)/255*100,i=(parseInt(n,16)-128)*1.5,c=(parseInt(o,16)-128)*1.5;return S(s,i,c)},parseHexLch:function(t){const e=t.match(/lch#([0-9a-f]{2})([0-9a-f]{2})(\d{1,3})/i);if(!e)return null;const r=e[1],n=e[2],o=e[3],s=parseInt(r,16)/255*100,i=parseInt(n,16)/255*150,c=parseInt(o)/100*360,l=w(s,i,c);return S(l.L,l.a,l.b)},generateColor:function(t,e,r,n=null,o=!0){return L(t,e,r,{enableP3:o},n)},parseColor:function(t){try{const e=t.match(/lab\(\s*([\d.]+)(%?)\s+([\d.-]+)\s+([\d.-]+)(?:\s*\/\s*([\d.%]+))?\s*\)/i);if(e){let n=parseFloat(e[1]);const o=parseFloat(e[3]),s=parseFloat(e[4]),i=e[5]?e[5].includes("%")?parseFloat(e[5])/100:parseFloat(e[5]):null,c=L(n,o,s,d,i);return{L:n,A:o,B:s,alpha:i,rgb:S(n,o,s),p3:R(n,o,s),colorString:c}}const r=t.match(/lch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)(deg)?(?:\s*\/\s*([\d.%]+))?\s*\)/i);if(r){let n=parseFloat(r[1]);const o=parseFloat(r[3]);let s=parseFloat(r[4]);const i=r[6]?r[6].includes("%")?parseFloat(r[6])/100:parseFloat(r[6]):null,c=w(n,o,s),l=L(c.L,c.a,c.b,d,i);return{L:n,C:o,H:s,alpha:i,lab:c,rgb:S(c.L,c.a,c.b),p3:R(c.L,c.a,c.b),colorString:l}}return null}catch(e){return console.warn("\u65E0\u6CD5\u89E3\u6790\u989C\u8272:",t,e),null}}}},P=function(...t){if(t.length>1||t[0]&&t[0].raw)return gt(...t);const e=t[0];if(typeof e=="string"){const r=x(e,{...d,...t[1]});return r&&typeof r.then=="function",r}return typeof e=="object"&&e!==null?(d={...d,...e},P):t.length===0?I():P};function gt(t,...e){let r=t[0];for(let o=0;o<e.length;o++){const s=e[o];let i="";typeof s=="function"?i=s():Array.isArray(s)?i=s.join(" "):i=String(s??""),r+=i+t[o+1]}const n=x(r,d);return n&&typeof n.then=="function",n}return Object.assign(P,mt),Object.setPrototypeOf(P,Function.prototype),typeof window<"u"&&(I(),Object.defineProperty(window.HTMLElement.prototype,"cssVar",{get(){const t=this;return new Proxy(()=>{},{get(e,r){const n=r.startsWith("--")?r:`--${r}`;return t.style.getPropertyValue(n)},set(e,r,n){const o=r.startsWith("--")?r:`--${r}`;return t.style.setProperty(o,n),!0},apply(e,r,n){const o=n[0],s=n[1],i=o.startsWith("--")?o:`--${o}`;if(s===void 0)return t.style.getPropertyValue(i);t.style.setProperty(i,s)}})}})),P});
|
|
File without changes
|