@plexui/ui 0.16.0 → 0.17.0

package/dist/es/vite/index.js

@@ -0,0 +1,54 @@
+/**
+ * Vite plugin for Plex UI.
+ *
+ * Importing `@plexui/ui/vite` and adding `plexui()` to your `plugins`
+ * array eliminates every install-time gotcha documented in
+ * /docs/installation:
+ *
+ *   1. Pins `css.transformer = 'postcss'` so Lightning CSS doesn't
+ *      reorder cascade layers strict-by-first-occurrence.
+ *   2. Pins `build.cssMinify = 'esbuild'` so Vite 8's Lightning CSS
+ *      minifier doesn't strip the bare `@layer` declaration.
+ *   3. Injects `<style>@layer theme, base, components, utilities;</style>`
+ *      into <head> as a runtime failsafe — the browser sees the layer
+ *      order before any stylesheet rule arrives, regardless of how the
+ *      bundler shuffles things.
+ *
+ * Usage:
+ *
+ *     // vite.config.ts
+ *     import { defineConfig } from 'vite';
+ *     import plexui from '@plexui/ui/vite';
+ *
+ *     export default defineConfig({
+ *       plugins: [plexui()],
+ *     });
+ *
+ * That replaces the manual `@layer …;` declaration in main.css and the
+ * manual `css.transformer` / `build.cssMinify` overrides. Your global
+ * stylesheet still needs `@import "@plexui/ui/css"` and `@source` —
+ * those wire the runtime tokens and Tailwind class-extraction, which a
+ * Vite plugin can't do for you.
+ */
+const LAYER_DECLARATION = "<style>@layer theme, base, components, utilities;</style>";
+export default function plexui(options = {}) {
+    const { injectLayerOrder = true } = options;
+    return {
+        name: "@plexui/ui",
+        enforce: "pre",
+        config() {
+            return {
+                css: { transformer: "postcss" },
+                build: { cssMinify: "esbuild" },
+            };
+        },
+        transformIndexHtml(html) {
+            if (!injectLayerOrder)
+                return html;
+            // Place the layer declaration right after <head> so it lands
+            // before any bundler-injected <link rel="stylesheet">.
+            return html.replace(/(<head[^>]*>)/i, `$1\n    ${LAYER_DECLARATION}`);
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/es/vite/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/vite/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAkBH,MAAM,iBAAiB,GACrB,2DAA2D,CAAA;AAW7D,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,UAA+B,EAAE;IAC9D,MAAM,EAAE,gBAAgB,GAAG,IAAI,EAAE,GAAG,OAAO,CAAA;IAE3C,OAAO;QACL,IAAI,EAAE,YAAY;QAClB,OAAO,EAAE,KAAK;QACd,MAAM;YACJ,OAAO;gBACL,GAAG,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE;gBAC/B,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE;aAChC,CAAA;QACH,CAAC;QACD,kBAAkB,CAAC,IAAI;YACrB,IAAI,CAAC,gBAAgB;gBAAE,OAAO,IAAI,CAAA;YAClC,6DAA6D;YAC7D,uDAAuD;YACvD,OAAO,IAAI,CAAC,OAAO,CACjB,gBAAgB,EAChB,WAAW,iBAAiB,EAAE,CAC/B,CAAA;QACH,CAAC;KACF,CAAA;AACH,CAAC","sourcesContent":["/**\n * Vite plugin for Plex UI.\n *\n * Importing `@plexui/ui/vite` and adding `plexui()` to your `plugins`\n * array eliminates every install-time gotcha documented in\n * /docs/installation:\n *\n *   1. Pins `css.transformer = 'postcss'` so Lightning CSS doesn't\n *      reorder cascade layers strict-by-first-occurrence.\n *   2. Pins `build.cssMinify = 'esbuild'` so Vite 8's Lightning CSS\n *      minifier doesn't strip the bare `@layer` declaration.\n *   3. Injects `<style>@layer theme, base, components, utilities;</style>`\n *      into <head> as a runtime failsafe — the browser sees the layer\n *      order before any stylesheet rule arrives, regardless of how the\n *      bundler shuffles things.\n *\n * Usage:\n *\n *     // vite.config.ts\n *     import { defineConfig } from 'vite';\n *     import plexui from '@plexui/ui/vite';\n *\n *     export default defineConfig({\n *       plugins: [plexui()],\n *     });\n *\n * That replaces the manual `@layer …;` declaration in main.css and the\n * manual `css.transformer` / `build.cssMinify` overrides. Your global\n * stylesheet still needs `@import \"@plexui/ui/css\"` and `@source` —\n * those wire the runtime tokens and Tailwind class-extraction, which a\n * Vite plugin can't do for you.\n */\n\n// We deliberately do NOT import from \"vite\". Keeping vite out of the\n// build keeps it out of the runtime dependency graph entirely (the\n// plugin file is a few dozen lines and only describes the shape vite\n// expects). Consumers get full type-safety by declaring their config\n// `defineConfig({ plugins: [plexui()] })` — vite's own types cover the\n// `Plugin[]` slot, so our return value is just shaped to match it.\ntype ViteLikePlugin = {\n  name: string\n  enforce?: \"pre\" | \"post\"\n  config?: () => {\n    css?: { transformer?: \"postcss\" | \"lightningcss\" }\n    build?: { cssMinify?: boolean | \"esbuild\" | \"lightningcss\" }\n  }\n  transformIndexHtml?: (html: string) => string\n}\n\nconst LAYER_DECLARATION =\n  \"<style>@layer theme, base, components, utilities;</style>\"\n\nexport type PlexUIPluginOptions = {\n  /**\n   * Inject the cascade-layer `<style>` tag into <head> as a runtime\n   * failsafe. Defaults to `true`. Disable only if you've already added\n   * the equivalent `<style>` tag to your `index.html` by hand.\n   */\n  injectLayerOrder?: boolean\n}\n\nexport default function plexui(options: PlexUIPluginOptions = {}): ViteLikePlugin {\n  const { injectLayerOrder = true } = options\n\n  return {\n    name: \"@plexui/ui\",\n    enforce: \"pre\",\n    config() {\n      return {\n        css: { transformer: \"postcss\" },\n        build: { cssMinify: \"esbuild\" },\n      }\n    },\n    transformIndexHtml(html) {\n      if (!injectLayerOrder) return html\n      // Place the layer declaration right after <head> so it lands\n      // before any bundler-injected <link rel=\"stylesheet\">.\n      return html.replace(\n        /(<head[^>]*>)/i,\n        `$1\\n    ${LAYER_DECLARATION}`,\n      )\n    },\n  }\n}\n"]}

package/dist/types/vite/index.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Vite plugin for Plex UI.
+ *
+ * Importing `@plexui/ui/vite` and adding `plexui()` to your `plugins`
+ * array eliminates every install-time gotcha documented in
+ * /docs/installation:
+ *
+ *   1. Pins `css.transformer = 'postcss'` so Lightning CSS doesn't
+ *      reorder cascade layers strict-by-first-occurrence.
+ *   2. Pins `build.cssMinify = 'esbuild'` so Vite 8's Lightning CSS
+ *      minifier doesn't strip the bare `@layer` declaration.
+ *   3. Injects `<style>@layer theme, base, components, utilities;</style>`
+ *      into <head> as a runtime failsafe — the browser sees the layer
+ *      order before any stylesheet rule arrives, regardless of how the
+ *      bundler shuffles things.
+ *
+ * Usage:
+ *
+ *     // vite.config.ts
+ *     import { defineConfig } from 'vite';
+ *     import plexui from '@plexui/ui/vite';
+ *
+ *     export default defineConfig({
+ *       plugins: [plexui()],
+ *     });
+ *
+ * That replaces the manual `@layer …;` declaration in main.css and the
+ * manual `css.transformer` / `build.cssMinify` overrides. Your global
+ * stylesheet still needs `@import "@plexui/ui/css"` and `@source` —
+ * those wire the runtime tokens and Tailwind class-extraction, which a
+ * Vite plugin can't do for you.
+ */
+type ViteLikePlugin = {
+    name: string;
+    enforce?: "pre" | "post";
+    config?: () => {
+        css?: {
+            transformer?: "postcss" | "lightningcss";
+        };
+        build?: {
+            cssMinify?: boolean | "esbuild" | "lightningcss";
+        };
+    };
+    transformIndexHtml?: (html: string) => string;
+};
+export type PlexUIPluginOptions = {
+    /**
+     * Inject the cascade-layer `<style>` tag into <head> as a runtime
+     * failsafe. Defaults to `true`. Disable only if you've already added
+     * the equivalent `<style>` tag to your `index.html` by hand.
+     */
+    injectLayerOrder?: boolean;
+};
+export default function plexui(options?: PlexUIPluginOptions): ViteLikePlugin;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plexui/ui",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Modern design system for building high-quality applications",
   "type": "module",
   "license": "MIT",
@@ -46,6 +46,10 @@
       "types": "./dist/types/hooks/*.d.ts",
       "default": "./dist/es/hooks/*.js"
     },
+    "./vite": {
+      "types": "./dist/types/vite/index.d.ts",
+      "default": "./dist/es/vite/index.js"
+    },
     "./types": {
       "types": "./dist/types/types.d.ts",
       "default": "./dist/es/types.js"
@@ -82,7 +86,13 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "tailwindcss": "^4.0.10"
+    "tailwindcss": "^4.0.10",
+    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@maskito/core": "^5.2.2",