@kuma-ui/sheet - npm Package Compare versions

Comparing version 0.0.0-dev-20230906152012 to 0.0.0-dev-20230912130204

dist/index.d.ts

 export { SystemStyle, sheet } from './sheet.js';
-export { Tokens, UserTheme, theme } from './theme.js';
+export { T as Tokens, U as UserTheme, t as theme } from './theme-975b827a.js';
 export { styleCache } from './cache.js';
@@ -4,0 +4,0 @@ export { styleMap } from './styleMap.js';

dist/index.js

@@ -71,2 +71,93 @@ "use strict";
 var import_stylis = require("stylis");
+
+// src/theme.ts
+var defaultBreakpoints = Object.freeze({
+  sm: "576px",
+  md: "768px",
+  lg: "992px",
+  xl: "1200px"
+});
+var tokens = [
+  "colors",
+  "fonts",
+  "fontSizes",
+  "fontWeights",
+  "lineHeights",
+  "letterSpacings",
+  "spacings",
+  "sizes",
+  "radii",
+  "zIndices",
+  "breakpoints"
+];
+var _Theme = class {
+  _userTheme = {
+    ...globalThis.__KUMA_USER_THEME__,
+    breakpoints: globalThis.__KUMA_USER_THEME__?.breakpoints ?? defaultBreakpoints
+  };
+  _placeholders = {};
+  constructor() {
+  }
+  static getInstance() {
+    if (!_Theme.instance) {
+      _Theme.instance = new _Theme();
+    }
+    return _Theme.instance;
+  }
+  setUserTheme(userTheme) {
+    if (Object.keys(userTheme.breakpoints || {}).length === 0) {
+      delete userTheme.breakpoints;
+    }
+    this._userTheme = {
+      ...this._userTheme,
+      ...userTheme
+    };
+    this._placeholders = createPlaceholders(this._userTheme);
+  }
+  getUserTheme() {
+    return this._userTheme;
+  }
+  getPlaceholders() {
+    return this._placeholders;
+  }
+  getVariants(componentName) {
+    return this._userTheme.components?.[componentName] || {};
+  }
+  reset() {
+    this._userTheme = {
+      breakpoints: defaultBreakpoints
+    };
+  }
+};
+var Theme = _Theme;
+__publicField(Theme, "instance");
+var theme = Theme.getInstance();
+
+// src/placeholders.ts
+var applyT = (input, placeholders) => {
+  return applyPlaceholders(input, placeholders);
+};
+var applyPlaceholders = (input, placeholders) => {
+  const regex = /\bt\s*\(\s*["']([^"']+)["']\s*\)/g;
+  return input.replace(regex, (match, placeholder) => {
+    if (typeof placeholder === "string" && placeholder in placeholders) {
+      return placeholders[placeholder];
+    }
+    return match;
+  });
+};
+var createPlaceholders = (theme2) => {
+  const result = {};
+  for (const token of tokens) {
+    const tokenValue = theme2[token];
+    if (tokenValue) {
+      for (const key in tokenValue) {
+        result[key] = tokenValue[key];
+      }
+    }
+  }
+  return result;
+};
+
+// src/sheet.ts
 var _Sheet = class {
@@ -97,5 +188,9 @@ base;
     const className = _Sheet.getClassNamePrefix(isDynamic) + generateHash(JSON.stringify(style));
-    this._addBaseRule(className, style.base);
+    this._addBaseRule(className, this._processCSS(style.base));
     for (const [breakpoint, css] of Object.entries(style.responsive)) {
-      this._addMediaRule(className, css, breakpoint);
+      this._addMediaRule(
+        className,
+        this._processCSS(css),
+        this._processCSS(breakpoint)
+      );
     }
@@ -119,3 +214,5 @@ for (const [_, pseudo] of Object.entries(style.pseudo)) {
   _addPseudoRule(className, pseudo) {
-    const css = removeSpacesAroundCssPropertyValues(pseudo.base);
+    const css = removeSpacesAroundCssPropertyValues(
+      this._processCSS(pseudo.base)
+    );
     const pseudoCss = removeSpacesExceptInProperties(
@@ -126,5 +223,13 @@ `.${className}${pseudo.key} { ${css} }`
     for (const [breakpoint, _css] of Object.entries(pseudo.responsive)) {
-      this._addMediaRule(`${className}${pseudo.key}`, _css, breakpoint);
+      this._addMediaRule(
+        `${className}${pseudo.key}`,
+        this._processCSS(_css),
+        this._processCSS(breakpoint)
+      );
     }
   }
+  _processCSS(css) {
+    const placeholders = theme.getPlaceholders();
+    return applyT(css, placeholders);
+  }
   /**
@@ -135,2 +240,3 @@ * parseCSS takes in raw CSS and parses it to valid CSS using Stylis.
   parseCSS(style) {
+    style = this._processCSS(style);
     const id = _Sheet.getClassNamePrefix() + generateHash(style);
@@ -183,47 +289,2 @@ const elements = [];
 
-// src/theme.ts
-var defaultBreakpoints = Object.freeze({
-  sm: "576px",
-  md: "768px",
-  lg: "992px",
-  xl: "1200px"
-});
-var _Theme = class {
-  _userTheme = {
-    ...globalThis.__KUMA_USER_THEME__,
-    breakpoints: globalThis.__KUMA_USER_THEME__?.breakpoints ?? defaultBreakpoints
-  };
-  constructor() {
-  }
-  static getInstance() {
-    if (!_Theme.instance) {
-      _Theme.instance = new _Theme();
-    }
-    return _Theme.instance;
-  }
-  setUserTheme(userTheme) {
-    if (Object.keys(userTheme.breakpoints || {}).length === 0) {
-      delete userTheme.breakpoints;
-    }
-    this._userTheme = {
-      ...this._userTheme,
-      ...userTheme
-    };
-  }
-  getUserTheme() {
-    return this._userTheme;
-  }
-  getVariants(componentName) {
-    return this._userTheme.components?.[componentName] || {};
-  }
-  reset() {
-    this._userTheme = {
-      breakpoints: defaultBreakpoints
-    };
-  }
-};
-var Theme = _Theme;
-__publicField(Theme, "instance");
-var theme = Theme.getInstance();
-
 // src/cache.ts
@@ -230,0 +291,0 @@ var _StyleCache = class {

dist/sheet.d.ts

@@ -30,2 +30,3 @@ type ResponsiveStyle = {
     private _addPseudoRule;
+    _processCSS(css: string): string;
     /**
@@ -32,0 +33,0 @@ * parseCSS takes in raw CSS and parses it to valid CSS using Stylis.

dist/sheet.js

@@ -33,2 +33,28 @@ "use strict";
 
+// src/placeholders.ts
+var applyT = (input, placeholders) => {
+  return applyPlaceholders(input, placeholders);
+};
+var applyPlaceholders = (input, placeholders) => {
+  const regex = /\bt\s*\(\s*["']([^"']+)["']\s*\)/g;
+  return input.replace(regex, (match, placeholder) => {
+    if (typeof placeholder === "string" && placeholder in placeholders) {
+      return placeholders[placeholder];
+    }
+    return match;
+  });
+};
+var createPlaceholders = (theme2) => {
+  const result = {};
+  for (const token of tokens) {
+    const tokenValue = theme2[token];
+    if (tokenValue) {
+      for (const key in tokenValue) {
+        result[key] = tokenValue[key];
+      }
+    }
+  }
+  return result;
+};
+
 // src/theme.ts
@@ -41,2 +67,15 @@ var defaultBreakpoints = Object.freeze({
 });
+var tokens = [
+  "colors",
+  "fonts",
+  "fontSizes",
+  "fontWeights",
+  "lineHeights",
+  "letterSpacings",
+  "spacings",
+  "sizes",
+  "radii",
+  "zIndices",
+  "breakpoints"
+];
 var _Theme = class {
@@ -47,2 +86,3 @@ _userTheme = {
   };
+  _placeholders = {};
   constructor() {
@@ -64,2 +104,3 @@ }
     };
+    this._placeholders = createPlaceholders(this._userTheme);
   }
@@ -69,2 +110,5 @@ getUserTheme() {
   }
+  getPlaceholders() {
+    return this._placeholders;
+  }
   getVariants(componentName) {
@@ -200,5 +244,9 @@ return this._userTheme.components?.[componentName] || {};
     const className = _Sheet.getClassNamePrefix(isDynamic) + generateHash(JSON.stringify(style));
-    this._addBaseRule(className, style.base);
+    this._addBaseRule(className, this._processCSS(style.base));
     for (const [breakpoint, css] of Object.entries(style.responsive)) {
-      this._addMediaRule(className, css, breakpoint);
+      this._addMediaRule(
+        className,
+        this._processCSS(css),
+        this._processCSS(breakpoint)
+      );
     }
@@ -222,3 +270,5 @@ for (const [_, pseudo] of Object.entries(style.pseudo)) {
   _addPseudoRule(className, pseudo) {
-    const css = removeSpacesAroundCssPropertyValues(pseudo.base);
+    const css = removeSpacesAroundCssPropertyValues(
+      this._processCSS(pseudo.base)
+    );
     const pseudoCss = removeSpacesExceptInProperties(
@@ -229,5 +279,13 @@ `.${className}${pseudo.key} { ${css} }`
     for (const [breakpoint, _css] of Object.entries(pseudo.responsive)) {
-      this._addMediaRule(`${className}${pseudo.key}`, _css, breakpoint);
+      this._addMediaRule(
+        `${className}${pseudo.key}`,
+        this._processCSS(_css),
+        this._processCSS(breakpoint)
+      );
     }
   }
+  _processCSS(css) {
+    const placeholders = theme.getPlaceholders();
+    return applyT(css, placeholders);
+  }
   /**
@@ -238,2 +296,3 @@ * parseCSS takes in raw CSS and parses it to valid CSS using Stylis.
   parseCSS(style) {
+    style = this._processCSS(style);
     const id = _Sheet.getClassNamePrefix() + generateHash(style);
@@ -240,0 +299,0 @@ const elements = [];

dist/theme.d.ts

@@ -1,47 +0,1 @@
-declare const defaultBreakpoints: Readonly<{
-    sm: "576px";
-    md: "768px";
-    lg: "992px";
-    xl: "1200px";
-}>;
-type ComponentName = "Box" | "Flex" | "Spacer" | "Text" | "Button" | "Heading" | "Input" | "Select" | "HStack" | "VStack" | "Image" | "Link" | "Grid";
-type Tokens = "colors" | "fonts" | "fontSizes" | "fontWeights" | "lineHeights" | "letterSpacings" | "spacings" | "sizes" | "radii" | "zIndices" | "breakpoints";
-type UserTheme = {
-    [K in Tokens]?: Record<string, string> | undefined;
-} & {
-    components?: {
-        [_ in ComponentName]?: {
-            baseStyle?: any;
-            variants?: {
-                [key: string]: any;
-            };
-            defaultProps?: {
-                variant?: string;
-            } & Record<string, unknown>;
-        };
-    };
-};
-declare global {
-    var __KUMA_USER_THEME__: UserTheme | undefined;
-}
-declare class Theme {
-    private static instance;
-    private _userTheme;
-    private constructor();
-    static getInstance(): Theme;
-    setUserTheme(userTheme: Partial<UserTheme>): void;
-    getUserTheme(): UserTheme;
-    getVariants(componentName: ComponentName): {
-        baseStyle?: any;
-        variants?: {
-            [key: string]: any;
-        } | undefined;
-        defaultProps?: {
-            variant?: string;
-        } & Record<string, unknown>;
-    } | undefined;
-    reset(): void;
-}
-declare const theme: Theme;
-
-export { Theme, Tokens, UserTheme, defaultBreakpoints, theme };
+export { f as Theme, T as Tokens, U as UserTheme, d as defaultBreakpoints, t as theme, e as tokens } from './theme-975b827a.js';

dist/theme.js

@@ -30,5 +30,22 @@ "use strict";
   defaultBreakpoints: () => defaultBreakpoints,
-  theme: () => theme
+  theme: () => theme,
+  tokens: () => tokens
 });
 module.exports = __toCommonJS(theme_exports);
+
+// src/placeholders.ts
+var createPlaceholders = (theme2) => {
+  const result = {};
+  for (const token of tokens) {
+    const tokenValue = theme2[token];
+    if (tokenValue) {
+      for (const key in tokenValue) {
+        result[key] = tokenValue[key];
+      }
+    }
+  }
+  return result;
+};
+
+// src/theme.ts
 var defaultBreakpoints = Object.freeze({
@@ -40,2 +57,15 @@ sm: "576px",
 });
+var tokens = [
+  "colors",
+  "fonts",
+  "fontSizes",
+  "fontWeights",
+  "lineHeights",
+  "letterSpacings",
+  "spacings",
+  "sizes",
+  "radii",
+  "zIndices",
+  "breakpoints"
+];
 var _Theme = class {
@@ -46,2 +76,3 @@ _userTheme = {
   };
+  _placeholders = {};
   constructor() {
@@ -63,2 +94,3 @@ }
     };
+    this._placeholders = createPlaceholders(this._userTheme);
   }
@@ -68,2 +100,5 @@ getUserTheme() {
   }
+  getPlaceholders() {
+    return this._placeholders;
+  }
   getVariants(componentName) {
@@ -85,3 +120,4 @@ return this._userTheme.components?.[componentName] || {};
   defaultBreakpoints,
-  theme
+  theme,
+  tokens
 });

package.json

 {
   "name": "@kuma-ui/sheet",
-  "version": "0.0.0-dev-20230906152012",
+  "version": "0.0.0-dev-20230912130204",
   "description": "🐻 Kuma UI is a utility-first, zero-runtime CSS-in-JS library that offers an outstanding developer experience and optimized performance.",
@@ -5,0 +5,0 @@ "repository": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53866

increased by20.9%

Number of package files

38

increased by11.76%

Lines of code

1731

increased by26.54%

No dependency changes