@pantoken/vite 0.1.0

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 (4) hide show
  1. package/README.md +55 -0
  2. package/dist/index.d.mts +44 -0
  3. package/dist/index.mjs +79 -0
  4. package/package.json +40 -0
package/README.md ADDED
@@ -0,0 +1,55 @@
1
+ # @pantoken/vite
2
+
3
+ A Vite plugin for pantoken. It exposes virtual modules so apps consume the tokens and CSS without
4
+ importing the large packages directly, and it can auto-inject the stylesheet into the HTML entry.
5
+
6
+ ## Install
7
+
8
+ ```sh
9
+ npm i -D @pantoken/vite
10
+ ```
11
+
12
+ Also available as `pantoken/vite`.
13
+
14
+ ## Usage
15
+
16
+ ```ts
17
+ // vite.config.ts
18
+ import { defineConfig } from "vite";
19
+ import { pantoken } from "@pantoken/vite";
20
+
21
+ export default defineConfig({
22
+ plugins: [pantoken({ injectCss: true })],
23
+ });
24
+ ```
25
+
26
+ Then in your app:
27
+
28
+ ```ts
29
+ import css from "virtual:pantoken/css"; // the stylesheet string
30
+ import { tokens } from "virtual:pantoken/tokens"; // the resolved token IR
31
+ ```
32
+
33
+ With `injectCss: true`, the stylesheet is added to the HTML entry's `<head>` automatically, so you
34
+ don't need to import `virtual:pantoken/css` yourself. `vite` is a peer dependency.
35
+
36
+ ## API
37
+
38
+ - **`pantoken(options?): Plugin`** — the Vite plugin. `options.injectCss` injects the stylesheet into
39
+ the HTML `<head>`. Also the default export.
40
+ - **`PantokenViteOptions`** — options type.
41
+
42
+ Virtual modules the plugin registers:
43
+
44
+ - **`virtual:pantoken/css`** — the stylesheet string (default export).
45
+ - **`virtual:pantoken/tokens`** — the resolved token IR (`tokens` named export plus default export).
46
+
47
+ ## Related
48
+
49
+ - Wraps `@pantoken/css` and `@pantoken/tokens`, which supply the stylesheet and IR.
50
+ - Pairs with `@pantoken/tailwind` when you want Tailwind utilities backed by the injected custom
51
+ properties.
52
+
53
+ ## License
54
+
55
+ MIT
package/dist/index.d.mts ADDED
@@ -0,0 +1,44 @@
1
+ import { Plugin } from "vite";
2
+
3
+ //#region src/index.d.ts
4
+ /** Options for the {@link pantoken} Vite plugin. */
5
+ interface PantokenViteOptions {
6
+ /** Inject the stylesheet into the HTML entry's `<head>` (default: false). */
7
+ injectCss?: boolean;
8
+ }
9
+ /**
10
+ * The pantoken Vite plugin.
11
+ *
12
+ * @param options - {@link PantokenViteOptions}.
13
+ * @returns A Vite {@link Plugin}.
14
+ *
15
+ * @example Register the plugin in vite.config.ts
16
+ * ```ts
17
+ * import { defineConfig } from "vite";
18
+ * import { pantoken } from "@pantoken/vite";
19
+ *
20
+ * export default defineConfig({
21
+ * plugins: [pantoken()],
22
+ * });
23
+ * ```
24
+ *
25
+ * @example Auto-inject the stylesheet into the HTML <head>
26
+ * ```ts
27
+ * import { defineConfig } from "vite";
28
+ * import { pantoken } from "@pantoken/vite";
29
+ *
30
+ * export default defineConfig({
31
+ * // No need to import `virtual:pantoken/css` yourself — it's injected.
32
+ * plugins: [pantoken({ injectCss: true })],
33
+ * });
34
+ * ```
35
+ *
36
+ * @example Consume the virtual modules in app code
37
+ * ```ts
38
+ * import css from "virtual:pantoken/css"; // the stylesheet string
39
+ * import { tokens } from "virtual:pantoken/tokens"; // the resolved token IR
40
+ * ```
41
+ */
42
+ declare function pantoken(options?: PantokenViteOptions): Plugin;
43
+ //#endregion
44
+ export { PantokenViteOptions, pantoken as default, pantoken };
package/dist/index.mjs ADDED
@@ -0,0 +1,79 @@
1
+ import { css } from "@pantoken/css";
2
+ import { tokens } from "@pantoken/tokens";
3
+ //#region src/index.ts
4
+ /**
5
+ * `@pantoken/vite` — a Vite plugin for pantoken.
6
+ *
7
+ * It exposes two virtual modules so apps consume tokens without importing the large packages
8
+ * directly, and can auto-inject the stylesheet into the HTML entry:
9
+ *
10
+ * - `virtual:pantoken/css` — the stylesheet string (default export).
11
+ * - `virtual:pantoken/tokens` — the resolved token IR (`tokens` named + default export).
12
+ *
13
+ * @module
14
+ * @experimental
15
+ */
16
+ const CSS_ID = "virtual:pantoken/css";
17
+ const TOKENS_ID = "virtual:pantoken/tokens";
18
+ const resolved = (id) => `\0${id}`;
19
+ /**
20
+ * The pantoken Vite plugin.
21
+ *
22
+ * @param options - {@link PantokenViteOptions}.
23
+ * @returns A Vite {@link Plugin}.
24
+ *
25
+ * @example Register the plugin in vite.config.ts
26
+ * ```ts
27
+ * import { defineConfig } from "vite";
28
+ * import { pantoken } from "@pantoken/vite";
29
+ *
30
+ * export default defineConfig({
31
+ * plugins: [pantoken()],
32
+ * });
33
+ * ```
34
+ *
35
+ * @example Auto-inject the stylesheet into the HTML <head>
36
+ * ```ts
37
+ * import { defineConfig } from "vite";
38
+ * import { pantoken } from "@pantoken/vite";
39
+ *
40
+ * export default defineConfig({
41
+ * // No need to import `virtual:pantoken/css` yourself — it's injected.
42
+ * plugins: [pantoken({ injectCss: true })],
43
+ * });
44
+ * ```
45
+ *
46
+ * @example Consume the virtual modules in app code
47
+ * ```ts
48
+ * import css from "virtual:pantoken/css"; // the stylesheet string
49
+ * import { tokens } from "virtual:pantoken/tokens"; // the resolved token IR
50
+ * ```
51
+ */
52
+ function pantoken(options = {}) {
53
+ return {
54
+ name: "@pantoken/vite",
55
+ resolveId(id) {
56
+ if (id === CSS_ID || id === TOKENS_ID) return resolved(id);
57
+ return null;
58
+ },
59
+ load(id) {
60
+ if (id === resolved(CSS_ID)) return `export default ${JSON.stringify(css)};`;
61
+ if (id === resolved(TOKENS_ID)) return `export const tokens = ${JSON.stringify(tokens)};\nexport default tokens;`;
62
+ return null;
63
+ },
64
+ transformIndexHtml(html) {
65
+ if (!options.injectCss) return html;
66
+ return {
67
+ html,
68
+ tags: [{
69
+ tag: "style",
70
+ attrs: { "data-pantoken": "css" },
71
+ children: css,
72
+ injectTo: "head"
73
+ }]
74
+ };
75
+ }
76
+ };
77
+ }
78
+ //#endregion
79
+ export { pantoken as default, pantoken };
package/package.json ADDED
@@ -0,0 +1,40 @@
1
+ {
2
+ "name": "@pantoken/vite",
3
+ "version": "0.1.0",
4
+ "description": "Vite plugin for pantoken: virtual modules for tokens and CSS, plus optional stylesheet injection.",
5
+ "license": "MIT",
6
+ "files": [
7
+ "dist"
8
+ ],
9
+ "type": "module",
10
+ "exports": {
11
+ ".": "./dist/index.mjs",
12
+ "./package.json": "./package.json"
13
+ },
14
+ "publishConfig": {
15
+ "access": "public"
16
+ },
17
+ "dependencies": {
18
+ "@pantoken/css": "0.1.0",
19
+ "@pantoken/tokens": "0.1.0"
20
+ },
21
+ "devDependencies": {
22
+ "@types/node": "^24.13.3",
23
+ "typescript": "^6.0.3",
24
+ "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4",
25
+ "vite-plus": "0.2.4"
26
+ },
27
+ "peerDependencies": {
28
+ "vite": ">=5"
29
+ },
30
+ "pantoken": {
31
+ "key": "vite",
32
+ "kind": "subpath"
33
+ },
34
+ "scripts": {
35
+ "build": "vp pack",
36
+ "dev": "vp pack --watch",
37
+ "test": "vp test",
38
+ "check": "vp check"
39
+ }
40
+ }