@pantoken/webpack 0.1.0

package/README.md

@@ -0,0 +1,40 @@
+# @pantoken/webpack
+
+A Webpack 5 plugin that emits the Instructure token stylesheet as a build asset (default
+`pantoken.css`), so you can link it from your HTML without importing the large package into a bundle.
+
+## Install
+
+```sh
+npm i -D @pantoken/webpack
+```
+
+Also available as `pantoken/webpack`.
+
+## Usage
+
+```js
+// webpack.config.js
+import { PantokenWebpackPlugin } from "@pantoken/webpack";
+
+export default {
+  plugins: [new PantokenWebpackPlugin()],
+};
+```
+
+This emits `pantoken.css` into the output, ready to link from your HTML. Override the name with
+`new PantokenWebpackPlugin({ filename: "tokens.css" })`. `webpack` is an optional peer dependency.
+
+## API
+
+- **`PantokenWebpackPlugin`** — the plugin class. Construct it with an optional `{ filename }` and add
+  it to `plugins`. Also the default export.
+- **`PantokenWebpackOptions`** — options type; `filename` sets the emitted asset name.
+
+## Related
+
+- Wraps `@pantoken/css`, which supplies the stylesheet this plugin emits.
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,58 @@
+//#region src/index.d.ts
+/** The minimal Webpack compiler surface this plugin uses (avoids a hard dependency on webpack). */
+interface CompilerLike {
+  webpack: {
+    sources: {
+      RawSource: new (source: string) => unknown;
+    };
+  };
+  hooks: {
+    thisCompilation: {
+      tap: (name: string, fn: (compilation: CompilationLike) => void) => void;
+    };
+  };
+}
+interface CompilationLike {
+  hooks: {
+    processAssets: {
+      tap: (options: {
+        name: string;
+        stage?: number;
+      }, fn: () => void) => void;
+    };
+  };
+  emitAsset: (name: string, source: unknown) => void;
+}
+/** Options for {@link PantokenWebpackPlugin}. */
+interface PantokenWebpackOptions {
+  /** The emitted asset filename (default `"pantoken.css"`). */
+  filename?: string;
+}
+/**
+ * Webpack plugin that emits the pantoken stylesheet as an output asset.
+ *
+ * @example Emit pantoken.css from your webpack.config.js
+ * ```js
+ * import { PantokenWebpackPlugin } from "@pantoken/webpack";
+ *
+ * export default {
+ *   plugins: [new PantokenWebpackPlugin()],
+ * };
+ * ```
+ *
+ * @example Rename the emitted asset
+ * ```js
+ * import { PantokenWebpackPlugin } from "@pantoken/webpack";
+ *
+ * export default {
+ *   plugins: [new PantokenWebpackPlugin({ filename: "tokens.css" })],
+ * };
+ * ```
+ */
+declare class PantokenWebpackPlugin {
+  private readonly filename;
+  constructor(options?: PantokenWebpackOptions);
+  apply(compiler: CompilerLike): void;
+}
+//#endregion
+export { PantokenWebpackOptions, PantokenWebpackPlugin, PantokenWebpackPlugin as default };

package/dist/index.mjs

@@ -0,0 +1,47 @@
+import { css } from "@pantoken/css";
+//#region src/index.ts
+/**
+* `@pantoken/webpack` — a Webpack plugin that emits the Instructure token stylesheet as a build
+* asset (default `pantoken.css`), so you can reference it from your HTML without importing the large
+* package into a bundle.
+*
+* @module
+* @experimental
+*/
+/**
+* Webpack plugin that emits the pantoken stylesheet as an output asset.
+*
+* @example Emit pantoken.css from your webpack.config.js
+* ```js
+* import { PantokenWebpackPlugin } from "@pantoken/webpack";
+*
+* export default {
+*   plugins: [new PantokenWebpackPlugin()],
+* };
+* ```
+*
+* @example Rename the emitted asset
+* ```js
+* import { PantokenWebpackPlugin } from "@pantoken/webpack";
+*
+* export default {
+*   plugins: [new PantokenWebpackPlugin({ filename: "tokens.css" })],
+* };
+* ```
+*/
+var PantokenWebpackPlugin = class {
+	filename;
+	constructor(options = {}) {
+		this.filename = options.filename ?? "pantoken.css";
+	}
+	apply(compiler) {
+		const { RawSource } = compiler.webpack.sources;
+		compiler.hooks.thisCompilation.tap("@pantoken/webpack", (compilation) => {
+			compilation.hooks.processAssets.tap({ name: "@pantoken/webpack" }, () => {
+				compilation.emitAsset(this.filename, new RawSource(css));
+			});
+		});
+	}
+};
+//#endregion
+export { PantokenWebpackPlugin, PantokenWebpackPlugin as default };

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@pantoken/webpack",
+  "version": "0.1.0",
+  "description": "Webpack plugin for pantoken: emits the token stylesheet as a build asset.",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@pantoken/css": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "typescript": "^6.0.3",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4",
+    "vite-plus": "0.2.4"
+  },
+  "peerDependencies": {
+    "webpack": ">=5"
+  },
+  "peerDependenciesMeta": {
+    "webpack": {
+      "optional": true
+    }
+  },
+  "pantoken": {
+    "key": "webpack",
+    "kind": "subpath"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "dev": "vp pack --watch",
+    "test": "vp test",
+    "check": "vp check"
+  }
+}