feat: reduze bundle size

Author: jantimon

package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-variable",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "define CSS custom properties (variables) in JS",
   "main": "./dist/index.js",
   "exports": {

src/index.ts

@@ -32,7 +32,7 @@ type CSSVariableOptions<TValue> = { value: TValue | CSSVariable<TValue> };
  * For those cases this counter provides a very basic fallback to generate 
  * different ids.
  */
-let fallbackId = (-2)>>>0;
+let fallbackId = 9 ** 9;
 
 export class CSSVariable<TValue = string> extends (
   // Inherit from String to be compatible to most CSS-in-JS solutions
@@ -41,7 +41,8 @@ export class CSSVariable<TValue = string> extends (
 ) {
   /** Name e.g. `--baseSize` */
   readonly name: string;
-
+  /** Value e.g. `var(--baseSize, 12px)` */
+  readonly val: string;
   /** 
    * Creates a new CSS Variable with a unique autogenerated name 
    * 
@@ -80,7 +81,9 @@ export class CSSVariable<TValue = string> extends (
       (args.filter((arg): arg is string => typeof arg === "string").join('-').toLowerCase() ||
         // Fallback if babel plugin is missing
         (fallbackId++).toString(16));
-    super(`var(${name}${optionArg ? `, ${optionArg.value}` : ""})`);
+    const val = `var(${name}${optionArg ? `, ${optionArg.value}` : ""})`;
+    super(val);
+    this.val = val;
     this.name = name;
   }
   /** Returns the variable name e.g. `--baseSize` */
@@ -95,10 +98,6 @@ export class CSSVariable<TValue = string> extends (
   toCSS(newValue: TValue | CSSVariable<TValue>) {
     return `${this.name}:${newValue};`;
   }
-  /** Returns the variable value e.g. `var(--baseSize, 12px)` */
-  get val() {
-    return String(this);
-  }
 }
 
 
@@ -108,13 +107,13 @@ type ICreateVar = {
    * 
    * E.g. `var(--1isaui4-0)`
    */
-   <TValue = string>(): CSSVariable<TValue>;
+  <TValue = string>(): CSSVariable<TValue>;
   /** 
    * Creates a new CSS Variable with a custom defined name 
    * 
    * E.g. `var(--baseSize)`
    */
-   <TValue = string>(uniqueName: string): CSSVariable<TValue>;
+  <TValue = string>(uniqueName: string): CSSVariable<TValue>;
   /** 
    * Creates a new CSS Variable with a unique autogenerated name
    * and a fallback value
@@ -202,7 +201,7 @@ export const assignVars = <TTheme extends ThemeStructure>(
     .join("");
 
 /**
- * Serialize all CSS Variable values for an entire Theme Contract
+ * Serialize all CSS Variable values for an entire nested or flat Theme Contract
  * 
  * @example
  * ```js
@@ -225,4 +224,4 @@ export const assignVars = <TTheme extends ThemeStructure>(
  */
 export const createGlobalTheme = <TTheme extends ThemeStructure>(scope: string | undefined | null,
   cssVariables: TTheme,
-  cssVariableValues: ThemeValues<TTheme>) => `${scope ? `${scope}{` : ''}${assignVars(cssVariables, cssVariableValues as DeepPartial<ThemeValues<TTheme>>)}${scope ? '}' : ''}`;
+  cssVariableValues: ThemeValues<TTheme>): string => `${scope ? `${scope}{` : ''}${assignVars(cssVariables, cssVariableValues as DeepPartial<ThemeValues<TTheme>>)}${scope ? '}' : ''}`;