@mochi-css/vanilla 0.0.1 → 0.0.3

package/README.md

@@ -1,7 +1,144 @@
-<p align="center">
-  <img width="256" height="256" src="../../assets/mochi-vanilla256.png" alt="mochi-css logo">
-</p>
+# Mochi-CSS/vanilla
 
-# 🧁 Mochi-CSS/vanilla
+This package is part of [Mochi-CSS project](https://github.com/Niikelion/mochi-css) that provides styling functions and type definitions.
 
-🚧 Under construction 🚧
+## Functions
+
+### `css(...styles)`
+
+`css` is the fundamental styling function of Mochi-CSS.
+It takes style definitions as parameters, marks them for static extraction and returns class names to apply on elements.
+
+```ts
+import {css} from "@mochi-css/vanilla"
+
+const buttonStyles = css({
+    borderRadius: 10,
+    border: "10px solid red"
+})
+
+console.log(`${buttonStyles}`)
+```
+
+Output of the `css` function is also a valid style definition, so you can split your styles:
+
+```ts
+const textStyles = css({
+    color: "green"
+})
+
+const buttonStyles = css(textStyles, {
+    borderRadius: 10,
+    border: "10px solid red"
+})
+```
+
+### `styled(component, ...styles)`
+
+`styled`  is just a simple wrapper around `css` that takes a component as the first argument and applies all the classnames for you.
+
+```tsx
+import {styled} from "@mochi-css/vanilla"
+
+const Button = styled("button", {
+    borderRadius: 10,
+    border: "10px solid red"
+})
+```
+
+## Style definitions
+
+Now, that we know how to use our style definitions, we probably should learn how to write them, right?
+Style definition is either bundle of styles returned by `css` or object containing:
+
+* any number of valid css properties converted to camelCase, like in reacts styles property
+* any number of css variable assignments, more on that later
+* optional variants definition
+* optional default variants definition
+
+In the future, nested css selectors and media queries will be available as parts of style definitions
+
+## Variants
+
+You may want to create many variants of a button, with a shared set of css:
+
+```ts
+import {css} from "@mochi-css/vanilla"
+
+const baseButtonStyle = css({
+    border: "2px solid black",
+    color: "black",
+    backgroundColor: "white"
+})
+
+const redButtonStyle = css(baseButtonStyle, {
+    backgroundColor: "red"
+})
+```
+
+This works, but now, either you have to wrap your component manually and decide which style to apply or use different components.
+To make the code simpler and cleaner, Mochi-CSS allows you to specify variants inside the style definition, and even handles variant params for you!
+
+```tsx
+import {styled, css} from "@mochi-css/vanilla"
+
+const buttonStyle = css({
+    border: "2px solid black",
+    color: "black",
+    backgroundColor: "white",
+    variants: {
+        color: {
+            white: {
+                backgroundColor: "white"
+            },
+            red: {
+                backgroundColor: "red"
+            }
+        }
+    },
+    defaultVariants: {
+        color: "white"
+    }
+})
+
+const Button = styled("button", buttonStyle)
+
+const SomeComponent = () => <div>
+    <Button>White button</Button>
+    <Button color="red">Red button</Button>
+</div>
+```
+
+`defaultVariants` is optional, but we recommend that you specify defaults for all the variants.
+
+## Tokens
+
+To help with type safety, Mochi-CSS provides typed wrappers around concept of css variables.
+Variables can be created using `createToken<T>(name)` function:
+
+```ts
+import {createToken, css, CssColorLike} from "@mochi-css/vanilla"
+
+const primaryColor = createToken<CssColorLike>("primaryColor")
+const secondaryColor = createToken<CssColorLike>("secondaryColor")
+const buttonColor = createToken<CssColorLike>("buttonColor")
+
+const buttonStyle = css({
+    backgroundColor: buttonColor,
+    variants: {
+        variant: {
+            primary: {
+                [buttonColor]: primaryColor
+            },
+            secondary: {
+                [buttonColor]: secondaryColor
+            }
+        }
+    },
+    defaultVariants: {
+        variant: "primary"
+    }
+})
+```
+
+As you can see, tokens can be used as css values and as keys in style definition objects.

package/dist/index.d.mts

@@ -18,7 +18,7 @@ declare class PercentValue extends NumericValue<"%"> {
 }
 type LengthUnit = "%" | "px" | "vw" | "vh" | "rem";
 type CssLengthString = `${number}${LengthUnit}` | CssVarVal | Globals;
-type CssLength = number | CssLengthString;
+type CssLength = number | CssLengthString | CssVarVal;
 type CssLengthLike = CssLike<CssLength>;
 declare function asLength(value: CssLengthLike): CssLengthString;
 //#endregion
@@ -37,7 +37,7 @@ type RGBAColorString = `rgba(${number},${number},${number},${number})`;
 type HSLColorString = `hsl(${number},${number},${number})`;
 type HSLAColorString = `hsla(${number},${number},${number},${number})`;
 type ColorString = RGBColorString | RGBAColorString | HSLColorString | HSLAColorString;
-type CssColor = DataType.NamedColor | "transparent" | "currentColor" | "auto" | ColorString;
+type CssColor = DataType.NamedColor | "transparent" | "currentColor" | "auto" | ColorString | CssVarVal;
 type CssColorLike = CssLike<CssColor>;
 declare function asColor(value: CssColorLike): CssColor;
 //#endregion
@@ -139,7 +139,7 @@ declare class Token<T> {
   toString(): CssVar;
   set(value: T): Record<CssVar, T>;
 }
-declare function createToken<T>(name: string): CssVarVal extends T ? Token<T> : never;
+declare function createToken<T>(name: string): Token<T>;
 //#endregion
 export { CSSObject, ColorString, CssColor, CssColorLike, CssLength, CssLengthLike, CssLengthString, CssLike, CssLikeObject, CssObjectBlock, CssVar, CssVarVal, DefaultVariants, HSLAColorString, HSLColorString, LengthUnit, MergeCSSVariants, MochiCSS, MochiCSSProps, NumericValue, PercentValue, PixelValue, RGBAColorString, RGBColorString, RefineVariants, type StyleProps, Token, Unit, VariantProps, asColor, asLength, createToken, css, cssFromProps, styled };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.d.ts

@@ -18,7 +18,7 @@ declare class PercentValue extends NumericValue<"%"> {
 }
 type LengthUnit = "%" | "px" | "vw" | "vh" | "rem";
 type CssLengthString = `${number}${LengthUnit}` | CssVarVal | Globals;
-type CssLength = number | CssLengthString;
+type CssLength = number | CssLengthString | CssVarVal;
 type CssLengthLike = CssLike<CssLength>;
 declare function asLength(value: CssLengthLike): CssLengthString;
 //#endregion
@@ -37,7 +37,7 @@ type RGBAColorString = `rgba(${number},${number},${number},${number})`;
 type HSLColorString = `hsl(${number},${number},${number})`;
 type HSLAColorString = `hsla(${number},${number},${number},${number})`;
 type ColorString = RGBColorString | RGBAColorString | HSLColorString | HSLAColorString;
-type CssColor = DataType.NamedColor | "transparent" | "currentColor" | "auto" | ColorString;
+type CssColor = DataType.NamedColor | "transparent" | "currentColor" | "auto" | ColorString | CssVarVal;
 type CssColorLike = CssLike<CssColor>;
 declare function asColor(value: CssColorLike): CssColor;
 //#endregion
@@ -139,7 +139,7 @@ declare class Token<T> {
   toString(): CssVar;
   set(value: T): Record<CssVar, T>;
 }
-declare function createToken<T>(name: string): CssVarVal extends T ? Token<T> : never;
+declare function createToken<T>(name: string): Token<T>;
 //#endregion
 export { CSSObject, ColorString, CssColor, CssColorLike, CssLength, CssLengthLike, CssLengthString, CssLike, CssLikeObject, CssObjectBlock, CssVar, CssVarVal, DefaultVariants, HSLAColorString, HSLColorString, LengthUnit, MergeCSSVariants, MochiCSS, MochiCSSProps, NumericValue, PercentValue, PixelValue, RGBAColorString, RGBColorString, RefineVariants, type StyleProps, Token, Unit, VariantProps, asColor, asLength, createToken, css, cssFromProps, styled };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -141,7 +141,7 @@ function shortHash(input, length = 8) {
 	return out || "0";
 }
 function hashCss(value) {
-	return `s${shortHash([...Object.entries(value)].sort(([a], [b]) => a === b ? 0 : a > b ? 1 : 0).map(([key, value$1]) => `${key}: ${value$1};`).join("\n"))}`;
+	return `s${shortHash([...Object.entries(value)].sort(([a], [b]) => a === b ? 0 : a > b ? 1 : -1).map(([key, value$1]) => `${key}: ${value$1};`).join("\n"))}`;
 }
 
 //#endregion

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["value: number","suffix: T","value","classNames: string[]","variantClassNames: { [K in keyof V]: { [P in keyof V[K]]: string } }","defaultVariants: Partial<RefineVariants<V>>","styles","cssToMerge: MochiCSS<DefaultVariants>[]","css","styles","name: String"],"sources":["../src/values/number.ts","../src/values/length.ts","../src/values/color.ts","../src/props.ts","../src/css.ts","../src/styled.ts","../src/token.ts"],"sourcesContent":["import {LengthUnit} from \"@/values/length\";\n\nexport type Unit = \"%\" | \"px\" | \"deg\" | \"rad\" | \"grad\" | \"rem\" | \"vw\" | \"vh\"\nexport class NumericValue<T extends LengthUnit = LengthUnit> {\n    constructor(\n        private readonly value: number,\n        private readonly suffix: T\n    ) {}\n\n    toString(): `${number}${T}` {\n        return `${this.value}${this.suffix}`\n    }\n}\n","import {CssLike, CssVarVal} from \"./shared\";\nimport { NumericValue } from \"./number\";\nimport {Globals} from \"csstype\"\n\nexport class PixelValue extends NumericValue<\"px\"> {\n    constructor(value: number) { super(value, \"px\") }\n}\n\nexport class PercentValue extends NumericValue<\"%\"> {\n    constructor(value: number) { super(value, \"%\") }\n}\n\nexport type LengthUnit = \"%\" | \"px\" | \"vw\" | \"vh\" | \"rem\"\nexport type CssLengthString = `${number}${LengthUnit}` | CssVarVal | Globals\nexport type CssLength = number | CssLengthString\nexport type CssLengthLike = CssLike<CssLength>\n\nexport function asLength(value: CssLengthLike): CssLengthString {\n    switch (typeof value) {\n        case \"number\": return `${value}px`\n        case \"string\": return value\n        default: return asLength(value.value)\n    }\n}\n","import {DataType} from \"csstype\"\nimport {CssLike} from \"@/values/shared\";\n\nexport type RGBColorString = `rgb(${number},${number},${number})`\nexport type RGBAColorString = `rgba(${number},${number},${number},${number})`\n\nexport type HSLColorString = `hsl(${number},${number},${number})`\nexport type HSLAColorString = `hsla(${number},${number},${number},${number})`\n\nexport type ColorString = RGBColorString | RGBAColorString | HSLColorString | HSLAColorString\nexport type CssColor = DataType.NamedColor | \"transparent\" | \"currentColor\" | \"auto\" | ColorString\n\nexport type CssColorLike = CssLike<CssColor>\n\nexport function asColor(value: CssColorLike): CssColor {\n    if (typeof value === \"string\") return value\n    return value.value\n}\n","import {Properties, ObsoleteProperties, Property, DataType} from \"csstype\"\nimport {asColor, asLength, CssLike, CssVar} from \"@/values\";\n\nfunction todo(_: unknown, n: string): string {\n    console.error(`Property ${n} is not implemented`)\n    return \"<missing>\"\n}\n\nfunction asEnum<E extends string>(v: CssLike<E>): string {\n    if (typeof v === \"string\") return v\n    return v.value\n}\n\ntype Props = Required<Omit<Properties, keyof ObsoleteProperties>>\n\nconst styles = {\n    borderBlockEndWidth: asLength,\n    borderBlockStartWidth: asLength,\n    borderBottomColor: asColor,\n    borderBottomLeftRadius: asLength,\n    borderBottomRightRadius: asLength,\n    borderBottomWidth: asLength,\n    borderEndEndRadius: asLength,\n    borderEndStartRadius: asLength,\n    borderInlineEndWidth: asLength,\n    borderInlineStartWidth: asLength,\n    borderLeftWidth: asLength,\n    borderRightWidth: asLength,\n    borderStartEndRadius: asLength,\n    borderStartStartRadius: asLength,\n    borderTopLeftRadius: asLength,\n    borderTopRightRadius: asLength,\n    borderTopWidth: asLength,\n    height: asLength,\n    lineHeight: asLength,\n    marginBottom: asLength,\n    marginLeft: asLength,\n    marginRight: asLength,\n    marginTop: asLength,\n    paddingBottom: asLength,\n    paddingLeft: asLength,\n    paddingRight: asLength,\n    paddingTop: asLength,\n    width: asLength,\n    borderBlockWidth: asLength,\n    borderInlineWidth: asLength,\n    borderWidth: asLength,\n} satisfies { [K in keyof Props]?: (v: any, n: string) => string }\n\nfunction asVar(value: CssLike<string | number>): string {\n    switch (typeof value) {\n        case 'string': return value\n        case 'number': return `${value}`\n        default: return asVar(value.value)\n    }\n}\n\nexport type StyleProps\n    = { [K in keyof typeof styles]?: Parameters<(typeof styles)[K]>[0] }\n    & { [K in Exclude<keyof Props, keyof typeof styles>]?: CssLike<Props[K]> }\n    & { [K in CssVar]?: Parameters<(typeof asVar)>[0] }\n\nfunction startsWith<P extends string>(value: string, prefix: P): value is `${P}${string}` {\n    return value.startsWith(prefix)\n}\n\nfunction camelToKebab(str: string): string {\n    return str.replace(/[A-Z]/g, m => \"-\" + m.toLowerCase());\n}\n\nexport function cssFromProps(props: StyleProps): Record<string, string> {\n    return Object.fromEntries(Object.entries(props).map(([key, value]) => {\n        if (startsWith(key, \"--\")) return [key, asVar(value as CssLike<string | number>)]\n        const parser = (styles as Record<string, (v: unknown, n: string) => string>)[key]\n        if (value === undefined || value === null) return undefined\n        const cssKey = camelToKebab(key)\n        if (!parser) return [cssKey, asEnum(`${value}`)]\n        return [cssKey, parser(value, key)]\n    }).filter(v => v !== undefined))\n}\n\nconst hashBase = \"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-_\";\nconst base = hashBase.length\n\nfunction shortHash(input: string, length = 8): string {\n    // fast 32-bit integer hash (djb2 variant)\n    let h = 5381;\n    for (let i = 0; i < input.length; i++) {\n        h = (h * 33) ^ input.charCodeAt(i);\n    }\n    h >>>= 0; // force unsigned\n\n    // convert number to base\n    let out = \"\";\n    let num = h;\n\n    while (num > 0 && out.length < length) {\n        out = hashBase[num % base] + out;\n        num = Math.floor(num / base);\n    }\n    return out || \"0\";\n}\n\nexport function hashCss(value: Record<string, string>): string {\n    const items = [...Object.entries(value)]\n    const stringified = items\n        .sort(([a], [b]) => a === b ? 0 : a > b ? 1 : 0)\n        .map(([key, value]) => `${key}: ${value};`)\n        .join('\\n')\n    return `s${shortHash(stringified)}`\n}\n","import {cssFromProps, hashCss, StyleProps} from \"@/props\";\nimport clsx from \"clsx\";\n\nfunction compareString<T extends string>(a: T, b: T) {\n    return a < b ? -1 : a === b ? 0 : 1\n}\nfunction compareStringKey<T extends [string, any]>(a: T, b: T) {\n    return compareString(a[0], b[0])\n}\n\nexport class MochiCSS<V extends Record<string, Record<string, StyleProps>> = {}> {\n    constructor(\n        public readonly classNames: string[],\n        public readonly variantClassNames: { [K in keyof V]: { [P in keyof V[K]]: string } },\n        public readonly defaultVariants: Partial<RefineVariants<V>>\n    ) {}\n\n    toString() {\n        return this.classNames.map(c => `.${c}`).join('')\n    }\n\n    variant(props: RefineVariants<V>): string {\n        const keys = new Set<keyof V & string>([\n            ...Object.keys(props),\n            ...Object.keys(this.defaultVariants)\n        ].filter(k => k in this.variantClassNames))\n        return clsx(this.classNames, ...keys.values().map(k => {\n            const variantKey = (k in props ? props[k] : undefined) ?? this.defaultVariants[k]!\n            return this.variantClassNames[k][`${variantKey}`]\n        }))\n    }\n}\n\nexport class CssObjectBlock {\n    public readonly className: string\n    public readonly cssProps: Record<string, string>\n\n    constructor(\n        styles: StyleProps\n    ) {\n        this.cssProps = cssFromProps(styles)\n        this.className = hashCss(this.cssProps)\n    }\n\n    get selector(): string {\n        return `.${this.className}`\n    }\n\n    asCssString(selectors: string[]): string {\n        const props = Object.entries(this.cssProps)\n            .toSorted(compareStringKey)\n            .map(([k, v]) => `    ${k}: ${v};\\n`)\n            .join('')\n        return selectors.map(s => `${s}${this.selector} {\\n${props}}`).join('\\n\\n')\n    }\n}\n\nexport class CSSObject<V extends Record<string, Record<string, StyleProps>> = {}> {\n    public readonly mainBlock: CssObjectBlock\n    public readonly variantBlocks: { [K in keyof V & string]: { [I in keyof V[K] & string]: CssObjectBlock } }\n    public readonly variantDefaults: Partial<RefineVariants<V>>\n\n    public constructor(\n        { variants, defaultVariants, ...props }: MochiCSSProps<V>\n    ) {\n        this.mainBlock = new CssObjectBlock(props)\n        this.variantBlocks = {} as typeof this.variantBlocks\n        this.variantDefaults = {} as typeof this.variantDefaults\n\n        if (!variants) return\n        for (const variantGroupName in variants) {\n            this.variantBlocks[variantGroupName] = {} as typeof this.variantBlocks[keyof typeof this.variantBlocks]\n            const variantGroup = variants[variantGroupName]\n            for (const variantItemName in variantGroup) {\n                this.variantBlocks[variantGroupName][variantItemName] = new CssObjectBlock(variantGroup[variantItemName] ?? {})\n            }\n        }\n        this.variantDefaults = defaultVariants!\n    }\n\n    public asCssString(): string {\n        return [\n            this.mainBlock.asCssString([]),\n            ...Object.entries(this.variantBlocks)\n                .toSorted(compareStringKey)\n                .flatMap(([_, b]) => Object.entries(b).toSorted(compareStringKey))\n                .map(([_, b]) => b.asCssString([this.mainBlock.selector]))\n        ].join('\\n\\n')\n    }\n\n    public asMochiCss(): MochiCSS<V> {\n        return new MochiCSS<V>(\n            [this.mainBlock.className],\n            Object.fromEntries(Object.entries(this.variantBlocks).map(([key, variantOptions]) => {\n                return [key, Object.fromEntries(Object.entries(variantOptions).map(([optionKey, block]) => {\n                    return [optionKey, block.className]\n                }))]\n            })) as { [K in keyof V]: { [P in keyof V[K]]: string } },\n            this.variantDefaults ?? {}\n        )\n    }\n}\n\nexport type DefaultVariants = Record<string, Record<string, StyleProps>>\n\ntype RefineVariantType<T extends string> = T extends \"true\" ? true : T extends \"false\" ? false : T extends string ? T : string\n\nexport type VariantProps<V extends DefaultVariants> = {\n    variants?: V\n    defaultVariants?: { [K in keyof V]: (keyof V[K]) extends any ? RefineVariantType<keyof V[K] & string> : never }\n}\n\nexport type MochiCSSProps<V extends DefaultVariants> = StyleProps & VariantProps<V>\n\ntype Override<A extends object, B extends object> = B & Omit<A, keyof B>\nexport type MergeCSSVariants<V extends DefaultVariants[]> = V extends [infer V1 extends DefaultVariants, ...infer VRest extends DefaultVariants[]] ? Override<V1, MergeCSSVariants<VRest>> : {}\ntype RefineVariantTypes<V extends Record<string, string>> = { [K in keyof V]: RefineVariantType<V[K]> }\nexport type RefineVariants<T extends DefaultVariants> = RefineVariantTypes<{ [K in keyof T]: keyof T[K] & string }>\n\nexport function css<V extends DefaultVariants[]>(...props: { [K in keyof V]: MochiCSSProps<V[K]> | MochiCSS }): MochiCSS<MergeCSSVariants<V>>\n{\n    const cssToMerge: MochiCSS<DefaultVariants>[] = props.map(p => {\n        if (p instanceof MochiCSS) return p\n        return new CSSObject<DefaultVariants>(p).asMochiCss()\n    })\n\n    return new MochiCSS<DefaultVariants>(\n        cssToMerge.flatMap(css => css.classNames),\n        cssToMerge.reduce((a, b) => Object.assign(a, b.variantClassNames), {}),\n        cssToMerge.reduce((a, b) => Object.assign(a, b.defaultVariants), {})\n    ) as MochiCSS<MergeCSSVariants<V>>\n}\n","import {ComponentProps, ComponentType, createElement, FC, HTMLElementType} from \"react\";\nimport {css, DefaultVariants, MergeCSSVariants, MochiCSSProps, RefineVariants} from \"@/css\";\nimport clsx from \"clsx\";\n\ntype MochiProps<V extends DefaultVariants[]> = {\n    className?: string\n} & Partial<RefineVariants<MergeCSSVariants<V>>>\ntype Cls = { className?: string }\n\nexport function styled<T extends HTMLElementType | ComponentType<Cls>, V extends DefaultVariants[]>(target: T, ...props: { [K in keyof V]: MochiCSSProps<V[K]> }): FC<Omit<ComponentProps<T>, keyof MochiProps<V>> & MochiProps<V>>\n{\n    const styles = css<V>(...props)\n    return ({ className, ...p }: Omit<ComponentProps<T>, keyof MochiProps<V>> & MochiProps<V>) =>\n        //TODO: omit variant props in p\n        createElement(target, { className: clsx(styles.variant(p as any), className), ...p })\n}\n","import {CssVar, CssVarVal} from \"@/values\";\n\nexport class Token<T> {\n    constructor(public readonly name: String) {}\n\n    get variable(): CssVar {\n        return `--${this.name}`\n    }\n    get value(): CssVarVal {\n        return `var(${this.variable})`\n    }\n\n    toString(): CssVar {\n        return this.variable\n    }\n\n    set(value: T): Record<CssVar, T> {\n        return {\n            [this.variable]: value\n        } as Record<CssVar, T>\n    }\n}\n\nexport function createToken<T>(name: string): CssVarVal extends T ? Token<T> : never {\n    return new Token(name) as CssVarVal extends T ? Token<T> : never\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["value: number","suffix: T","value","classNames: string[]","variantClassNames: { [K in keyof V]: { [P in keyof V[K]]: string } }","defaultVariants: Partial<RefineVariants<V>>","styles","cssToMerge: MochiCSS<DefaultVariants>[]","css","styles","name: String"],"sources":["../src/values/number.ts","../src/values/length.ts","../src/values/color.ts","../src/props.ts","../src/css.ts","../src/styled.ts","../src/token.ts"],"sourcesContent":["import {LengthUnit} from \"@/values/length\";\n\nexport type Unit = \"%\" | \"px\" | \"deg\" | \"rad\" | \"grad\" | \"rem\" | \"vw\" | \"vh\"\nexport class NumericValue<T extends LengthUnit = LengthUnit> {\n    constructor(\n        private readonly value: number,\n        private readonly suffix: T\n    ) {}\n\n    toString(): `${number}${T}` {\n        return `${this.value}${this.suffix}`\n    }\n}\n","import {CssLike, CssVarVal} from \"./shared\";\nimport { NumericValue } from \"./number\";\nimport {Globals} from \"csstype\"\n\nexport class PixelValue extends NumericValue<\"px\"> {\n    constructor(value: number) { super(value, \"px\") }\n}\n\nexport class PercentValue extends NumericValue<\"%\"> {\n    constructor(value: number) { super(value, \"%\") }\n}\n\nexport type LengthUnit = \"%\" | \"px\" | \"vw\" | \"vh\" | \"rem\"\nexport type CssLengthString = `${number}${LengthUnit}` | CssVarVal | Globals\nexport type CssLength = number | CssLengthString | CssVarVal\nexport type CssLengthLike = CssLike<CssLength>\n\nexport function asLength(value: CssLengthLike): CssLengthString {\n    switch (typeof value) {\n        case \"number\": return `${value}px`\n        case \"string\": return value\n        default: return asLength(value.value)\n    }\n}\n","import {DataType} from \"csstype\"\nimport {CssLike, CssVarVal} from \"@/values/shared\";\n\nexport type RGBColorString = `rgb(${number},${number},${number})`\nexport type RGBAColorString = `rgba(${number},${number},${number},${number})`\n\nexport type HSLColorString = `hsl(${number},${number},${number})`\nexport type HSLAColorString = `hsla(${number},${number},${number},${number})`\n\nexport type ColorString = RGBColorString | RGBAColorString | HSLColorString | HSLAColorString\nexport type CssColor = DataType.NamedColor | \"transparent\" | \"currentColor\" | \"auto\" | ColorString | CssVarVal\n\nexport type CssColorLike = CssLike<CssColor>\n\nexport function asColor(value: CssColorLike): CssColor {\n    if (typeof value === \"string\") return value\n    return value.value\n}\n","import {Properties, ObsoleteProperties, AtRules } from \"csstype\"\nimport {asColor, asLength, CssLike, CssVar} from \"@/values\";\n\nfunction asEnum<E extends string>(v: CssLike<E>): string {\n    if (typeof v === \"string\") return v\n    return v.value\n}\n\ntype Props = Required<Omit<Properties, keyof ObsoleteProperties>>\n\nconst styles = {\n    borderBlockEndWidth: asLength,\n    borderBlockStartWidth: asLength,\n    borderBottomColor: asColor,\n    borderBottomLeftRadius: asLength,\n    borderBottomRightRadius: asLength,\n    borderBottomWidth: asLength,\n    borderEndEndRadius: asLength,\n    borderEndStartRadius: asLength,\n    borderInlineEndWidth: asLength,\n    borderInlineStartWidth: asLength,\n    borderLeftWidth: asLength,\n    borderRightWidth: asLength,\n    borderStartEndRadius: asLength,\n    borderStartStartRadius: asLength,\n    borderTopLeftRadius: asLength,\n    borderTopRightRadius: asLength,\n    borderTopWidth: asLength,\n    height: asLength,\n    lineHeight: asLength,\n    marginBottom: asLength,\n    marginLeft: asLength,\n    marginRight: asLength,\n    marginTop: asLength,\n    paddingBottom: asLength,\n    paddingLeft: asLength,\n    paddingRight: asLength,\n    paddingTop: asLength,\n    width: asLength,\n    borderBlockWidth: asLength,\n    borderInlineWidth: asLength,\n    borderWidth: asLength,\n} satisfies { [K in keyof Props]?: (v: any, n: string) => string }\n\nfunction asVar(value: CssLike<string | number>): string {\n    switch (typeof value) {\n        case 'string': return value\n        case 'number': return `${value}`\n        default: return asVar(value.value)\n    }\n}\n\nexport type NestedSelector = `&${string}`\nexport type MediaSelector = `${AtRules}${string}`\ntype NestedStyleKeys = Exclude<string, keyof Props | CssVar>\n\nexport type StyleProps\n    = { [K in keyof typeof styles]?: Parameters<(typeof styles)[K]>[0] }\n    & { [K in Exclude<keyof Props, keyof typeof styles>]?: CssLike<Props[K]> }\n    & { [K in CssVar]?: Parameters<(typeof asVar)>[0] }\n    // & { [K in NestedStyleKeys]?: StyleProps }\n\nfunction startsWith<P extends string>(value: string, prefix: P): value is `${P}${string}` {\n    return value.startsWith(prefix)\n}\n\nfunction camelToKebab(str: string): string {\n    return str.replace(/[A-Z]/g, m => \"-\" + m.toLowerCase());\n}\n\nexport function cssFromProps(props: StyleProps): Record<string, string> {\n    return Object.fromEntries(Object.entries(props).map(([key, value]) => {\n        // transform variable\n        if (startsWith(key, \"--\")) return [key, asVar(value as CssLike<string | number>)]\n        const parser = (styles as Record<string, (v: unknown, n: string) => string>)[key]\n        if (value === undefined || value === null) return undefined\n        const cssKey = camelToKebab(key)\n        if (!parser) return [cssKey, asEnum(`${value}`)]\n        return [cssKey, parser(value, key)]\n    }).filter(v => v !== undefined))\n}\n\nconst hashBase = \"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-_\";\nconst base = hashBase.length\n\nfunction shortHash(input: string, length = 8): string {\n    // fast 32-bit integer hash (djb2 variant)\n    let h = 5381;\n    for (let i = 0; i < input.length; i++) {\n        h = (h * 33) ^ input.charCodeAt(i);\n    }\n    h >>>= 0; // force unsigned\n\n    // convert number to base\n    let out = \"\";\n    let num = h;\n\n    while (num > 0 && out.length < length) {\n        out = hashBase[num % base] + out;\n        num = Math.floor(num / base);\n    }\n    return out || \"0\";\n}\n\nexport function hashCss(value: Record<string, string>): string {\n    const items = [...Object.entries(value)]\n    const stringified = items\n        .sort(([a], [b]) => a === b ? 0 : a > b ? 1 : -1)\n        .map(([key, value]) => `${key}: ${value};`)\n        .join('\\n')\n    return `s${shortHash(stringified)}`\n}\n","import {cssFromProps, hashCss, StyleProps} from \"@/props\";\nimport clsx from \"clsx\";\n\nfunction compareString<T extends string>(a: T, b: T) {\n    return a < b ? -1 : a === b ? 0 : 1\n}\nfunction compareStringKey<T extends [string, any]>(a: T, b: T) {\n    return compareString(a[0], b[0])\n}\n\nexport class MochiCSS<V extends Record<string, Record<string, StyleProps>> = {}> {\n    constructor(\n        public readonly classNames: string[],\n        public readonly variantClassNames: { [K in keyof V]: { [P in keyof V[K]]: string } },\n        public readonly defaultVariants: Partial<RefineVariants<V>>\n    ) {}\n\n    toString() {\n        return this.classNames.map(c => `.${c}`).join('')\n    }\n\n    variant(props: RefineVariants<V>): string {\n        const keys = new Set<keyof V & string>([\n            ...Object.keys(props),\n            ...Object.keys(this.defaultVariants)\n        ].filter(k => k in this.variantClassNames))\n        return clsx(this.classNames, ...keys.values().map(k => {\n            const variantKey = (k in props ? props[k] : undefined) ?? this.defaultVariants[k]!\n            return this.variantClassNames[k][`${variantKey}`]\n        }))\n    }\n}\n\nexport class CssObjectBlock {\n    public readonly className: string\n    public readonly cssProps: Record<string, string>\n\n    constructor(\n        styles: StyleProps\n    ) {\n        this.cssProps = cssFromProps(styles)\n        this.className = hashCss(this.cssProps)\n    }\n\n    get selector(): string {\n        return `.${this.className}`\n    }\n\n    asCssString(selectors: string[]): string {\n        const props = Object.entries(this.cssProps)\n            .toSorted(compareStringKey)\n            .map(([k, v]) => `    ${k}: ${v};\\n`)\n            .join('')\n        return selectors.map(s => `${s}${this.selector} {\\n${props}}`).join('\\n\\n')\n    }\n}\n\nexport class CSSObject<V extends Record<string, Record<string, StyleProps>> = {}> {\n    public readonly mainBlock: CssObjectBlock\n    public readonly variantBlocks: { [K in keyof V & string]: { [I in keyof V[K] & string]: CssObjectBlock } }\n    public readonly variantDefaults: Partial<RefineVariants<V>>\n\n    public constructor(\n        { variants, defaultVariants, ...props }: MochiCSSProps<V>\n    ) {\n        this.mainBlock = new CssObjectBlock(props)\n        this.variantBlocks = {} as typeof this.variantBlocks\n        this.variantDefaults = {} as typeof this.variantDefaults\n\n        if (!variants) return\n        for (const variantGroupName in variants) {\n            this.variantBlocks[variantGroupName] = {} as typeof this.variantBlocks[keyof typeof this.variantBlocks]\n            const variantGroup = variants[variantGroupName]\n            for (const variantItemName in variantGroup) {\n                this.variantBlocks[variantGroupName][variantItemName] = new CssObjectBlock(variantGroup[variantItemName] ?? {})\n            }\n        }\n        this.variantDefaults = defaultVariants!\n    }\n\n    public asCssString(): string {\n        return [\n            this.mainBlock.asCssString([]),\n            ...Object.entries(this.variantBlocks)\n                .toSorted(compareStringKey)\n                .flatMap(([_, b]) => Object.entries(b).toSorted(compareStringKey))\n                .map(([_, b]) => b.asCssString([this.mainBlock.selector]))\n        ].join('\\n\\n')\n    }\n\n    public asMochiCss(): MochiCSS<V> {\n        return new MochiCSS<V>(\n            [this.mainBlock.className],\n            Object.fromEntries(Object.entries(this.variantBlocks).map(([key, variantOptions]) => {\n                return [key, Object.fromEntries(Object.entries(variantOptions).map(([optionKey, block]) => {\n                    return [optionKey, block.className]\n                }))]\n            })) as { [K in keyof V]: { [P in keyof V[K]]: string } },\n            this.variantDefaults ?? {}\n        )\n    }\n}\n\nexport type DefaultVariants = Record<string, Record<string, StyleProps>>\n\ntype RefineVariantType<T extends string> = T extends \"true\" ? true : T extends \"false\" ? false : T extends string ? T : string\n\nexport type VariantProps<V extends DefaultVariants> = {\n    variants?: V\n    defaultVariants?: { [K in keyof V]: (keyof V[K]) extends any ? RefineVariantType<keyof V[K] & string> : never }\n}\n\nexport type MochiCSSProps<V extends DefaultVariants> = StyleProps & VariantProps<V>\n\ntype Override<A extends object, B extends object> = B & Omit<A, keyof B>\nexport type MergeCSSVariants<V extends DefaultVariants[]> = V extends [infer V1 extends DefaultVariants, ...infer VRest extends DefaultVariants[]] ? Override<V1, MergeCSSVariants<VRest>> : {}\ntype RefineVariantTypes<V extends Record<string, string>> = { [K in keyof V]: RefineVariantType<V[K]> }\nexport type RefineVariants<T extends DefaultVariants> = RefineVariantTypes<{ [K in keyof T]: keyof T[K] & string }>\n\nexport function css<V extends DefaultVariants[]>(...props: { [K in keyof V]: MochiCSSProps<V[K]> | MochiCSS }): MochiCSS<MergeCSSVariants<V>>\n{\n    const cssToMerge: MochiCSS<DefaultVariants>[] = props.map(p => {\n        if (p instanceof MochiCSS) return p\n        return new CSSObject<DefaultVariants>(p).asMochiCss()\n    })\n\n    return new MochiCSS<DefaultVariants>(\n        cssToMerge.flatMap(css => css.classNames),\n        cssToMerge.reduce((a, b) => Object.assign(a, b.variantClassNames), {}),\n        cssToMerge.reduce((a, b) => Object.assign(a, b.defaultVariants), {})\n    ) as MochiCSS<MergeCSSVariants<V>>\n}\n","import {ComponentProps, ComponentType, createElement, FC, HTMLElementType} from \"react\";\nimport {css, DefaultVariants, MergeCSSVariants, MochiCSSProps, RefineVariants} from \"@/css\";\nimport clsx from \"clsx\";\n\ntype MochiProps<V extends DefaultVariants[]> = {\n    className?: string\n} & Partial<RefineVariants<MergeCSSVariants<V>>>\ntype Cls = { className?: string }\n\nexport function styled<T extends HTMLElementType | ComponentType<Cls>, V extends DefaultVariants[]>(target: T, ...props: { [K in keyof V]: MochiCSSProps<V[K]> }): FC<Omit<ComponentProps<T>, keyof MochiProps<V>> & MochiProps<V>>\n{\n    const styles = css<V>(...props)\n    return ({ className, ...p }: Omit<ComponentProps<T>, keyof MochiProps<V>> & MochiProps<V>) =>\n        //TODO: omit variant props in p\n        createElement(target, { className: clsx(styles.variant(p as any), className), ...p })\n}\n","import {CssVar, CssVarVal} from \"@/values\";\n\nexport class Token<T> {\n    constructor(public readonly name: String) {}\n\n    get variable(): CssVar {\n        return `--${this.name}`\n    }\n    get value(): CssVarVal {\n        return `var(${this.variable})`\n    }\n\n    toString(): CssVar {\n        return this.variable\n    }\n\n    set(value: T): Record<CssVar, T> {\n        return {\n            [this.variable]: value\n        } as Record<CssVar, T>\n    }\n}\n\nexport function createToken<T>(name: string): Token<T> {\n    return new Token(name)\n}\n"],"mappings":"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"}

