@plumeria/core 2.2.2 → 2.2.4

package/dist/index.d.ts

@@ -4,12 +4,12 @@ declare const x: (className: string, varSet: XVariableSet) => ReturnX;
 
 declare class StyleSheet {
   private constructor();
-  static create<const T extends Record<string, CSSProperties>>(object: CreateStyleType<T>): ReturnType<T>;
-  static props(...objects: (false | Readonly<CSSProperties> | null | undefined)[]): string;
-  static keyframes(object: CreateKeyframes): string;
-  static viewTransition(object: ViewTransitionOptions): string;
-  static createTheme<const T extends CreateTheme>(object: T): ReturnVariableType<T>;
-  static createStatic<const T extends CreateValues>(object: T): T;
+  static create<const T extends Record<string, CSSProperties>>(rule: CreateStyleType<T>): ReturnType<T>;
+  static props(...rules: (false | Readonly<CSSProperties> | null | undefined)[]): string;
+  static keyframes(rule: CreateKeyframes): string;
+  static viewTransition(rule: ViewTransitionOptions): string;
+  static createTheme<const T extends CreateTheme>(rule: T): ReturnVariableType<T>;
+  static createStatic<const T extends CreateValues>(rule: T): T;
 }
 declare const css: typeof StyleSheet;
 

package/dist/index.js

@@ -2,12 +2,12 @@ const require_css = require('./css.js');
 const zss_engine = require_css.__toESM(require("zss-engine"));
 
 const styleAtomMap = new WeakMap();
