aberdeen 1.4.3 → 1.5.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/dist/aberdeen.d.ts +7 -4
- package/dist/aberdeen.js +25 -3
- package/dist/aberdeen.js.map +3 -3
- package/dist-min/aberdeen.js +6 -4
- package/dist-min/aberdeen.js.map +3 -3
- package/package.json +1 -1
- package/skill/SKILL.md +12 -7
- package/src/aberdeen.ts +34 -6
package/dist/aberdeen.d.ts
CHANGED
|
@@ -252,17 +252,20 @@ export declare function merge<T extends object>(dst: T, dstKey: keyof T, value:
|
|
|
252
252
|
*/
|
|
253
253
|
export declare const NO_COPY: unique symbol;
|
|
254
254
|
/**
|
|
255
|
-
* CSS
|
|
255
|
+
* CSS variables that are output as native CSS custom properties.
|
|
256
256
|
*
|
|
257
|
-
* When a CSS value starts with `@`,
|
|
257
|
+
* When a CSS value starts with `@`, it becomes `var(--name)` (or `var(--mN)` for numeric keys).
|
|
258
258
|
* Pre-initialized with keys '1'-'12' mapping to an exponential rem scale (e.g., @1=0.25rem, @3=1rem).
|
|
259
259
|
*
|
|
260
|
+
* Changes to cssVars are automatically reflected in a `<style>` tag in `<head>`, making updates
|
|
261
|
+
* reactive across all elements using those variables.
|
|
262
|
+
*
|
|
260
263
|
* @example
|
|
261
264
|
* ```typescript
|
|
262
265
|
* cssVars.primary = '#3b82f6';
|
|
263
266
|
* cssVars[3] = '16px'; // Override @3 to be 16px instead of 1rem
|
|
264
|
-
* $('p color:@primary'); // Sets color to
|
|
265
|
-
* $('div mt:@3'); // Sets margin-top to
|
|
267
|
+
* $('p color:@primary'); // Sets color to var(--primary)
|
|
268
|
+
* $('div mt:@3'); // Sets margin-top to var(--m3)
|
|
266
269
|
* ```
|
|
267
270
|
*/
|
|
268
271
|
export declare const cssVars: Record<string, string>;
|
package/dist/aberdeen.js
CHANGED
|
@@ -1067,6 +1067,11 @@ var cssVars = optProxy({});
|
|
|
1067
1067
|
for (let i = 1;i <= 12; i++) {
|
|
1068
1068
|
cssVars[i] = 2 ** (i - 3) + "rem";
|
|
1069
1069
|
}
|
|
1070
|
+
var DIGIT_FIRST = /^\d/;
|
|
1071
|
+
function cssVarRef(name) {
|
|
1072
|
+
const varName = DIGIT_FIRST.test(name) ? `m${name}` : name;
|
|
1073
|
+
return `var(--${varName})`;
|
|
1074
|
+
}
|
|
1070
1075
|
function clone(src) {
|
|
1071
1076
|
if (NO_COPY in src)
|
|
1072
1077
|
return src;
|
|
@@ -1305,7 +1310,7 @@ ${styleToCss(v, prefix)}}
|
|
|
1305
1310
|
rules += styleToCss(v, k.includes("&") ? k.replace(/&/g, prefix) : `${prefix} ${k}`);
|
|
1306
1311
|
}
|
|
1307
1312
|
} else {
|
|
1308
|
-
const val = v == null || v === false ? "" : typeof v === "string" ? v[0] === "@" ?
|
|
1313
|
+
const val = v == null || v === false ? "" : typeof v === "string" ? v[0] === "@" ? cssVarRef(v.substring(1)) : v : String(v);
|
|
1309
1314
|
const expanded = CSS_SHORT[k] || k;
|
|
1310
1315
|
for (const prop of Array.isArray(expanded) ? expanded : [expanded]) {
|
|
1311
1316
|
props += `${prop.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}:${val};`;
|
|
@@ -1333,7 +1338,7 @@ function applyArg(el, key, value) {
|
|
|
1333
1338
|
el.classList.remove(...classes);
|
|
1334
1339
|
} else if (key[0] === "$") {
|
|
1335
1340
|
key = key.substring(1);
|
|
1336
|
-
const val = value == null || value === false ? "" : typeof value === "string" ? value[0] === "@" ?
|
|
1341
|
+
const val = value == null || value === false ? "" : typeof value === "string" ? value[0] === "@" ? cssVarRef(value.substring(1)) : value : String(value);
|
|
1337
1342
|
const expanded = CSS_SHORT[key] || key;
|
|
1338
1343
|
if (typeof expanded === "string") {
|
|
1339
1344
|
el.style[expanded] = val;
|
|
@@ -1502,6 +1507,23 @@ function withEmitHandler(handler, func) {
|
|
|
1502
1507
|
emit = oldEmitHandler;
|
|
1503
1508
|
}
|
|
1504
1509
|
}
|
|
1510
|
+
if (typeof document !== "undefined") {
|
|
1511
|
+
leakScope(() => {
|
|
1512
|
+
mount(document.head, () => {
|
|
1513
|
+
$("style", () => {
|
|
1514
|
+
let css = `:root {
|
|
1515
|
+
`;
|
|
1516
|
+
for (const [key, value] of Object.entries(cssVars)) {
|
|
1517
|
+
const varName = DIGIT_FIRST.test(String(key)) ? `m${key}` : key;
|
|
1518
|
+
css += ` --${varName}: ${value};
|
|
1519
|
+
`;
|
|
1520
|
+
}
|
|
1521
|
+
css += "}";
|
|
1522
|
+
$(`#${css}`);
|
|
1523
|
+
});
|
|
1524
|
+
});
|
|
1525
|
+
});
|
|
1526
|
+
}
|
|
1505
1527
|
export {
|
|
1506
1528
|
withEmitHandler,
|
|
1507
1529
|
unproxy,
|
|
@@ -1535,5 +1557,5 @@ export {
|
|
|
1535
1557
|
$
|
|
1536
1558
|
};
|
|
1537
1559
|
|
|
1538
|
-
//# debugId=
|
|
1560
|
+
//# debugId=69BD2D56BBDAB97164756E2164756E21
|
|
1539
1561
|
//# sourceMappingURL=aberdeen.js.map
|