package/dist/index.mjs

@@ -116,7 +116,7 @@ function shortHash(input, length = 8) {
 	return out || "0";
 }
 function hashCss(value) {
-	return `s${shortHash([...Object.entries(value)].sort(([a], [b]) => a === b ? 0 : a > b ? 1 : 0).map(([key, value$1]) => `${key}: ${value$1};`).join("\n"))}`;
+	return `s${shortHash([...Object.entries(value)].sort(([a], [b]) => a === b ? 0 : a > b ? 1 : -1).map(([key, value$1]) => `${key}: ${value$1};`).join("\n"))}`;
 }
 
 //#endregion

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["value: number","suffix: T","value","classNames: string[]","variantClassNames: { [K in keyof V]: { [P in keyof V[K]]: string } }","defaultVariants: Partial<RefineVariants<V>>","styles","cssToMerge: MochiCSS<DefaultVariants>[]","css","styles","name: String"],"sources":["../src/values/number.ts","../src/values/length.ts","../src/values/color.ts","../src/props.ts","../src/css.ts","../src/styled.ts","../src/token.ts"],"sourcesContent":["import {LengthUnit} from \"@/values/length\";\n\nexport type Unit = \"%\" | \"px\" | \"deg\" | \"rad\" | \"grad\" | \"rem\" | \"vw\" | \"vh\"\nexport class NumericValue<T extends LengthUnit = LengthUnit> {\n    constructor(\n        private readonly value: number,\n        private readonly suffix: T\n    ) {}\n\n    toString(): `${number}${T}` {\n        return `${this.value}${this.suffix}`\n    }\n}\n","import {CssLike, CssVarVal} from \"./shared\";\nimport { NumericValue } from \"./number\";\nimport {Globals} from \"csstype\"\n\nexport class PixelValue extends NumericValue<\"px\"> {\n    constructor(value: number) { super(value, \"px\") }\n}\n\nexport class PercentValue extends NumericValue<\"%\"> {\n    constructor(value: number) { super(value, \"%\") }\n}\n\nexport type LengthUnit = \"%\" | \"px\" | \"vw\" | \"vh\" | \"rem\"\nexport type CssLengthString = `${number}${LengthUnit}` | CssVarVal | Globals\nexport type CssLength = number | CssLengthString\nexport type CssLengthLike = CssLike<CssLength>\n\nexport function asLength(value: CssLengthLike): CssLengthString {\n    switch (typeof value) {\n        case \"number\": return `${value}px`\n        case \"string\": return value\n        default: return asLength(value.value)\n    }\n}\n","import {DataType} from \"csstype\"\nimport {CssLike} from \"@/values/shared\";\n\nexport type RGBColorString = `rgb(${number},${number},${number})`\nexport type RGBAColorString = `rgba(${number},${number},${number},${number})`\n\nexport type HSLColorString = `hsl(${number},${number},${number})`\nexport type HSLAColorString = `hsla(${number},${number},${number},${number})`\n\nexport type ColorString = RGBColorString | RGBAColorString | HSLColorString | HSLAColorString\nexport type CssColor = DataType.NamedColor | \"transparent\" | \"currentColor\" | \"auto\" | ColorString\n\nexport type CssColorLike = CssLike<CssColor>\n\nexport function asColor(value: CssColorLike): CssColor {\n    if (typeof value === \"string\") return value\n    return value.value\n}\n","import {Properties, ObsoleteProperties, Property, DataType} from \"csstype\"\nimport {asColor, asLength, CssLike, CssVar} from \"@/values\";\n\nfunction todo(_: unknown, n: string): string {\n    console.error(`Property ${n} is not implemented`)\n    return \"<missing>\"\n}\n\nfunction asEnum<E extends string>(v: CssLike<E>): string {\n    if (typeof v === \"string\") return v\n    return v.value\n}\n\ntype Props = Required<Omit<Properties, keyof ObsoleteProperties>>\n\nconst styles = {\n    borderBlockEndWidth: asLength,\n    borderBlockStartWidth: asLength,\n    borderBottomColor: asColor,\n    borderBottomLeftRadius: asLength,\n    borderBottomRightRadius: asLength,\n    borderBottomWidth: asLength,\n    borderEndEndRadius: asLength,\n    borderEndStartRadius: asLength,\n    borderInlineEndWidth: asLength,\n    borderInlineStartWidth: asLength,\n    borderLeftWidth: asLength,\n    borderRightWidth: asLength,\n    borderStartEndRadius: asLength,\n    borderStartStartRadius: asLength,\n    borderTopLeftRadius: asLength,\n    borderTopRightRadius: asLength,\n    borderTopWidth: asLength,\n    height: asLength,\n    lineHeight: asLength,\n    marginBottom: asLength,\n    marginLeft: asLength,\n    marginRight: asLength,\n    marginTop: asLength,\n    paddingBottom: asLength,\n    paddingLeft: asLength,\n    paddingRight: asLength,\n    paddingTop: asLength,\n    width: asLength,\n    borderBlockWidth: asLength,\n    borderInlineWidth: asLength,\n    borderWidth: asLength,\n} satisfies { [K in keyof Props]?: (v: any, n: string) => string }\n\nfunction asVar(value: CssLike<string | number>): string {\n    switch (typeof value) {\n        case 'string': return value\n        case 'number': return `${value}`\n        default: return asVar(value.value)\n    }\n}\n\nexport type StyleProps\n    = { [K in keyof typeof styles]?: Parameters<(typeof styles)[K]>[0] }\n    & { [K in Exclude<keyof Props, keyof typeof styles>]?: CssLike<Props[K]> }\n    & { [K in CssVar]?: Parameters<(typeof asVar)>[0] }\n\nfunction startsWith<P extends string>(value: string, prefix: P): value is `${P}${string}` {\n    return value.startsWith(prefix)\n}\n\nfunction camelToKebab(str: string): string {\n    return str.replace(/[A-Z]/g, m => \"-\" + m.toLowerCase());\n}\n\nexport function cssFromProps(props: StyleProps): Record<string, string> {\n    return Object.fromEntries(Object.entries(props).map(([key, value]) => {\n        if (startsWith(key, \"--\")) return [key, asVar(value as CssLike<string | number>)]\n        const parser = (styles as Record<string, (v: unknown, n: string) => string>)[key]\n        if (value === undefined || value === null) return undefined\n        const cssKey = camelToKebab(key)\n        if (!parser) return [cssKey, asEnum(`${value}`)]\n        return [cssKey, parser(value, key)]\n    }).filter(v => v !== undefined))\n}\n\nconst hashBase = \"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-_\";\nconst base = hashBase.length\n\nfunction shortHash(input: string, length = 8): string {\n    // fast 32-bit integer hash (djb2 variant)\n    let h = 5381;\n    for (let i = 0; i < input.length; i++) {\n        h = (h * 33) ^ input.charCodeAt(i);\n    }\n    h >>>= 0; // force unsigned\n\n    // convert number to base\n    let out = \"\";\n    let num = h;\n\n    while (num > 0 && out.length < length) {\n        out = hashBase[num % base] + out;\n        num = Math.floor(num / base);\n    }\n    return out || \"0\";\n}\n\nexport function hashCss(value: Record<string, string>): string {\n    const items = [...Object.entries(value)]\n    const stringified = items\n        .sort(([a], [b]) => a === b ? 0 : a > b ? 1 : 0)\n        .map(([key, value]) => `${key}: ${value};`)\n        .join('\\n')\n    return `s${shortHash(stringified)}`\n}\n","import {cssFromProps, hashCss, StyleProps} from \"@/props\";\nimport clsx from \"clsx\";\n\nfunction compareString<T extends string>(a: T, b: T) {\n    return a < b ? -1 : a === b ? 0 : 1\n}\nfunction compareStringKey<T extends [string, any]>(a: T, b: T) {\n    return compareString(a[0], b[0])\n}\n\nexport class MochiCSS<V extends Record<string, Record<string, StyleProps>> = {}> {\n    constructor(\n        public readonly classNames: string[],\n        public readonly variantClassNames: { [K in keyof V]: { [P in keyof V[K]]: string } },\n        public readonly defaultVariants: Partial<RefineVariants<V>>\n    ) {}\n\n    toString() {\n        return this.classNames.map(c => `.${c}`).join('')\n    }\n\n    variant(props: RefineVariants<V>): string {\n        const keys = new Set<keyof V & string>([\n            ...Object.keys(props),\n            ...Object.keys(this.defaultVariants)\n        ].filter(k => k in this.variantClassNames))\n        return clsx(this.classNames, ...keys.values().map(k => {\n            const variantKey = (k in props ? props[k] : undefined) ?? this.defaultVariants[k]!\n            return this.variantClassNames[k][`${variantKey}`]\n        }))\n    }\n}\n\nexport class CssObjectBlock {\n    public readonly className: string\n    public readonly cssProps: Record<string, string>\n\n    constructor(\n        styles: StyleProps\n    ) {\n        this.cssProps = cssFromProps(styles)\n        this.className = hashCss(this.cssProps)\n    }\n\n    get selector(): string {\n        return `.${this.className}`\n    }\n\n    asCssString(selectors: string[]): string {\n        const props = Object.entries(this.cssProps)\n            .toSorted(compareStringKey)\n            .map(([k, v]) => `    ${k}: ${v};\\n`)\n            .join('')\n        return selectors.map(s => `${s}${this.selector} {\\n${props}}`).join('\\n\\n')\n    }\n}\n\nexport class CSSObject<V extends Record<string, Record<string, StyleProps>> = {}> {\n    public readonly mainBlock: CssObjectBlock\n    public readonly variantBlocks: { [K in keyof V & string]: { [I in keyof V[K] & string]: CssObjectBlock } }\n    public readonly variantDefaults: Partial<RefineVariants<V>>\n\n    public constructor(\n        { variants, defaultVariants, ...props }: MochiCSSProps<V>\n    ) {\n        this.mainBlock = new CssObjectBlock(props)\n        this.variantBlocks = {} as typeof this.variantBlocks\n        this.variantDefaults = {} as typeof this.variantDefaults\n\n        if (!variants) return\n        for (const variantGroupName in variants) {\n            this.variantBlocks[variantGroupName] = {} as typeof this.variantBlocks[keyof typeof this.variantBlocks]\n            const variantGroup = variants[variantGroupName]\n            for (const variantItemName in variantGroup) {\n                this.variantBlocks[variantGroupName][variantItemName] = new CssObjectBlock(variantGroup[variantItemName] ?? {})\n            }\n        }\n        this.variantDefaults = defaultVariants!\n    }\n\n    public asCssString(): string {\n        return [\n            this.mainBlock.asCssString([]),\n            ...Object.entries(this.variantBlocks)\n                .toSorted(compareStringKey)\n                .flatMap(([_, b]) => Object.entries(b).toSorted(compareStringKey))\n                .map(([_, b]) => b.asCssString([this.mainBlock.selector]))\n        ].join('\\n\\n')\n    }\n\n    public asMochiCss(): MochiCSS<V> {\n        return new MochiCSS<V>(\n            [this.mainBlock.className],\n            Object.fromEntries(Object.entries(this.variantBlocks).map(([key, variantOptions]) => {\n                return [key, Object.fromEntries(Object.entries(variantOptions).map(([optionKey, block]) => {\n                    return [optionKey, block.className]\n                }))]\n            })) as { [K in keyof V]: { [P in keyof V[K]]: string } },\n            this.variantDefaults ?? {}\n        )\n    }\n}\n\nexport type DefaultVariants = Record<string, Record<string, StyleProps>>\n\ntype RefineVariantType<T extends string> = T extends \"true\" ? true : T extends \"false\" ? false : T extends string ? T : string\n\nexport type VariantProps<V extends DefaultVariants> = {\n    variants?: V\n    defaultVariants?: { [K in keyof V]: (keyof V[K]) extends any ? RefineVariantType<keyof V[K] & string> : never }\n}\n\nexport type MochiCSSProps<V extends DefaultVariants> = StyleProps & VariantProps<V>\n\ntype Override<A extends object, B extends object> = B & Omit<A, keyof B>\nexport type MergeCSSVariants<V extends DefaultVariants[]> = V extends [infer V1 extends DefaultVariants, ...infer VRest extends DefaultVariants[]] ? Override<V1, MergeCSSVariants<VRest>> : {}\ntype RefineVariantTypes<V extends Record<string, string>> = { [K in keyof V]: RefineVariantType<V[K]> }\nexport type RefineVariants<T extends DefaultVariants> = RefineVariantTypes<{ [K in keyof T]: keyof T[K] & string }>\n\nexport function css<V extends DefaultVariants[]>(...props: { [K in keyof V]: MochiCSSProps<V[K]> | MochiCSS }): MochiCSS<MergeCSSVariants<V>>\n{\n    const cssToMerge: MochiCSS<DefaultVariants>[] = props.map(p => {\n        if (p instanceof MochiCSS) return p\n        return new CSSObject<DefaultVariants>(p).asMochiCss()\n    })\n\n    return new MochiCSS<DefaultVariants>(\n        cssToMerge.flatMap(css => css.classNames),\n        cssToMerge.reduce((a, b) => Object.assign(a, b.variantClassNames), {}),\n        cssToMerge.reduce((a, b) => Object.assign(a, b.defaultVariants), {})\n    ) as MochiCSS<MergeCSSVariants<V>>\n}\n","import {ComponentProps, ComponentType, createElement, FC, HTMLElementType} from \"react\";\nimport {css, DefaultVariants, MergeCSSVariants, MochiCSSProps, RefineVariants} from \"@/css\";\nimport clsx from \"clsx\";\n\ntype MochiProps<V extends DefaultVariants[]> = {\n    className?: string\n} & Partial<RefineVariants<MergeCSSVariants<V>>>\ntype Cls = { className?: string }\n\nexport function styled<T extends HTMLElementType | ComponentType<Cls>, V extends DefaultVariants[]>(target: T, ...props: { [K in keyof V]: MochiCSSProps<V[K]> }): FC<Omit<ComponentProps<T>, keyof MochiProps<V>> & MochiProps<V>>\n{\n    const styles = css<V>(...props)\n    return ({ className, ...p }: Omit<ComponentProps<T>, keyof MochiProps<V>> & MochiProps<V>) =>\n        //TODO: omit variant props in p\n        createElement(target, { className: clsx(styles.variant(p as any), className), ...p })\n}\n","import {CssVar, CssVarVal} from \"@/values\";\n\nexport class Token<T> {\n    constructor(public readonly name: String) {}\n\n    get variable(): CssVar {\n        return `--${this.name}`\n    }\n    get value(): CssVarVal {\n        return `var(${this.variable})`\n    }\n\n    toString(): CssVar {\n        return this.variable\n    }\n\n    set(value: T): Record<CssVar, T> {\n        return {\n            [this.variable]: value\n        } as Record<CssVar, T>\n    }\n}\n\nexport function createToken<T>(name: string): CssVarVal extends T ? Token<T> : never {\n    return new Token(name) as CssVarVal extends T ? Token<T> : never\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["value: number","suffix: T","value","classNames: string[]","variantClassNames: { [K in keyof V]: { [P in keyof V[K]]: string } }","defaultVariants: Partial<RefineVariants<V>>","styles","cssToMerge: MochiCSS<DefaultVariants>[]","css","styles","name: String"],"sources":["../src/values/number.ts","../src/values/length.ts","../src/values/color.ts","../src/props.ts","../src/css.ts","../src/styled.ts","../src/token.ts"],"sourcesContent":["import {LengthUnit} from \"@/values/length\";\n\nexport type Unit = \"%\" | \"px\" | \"deg\" | \"rad\" | \"grad\" | \"rem\" | \"vw\" | \"vh\"\nexport class NumericValue<T extends LengthUnit = LengthUnit> {\n    constructor(\n        private readonly value: number,\n        private readonly suffix: T\n    ) {}\n\n    toString(): `${number}${T}` {\n        return `${this.value}${this.suffix}`\n    }\n}\n","import {CssLike, CssVarVal} from \"./shared\";\nimport { NumericValue } from \"./number\";\nimport {Globals} from \"csstype\"\n\nexport class PixelValue extends NumericValue<\"px\"> {\n    constructor(value: number) { super(value, \"px\") }\n}\n\nexport class PercentValue extends NumericValue<\"%\"> {\n    constructor(value: number) { super(value, \"%\") }\n}\n\nexport type LengthUnit = \"%\" | \"px\" | \"vw\" | \"vh\" | \"rem\"\nexport type CssLengthString = `${number}${LengthUnit}` | CssVarVal | Globals\nexport type CssLength = number | CssLengthString | CssVarVal\nexport type CssLengthLike = CssLike<CssLength>\n\nexport function asLength(value: CssLengthLike): CssLengthString {\n    switch (typeof value) {\n        case \"number\": return `${value}px`\n        case \"string\": return value\n        default: return asLength(value.value)\n    }\n}\n","import {DataType} from \"csstype\"\nimport {CssLike, CssVarVal} from \"@/values/shared\";\n\nexport type RGBColorString = `rgb(${number},${number},${number})`\nexport type RGBAColorString = `rgba(${number},${number},${number},${number})`\n\nexport type HSLColorString = `hsl(${number},${number},${number})`\nexport type HSLAColorString = `hsla(${number},${number},${number},${number})`\n\nexport type ColorString = RGBColorString | RGBAColorString | HSLColorString | HSLAColorString\nexport type CssColor = DataType.NamedColor | \"transparent\" | \"currentColor\" | \"auto\" | ColorString | CssVarVal\n\nexport type CssColorLike = CssLike<CssColor>\n\nexport function asColor(value: CssColorLike): CssColor {\n    if (typeof value === \"string\") return value\n    return value.value\n}\n","import {Properties, ObsoleteProperties, AtRules } from \"csstype\"\nimport {asColor, asLength, CssLike, CssVar} from \"@/values\";\n\nfunction asEnum<E extends string>(v: CssLike<E>): string {\n    if (typeof v === \"string\") return v\n    return v.value\n}\n\ntype Props = Required<Omit<Properties, keyof ObsoleteProperties>>\n\nconst styles = {\n    borderBlockEndWidth: asLength,\n    borderBlockStartWidth: asLength,\n    borderBottomColor: asColor,\n    borderBottomLeftRadius: asLength,\n    borderBottomRightRadius: asLength,\n    borderBottomWidth: asLength,\n    borderEndEndRadius: asLength,\n    borderEndStartRadius: asLength,\n    borderInlineEndWidth: asLength,\n    borderInlineStartWidth: asLength,\n    borderLeftWidth: asLength,\n    borderRightWidth: asLength,\n    borderStartEndRadius: asLength,\n    borderStartStartRadius: asLength,\n    borderTopLeftRadius: asLength,\n    borderTopRightRadius: asLength,\n    borderTopWidth: asLength,\n    height: asLength,\n    lineHeight: asLength,\n    marginBottom: asLength,\n    marginLeft: asLength,\n    marginRight: asLength,\n    marginTop: asLength,\n    paddingBottom: asLength,\n    paddingLeft: asLength,\n    paddingRight: asLength,\n    paddingTop: asLength,\n    width: asLength,\n    borderBlockWidth: asLength,\n    borderInlineWidth: asLength,\n    borderWidth: asLength,\n} satisfies { [K in keyof Props]?: (v: any, n: string) => string }\n\nfunction asVar(value: CssLike<string | number>): string {\n    switch (typeof value) {\n        case 'string': return value\n        case 'number': return `${value}`\n        default: return asVar(value.value)\n    }\n}\n\nexport type NestedSelector = `&${string}`\nexport type MediaSelector = `${AtRules}${string}`\ntype NestedStyleKeys = Exclude<string, keyof Props | CssVar>\n\nexport type StyleProps\n    = { [K in keyof typeof styles]?: Parameters<(typeof styles)[K]>[0] }\n    & { [K in Exclude<keyof Props, keyof typeof styles>]?: CssLike<Props[K]> }\n    & { [K in CssVar]?: Parameters<(typeof asVar)>[0] }\n    // & { [K in NestedStyleKeys]?: StyleProps }\n\nfunction startsWith<P extends string>(value: string, prefix: P): value is `${P}${string}` {\n    return value.startsWith(prefix)\n}\n\nfunction camelToKebab(str: string): string {\n    return str.replace(/[A-Z]/g, m => \"-\" + m.toLowerCase());\n}\n\nexport function cssFromProps(props: StyleProps): Record<string, string> {\n    return Object.fromEntries(Object.entries(props).map(([key, value]) => {\n        // transform variable\n        if (startsWith(key, \"--\")) return [key, asVar(value as CssLike<string | number>)]\n        const parser = (styles as Record<string, (v: unknown, n: string) => string>)[key]\n        if (value === undefined || value === null) return undefined\n        const cssKey = camelToKebab(key)\n        if (!parser) return [cssKey, asEnum(`${value}`)]\n        return [cssKey, parser(value, key)]\n    }).filter(v => v !== undefined))\n}\n\nconst hashBase = \"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-_\";\nconst base = hashBase.length\n\nfunction shortHash(input: string, length = 8): string {\n    // fast 32-bit integer hash (djb2 variant)\n    let h = 5381;\n    for (let i = 0; i < input.length; i++) {\n        h = (h * 33) ^ input.charCodeAt(i);\n    }\n    h >>>= 0; // force unsigned\n\n    // convert number to base\n    let out = \"\";\n    let num = h;\n\n    while (num > 0 && out.length < length) {\n        out = hashBase[num % base] + out;\n        num = Math.floor(num / base);\n    }\n    return out || \"0\";\n}\n\nexport function hashCss(value: Record<string, string>): string {\n    const items = [...Object.entries(value)]\n    const stringified = items\n        .sort(([a], [b]) => a === b ? 0 : a > b ? 1 : -1)\n        .map(([key, value]) => `${key}: ${value};`)\n        .join('\\n')\n    return `s${shortHash(stringified)}`\n}\n","import {cssFromProps, hashCss, StyleProps} from \"@/props\";\nimport clsx from \"clsx\";\n\nfunction compareString<T extends string>(a: T, b: T) {\n    return a < b ? -1 : a === b ? 0 : 1\n}\nfunction compareStringKey<T extends [string, any]>(a: T, b: T) {\n    return compareString(a[0], b[0])\n}\n\nexport class MochiCSS<V extends Record<string, Record<string, StyleProps>> = {}> {\n    constructor(\n        public readonly classNames: string[],\n        public readonly variantClassNames: { [K in keyof V]: { [P in keyof V[K]]: string } },\n        public readonly defaultVariants: Partial<RefineVariants<V>>\n    ) {}\n\n    toString() {\n        return this.classNames.map(c => `.${c}`).join('')\n    }\n\n    variant(props: RefineVariants<V>): string {\n        const keys = new Set<keyof V & string>([\n            ...Object.keys(props),\n            ...Object.keys(this.defaultVariants)\n        ].filter(k => k in this.variantClassNames))\n        return clsx(this.classNames, ...keys.values().map(k => {\n            const variantKey = (k in props ? props[k] : undefined) ?? this.defaultVariants[k]!\n            return this.variantClassNames[k][`${variantKey}`]\n        }))\n    }\n}\n\nexport class CssObjectBlock {\n    public readonly className: string\n    public readonly cssProps: Record<string, string>\n\n    constructor(\n        styles: StyleProps\n    ) {\n        this.cssProps = cssFromProps(styles)\n        this.className = hashCss(this.cssProps)\n    }\n\n    get selector(): string {\n        return `.${this.className}`\n    }\n\n    asCssString(selectors: string[]): string {\n        const props = Object.entries(this.cssProps)\n            .toSorted(compareStringKey)\n            .map(([k, v]) => `    ${k}: ${v};\\n`)\n            .join('')\n        return selectors.map(s => `${s}${this.selector} {\\n${props}}`).join('\\n\\n')\n    }\n}\n\nexport class CSSObject<V extends Record<string, Record<string, StyleProps>> = {}> {\n    public readonly mainBlock: CssObjectBlock\n    public readonly variantBlocks: { [K in keyof V & string]: { [I in keyof V[K] & string]: CssObjectBlock } }\n    public readonly variantDefaults: Partial<RefineVariants<V>>\n\n    public constructor(\n        { variants, defaultVariants, ...props }: MochiCSSProps<V>\n    ) {\n        this.mainBlock = new CssObjectBlock(props)\n        this.variantBlocks = {} as typeof this.variantBlocks\n        this.variantDefaults = {} as typeof this.variantDefaults\n\n        if (!variants) return\n        for (const variantGroupName in variants) {\n            this.variantBlocks[variantGroupName] = {} as typeof this.variantBlocks[keyof typeof this.variantBlocks]\n            const variantGroup = variants[variantGroupName]\n            for (const variantItemName in variantGroup) {\n                this.variantBlocks[variantGroupName][variantItemName] = new CssObjectBlock(variantGroup[variantItemName] ?? {})\n            }\n        }\n        this.variantDefaults = defaultVariants!\n    }\n\n    public asCssString(): string {\n        return [\n            this.mainBlock.asCssString([]),\n            ...Object.entries(this.variantBlocks)\n                .toSorted(compareStringKey)\n                .flatMap(([_, b]) => Object.entries(b).toSorted(compareStringKey))\n                .map(([_, b]) => b.asCssString([this.mainBlock.selector]))\n        ].join('\\n\\n')\n    }\n\n    public asMochiCss(): MochiCSS<V> {\n        return new MochiCSS<V>(\n            [this.mainBlock.className],\n            Object.fromEntries(Object.entries(this.variantBlocks).map(([key, variantOptions]) => {\n                return [key, Object.fromEntries(Object.entries(variantOptions).map(([optionKey, block]) => {\n                    return [optionKey, block.className]\n                }))]\n            })) as { [K in keyof V]: { [P in keyof V[K]]: string } },\n            this.variantDefaults ?? {}\n        )\n    }\n}\n\nexport type DefaultVariants = Record<string, Record<string, StyleProps>>\n\ntype RefineVariantType<T extends string> = T extends \"true\" ? true : T extends \"false\" ? false : T extends string ? T : string\n\nexport type VariantProps<V extends DefaultVariants> = {\n    variants?: V\n    defaultVariants?: { [K in keyof V]: (keyof V[K]) extends any ? RefineVariantType<keyof V[K] & string> : never }\n}\n\nexport type MochiCSSProps<V extends DefaultVariants> = StyleProps & VariantProps<V>\n\ntype Override<A extends object, B extends object> = B & Omit<A, keyof B>\nexport type MergeCSSVariants<V extends DefaultVariants[]> = V extends [infer V1 extends DefaultVariants, ...infer VRest extends DefaultVariants[]] ? Override<V1, MergeCSSVariants<VRest>> : {}\ntype RefineVariantTypes<V extends Record<string, string>> = { [K in keyof V]: RefineVariantType<V[K]> }\nexport type RefineVariants<T extends DefaultVariants> = RefineVariantTypes<{ [K in keyof T]: keyof T[K] & string }>\n\nexport function css<V extends DefaultVariants[]>(...props: { [K in keyof V]: MochiCSSProps<V[K]> | MochiCSS }): MochiCSS<MergeCSSVariants<V>>\n{\n    const cssToMerge: MochiCSS<DefaultVariants>[] = props.map(p => {\n        if (p instanceof MochiCSS) return p\n        return new CSSObject<DefaultVariants>(p).asMochiCss()\n    })\n\n    return new MochiCSS<DefaultVariants>(\n        cssToMerge.flatMap(css => css.classNames),\n        cssToMerge.reduce((a, b) => Object.assign(a, b.variantClassNames), {}),\n        cssToMerge.reduce((a, b) => Object.assign(a, b.defaultVariants), {})\n    ) as MochiCSS<MergeCSSVariants<V>>\n}\n","import {ComponentProps, ComponentType, createElement, FC, HTMLElementType} from \"react\";\nimport {css, DefaultVariants, MergeCSSVariants, MochiCSSProps, RefineVariants} from \"@/css\";\nimport clsx from \"clsx\";\n\ntype MochiProps<V extends DefaultVariants[]> = {\n    className?: string\n} & Partial<RefineVariants<MergeCSSVariants<V>>>\ntype Cls = { className?: string }\n\nexport function styled<T extends HTMLElementType | ComponentType<Cls>, V extends DefaultVariants[]>(target: T, ...props: { [K in keyof V]: MochiCSSProps<V[K]> }): FC<Omit<ComponentProps<T>, keyof MochiProps<V>> & MochiProps<V>>\n{\n    const styles = css<V>(...props)\n    return ({ className, ...p }: Omit<ComponentProps<T>, keyof MochiProps<V>> & MochiProps<V>) =>\n        //TODO: omit variant props in p\n        createElement(target, { className: clsx(styles.variant(p as any), className), ...p })\n}\n","import {CssVar, CssVarVal} from \"@/values\";\n\nexport class Token<T> {\n    constructor(public readonly name: String) {}\n\n    get variable(): CssVar {\n        return `--${this.name}`\n    }\n    get value(): CssVarVal {\n        return `var(${this.variable})`\n    }\n\n    toString(): CssVar {\n        return this.variable\n    }\n\n    set(value: T): Record<CssVar, T> {\n        return {\n            [this.variable]: value\n        } as Record<CssVar, T>\n    }\n}\n\nexport function createToken<T>(name: string): Token<T> {\n    return new Token(name)\n}\n"],"mappings":"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"}

