@plumeria/core 2.2.1 → 2.2.3

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,43 +2,43 @@ 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]) => {
 			if (prop.startsWith("@media") || prop.startsWith("@container")) Object.entries(value).forEach(([innerProp, innerValue]) => {
 				const atomicMap = new Map();
 				(0, zss_engine.processAtomicProps)({ [innerProp]: innerValue }, atomicMap, prop);
-				const querySheetParts = [];
-				const queryHashParts = [];
+				const querySheets = [];
+				const queryHashes = [];
 				for (const [hash, sheet] of atomicMap) {
-					querySheetParts.push(sheet.replace(`.${hash}`, `.${hash}:not(#\\#)`));
-					queryHashParts.push(hash);
+					querySheets.push(sheet.replace(`.${hash}`, `.${hash}:not(#\\#)`));
+					queryHashes.push(hash);
 				}
-				if (querySheetParts.length > 0) records.push({
+				if (querySheets.length > 0) records.push({
 					key: prop + innerProp,
-					hash: queryHashParts.join(" "),
-					sheet: querySheetParts.join("")
+					hash: queryHashes.join(" "),
+					sheet: querySheets.join("")
 				});
 			});
 			else {
 				const atomicMap = new Map();
 				(0, zss_engine.processAtomicProps)({ [prop]: value }, atomicMap);
-				const baseSheetParts = [];
-				const baseHashParts = [];
+				const sheets = [];
+				const hashes = [];
 				for (const [hash, sheet] of atomicMap) {
-					baseSheetParts.push(sheet);
-					baseHashParts.push(hash);
+					sheets.push(sheet);
+					hashes.push(hash);
 				}
-				if (baseSheetParts.length > 0) records.push({
+				if (sheets.length > 0) records.push({
 					key: prop,
-					hash: baseHashParts.join(" "),
-					sheet: baseSheetParts.join("")
+					hash: hashes.join(" "),
+					sheet: sheets.join("")
 				});
 			}
 		});
@@ -67,22 +67,22 @@ function create(object) {
 				});
 			});
 		}
-		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 injectedStyleSheets = new Set();
-function props(...objects) {
+const setSheets = new Set();
+function props(...rules) {
 	const seenSheets = new Set();
-	const allStyleSheets = [];
+	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 +92,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
 			});
@@ -112,69 +112,70 @@ function props(...objects) {
 	for (const { hash, sheet } of orderedKeys) if (!seenSheets.has(sheet)) {
 		seenSheets.add(sheet);
 		classList.push(hash);
-		allStyleSheets.push(sheet);
+		baseSheets.push(sheet);
 	}
 	for (const { hash, sheet } of rightmostKeys) if (!seenSheets.has(sheet)) {
 		seenSheets.add(sheet);
 		classList.push(hash);
-		allStyleSheets.push(sheet);
+		baseSheets.push(sheet);
 	}
-	const uniqueStyleSheets = [...allStyleSheets].filter((sheet) => !injectedStyleSheets.has(sheet));
-	uniqueStyleSheets.forEach((sheet) => injectedStyleSheets.add(sheet));
+	const uniqueSheets = [...baseSheets].filter((sheet) => !setSheets.has(sheet));
+	uniqueSheets.forEach((sheet) => setSheets.add(sheet));
 	if (typeof require_css.pQueue.promise === "undefined") require_css.pQueue.init();
-	require_css.pQueue.resolve(uniqueStyleSheets.join(""));
+	require_css.pQueue.resolve(uniqueSheets.join(""));
 	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 +185,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,43 +2,43 @@ 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]) => {
 			if (prop.startsWith("@media") || prop.startsWith("@container")) Object.entries(value).forEach(([innerProp, innerValue]) => {
 				const atomicMap = new Map();
 				processAtomicProps({ [innerProp]: innerValue }, atomicMap, prop);
-				const querySheetParts = [];
-				const queryHashParts = [];
+				const querySheets = [];
+				const queryHashes = [];
 				for (const [hash, sheet] of atomicMap) {
-					querySheetParts.push(sheet.replace(`.${hash}`, `.${hash}:not(#\\#)`));
-					queryHashParts.push(hash);
+					querySheets.push(sheet.replace(`.${hash}`, `.${hash}:not(#\\#)`));
+					queryHashes.push(hash);
 				}
-				if (querySheetParts.length > 0) records.push({
+				if (querySheets.length > 0) records.push({
 					key: prop + innerProp,
-					hash: queryHashParts.join(" "),
-					sheet: querySheetParts.join("")
+					hash: queryHashes.join(" "),
+					sheet: querySheets.join("")
 				});
 			});
 			else {
 				const atomicMap = new Map();
 				processAtomicProps({ [prop]: value }, atomicMap);
-				const baseSheetParts = [];
-				const baseHashParts = [];
+				const sheets = [];
+				const hashes = [];
 				for (const [hash, sheet] of atomicMap) {
-					baseSheetParts.push(sheet);
-					baseHashParts.push(hash);
+					sheets.push(sheet);
+					hashes.push(hash);
 				}
-				if (baseSheetParts.length > 0) records.push({
+				if (sheets.length > 0) records.push({
 					key: prop,
-					hash: baseHashParts.join(" "),
-					sheet: baseSheetParts.join("")
+					hash: hashes.join(" "),
+					sheet: sheets.join("")
 				});
 			}
 		});
@@ -67,22 +67,22 @@ function create(object) {
 				});
 			});
 		}
-		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 injectedStyleSheets = new Set();
-function props(...objects) {
+const setSheets = new Set();
+function props(...rules) {
 	const seenSheets = new Set();
-	const allStyleSheets = [];
+	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 +92,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
 			});
@@ -112,69 +112,70 @@ function props(...objects) {
 	for (const { hash, sheet } of orderedKeys) if (!seenSheets.has(sheet)) {
 		seenSheets.add(sheet);
 		classList.push(hash);
-		allStyleSheets.push(sheet);
+		baseSheets.push(sheet);
 	}
 	for (const { hash, sheet } of rightmostKeys) if (!seenSheets.has(sheet)) {
 		seenSheets.add(sheet);
 		classList.push(hash);
-		allStyleSheets.push(sheet);
+		baseSheets.push(sheet);
 	}
-	const uniqueStyleSheets = [...allStyleSheets].filter((sheet) => !injectedStyleSheets.has(sheet));
-	uniqueStyleSheets.forEach((sheet) => injectedStyleSheets.add(sheet));
+	const uniqueSheets = [...baseSheets].filter((sheet) => !setSheets.has(sheet));
+	uniqueSheets.forEach((sheet) => setSheets.add(sheet));
 	if (typeof pQueue.promise === "undefined") pQueue.init();
-	pQueue.resolve(uniqueStyleSheets.join(""));
+	pQueue.resolve(uniqueSheets.join(""));
 	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 +185,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.1",
+  "version": "2.2.3",
   "description": "An atomic CSS runtime designed to disappear.",
   "author": "Refirst 11",
   "license": "MIT",