@plumeria/core 2.4.2 → 3.0.1
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/css.d.ts +78 -0
- package/dist/css.js +27 -79
- package/dist/css.mjs +27 -41
- package/package.json +9 -14
- package/dist/index.d.ts +0 -16
- package/dist/index.js +0 -224
- package/dist/index.mjs +0 -223
- package/dist/processors/css.d.ts +0 -15
- package/dist/processors/css.js +0 -3
- package/dist/processors/css.mjs +0 -2
package/dist/css.d.ts
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { Properties, Property } from "csstype";
|
|
2
|
+
|
|
3
|
+
type CSSVariableKey = `--${string}`;
|
|
4
|
+
type CSSVariableValue = `var(${CSSVariableKey})`;
|
|
5
|
+
type CSSVariableProperty = {
|
|
6
|
+
[key: CSSVariableKey]: string | number;
|
|
7
|
+
};
|
|
8
|
+
type ColorValue = Exclude<Property.Color, '-moz-initial'> | (string & {});
|
|
9
|
+
type CSSColorProperty = Exclude<ColorValue, SystemColorKeyword>;
|
|
10
|
+
type SystemColorKeyword = 'ActiveBorder' | 'ActiveCaption' | 'AppWorkspace' | 'Background' | 'ButtonFace' | 'ButtonHighlight' | 'ButtonShadow' | 'ButtonText' | 'CaptionText' | 'GrayText' | 'Highlight' | 'HighlightText' | 'InactiveBorder' | 'InactiveCaption' | 'InactiveCaptionText' | 'InfoBackground' | 'InfoText' | 'Menu' | 'MenuText' | 'Scrollbar' | 'ThreeDDarkShadow' | 'ThreeDFace' | 'ThreeDHighlight' | 'ThreeDLightShadow' | 'ThreeDShadow' | 'Window' | 'WindowFrame' | 'WindowText';
|
|
11
|
+
type ExcludeMozInitial<T> = Exclude<T, '-moz-initial'>;
|
|
12
|
+
type CSSTypeProperties = Properties<number | (string & {})>;
|
|
13
|
+
type CustomProperties = { [K in keyof CSSTypeProperties]: ExcludeMozInitial<CSSTypeProperties[K]> };
|
|
14
|
+
type BaseCSSProperties = { [K in keyof CustomProperties]: CustomProperties[K] | CSSVariableValue };
|
|
15
|
+
interface CommonProperties extends BaseCSSProperties {
|
|
16
|
+
accentColor?: CSSColorProperty;
|
|
17
|
+
color?: CSSColorProperty;
|
|
18
|
+
borderLeftColor?: CSSColorProperty;
|
|
19
|
+
borderRightColor?: CSSColorProperty;
|
|
20
|
+
borderTopColor?: CSSColorProperty;
|
|
21
|
+
borderBottomColor?: CSSColorProperty;
|
|
22
|
+
borderBlockColor?: CSSColorProperty;
|
|
23
|
+
borderBlockStartColor?: CSSColorProperty;
|
|
24
|
+
borderBlockEndColor?: CSSColorProperty;
|
|
25
|
+
borderInlineColor?: CSSColorProperty;
|
|
26
|
+
borderInlineStartColor?: CSSColorProperty;
|
|
27
|
+
borderInlineEndColor?: CSSColorProperty;
|
|
28
|
+
backgroundColor?: CSSColorProperty;
|
|
29
|
+
outlineColor?: CSSColorProperty;
|
|
30
|
+
textDecorationColor?: CSSColorProperty;
|
|
31
|
+
caretColor?: CSSColorProperty;
|
|
32
|
+
columnRuleColor?: CSSColorProperty;
|
|
33
|
+
}
|
|
34
|
+
type AndString = `&${string}`;
|
|
35
|
+
type AndSelector = { [key in AndString]: CommonProperties };
|
|
36
|
+
type ColonString = `:${string}`;
|
|
37
|
+
type ColonSelector = { [key in ColonString]: CommonProperties };
|
|
38
|
+
type Query = `@media ${string}` | `@container ${string}`;
|
|
39
|
+
type QuerySelector = { [K in Query]: CommonProperties | ColonSelector | AndSelector | CSSVariableProperty };
|
|
40
|
+
type CSSProperties = CommonProperties | AndSelector | ColonSelector | QuerySelector | CSSVariableProperty;
|
|
41
|
+
type CreateStyleType<T> = { readonly [K in keyof T]: T[K] extends CSSProperties ? CSSProperties : T[K] };
|
|
42
|
+
type CreateStyle = {
|
|
43
|
+
[key: string]: CSSProperties;
|
|
44
|
+
};
|
|
45
|
+
type Selector<Properties> = {
|
|
46
|
+
readonly properties: Properties;
|
|
47
|
+
};
|
|
48
|
+
type ReturnType<T> = { [K in keyof T]: Readonly<{ [P in keyof T[K]]: P extends `@media ${string}` | `@container ${string}` | `:${string}` | `&${string}` ? Selector<keyof T[K][P]> : T[K][P] }> };
|
|
49
|
+
type CreateStatic = Record<string, string | number>;
|
|
50
|
+
type CreateTheme = Record<string, Record<string, string | number>>;
|
|
51
|
+
type ReturnVariableType<T> = { [K in keyof T]: CSSVariableValue };
|
|
52
|
+
type Styles = {
|
|
53
|
+
[key: CSSVariableKey]: string;
|
|
54
|
+
};
|
|
55
|
+
type KeyframesInSelector = 'from' | 'to' | `${number}%`;
|
|
56
|
+
type Keyframes = { [K in KeyframesInSelector]?: CSSProperties };
|
|
57
|
+
type ViewTransition = {
|
|
58
|
+
group?: CSSProperties;
|
|
59
|
+
imagePair?: CSSProperties;
|
|
60
|
+
new?: CSSProperties;
|
|
61
|
+
old?: CSSProperties;
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
declare const css: {
|
|
65
|
+
new (): {};
|
|
66
|
+
create<const T extends Record<string, CSSProperties>>(_rule: CreateStyleType<T>): ReturnType<T>;
|
|
67
|
+
props(...rules: (false | CSSProperties | null | undefined)[]): string;
|
|
68
|
+
createTheme<const T extends CreateTheme>(_rule: T): ReturnVariableType<T>;
|
|
69
|
+
createStatic<const T extends CreateStatic>(_rule: T): T;
|
|
70
|
+
keyframes(_rule: Keyframes): string;
|
|
71
|
+
viewTransition(_rule: ViewTransition): string;
|
|
72
|
+
};
|
|
73
|
+
declare const x: (className: string, styles: Styles) => {
|
|
74
|
+
className: string;
|
|
75
|
+
styles: Styles;
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
export { type CSSProperties, type CreateStyle, css, x };
|
package/dist/css.js
CHANGED
|
@@ -1,83 +1,31 @@
|
|
|
1
1
|
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
2
|
+
function errorFn(fn) {
|
|
3
|
+
throw new Error(`css.${fn} requires bundler-plugin setup`);
|
|
4
|
+
}
|
|
5
|
+
const css = class _css {
|
|
6
|
+
static create(_rule) {
|
|
7
|
+
throw errorFn("create");
|
|
8
|
+
}
|
|
9
|
+
static props(...rules) {
|
|
10
|
+
return rules.filter(Boolean).join(" ");
|
|
11
|
+
}
|
|
12
|
+
static createTheme(_rule) {
|
|
13
|
+
throw errorFn("createTheme");
|
|
14
|
+
}
|
|
15
|
+
static createStatic(_rule) {
|
|
16
|
+
throw errorFn("createStatic");
|
|
17
|
+
}
|
|
18
|
+
static keyframes(_rule) {
|
|
19
|
+
throw errorFn("keyframes");
|
|
20
|
+
}
|
|
21
|
+
static viewTransition(_rule) {
|
|
22
|
+
throw errorFn("viewTransition");
|
|
15
23
|
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
19
|
-
value: mod,
|
|
20
|
-
enumerable: true
|
|
21
|
-
}) : target, mod));
|
|
22
|
-
|
|
23
|
-
const zss_engine = __toESM(require("zss-engine"));
|
|
24
|
-
|
|
25
|
-
const createProcessor = () => {
|
|
26
|
-
let resolve;
|
|
27
|
-
let promise;
|
|
28
|
-
const queue = [];
|
|
29
|
-
let processing = false;
|
|
30
|
-
const init = () => {
|
|
31
|
-
promise = new Promise((r) => {
|
|
32
|
-
resolve = (value) => {
|
|
33
|
-
queue.push(value);
|
|
34
|
-
r(value);
|
|
35
|
-
};
|
|
36
|
-
});
|
|
37
|
-
};
|
|
38
|
-
const process = async (filePath) => {
|
|
39
|
-
while (queue.length > 0) {
|
|
40
|
-
const sheet = queue.shift();
|
|
41
|
-
if (!zss_engine.isDevelopment && sheet) await (0, zss_engine.build)(sheet, filePath);
|
|
42
|
-
}
|
|
43
|
-
processing = false;
|
|
44
|
-
};
|
|
45
|
-
const buildFiles = async (filePath) => {
|
|
46
|
-
if (!promise) init();
|
|
47
|
-
if (!processing && queue.length > 0) {
|
|
48
|
-
processing = true;
|
|
49
|
-
await process(filePath);
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
return {
|
|
53
|
-
get resolve() {
|
|
54
|
-
return resolve;
|
|
55
|
-
},
|
|
56
|
-
get promise() {
|
|
57
|
-
return promise;
|
|
58
|
-
},
|
|
59
|
-
init,
|
|
60
|
-
build: buildFiles
|
|
61
|
-
};
|
|
62
24
|
};
|
|
63
|
-
const
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
Object.defineProperty(exports, '__toESM', {
|
|
67
|
-
enumerable: true,
|
|
68
|
-
get: function () {
|
|
69
|
-
return __toESM;
|
|
70
|
-
}
|
|
25
|
+
const x = (className, styles) => ({
|
|
26
|
+
className,
|
|
27
|
+
styles
|
|
71
28
|
});
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
return gQueue;
|
|
76
|
-
}
|
|
77
|
-
});
|
|
78
|
-
Object.defineProperty(exports, 'pQueue', {
|
|
79
|
-
enumerable: true,
|
|
80
|
-
get: function () {
|
|
81
|
-
return pQueue;
|
|
82
|
-
}
|
|
83
|
-
});
|
|
29
|
+
|
|
30
|
+
exports.css = css;
|
|
31
|
+
exports.x = x;
|
package/dist/css.mjs
CHANGED
|
@@ -1,44 +1,30 @@
|
|
|
1
|
-
import { build, isDevelopment } from "zss-engine";
|
|
2
1
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
if (!processing && queue.length > 0) {
|
|
26
|
-
processing = true;
|
|
27
|
-
await process(filePath);
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
return {
|
|
31
|
-
get resolve() {
|
|
32
|
-
return resolve;
|
|
33
|
-
},
|
|
34
|
-
get promise() {
|
|
35
|
-
return promise;
|
|
36
|
-
},
|
|
37
|
-
init,
|
|
38
|
-
build: buildFiles
|
|
39
|
-
};
|
|
2
|
+
function errorFn(fn) {
|
|
3
|
+
throw new Error(`css.${fn} requires bundler-plugin setup`);
|
|
4
|
+
}
|
|
5
|
+
const css = class _css {
|
|
6
|
+
static create(_rule) {
|
|
7
|
+
throw errorFn("create");
|
|
8
|
+
}
|
|
9
|
+
static props(...rules) {
|
|
10
|
+
return rules.filter(Boolean).join(" ");
|
|
11
|
+
}
|
|
12
|
+
static createTheme(_rule) {
|
|
13
|
+
throw errorFn("createTheme");
|
|
14
|
+
}
|
|
15
|
+
static createStatic(_rule) {
|
|
16
|
+
throw errorFn("createStatic");
|
|
17
|
+
}
|
|
18
|
+
static keyframes(_rule) {
|
|
19
|
+
throw errorFn("keyframes");
|
|
20
|
+
}
|
|
21
|
+
static viewTransition(_rule) {
|
|
22
|
+
throw errorFn("viewTransition");
|
|
23
|
+
}
|
|
40
24
|
};
|
|
41
|
-
const
|
|
42
|
-
|
|
25
|
+
const x = (className, styles) => ({
|
|
26
|
+
className,
|
|
27
|
+
styles
|
|
28
|
+
});
|
|
43
29
|
|
|
44
|
-
export {
|
|
30
|
+
export { css, x };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plumeria/core",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.1",
|
|
4
4
|
"description": "An atomic CSS runtime designed to disappear.",
|
|
5
5
|
"author": "Refirst 11",
|
|
6
6
|
"license": "MIT",
|
|
@@ -27,31 +27,26 @@
|
|
|
27
27
|
"./package.json": "./package.json",
|
|
28
28
|
"./stylesheet.css": "./stylesheet.css",
|
|
29
29
|
".": {
|
|
30
|
-
"types": "./dist/
|
|
31
|
-
"import": "./dist/
|
|
32
|
-
"default": "./dist/
|
|
33
|
-
},
|
|
34
|
-
"./processors": {
|
|
35
|
-
"types": "./dist/processors/css.d.ts",
|
|
36
|
-
"import": "./dist/processors/css.mjs",
|
|
37
|
-
"default": "./dist/processors/css.js"
|
|
30
|
+
"types": "./dist/css.d.ts",
|
|
31
|
+
"import": "./dist/css.mjs",
|
|
32
|
+
"default": "./dist/css.js"
|
|
38
33
|
}
|
|
39
34
|
},
|
|
40
|
-
"main": "dist/
|
|
41
|
-
"module": "dist/
|
|
42
|
-
"types": "dist/
|
|
35
|
+
"main": "dist/css.js",
|
|
36
|
+
"module": "dist/css.mjs",
|
|
37
|
+
"types": "dist/css.d.ts",
|
|
43
38
|
"files": [
|
|
44
39
|
"dist/",
|
|
45
40
|
"stylesheet.css"
|
|
46
41
|
],
|
|
47
42
|
"dependencies": {
|
|
48
|
-
"
|
|
43
|
+
"csstype": "^3.2.3"
|
|
49
44
|
},
|
|
50
45
|
"publishConfig": {
|
|
51
46
|
"access": "public",
|
|
52
47
|
"provenance": true
|
|
53
48
|
},
|
|
54
49
|
"scripts": {
|
|
55
|
-
"build": "tsdown && node strip
|
|
50
|
+
"build": "tsdown && node strip.ts"
|
|
56
51
|
}
|
|
57
52
|
}
|
package/dist/index.d.ts
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { CSSProperties, CreateKeyframes, CreateStyle, CreateStyleType, CreateTheme, CreateValues, ReturnType, ReturnVariableType, ReturnX, ViewTransitionOptions, XVariableSet } from "zss-engine";
|
|
2
|
-
|
|
3
|
-
declare const x: (className: string, varSet: XVariableSet) => ReturnX;
|
|
4
|
-
|
|
5
|
-
declare class StyleSheet {
|
|
6
|
-
private constructor();
|
|
7
|
-
static create<const T extends Record<string, CSSProperties>>(rule: CreateStyleType<T>): ReturnType<T>;
|
|
8
|
-
static props(...rules: (false | Readonly<CSSProperties> | null | undefined)[]): string;
|
|
9
|
-
static keyframes(rule: CreateKeyframes): string;
|
|
10
|
-
static viewTransition(rule: ViewTransitionOptions): string;
|
|
11
|
-
static createTheme<const T extends CreateTheme>(rule: T): ReturnVariableType<T>;
|
|
12
|
-
static createStatic<const T extends CreateValues>(rule: T): T;
|
|
13
|
-
}
|
|
14
|
-
declare const css: typeof StyleSheet;
|
|
15
|
-
|
|
16
|
-
export { type CSSProperties, type CreateStyle, css, x };
|
package/dist/index.js
DELETED
|
@@ -1,224 +0,0 @@
|
|
|
1
|
-
const require_css = require('./css.js');
|
|
2
|
-
const zss_engine = require_css.__toESM(require("zss-engine"));
|
|
3
|
-
|
|
4
|
-
const styleAtomMap = new WeakMap();
|
|
5
|
-
function create(rule) {
|
|
6
|
-
const result = {};
|
|
7
|
-
Object.entries(rule).forEach(([key, styleRule]) => {
|
|
8
|
-
const flat = {};
|
|
9
|
-
const nonFlat = {};
|
|
10
|
-
(0, zss_engine.splitAtomicAndNested)(styleRule, flat, nonFlat);
|
|
11
|
-
const finalFlat = (0, zss_engine.overrideLonghand)(flat);
|
|
12
|
-
const records = [];
|
|
13
|
-
Object.entries(finalFlat).forEach(([prop, value]) => {
|
|
14
|
-
if (prop.startsWith("@media") || prop.startsWith("@container")) Object.entries(value).forEach(([innerProp, innerValue]) => {
|
|
15
|
-
const atomicMap = new Map();
|
|
16
|
-
(0, zss_engine.processAtomicProps)({ [innerProp]: innerValue }, atomicMap, prop);
|
|
17
|
-
const querySheets = [];
|
|
18
|
-
const queryHashes = [];
|
|
19
|
-
for (const [hash, sheet] of atomicMap) {
|
|
20
|
-
querySheets.push(sheet.replace(`.${hash}`, `.${hash}:not(#\\#)`));
|
|
21
|
-
queryHashes.push(hash);
|
|
22
|
-
}
|
|
23
|
-
if (querySheets.length > 0) records.push({
|
|
24
|
-
key: prop + innerProp,
|
|
25
|
-
hash: queryHashes.join(" "),
|
|
26
|
-
sheet: querySheets.join("")
|
|
27
|
-
});
|
|
28
|
-
});
|
|
29
|
-
else {
|
|
30
|
-
const atomicMap = new Map();
|
|
31
|
-
(0, zss_engine.processAtomicProps)({ [prop]: value }, atomicMap);
|
|
32
|
-
const sheets = [];
|
|
33
|
-
const hashes = [];
|
|
34
|
-
for (const [hash, sheet] of atomicMap) {
|
|
35
|
-
sheets.push(sheet);
|
|
36
|
-
hashes.push(hash);
|
|
37
|
-
}
|
|
38
|
-
if (sheets.length > 0) records.push({
|
|
39
|
-
key: prop,
|
|
40
|
-
hash: hashes.join(" "),
|
|
41
|
-
sheet: sheets.join("")
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
if (Object.keys(nonFlat).length > 0) {
|
|
46
|
-
const nonFlatBase = {};
|
|
47
|
-
const nonFlatQuery = {};
|
|
48
|
-
Object.entries(nonFlat).forEach(([atRule, nestedObj]) => {
|
|
49
|
-
if (atRule.startsWith("@media") || atRule.startsWith("@container")) nonFlatQuery[atRule] = nestedObj;
|
|
50
|
-
else nonFlatBase[atRule] = nestedObj;
|
|
51
|
-
});
|
|
52
|
-
Object.entries(nonFlatBase).forEach(([selector, style], index) => {
|
|
53
|
-
const hashObj = { [key]: {
|
|
54
|
-
[selector]: style,
|
|
55
|
-
index
|
|
56
|
-
} };
|
|
57
|
-
const hash = (0, zss_engine.genBase36Hash)(hashObj, 1, 7);
|
|
58
|
-
const transpileObj = { [key]: { [selector]: style } };
|
|
59
|
-
const { styleSheet } = (0, zss_engine.transpile)(transpileObj, hash);
|
|
60
|
-
records.push({
|
|
61
|
-
key: selector + index,
|
|
62
|
-
hash,
|
|
63
|
-
sheet: styleSheet
|
|
64
|
-
});
|
|
65
|
-
});
|
|
66
|
-
Object.entries(nonFlatQuery).forEach(([atRule, nestedStyles]) => {
|
|
67
|
-
Object.entries(nestedStyles).forEach(([selector, style], index) => {
|
|
68
|
-
const hashObj = { [key]: { [atRule]: {
|
|
69
|
-
[selector]: style,
|
|
70
|
-
index
|
|
71
|
-
} } };
|
|
72
|
-
const hash = (0, zss_engine.genBase36Hash)(hashObj, 1, 7);
|
|
73
|
-
const transpileObj = { [key]: { [atRule]: { [selector]: style } } };
|
|
74
|
-
const { styleSheet } = (0, zss_engine.transpile)(transpileObj, hash);
|
|
75
|
-
const finalSheet = styleSheet.replace(`.${hash}`, `.${hash}:not(#\\#)`);
|
|
76
|
-
records.push({
|
|
77
|
-
key: atRule + selector + index,
|
|
78
|
-
hash,
|
|
79
|
-
sheet: finalSheet
|
|
80
|
-
});
|
|
81
|
-
});
|
|
82
|
-
});
|
|
83
|
-
}
|
|
84
|
-
styleAtomMap.set(styleRule, records);
|
|
85
|
-
Object.defineProperty(result, key, { get: () => Object.freeze(styleRule) });
|
|
86
|
-
});
|
|
87
|
-
return Object.freeze(result);
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
const setSheets = new Set();
|
|
91
|
-
function props(...rules) {
|
|
92
|
-
const seenSheets = new Set();
|
|
93
|
-
const baseSheets = [];
|
|
94
|
-
const classList = [];
|
|
95
|
-
const chosen = new Map();
|
|
96
|
-
const rightmostKeys = [];
|
|
97
|
-
const orderedKeys = [];
|
|
98
|
-
for (let i = rules.length - 1; i >= 0; i--) {
|
|
99
|
-
const obj = rules[i];
|
|
100
|
-
if (!obj) continue;
|
|
101
|
-
const records = styleAtomMap.get(obj);
|
|
102
|
-
if (!records) continue;
|
|
103
|
-
for (const { key, hash, sheet } of records) if (!chosen.has(key)) chosen.set(key, {
|
|
104
|
-
hash,
|
|
105
|
-
sheet,
|
|
106
|
-
propsIdx: i
|
|
107
|
-
});
|
|
108
|
-
}
|
|
109
|
-
for (let i = 0; i < rules.length; i++) {
|
|
110
|
-
const obj = rules[i];
|
|
111
|
-
if (!obj) continue;
|
|
112
|
-
const records = styleAtomMap.get(obj);
|
|
113
|
-
if (!records) continue;
|
|
114
|
-
for (const { key } of records) if (chosen.has(key) && chosen.get(key).propsIdx === i) {
|
|
115
|
-
if (i === rules.length - 1) rightmostKeys.push({
|
|
116
|
-
...chosen.get(key),
|
|
117
|
-
key
|
|
118
|
-
});
|
|
119
|
-
else orderedKeys.push({
|
|
120
|
-
...chosen.get(key),
|
|
121
|
-
key
|
|
122
|
-
});
|
|
123
|
-
chosen.delete(key);
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
for (const { hash, sheet } of orderedKeys) if (!seenSheets.has(sheet)) {
|
|
127
|
-
seenSheets.add(sheet);
|
|
128
|
-
classList.push(hash);
|
|
129
|
-
baseSheets.push(sheet);
|
|
130
|
-
}
|
|
131
|
-
for (const { hash, sheet } of rightmostKeys) if (!seenSheets.has(sheet)) {
|
|
132
|
-
seenSheets.add(sheet);
|
|
133
|
-
classList.push(hash);
|
|
134
|
-
baseSheets.push(sheet);
|
|
135
|
-
}
|
|
136
|
-
const uniqueSheets = [...baseSheets].filter((sheet) => !setSheets.has(sheet));
|
|
137
|
-
uniqueSheets.forEach((sheet) => setSheets.add(sheet));
|
|
138
|
-
if (typeof require_css.pQueue.promise === "undefined") require_css.pQueue.init();
|
|
139
|
-
require_css.pQueue.resolve(uniqueSheets.join(""));
|
|
140
|
-
return classList.join(" ");
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
function global(rule) {
|
|
144
|
-
const { styleSheet } = (0, zss_engine.transpile)(rule, void 0, "--global");
|
|
145
|
-
if (typeof require_css.gQueue.promise === "undefined") require_css.gQueue.init();
|
|
146
|
-
require_css.gQueue.resolve(styleSheet);
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
const keyframes = (rule) => {
|
|
150
|
-
const hash = (0, zss_engine.genBase36Hash)(rule, 1, 8);
|
|
151
|
-
const ident = `kf-${hash}`;
|
|
152
|
-
global({ [`@keyframes ${ident}`]: rule });
|
|
153
|
-
return ident;
|
|
154
|
-
};
|
|
155
|
-
|
|
156
|
-
const viewTransition = (rule) => {
|
|
157
|
-
const hash = (0, zss_engine.genBase36Hash)(rule, 1, 8);
|
|
158
|
-
const ident = `vt-${hash}`;
|
|
159
|
-
global({
|
|
160
|
-
[`::view-transition-group(${ident})`]: rule.group,
|
|
161
|
-
[`::view-transition-image-pair(${ident})`]: rule.imagePair,
|
|
162
|
-
[`::view-transition-old(${ident})`]: rule.old,
|
|
163
|
-
[`::view-transition-new(${ident})`]: rule.new
|
|
164
|
-
});
|
|
165
|
-
return ident;
|
|
166
|
-
};
|
|
167
|
-
|
|
168
|
-
const createTheme = (rule) => {
|
|
169
|
-
const styles = {};
|
|
170
|
-
const result = {};
|
|
171
|
-
for (const key in rule) {
|
|
172
|
-
const varName = `${(0, zss_engine.camelToKebabCase)(key)}`;
|
|
173
|
-
const varKey = `--${varName}`;
|
|
174
|
-
result[key] = `var(--${varName})`;
|
|
175
|
-
const themeMap = rule[key];
|
|
176
|
-
for (const themeKey in themeMap) {
|
|
177
|
-
const value = themeMap[themeKey];
|
|
178
|
-
const isQuery = themeKey.startsWith("@media") || themeKey.startsWith("@container");
|
|
179
|
-
const selector = isQuery || themeKey === "default" ? ":root" : `:root[data-theme="${themeKey}"]`;
|
|
180
|
-
const target = styles[selector] ||= {};
|
|
181
|
-
if (isQuery) {
|
|
182
|
-
const queryObj = target[themeKey] ||= {};
|
|
183
|
-
queryObj[varKey] = value;
|
|
184
|
-
} else target[varKey] = value;
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
|
-
global(styles);
|
|
188
|
-
return result;
|
|
189
|
-
};
|
|
190
|
-
|
|
191
|
-
const createStatic = (rule) => {
|
|
192
|
-
return rule;
|
|
193
|
-
};
|
|
194
|
-
|
|
195
|
-
const x = (className, varSet) => ({
|
|
196
|
-
className,
|
|
197
|
-
style: Object.fromEntries(Object.entries(varSet).map(([key, value]) => [key, value]))
|
|
198
|
-
});
|
|
199
|
-
|
|
200
|
-
var StyleSheet = class {
|
|
201
|
-
constructor() {}
|
|
202
|
-
static create(rule) {
|
|
203
|
-
return create(rule);
|
|
204
|
-
}
|
|
205
|
-
static props(...rules) {
|
|
206
|
-
return props(...rules);
|
|
207
|
-
}
|
|
208
|
-
static keyframes(rule) {
|
|
209
|
-
return keyframes(rule);
|
|
210
|
-
}
|
|
211
|
-
static viewTransition(rule) {
|
|
212
|
-
return viewTransition(rule);
|
|
213
|
-
}
|
|
214
|
-
static createTheme(rule) {
|
|
215
|
-
return createTheme(rule);
|
|
216
|
-
}
|
|
217
|
-
static createStatic(rule) {
|
|
218
|
-
return createStatic(rule);
|
|
219
|
-
}
|
|
220
|
-
};
|
|
221
|
-
const css = StyleSheet;
|
|
222
|
-
|
|
223
|
-
exports.css = css;
|
|
224
|
-
exports.x = x;
|
package/dist/index.mjs
DELETED
|
@@ -1,223 +0,0 @@
|
|
|
1
|
-
import { gQueue, pQueue } from "./css.mjs";
|
|
2
|
-
import { camelToKebabCase, genBase36Hash, overrideLonghand, processAtomicProps, splitAtomicAndNested, transpile } from "zss-engine";
|
|
3
|
-
|
|
4
|
-
const styleAtomMap = new WeakMap();
|
|
5
|
-
function create(rule) {
|
|
6
|
-
const result = {};
|
|
7
|
-
Object.entries(rule).forEach(([key, styleRule]) => {
|
|
8
|
-
const flat = {};
|
|
9
|
-
const nonFlat = {};
|
|
10
|
-
splitAtomicAndNested(styleRule, flat, nonFlat);
|
|
11
|
-
const finalFlat = overrideLonghand(flat);
|
|
12
|
-
const records = [];
|
|
13
|
-
Object.entries(finalFlat).forEach(([prop, value]) => {
|
|
14
|
-
if (prop.startsWith("@media") || prop.startsWith("@container")) Object.entries(value).forEach(([innerProp, innerValue]) => {
|
|
15
|
-
const atomicMap = new Map();
|
|
16
|
-
processAtomicProps({ [innerProp]: innerValue }, atomicMap, prop);
|
|
17
|
-
const querySheets = [];
|
|
18
|
-
const queryHashes = [];
|
|
19
|
-
for (const [hash, sheet] of atomicMap) {
|
|
20
|
-
querySheets.push(sheet.replace(`.${hash}`, `.${hash}:not(#\\#)`));
|
|
21
|
-
queryHashes.push(hash);
|
|
22
|
-
}
|
|
23
|
-
if (querySheets.length > 0) records.push({
|
|
24
|
-
key: prop + innerProp,
|
|
25
|
-
hash: queryHashes.join(" "),
|
|
26
|
-
sheet: querySheets.join("")
|
|
27
|
-
});
|
|
28
|
-
});
|
|
29
|
-
else {
|
|
30
|
-
const atomicMap = new Map();
|
|
31
|
-
processAtomicProps({ [prop]: value }, atomicMap);
|
|
32
|
-
const sheets = [];
|
|
33
|
-
const hashes = [];
|
|
34
|
-
for (const [hash, sheet] of atomicMap) {
|
|
35
|
-
sheets.push(sheet);
|
|
36
|
-
hashes.push(hash);
|
|
37
|
-
}
|
|
38
|
-
if (sheets.length > 0) records.push({
|
|
39
|
-
key: prop,
|
|
40
|
-
hash: hashes.join(" "),
|
|
41
|
-
sheet: sheets.join("")
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
if (Object.keys(nonFlat).length > 0) {
|
|
46
|
-
const nonFlatBase = {};
|
|
47
|
-
const nonFlatQuery = {};
|
|
48
|
-
Object.entries(nonFlat).forEach(([atRule, nestedObj]) => {
|
|
49
|
-
if (atRule.startsWith("@media") || atRule.startsWith("@container")) nonFlatQuery[atRule] = nestedObj;
|
|
50
|
-
else nonFlatBase[atRule] = nestedObj;
|
|
51
|
-
});
|
|
52
|
-
Object.entries(nonFlatBase).forEach(([selector, style], index) => {
|
|
53
|
-
const hashObj = { [key]: {
|
|
54
|
-
[selector]: style,
|
|
55
|
-
index
|
|
56
|
-
} };
|
|
57
|
-
const hash = genBase36Hash(hashObj, 1, 7);
|
|
58
|
-
const transpileObj = { [key]: { [selector]: style } };
|
|
59
|
-
const { styleSheet } = transpile(transpileObj, hash);
|
|
60
|
-
records.push({
|
|
61
|
-
key: selector + index,
|
|
62
|
-
hash,
|
|
63
|
-
sheet: styleSheet
|
|
64
|
-
});
|
|
65
|
-
});
|
|
66
|
-
Object.entries(nonFlatQuery).forEach(([atRule, nestedStyles]) => {
|
|
67
|
-
Object.entries(nestedStyles).forEach(([selector, style], index) => {
|
|
68
|
-
const hashObj = { [key]: { [atRule]: {
|
|
69
|
-
[selector]: style,
|
|
70
|
-
index
|
|
71
|
-
} } };
|
|
72
|
-
const hash = genBase36Hash(hashObj, 1, 7);
|
|
73
|
-
const transpileObj = { [key]: { [atRule]: { [selector]: style } } };
|
|
74
|
-
const { styleSheet } = transpile(transpileObj, hash);
|
|
75
|
-
const finalSheet = styleSheet.replace(`.${hash}`, `.${hash}:not(#\\#)`);
|
|
76
|
-
records.push({
|
|
77
|
-
key: atRule + selector + index,
|
|
78
|
-
hash,
|
|
79
|
-
sheet: finalSheet
|
|
80
|
-
});
|
|
81
|
-
});
|
|
82
|
-
});
|
|
83
|
-
}
|
|
84
|
-
styleAtomMap.set(styleRule, records);
|
|
85
|
-
Object.defineProperty(result, key, { get: () => Object.freeze(styleRule) });
|
|
86
|
-
});
|
|
87
|
-
return Object.freeze(result);
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
const setSheets = new Set();
|
|
91
|
-
function props(...rules) {
|
|
92
|
-
const seenSheets = new Set();
|
|
93
|
-
const baseSheets = [];
|
|
94
|
-
const classList = [];
|
|
95
|
-
const chosen = new Map();
|
|
96
|
-
const rightmostKeys = [];
|
|
97
|
-
const orderedKeys = [];
|
|
98
|
-
for (let i = rules.length - 1; i >= 0; i--) {
|
|
99
|
-
const obj = rules[i];
|
|
100
|
-
if (!obj) continue;
|
|
101
|
-
const records = styleAtomMap.get(obj);
|
|
102
|
-
if (!records) continue;
|
|
103
|
-
for (const { key, hash, sheet } of records) if (!chosen.has(key)) chosen.set(key, {
|
|
104
|
-
hash,
|
|
105
|
-
sheet,
|
|
106
|
-
propsIdx: i
|
|
107
|
-
});
|
|
108
|
-
}
|
|
109
|
-
for (let i = 0; i < rules.length; i++) {
|
|
110
|
-
const obj = rules[i];
|
|
111
|
-
if (!obj) continue;
|
|
112
|
-
const records = styleAtomMap.get(obj);
|
|
113
|
-
if (!records) continue;
|
|
114
|
-
for (const { key } of records) if (chosen.has(key) && chosen.get(key).propsIdx === i) {
|
|
115
|
-
if (i === rules.length - 1) rightmostKeys.push({
|
|
116
|
-
...chosen.get(key),
|
|
117
|
-
key
|
|
118
|
-
});
|
|
119
|
-
else orderedKeys.push({
|
|
120
|
-
...chosen.get(key),
|
|
121
|
-
key
|
|
122
|
-
});
|
|
123
|
-
chosen.delete(key);
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
for (const { hash, sheet } of orderedKeys) if (!seenSheets.has(sheet)) {
|
|
127
|
-
seenSheets.add(sheet);
|
|
128
|
-
classList.push(hash);
|
|
129
|
-
baseSheets.push(sheet);
|
|
130
|
-
}
|
|
131
|
-
for (const { hash, sheet } of rightmostKeys) if (!seenSheets.has(sheet)) {
|
|
132
|
-
seenSheets.add(sheet);
|
|
133
|
-
classList.push(hash);
|
|
134
|
-
baseSheets.push(sheet);
|
|
135
|
-
}
|
|
136
|
-
const uniqueSheets = [...baseSheets].filter((sheet) => !setSheets.has(sheet));
|
|
137
|
-
uniqueSheets.forEach((sheet) => setSheets.add(sheet));
|
|
138
|
-
if (typeof pQueue.promise === "undefined") pQueue.init();
|
|
139
|
-
pQueue.resolve(uniqueSheets.join(""));
|
|
140
|
-
return classList.join(" ");
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
function global(rule) {
|
|
144
|
-
const { styleSheet } = transpile(rule, void 0, "--global");
|
|
145
|
-
if (typeof gQueue.promise === "undefined") gQueue.init();
|
|
146
|
-
gQueue.resolve(styleSheet);
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
const keyframes = (rule) => {
|
|
150
|
-
const hash = genBase36Hash(rule, 1, 8);
|
|
151
|
-
const ident = `kf-${hash}`;
|
|
152
|
-
global({ [`@keyframes ${ident}`]: rule });
|
|
153
|
-
return ident;
|
|
154
|
-
};
|
|
155
|
-
|
|
156
|
-
const viewTransition = (rule) => {
|
|
157
|
-
const hash = genBase36Hash(rule, 1, 8);
|
|
158
|
-
const ident = `vt-${hash}`;
|
|
159
|
-
global({
|
|
160
|
-
[`::view-transition-group(${ident})`]: rule.group,
|
|
161
|
-
[`::view-transition-image-pair(${ident})`]: rule.imagePair,
|
|
162
|
-
[`::view-transition-old(${ident})`]: rule.old,
|
|
163
|
-
[`::view-transition-new(${ident})`]: rule.new
|
|
164
|
-
});
|
|
165
|
-
return ident;
|
|
166
|
-
};
|
|
167
|
-
|
|
168
|
-
const createTheme = (rule) => {
|
|
169
|
-
const styles = {};
|
|
170
|
-
const result = {};
|
|
171
|
-
for (const key in rule) {
|
|
172
|
-
const varName = `${camelToKebabCase(key)}`;
|
|
173
|
-
const varKey = `--${varName}`;
|
|
174
|
-
result[key] = `var(--${varName})`;
|
|
175
|
-
const themeMap = rule[key];
|
|
176
|
-
for (const themeKey in themeMap) {
|
|
177
|
-
const value = themeMap[themeKey];
|
|
178
|
-
const isQuery = themeKey.startsWith("@media") || themeKey.startsWith("@container");
|
|
179
|
-
const selector = isQuery || themeKey === "default" ? ":root" : `:root[data-theme="${themeKey}"]`;
|
|
180
|
-
const target = styles[selector] ||= {};
|
|
181
|
-
if (isQuery) {
|
|
182
|
-
const queryObj = target[themeKey] ||= {};
|
|
183
|
-
queryObj[varKey] = value;
|
|
184
|
-
} else target[varKey] = value;
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
|
-
global(styles);
|
|
188
|
-
return result;
|
|
189
|
-
};
|
|
190
|
-
|
|
191
|
-
const createStatic = (rule) => {
|
|
192
|
-
return rule;
|
|
193
|
-
};
|
|
194
|
-
|
|
195
|
-
const x = (className, varSet) => ({
|
|
196
|
-
className,
|
|
197
|
-
style: Object.fromEntries(Object.entries(varSet).map(([key, value]) => [key, value]))
|
|
198
|
-
});
|
|
199
|
-
|
|
200
|
-
var StyleSheet = class {
|
|
201
|
-
constructor() {}
|
|
202
|
-
static create(rule) {
|
|
203
|
-
return create(rule);
|
|
204
|
-
}
|
|
205
|
-
static props(...rules) {
|
|
206
|
-
return props(...rules);
|
|
207
|
-
}
|
|
208
|
-
static keyframes(rule) {
|
|
209
|
-
return keyframes(rule);
|
|
210
|
-
}
|
|
211
|
-
static viewTransition(rule) {
|
|
212
|
-
return viewTransition(rule);
|
|
213
|
-
}
|
|
214
|
-
static createTheme(rule) {
|
|
215
|
-
return createTheme(rule);
|
|
216
|
-
}
|
|
217
|
-
static createStatic(rule) {
|
|
218
|
-
return createStatic(rule);
|
|
219
|
-
}
|
|
220
|
-
};
|
|
221
|
-
const css = StyleSheet;
|
|
222
|
-
|
|
223
|
-
export { css, x };
|
package/dist/processors/css.d.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
declare const gQueue: {
|
|
3
|
-
readonly resolve: (value: string) => void;
|
|
4
|
-
readonly promise: Promise<string>;
|
|
5
|
-
init: () => void;
|
|
6
|
-
build: (filePath: string) => Promise<void>;
|
|
7
|
-
};
|
|
8
|
-
declare const pQueue: {
|
|
9
|
-
readonly resolve: (value: string) => void;
|
|
10
|
-
readonly promise: Promise<string>;
|
|
11
|
-
init: () => void;
|
|
12
|
-
build: (filePath: string) => Promise<void>;
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
export { gQueue, pQueue };
|
package/dist/processors/css.js
DELETED
package/dist/processors/css.mjs
DELETED