@plumeria/core 13.0.2 → 13.1.1

package/lib/css.d.ts

@@ -3,11 +3,11 @@
  * Bundler plugin required.
  * ```ts
  * type create = <const T extends Record<string, CreateStyleValue>>(rule: T)=> CreateReturnType<T>;
+ * type variants = <T extends Variants>(rule: T) => (props: { [K in keyof T]?: keyof T[K] }) => VariantStyles<T>;
  * type createTheme = <const T extends CreateTheme>(themeSelector: string, rule: T) => CreateThemeReturnType<T>;
  * type createStatic = <const T extends CreateStatic>(rule: T)=> T;
  * type keyframes = <const T extends Keyframes>(rule: T) => string;
  * type viewTransition = <const T extends ViewTransition>(rule: T) => string;
- * type variants = <T extends Variants>(rule: T) => (props: { [K in keyof T]?: keyof T[K] }) => CSSProperties;
  * type marker = (id: string, pseudo: string) => Marker;
  * type extended = <I extends string, P extends string>(id: I, pseudo: P) => Extended<I, P>;
  * type use = (...rules: (false | CSSProperties | null | undefined)[])=> string;
@@ -23,6 +23,7 @@ declare module '@plumeria/core' {
     CreateThemeReturnType,
     CreateStatic,
     Variants,
+    VariantStyles,
     Keyframes,
     ViewTransition,
     Marker,
@@ -44,6 +45,11 @@ declare module '@plumeria/core' {
     rule: T,
   ) => CreateReturnType<T>;
 
+  export const variants: variants;
+  export type variants = <T extends Variants>(
+    rule: T,
+  ) => (props: { [K in keyof T]?: keyof T[K] }) => VariantStyles<T>;
+
   export const createTheme: createTheme;
   export type createTheme = <const T extends CreateTheme>(
     themeSelector: string,
@@ -61,11 +67,6 @@ declare module '@plumeria/core' {
     rule: T,
   ) => string;
 
-  export const variants: variants;
-  export type variants = <T extends Variants>(
-    rule: T,
-  ) => (props: { [K in keyof T]?: keyof T[K] }) => CSSProperties;
-
   export const marker: marker;
   export type marker = (id: string, pseudo: string) => Marker;
 

package/lib/types.d.ts

@@ -42,23 +42,39 @@ type CSSProperties =
 
 type CreateStyleValue = CSSProperties | ((...args: any[]) => CSSProperties);
 
-type CreateReturnType<T> = {
-  [K in keyof T]: T[K] extends (...args: infer A) => infer R
-    ? (...args: A) => Readonly<R>
-    : Readonly<T[K]>;
+const ClassNameTag: unique symbol;
+
+type AtomicClassNameFor<out P extends string, out V> = string & {
+  readonly _ident: typeof ClassNameTag;
+  readonly _key: P;
+  readonly _value: V;
 };
 
+type MapNamespace<T> = Readonly<{
+  [key in keyof T]: T[key] extends Record<string, unknown>
+    ? key extends `:${string}` | `@${string}` | `[${string}`
+      ? MapNamespace<T[key]>
+      : AtomicClassNameFor<key & string, T[key]>
+    : key extends string
+      ? AtomicClassNameFor<key, T[key]>
+      : never;
+}>;
+
+type CreateReturnType<T> = Readonly<{
+  [K in keyof T]: T[K] extends (...args: infer A) => infer R
+    ? (...args: A) => MapNamespace<R>
+    : MapNamespace<T[K]>;
+}>;
+
 type StyleName = CSSProperties | (false | CSSProperties | null | undefined)[];
 
 type CreateStatic = Record<string, string | number>;
 
-type ReadonlyTheme<T> = Readonly<T> & CSSVariableValue;
-
 type CreateTheme = {
   [key: string]: ThemeValue;
 };
 type CreateThemeReturnType<T> = {
-  readonly [K in keyof T]: ReadonlyTheme<T[K]>;
+  readonly [K in keyof T]: Readonly<T[K]>;
 };
 
 type KeyframesInSelector = 'from' | 'to' | `${number}%`;
@@ -75,6 +91,23 @@ type ViewTransition = {
 
 type Variants = Record<string, Record<string, CSSProperties>>;
 
+type AllOptionsOf<T> = {
+  [G in keyof T]: T[G][keyof T[G]];
+}[keyof T];
+
+type KeysOfUnion<U> = U extends unknown ? keyof U : never;
+type ValueForKeyInUnion<U, K> = U extends unknown
+  ? K extends keyof U
+    ? U[K]
+    : never
+  : never;
+
+type MergeVariants<U> = Readonly<{
+  [K in KeysOfUnion<U>]?: ValueForKeyInUnion<U, K>;
+}>;
+
+type VariantStyles<T> = MergeVariants<AllOptionsOf<T>>;
+
 type Marker = Record<string, CSSProperties>;
 
 type StripColon<T extends string> = T extends `:${infer R}` ? StripColon<R> : T;
@@ -93,8 +126,10 @@ export type {
   CreateThemeReturnType,
   CreateStatic,
   Variants,
+  VariantStyles,
   Keyframes,
   ViewTransition,
   Marker,
   Extended,
+  AtomicClassNameFor,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/core",
-  "version": "13.0.2",
+  "version": "13.1.1",
   "description": "Zero-cost abstraction layer for styling React components.",
   "author": "Refirst 11",
   "license": "MIT",