package/package.json

@@ -1,38 +1,46 @@
 {
-  "name": "@mochi-css/vanilla",
-  "repository": "git@github.com:niikelion/mochi-css.git",
-  "version": "0.0.1",
-  "license": "MIT",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "files": [
-    "/dist"
-  ],
-  "exports": {
-    "import": {
-      "types": "./dist/index.d.mts",
-      "import": "./dist/index.mjs"
+    "name": "@mochi-css/vanilla",
+    "repository": "git@github.com:Niikelion/mochi-css.git",
+    "version": "0.0.3",
+    "license": "MIT",
+    "keywords": [
+        "css-in-js",
+        "styling",
+        "styles",
+        "react"
+    ],
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
+    "files": [
+        "/dist"
+    ],
+    "exports": {
+        "import": {
+            "types": "./dist/index.d.mts",
+            "import": "./dist/index.mjs"
+        },
+        "require": {
+            "types": "./dist/index.d.ts",
+            "require": "./dist/index.js"
+        }
     },
-    "require": {
-      "types": "./dist/index.d.ts",
-      "require": "./dist/index.js"
+    "scripts": {
+        "build": "tsdown && attw --pack .",
+        "test": "vitest"
+    },
+    "devDependencies": {
+        "@arethetypeswrong/cli": "^0.18.2",
+        "@gamedev-sensei/ts-config": "^2.0.0",
+        "@gamedev-sensei/tsdown-config": "^2.0.0",
+        "@types/node": "^24.8.1",
+        "tsdown": "^0.15.7",
+        "vitest": "^4.0.14"
+    },
+    "dependencies": {
+        "@types/react": "^19.2.2",
+        "clsx": "^2.1.1",
+        "csstype": "^3.2.3",
+        "react": "^19.2.0"
     }
-  },
-  "scripts": {
-    "build": "tsdown && attw --pack ."
-  },
-  "devDependencies": {
-    "@arethetypeswrong/cli": "^0.18.2",
-    "@gamedev-sensei/ts-config": "^2.0.0",
-    "@gamedev-sensei/tsdown-config": "^2.0.0",
-    "@types/node": "^24.8.1",
-    "tsdown": "^0.15.7"
-  },
-  "dependencies": {
-    "@types/react": "^19.2.2",
-    "clsx": "^2.1.1",
-    "csstype": "^3.2.3",
-    "react": "^19.2.0"
-  }
 }