@plumeria/core 1.0.3 → 2.0.0

package/dist/index.d.ts

@@ -1,11 +1,6 @@
-import { CSSProperties, CreateKeyframes, CreateStyle, CreateStyleType, CreateTokens, CreateValues, ReturnType, ReturnVariableType, RxVariableSet, ViewTransitionOptions } from "zss-engine";
+import { CSSProperties, CreateKeyframes, CreateStyle, CreateStyleType, CreateTheme, CreateValues, ReturnType, ReturnVariableType, ReturnX, ViewTransitionOptions, XVariableSet } from "zss-engine";
 
-declare const x: (className: string, varSet: RxVariableSet) => {
-  className: string;
-  style: {
-    [k: string]: string;
-  };
-};
+declare const x: (className: string, varSet: XVariableSet) => ReturnX;
 
 declare class StyleSheet {
   private constructor();
@@ -34,17 +29,17 @@ declare class StyleSheet {
    */
   static viewTransition(object: ViewTransitionOptions): string;
   /**
-   * Returns the same object, with its type narrowed for better autocompletion.
-   * @param object A map of keys to constant string or number values.
-   * @see https://plumeria.dev/docs/api-reference/defineConsts
+   * Returns an object whose values can be used with `css.props`.
+   * @param object A style object containing CSS properties.
+   * @see https://plumeria.dev/docs/api-reference/create
    */
-  static defineConsts<const T extends CreateValues>(object: T): T;
+  static createTheme<const T extends CreateTheme>(object: T): ReturnVariableType<T>;
   /**
-   * Returns an object containing CSS variable names and the original token values.
-   * @param object A nested object defining design tokens.
-   * @see https://plumeria.dev/docs/api-reference/defineTokens
+   * Returns an object whose values can be used with `css.props`.
+   * @param object A style object containing CSS properties.
+   * @see https://plumeria.dev/docs/api-reference/create
    */
-  static defineTokens<const T extends CreateTokens>(object: T): ReturnVariableType<T>;
+  static createStatic<const T extends CreateValues>(object: T): T;
 }
 declare const css: typeof StyleSheet;
 

package/dist/index.js

@@ -24,7 +24,7 @@ function create(object) {
 				const sheet = sheetArray[i];
 				const hash = hashArray[i];
 				if (sheet.includes("@media") || sheet.includes("@container")) {
-					querySheetParts.push(sheet);
+					querySheetParts.push(sheet.replace(`.${hash}`, `.${hash}:not(#\\#)`));
 					queryHashParts.push(hash);
 				} else {
 					baseSheetParts.push(sheet);
@@ -43,16 +43,26 @@ function create(object) {
 			});
 		});
 		if (Object.keys(nonFlat).length > 0) {
-			const modNonFlat = (0, zss_engine.transformNestedSelectors)(nonFlat);
-			const nonFlatObj = { [key]: modNonFlat };
-			const nonFlatHash = (0, zss_engine.genBase36Hash)(nonFlatObj, 1, 7);
-			const { styleSheet } = (0, zss_engine.transpile)(nonFlatObj, nonFlatHash);
+			const nonFlatBase = {};
+			const nonFlatQuery = {};
 			Object.entries(nonFlat).forEach(([atRule, nestedObj]) => {
-				Object.keys(nestedObj).forEach((prop) => {
-					records.push({
-						key: atRule + prop,
-						hash: nonFlatHash,
-						sheet: styleSheet
+				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 };
+				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
+						});
 					});
 				});
 			});
@@ -141,7 +151,7 @@ const viewTransition = (object) => {
 	return ident;
 };
 
-const defineTokens = (object) => {
+const createTheme = (object) => {
 	const styles = {};
 	const result = {};
 	Object.entries(object).forEach(([key, value]) => {
@@ -163,8 +173,8 @@ const defineTokens = (object) => {
 	return result;
 };
 
-const defineConsts = (constants) => {
-	return constants;
+const createStatic = (object) => {
+	return object;
 };
 
 const x = (className, varSet) => ({
@@ -186,11 +196,11 @@ var StyleSheet = class {
 	static viewTransition(object) {
 		return viewTransition(object);
 	}
-	static defineConsts(object) {
-		return defineConsts(object);
+	static createTheme(object) {
+		return createTheme(object);
 	}
-	static defineTokens(object) {
-		return defineTokens(object);
+	static createStatic(object) {
+		return createStatic(object);
 	}
 };
 const css = StyleSheet;

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { globalPromise_1, globalPromise_2, initPromise_1, initPromise_2, resolvePromise_1, resolvePromise_2 } from "./css.mjs";
-import { camelToKebabCase, genBase36Hash, overrideLonghand, processAtomicProps, splitAtomicAndNested, transformNestedSelectors, transpile } from "zss-engine";
+import { camelToKebabCase, genBase36Hash, overrideLonghand, processAtomicProps, splitAtomicAndNested, transpile } from "zss-engine";
 
 const styleAtomMap = new WeakMap();
 function create(object) {
@@ -24,7 +24,7 @@ function create(object) {
 				const sheet = sheetArray[i];
 				const hash = hashArray[i];
 				if (sheet.includes("@media") || sheet.includes("@container")) {
-					querySheetParts.push(sheet);
+					querySheetParts.push(sheet.replace(`.${hash}`, `.${hash}:not(#\\#)`));
 					queryHashParts.push(hash);
 				} else {
 					baseSheetParts.push(sheet);
@@ -43,16 +43,26 @@ function create(object) {
 			});
 		});
 		if (Object.keys(nonFlat).length > 0) {
-			const modNonFlat = transformNestedSelectors(nonFlat);
-			const nonFlatObj = { [key]: modNonFlat };
-			const nonFlatHash = genBase36Hash(nonFlatObj, 1, 7);
-			const { styleSheet } = transpile(nonFlatObj, nonFlatHash);
+			const nonFlatBase = {};
+			const nonFlatQuery = {};
 			Object.entries(nonFlat).forEach(([atRule, nestedObj]) => {
-				Object.keys(nestedObj).forEach((prop) => {
-					records.push({
-						key: atRule + prop,
-						hash: nonFlatHash,
-						sheet: styleSheet
+				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 };
+				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
+						});
 					});
 				});
 			});
@@ -141,7 +151,7 @@ const viewTransition = (object) => {
 	return ident;
 };
 
-const defineTokens = (object) => {
+const createTheme = (object) => {
 	const styles = {};
 	const result = {};
 	Object.entries(object).forEach(([key, value]) => {
@@ -163,8 +173,8 @@ const defineTokens = (object) => {
 	return result;
 };
 
-const defineConsts = (constants) => {
-	return constants;
+const createStatic = (object) => {
+	return object;
 };
 
 const x = (className, varSet) => ({
@@ -186,11 +196,11 @@ var StyleSheet = class {
 	static viewTransition(object) {
 		return viewTransition(object);
 	}
-	static defineConsts(object) {
-		return defineConsts(object);
+	static createTheme(object) {
+		return createTheme(object);
 	}
-	static defineTokens(object) {
-		return defineTokens(object);
+	static createStatic(object) {
+		return createStatic(object);
 	}
 };
 const css = StyleSheet;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/core",
-  "version": "1.0.3",
+  "version": "2.0.0",
   "description": "The atomic on-demand CSS-in-JS.",
   "author": "Refirst 11",
   "license": "MIT",
@@ -45,7 +45,7 @@
     "stylesheet.css"
   ],
   "dependencies": {
-    "zss-engine": "1.0.0"
+    "zss-engine": "1.1.0"
   },
   "publishConfig": {
     "access": "public",