-function create(object) {
+function create(rule) {
 	const result = {};
-	Object.entries(object).forEach(([key, styleObj]) => {
+	Object.entries(rule).forEach(([key, styleRule]) => {
 		const flat = {};
 		const nonFlat = {};
-		(0, zss_engine.splitAtomicAndNested)(styleObj, flat, nonFlat);
+		(0, zss_engine.splitAtomicAndNested)(styleRule, flat, nonFlat);
 		const finalFlat = (0, zss_engine.overrideLonghand)(flat);
 		const records = [];
 		Object.entries(finalFlat).forEach(([prop, value]) => {
@@ -49,40 +49,46 @@ function create(object) {
 				if (atRule.startsWith("@media") || atRule.startsWith("@container")) nonFlatQuery[atRule] = nestedObj;
 				else nonFlatBase[atRule] = nestedObj;
 			});
-			[nonFlatBase, nonFlatQuery].forEach((targetNonFlat) => {
-				if (Object.keys(targetNonFlat).length === 0) return;
-				const nonFlatObj = { [key]: targetNonFlat };
+			Object.entries(nonFlatBase).forEach(([selector, style]) => {
+				const nonFlatObj = { [key]: { [selector]: style } };
 				const nonFlatHash = (0, zss_engine.genBase36Hash)(nonFlatObj, 1, 7);
 				const { styleSheet } = (0, zss_engine.transpile)(nonFlatObj, nonFlatHash);
-				const isQuery = styleSheet.includes("@media") || styleSheet.includes("@container");
-				const finalSheet = isQuery ? styleSheet.replace(`.${nonFlatHash}`, `.${nonFlatHash}:not(#\\#)`) : styleSheet;
-				Object.entries(targetNonFlat).forEach(([atRule, nestedObj]) => {
-					Object.keys(nestedObj).forEach((prop) => {
-						records.push({
-							key: atRule + prop,
-							hash: nonFlatHash,
-							sheet: finalSheet
-						});
+				records.push({
+					key: selector,
+					hash: nonFlatHash,
+					sheet: styleSheet
+				});
+			});
+			Object.entries(nonFlatQuery).forEach(([atRule, nestedStyles]) => {
+				Object.entries(nestedStyles).forEach(([pseudoSelector, style]) => {
+					const nonFlatObj = { [key]: { [atRule]: { [pseudoSelector]: style } } };
+					const nonFlatHash = (0, zss_engine.genBase36Hash)(nonFlatObj, 1, 7);
+					const { styleSheet } = (0, zss_engine.transpile)(nonFlatObj, nonFlatHash);
+					const finalSheet = styleSheet.replace(`.${nonFlatHash}`, `.${nonFlatHash}:not(#\\#)`);
+					records.push({
+						key: atRule + pseudoSelector,
+						hash: nonFlatHash,
+						sheet: finalSheet
 					});
 				});
 			});
 		}
-		styleAtomMap.set(styleObj, records);
-		Object.defineProperty(result, key, { get: () => Object.freeze(styleObj) });
+		styleAtomMap.set(styleRule, records);
+		Object.defineProperty(result, key, { get: () => Object.freeze(styleRule) });
 	});
 	return Object.freeze(result);
 }
 
 const setSheets = new Set();
-function props(...objects) {
+function props(...rules) {
 	const seenSheets = new Set();
 	const baseSheets = [];
 	const classList = [];
 	const chosen = new Map();
 	const rightmostKeys = [];
 	const orderedKeys = [];
-	for (let i = objects.length - 1; i >= 0; i--) {
-		const obj = objects[i];
+	for (let i = rules.length - 1; i >= 0; i--) {
+		const obj = rules[i];
 		if (!obj) continue;
 		const records = styleAtomMap.get(obj);
 		if (!records) continue;
@@ -92,13 +98,13 @@ function props(...objects) {
 			propsIdx: i
 		});
 	}
-	for (let i = 0; i < objects.length; i++) {
-		const obj = objects[i];
+	for (let i = 0; i < rules.length; i++) {
+		const obj = rules[i];
 		if (!obj) continue;
 		const records = styleAtomMap.get(obj);
 		if (!records) continue;
 		for (const { key } of records) if (chosen.has(key) && chosen.get(key).propsIdx === i) {
-			if (i === objects.length - 1) rightmostKeys.push({
+			if (i === rules.length - 1) rightmostKeys.push({
 				...chosen.get(key),
 				key
 			});
@@ -126,55 +132,56 @@ function props(...objects) {
 	return classList.join(" ");
 }
 
-function global(object) {
-	const { styleSheet } = (0, zss_engine.transpile)(object, void 0, "--global");
+function global(rule) {
+	const { styleSheet } = (0, zss_engine.transpile)(rule, void 0, "--global");
 	if (typeof require_css.gQueue.promise === "undefined") require_css.gQueue.init();
 	require_css.gQueue.resolve(styleSheet);
 }
 
-const keyframes = (object) => {
-	const hash = (0, zss_engine.genBase36Hash)(object, 1, 8);
+const keyframes = (rule) => {
+	const hash = (0, zss_engine.genBase36Hash)(rule, 1, 8);
 	const ident = `kf-${hash}`;
-	global({ [`@keyframes ${ident}`]: object });
+	global({ [`@keyframes ${ident}`]: rule });
 	return ident;
 };
 
-const viewTransition = (object) => {
-	const hash = (0, zss_engine.genBase36Hash)(object, 1, 8);
+const viewTransition = (rule) => {
+	const hash = (0, zss_engine.genBase36Hash)(rule, 1, 8);
 	const ident = `vt-${hash}`;
 	global({
-		[`::view-transition-group(${ident})`]: object.group,
-		[`::view-transition-image-pair(${ident})`]: object.imagePair,
-		[`::view-transition-old(${ident})`]: object.old,
-		[`::view-transition-new(${ident})`]: object.new
+		[`::view-transition-group(${ident})`]: rule.group,
+		[`::view-transition-image-pair(${ident})`]: rule.imagePair,
+		[`::view-transition-old(${ident})`]: rule.old,
+		[`::view-transition-new(${ident})`]: rule.new
 	});
 	return ident;
 };
 
-const createTheme = (object) => {
+const createTheme = (rule) => {
 	const styles = {};
 	const result = {};
-	Object.entries(object).forEach(([key, value]) => {
-		const kebabKey = (0, zss_engine.camelToKebabCase)(key);
-		result[key] = `var(--${kebabKey})`;
-		Object.entries(value).forEach(([subKey, subValue]) => {
-			if (subKey.startsWith("@media")) {
-				styles[":root"] ||= {};
-				styles[":root"][subKey] ||= {};
-				styles[":root"][subKey][`--${kebabKey}`] = subValue;
-			} else {
-				const themeSelector = subKey === "default" ? ":root" : `:root[data-theme="${subKey}"]`;
-				styles[themeSelector] ||= {};
-				styles[themeSelector][`--${kebabKey}`] = subValue;
-			}
-		});
-	});
+	for (const key in rule) {
+		const varName = `${(0, zss_engine.camelToKebabCase)(key)}`;
+		const varKey = `--${varName}`;
+		result[key] = `var(--${varName})`;
+		const themeMap = rule[key];
+		for (const themeKey in themeMap) {
+			const value = themeMap[themeKey];
+			const isQuery = themeKey.startsWith("@media") || themeKey.startsWith("@container");
+			const selector = isQuery || themeKey === "default" ? ":root" : `:root[data-theme="${themeKey}"]`;
+			const target = styles[selector] ||= {};
+			if (isQuery) {
+				const queryObj = target[themeKey] ||= {};
+				queryObj[varKey] = value;
+			} else target[varKey] = value;
+		}
+	}
 	global(styles);
 	return result;
 };
 
-const createStatic = (object) => {
-	return object;
+const createStatic = (rule) => {
+	return rule;
 };
 
 const x = (className, varSet) => ({
@@ -184,23 +191,23 @@ const x = (className, varSet) => ({
 
 var StyleSheet = class {
 	constructor() {}
-	static create(object) {
-		return create(object);
+	static create(rule) {
+		return create(rule);
 	}
-	static props(...objects) {
-		return props(...objects);
+	static props(...rules) {
+		return props(...rules);
 	}
-	static keyframes(object) {
-		return keyframes(object);
+	static keyframes(rule) {
+		return keyframes(rule);
 	}
-	static viewTransition(object) {
-		return viewTransition(object);
+	static viewTransition(rule) {
+		return viewTransition(rule);
 	}
-	static createTheme(object) {
-		return createTheme(object);
+	static createTheme(rule) {
+		return createTheme(rule);
 	}
-	static createStatic(object) {
-		return createStatic(object);
+	static createStatic(rule) {
+		return createStatic(rule);
 	}
 };
 const css = StyleSheet;

package/dist/index.mjs

@@ -2,12 +2,12 @@ import { gQueue, pQueue } from "./css.mjs";
 import { camelToKebabCase, genBase36Hash, overrideLonghand, processAtomicProps, splitAtomicAndNested, transpile } from "zss-engine";
 
 const styleAtomMap = new WeakMap();
-function create(object) {
+function create(rule) {
 	const result = {};
-	Object.entries(object).forEach(([key, styleObj]) => {
+	Object.entries(rule).forEach(([key, styleRule]) => {
 		const flat = {};
 		const nonFlat = {};
-		splitAtomicAndNested(styleObj, flat, nonFlat);
+		splitAtomicAndNested(styleRule, flat, nonFlat);
 		const finalFlat = overrideLonghand(flat);
 		const records = [];
 		Object.entries(finalFlat).forEach(([prop, value]) => {
@@ -49,40 +49,46 @@ function create(object) {
 				if (atRule.startsWith("@media") || atRule.startsWith("@container")) nonFlatQuery[atRule] = nestedObj;
 				else nonFlatBase[atRule] = nestedObj;
 			});
-			[nonFlatBase, nonFlatQuery].forEach((targetNonFlat) => {
-				if (Object.keys(targetNonFlat).length === 0) return;
-				const nonFlatObj = { [key]: targetNonFlat };
+			Object.entries(nonFlatBase).forEach(([selector, style]) => {
+				const nonFlatObj = { [key]: { [selector]: style } };
 				const nonFlatHash = genBase36Hash(nonFlatObj, 1, 7);
 				const { styleSheet } = transpile(nonFlatObj, nonFlatHash);
-				const isQuery = styleSheet.includes("@media") || styleSheet.includes("@container");
-				const finalSheet = isQuery ? styleSheet.replace(`.${nonFlatHash}`, `.${nonFlatHash}:not(#\\#)`) : styleSheet;
-				Object.entries(targetNonFlat).forEach(([atRule, nestedObj]) => {
-					Object.keys(nestedObj).forEach((prop) => {
-						records.push({
-							key: atRule + prop,
-							hash: nonFlatHash,
-							sheet: finalSheet
-						});
+				records.push({
+					key: selector,
+					hash: nonFlatHash,
+					sheet: styleSheet
+				});
+			});
+			Object.entries(nonFlatQuery).forEach(([atRule, nestedStyles]) => {
+				Object.entries(nestedStyles).forEach(([pseudoSelector, style]) => {
+					const nonFlatObj = { [key]: { [atRule]: { [pseudoSelector]: style } } };
+					const nonFlatHash = genBase36Hash(nonFlatObj, 1, 7);
+					const { styleSheet } = transpile(nonFlatObj, nonFlatHash);
+					const finalSheet = styleSheet.replace(`.${nonFlatHash}`, `.${nonFlatHash}:not(#\\#)`);
+					records.push({
+						key: atRule + pseudoSelector,
+						hash: nonFlatHash,
+						sheet: finalSheet
 					});
 				});
 			});
 		}
-		styleAtomMap.set(styleObj, records);
-		Object.defineProperty(result, key, { get: () => Object.freeze(styleObj) });
+		styleAtomMap.set(styleRule, records);
+		Object.defineProperty(result, key, { get: () => Object.freeze(styleRule) });
 	});
 	return Object.freeze(result);
 }
 
 const setSheets = new Set();
-function props(...objects) {
+function props(...rules) {
 	const seenSheets = new Set();
 	const baseSheets = [];
 	const classList = [];
 	const chosen = new Map();
 	const rightmostKeys = [];
 	const orderedKeys = [];
-	for (let i = objects.length - 1; i >= 0; i--) {
-		const obj = objects[i];
+	for (let i = rules.length - 1; i >= 0; i--) {
+		const obj = rules[i];
 		if (!obj) continue;
 		const records = styleAtomMap.get(obj);
 		if (!records) continue;
@@ -92,13 +98,13 @@ function props(...objects) {
 			propsIdx: i
 		});
 	}
-	for (let i = 0; i < objects.length; i++) {
-		const obj = objects[i];
+	for (let i = 0; i < rules.length; i++) {
+		const obj = rules[i];
 		if (!obj) continue;
 		const records = styleAtomMap.get(obj);
 		if (!records) continue;
 		for (const { key } of records) if (chosen.has(key) && chosen.get(key).propsIdx === i) {
-			if (i === objects.length - 1) rightmostKeys.push({
+			if (i === rules.length - 1) rightmostKeys.push({
 				...chosen.get(key),
 				key
 			});
@@ -126,55 +132,56 @@ function props(...objects) {
 	return classList.join(" ");
 }
 
-function global(object) {
-	const { styleSheet } = transpile(object, void 0, "--global");
+function global(rule) {
+	const { styleSheet } = transpile(rule, void 0, "--global");
 	if (typeof gQueue.promise === "undefined") gQueue.init();
 	gQueue.resolve(styleSheet);
 }
 
-const keyframes = (object) => {
-	const hash = genBase36Hash(object, 1, 8);
+const keyframes = (rule) => {
+	const hash = genBase36Hash(rule, 1, 8);
 	const ident = `kf-${hash}`;
-	global({ [`@keyframes ${ident}`]: object });
+	global({ [`@keyframes ${ident}`]: rule });
 	return ident;
 };
 
-const viewTransition = (object) => {
-	const hash = genBase36Hash(object, 1, 8);
+const viewTransition = (rule) => {
+	const hash = genBase36Hash(rule, 1, 8);
 	const ident = `vt-${hash}`;
 	global({
-		[`::view-transition-group(${ident})`]: object.group,
-		[`::view-transition-image-pair(${ident})`]: object.imagePair,
-		[`::view-transition-old(${ident})`]: object.old,
-		[`::view-transition-new(${ident})`]: object.new
+		[`::view-transition-group(${ident})`]: rule.group,
+		[`::view-transition-image-pair(${ident})`]: rule.imagePair,
+		[`::view-transition-old(${ident})`]: rule.old,
+		[`::view-transition-new(${ident})`]: rule.new
 	});
 	return ident;
 };
 
-const createTheme = (object) => {
+const createTheme = (rule) => {
 	const styles = {};
 	const result = {};
-	Object.entries(object).forEach(([key, value]) => {
-		const kebabKey = camelToKebabCase(key);
-		result[key] = `var(--${kebabKey})`;
-		Object.entries(value).forEach(([subKey, subValue]) => {
-			if (subKey.startsWith("@media")) {
-				styles[":root"] ||= {};
-				styles[":root"][subKey] ||= {};
-				styles[":root"][subKey][`--${kebabKey}`] = subValue;
-			} else {
-				const themeSelector = subKey === "default" ? ":root" : `:root[data-theme="${subKey}"]`;
-				styles[themeSelector] ||= {};
-				styles[themeSelector][`--${kebabKey}`] = subValue;
-			}
-		});
-	});
+	for (const key in rule) {
+		const varName = `${camelToKebabCase(key)}`;
+		const varKey = `--${varName}`;
+		result[key] = `var(--${varName})`;
+		const themeMap = rule[key];
+		for (const themeKey in themeMap) {
+			const value = themeMap[themeKey];
+			const isQuery = themeKey.startsWith("@media") || themeKey.startsWith("@container");
+			const selector = isQuery || themeKey === "default" ? ":root" : `:root[data-theme="${themeKey}"]`;
+			const target = styles[selector] ||= {};
+			if (isQuery) {
+				const queryObj = target[themeKey] ||= {};
+				queryObj[varKey] = value;
+			} else target[varKey] = value;
+		}
+	}
 	global(styles);
 	return result;
 };
 
-const createStatic = (object) => {
-	return object;
+const createStatic = (rule) => {
+	return rule;
 };
 
 const x = (className, varSet) => ({
@@ -184,23 +191,23 @@ const x = (className, varSet) => ({
 
 var StyleSheet = class {
 	constructor() {}
-	static create(object) {
-		return create(object);
+	static create(rule) {
+		return create(rule);
 	}
-	static props(...objects) {
-		return props(...objects);
+	static props(...rules) {
+		return props(...rules);
 	}
-	static keyframes(object) {
-		return keyframes(object);
+	static keyframes(rule) {
+		return keyframes(rule);
 	}
-	static viewTransition(object) {
-		return viewTransition(object);
+	static viewTransition(rule) {
+		return viewTransition(rule);
 	}
-	static createTheme(object) {
-		return createTheme(object);
+	static createTheme(rule) {
+		return createTheme(rule);
 	}
-	static createStatic(object) {
-		return createStatic(object);
+	static createStatic(rule) {
+		return createStatic(rule);
 	}
 };
 const css = StyleSheet;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/core",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "description": "An atomic CSS runtime designed to disappear.",
   "author": "Refirst 11",
   "license": "MIT",
@@ -45,7 +45,7 @@
     "stylesheet.css"
   ],
   "dependencies": {
-    "zss-engine": "1.2.2"
+    "zss-engine": "2.0.0"
   },
   "publishConfig": {
     "access": "public",