npm - @kbach/ui - Versions diffs - 0.1.0-beta.2 → 0.1.0-beta.4 - Mend

@kbach/ui 0.1.0-beta.2 → 0.1.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/KBACH.md CHANGED Viewed

@@ -32,7 +32,7 @@ export default { plugins: [react({ jsxImportSource: '@kbach/ui' })] };
 import { ThemeProvider, KbachReset } from '@kbach/ui';
 <ThemeProvider defaultMode="system"><KbachReset /><App /></ThemeProvider>
 ```
-`<KbachReset />` renders Kbach's base browser-default reset (borderless button/input, visible checkbox/radio, no arrow-less `<select>`, `a`/`h1-h6`/`p`/`ul`/`ol`/`img` normalized, etc.) as a real `<style>` tag — needed for SSR under runtime-only setups (no JS runs server-side, but this is just JSX so it still renders), a no-op-but-harmless nice-to-have for plain CSR. Skip it if using static `kbach.css` (below) — that file already includes the same reset, and the runtime injector auto-detects `<KbachReset />` and skips re-adding it either way, so having both is harmless too.
+`<KbachReset />` renders Kbach's base browser-default reset (borderless button/input, visible checkbox/radio, no arrow-less `<select>`, `a`/`h1-h6`/`p`/`ul`/`ol`/`img` normalized, etc.) as a real `<style>` tag — needed for SSR under runtime-only setups (no JS runs server-side, but this is just JSX so it still renders), a no-op-but-harmless nice-to-have for plain CSR. Not needed if using static `kbach.css` (below) — that file already includes the same reset. `<KbachReset />` checks `disableRuntimeCSS()` (which the Vite plugin calls automatically wherever `kbach.css` gets imported) and renders nothing once it's active, so leaving it mounted alongside the static setup is safe rather than a duplicate reset on every page load.
 ### Next.js
 - tsconfig `jsxImportSource` setup above applies as-is (SWC reads it like Vite does).

package/dist/index.d.ts CHANGED Viewed

@@ -167,9 +167,16 @@ declare function ThemeProvider({ children, defaultMode, colorScheme, windowWidth
  * hydration catches up. Render this once, as high in <head> as your
  * framework allows, to close that gap.
  *
- * Not needed if you're on the static-CSS setup — kbach.css already includes
- * the same reset, and the runtime injector detects this tag and skips adding
- * it a second time either way.
+ * Skips rendering entirely once disableRuntimeCSS() has fired — the Vite
+ * plugin calls it automatically wherever kbach.css gets imported (see
+ * vite-plugin.ts's transform hook), and that static file already inlines
+ * this exact reset. Previously this rendered unconditionally regardless of
+ * that flag, so an app using the static-CSS setup that ALSO keeps
+ * <KbachReset/> mounted (e.g. copied from a starter template's root layout
+ * and never revisited) got the same reset rules twice — once from the
+ * static file, once from this tag — on every single page load, real static
+ * CSS or not. Checked here (render time), not just documented, so the
+ * static setup is actually leak-free even when this stays in the tree.
  */
 declare function KbachReset(): React.JSX.Element | null;

package/dist/index.js CHANGED Viewed

@@ -383,6 +383,7 @@ var import_core4 = require("./core");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function KbachReset() {
   if (import_core4.isNative) return null;
+  if ((0, import_core4.isRuntimeCSSDisabled)()) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { id: import_core4.RESET_STYLE_ID, children: import_core4.BASE_RESET });
 }

package/dist/index.mjs CHANGED Viewed

@@ -26,6 +26,7 @@ import {
   initConfig,
   isModeAwareColor,
   isNative,
+  isRuntimeCSSDisabled,
   isWeb,
   kbachWarn,
   normalizeClassString,
@@ -354,6 +355,7 @@ function ThemeProvider({
 import { jsx as jsx2 } from "react/jsx-runtime";
 function KbachReset() {
   if (isNative) return null;
+  if (isRuntimeCSSDisabled()) return null;
   return /* @__PURE__ */ jsx2("style", { id: RESET_STYLE_ID, children: BASE_RESET });
 }

package/dist/vite-plugin.js CHANGED Viewed

@@ -3577,9 +3577,12 @@ function formatKbachCSS(tokenCSS, theme, responsiveRe) {
   const replacements = new Map([...colorVars.replacements, ...spacingVars.replacements]);
   const declarations = new Map([...colorVars.declarations, ...spacingVars.declarations]);
   const sortedReplacements = [...replacements].sort(([a], [b]) => b.length - a.length);
+  const varPatternRes = sortedReplacements.map(
+    ([pattern, replacement]) => [new RegExp(`(?<!\\\\)${pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`, "g"), replacement]
+  );
   function applyVars(css) {
-    for (const [pattern, replacement] of sortedReplacements)
-      css = css.split(pattern).join(replacement);
+    for (const [re, replacement] of varPatternRes)
+      css = css.replace(re, () => replacement);
     return css;
   }
   const groups = new Map(GROUP_ORDER.map((g) => [g, []]));

package/dist/vite-plugin.mjs CHANGED Viewed

@@ -3542,9 +3542,12 @@ function formatKbachCSS(tokenCSS, theme, responsiveRe) {
   const replacements = new Map([...colorVars.replacements, ...spacingVars.replacements]);
   const declarations = new Map([...colorVars.declarations, ...spacingVars.declarations]);
   const sortedReplacements = [...replacements].sort(([a], [b]) => b.length - a.length);
+  const varPatternRes = sortedReplacements.map(
+    ([pattern, replacement]) => [new RegExp(`(?<!\\\\)${pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`, "g"), replacement]
+  );
   function applyVars(css) {
-    for (const [pattern, replacement] of sortedReplacements)
-      css = css.split(pattern).join(replacement);
+    for (const [re, replacement] of varPatternRes)
+      css = css.replace(re, () => replacement);
     return css;
   }
   const groups = new Map(GROUP_ORDER.map((g) => [g, []]));

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/ui",
-  "version": "0.1.0-beta.2",
+  "version": "0.1.0-beta.4",
   "description": "Tailwind-like utility classes and components for React — web, React Native, and Expo",
   "license": "MIT",
   "repository": {