rspeedy-plugin-vanilla-extract 0.2.0

package/README.md

@@ -0,0 +1,30 @@
+# rspeedy-plugin-vanilla-extract
+
+Use [vanilla-extract](https://vanilla-extract.style/) with Rspeedy through an
+Rsbuild plugin. This wraps `@vanilla-extract/webpack-plugin` and adds an SWC
+loader to vanilla-extract child compilers.
+
+## Install
+
+```sh
+npm install rspeedy-plugin-vanilla-extract @rsbuild/core webpack
+```
+
+## Use
+
+```ts
+import { pluginVanillaExtract } from "rspeedy-plugin-vanilla-extract";
+
+export default {
+  plugins: [pluginVanillaExtract({})],
+};
+```
+
+Pass vanilla-extract webpack plugin options to `pluginVanillaExtract` as needed.
+
+## Release
+
+Run `yarn changeset` with each user-facing change. A push to `main` opens or
+updates a version pull request. After it is merged, GitHub Actions publishes
+the version to npm using trusted publishing. The first version must be
+published manually before npm can be configured to trust the workflow.

package/dist/index.cjs

@@ -0,0 +1,54 @@
+var webpackPlugin = require('@vanilla-extract/webpack-plugin');
+
+class VanillaExtractRspeedyCompatPlugin {
+    apply(compiler) {
+        compiler.hooks.thisCompilation.tap("VanillaExtractTypeScript", (compilation)=>{
+            const original = compilation.createChildCompiler.bind(compilation);
+            compilation.createChildCompiler = (name, outputOptions, plugins)=>{
+                const childCompiler = original(name, outputOptions, plugins);
+                if (!name?.startsWith("vanilla-extract-compiler")) {
+                    return childCompiler;
+                }
+                childCompiler.options.module.rules ??= [];
+                childCompiler.options.module.rules.unshift({
+                    test: /\.[cm]?[jt]sx?$/,
+                    use: [
+                        {
+                            loader: "builtin:swc-loader",
+                            options: {
+                                jsc: {
+                                    parser: {
+                                        syntax: "typescript",
+                                        tsx: false,
+                                        decorators: true
+                                    }
+                                }
+                            }
+                        }
+                    ]
+                });
+                return childCompiler;
+            };
+        });
+    }
+}
+
+/**
+ * Creates an Rsbuild plugin that enables vanilla-extract and applies
+ * Rspeedy compatibility adjustments.
+ *
+ * @param options Configuration for the underlying vanilla-extract webpack plugin.
+ * @returns Rsbuild plugin definition for vanilla-extract integration.
+ */ function pluginVanillaExtract(options) {
+    return {
+        name: "rspeedy-plugin-vanilla-extract",
+        setup (api) {
+            api.modifyRspackConfig((config)=>{
+                config.plugins.push(new webpackPlugin.VanillaExtractPlugin(options));
+                config.plugins.push(new VanillaExtractRspeedyCompatPlugin());
+            });
+        }
+    };
+}
+
+exports.pluginVanillaExtract = pluginVanillaExtract;

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import { RsbuildPlugin } from '@rsbuild/core';
+import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
+
+type VanillaExtractWebpackPluginOptions = typeof VanillaExtractPlugin extends new (options: infer O) => unknown ? O : never;
+/**
+ * Options forwarded to `@vanilla-extract/webpack-plugin`.
+ */
+type PluginVanillaExtractOptions = VanillaExtractWebpackPluginOptions;
+/**
+ * Creates an Rsbuild plugin that enables vanilla-extract and applies
+ * Rspeedy compatibility adjustments.
+ *
+ * @param options Configuration for the underlying vanilla-extract webpack plugin.
+ * @returns Rsbuild plugin definition for vanilla-extract integration.
+ */
+declare function pluginVanillaExtract(options: PluginVanillaExtractOptions): RsbuildPlugin;
+
+export { pluginVanillaExtract };
+export type { PluginVanillaExtractOptions };

package/dist/index.js

@@ -0,0 +1,54 @@
+import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
+
+class VanillaExtractRspeedyCompatPlugin {
+    apply(compiler) {
+        compiler.hooks.thisCompilation.tap("VanillaExtractTypeScript", (compilation)=>{
+            const original = compilation.createChildCompiler.bind(compilation);
+            compilation.createChildCompiler = (name, outputOptions, plugins)=>{
+                const childCompiler = original(name, outputOptions, plugins);
+                if (!name?.startsWith("vanilla-extract-compiler")) {
+                    return childCompiler;
+                }
+                childCompiler.options.module.rules ??= [];
+                childCompiler.options.module.rules.unshift({
+                    test: /\.[cm]?[jt]sx?$/,
+                    use: [
+                        {
+                            loader: "builtin:swc-loader",
+                            options: {
+                                jsc: {
+                                    parser: {
+                                        syntax: "typescript",
+                                        tsx: false,
+                                        decorators: true
+                                    }
+                                }
+                            }
+                        }
+                    ]
+                });
+                return childCompiler;
+            };
+        });
+    }
+}
+
+/**
+ * Creates an Rsbuild plugin that enables vanilla-extract and applies
+ * Rspeedy compatibility adjustments.
+ *
+ * @param options Configuration for the underlying vanilla-extract webpack plugin.
+ * @returns Rsbuild plugin definition for vanilla-extract integration.
+ */ function pluginVanillaExtract(options) {
+    return {
+        name: "rspeedy-plugin-vanilla-extract",
+        setup (api) {
+            api.modifyRspackConfig((config)=>{
+                config.plugins.push(new VanillaExtractPlugin(options));
+                config.plugins.push(new VanillaExtractRspeedyCompatPlugin());
+            });
+        }
+    };
+}
+
+export { pluginVanillaExtract };

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "rspeedy-plugin-vanilla-extract",
+  "version": "0.2.0",
+  "description": "vanilla-extract integration for Rspeedy",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tonyfromundefined/rspeedy-plugin-vanilla-extract.git"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "bunchee",
+    "dev": "bunchee --watch",
+    "typecheck": "tsc --noEmit",
+    "version-packages": "changeset version"
+  },
+  "dependencies": {
+    "@vanilla-extract/webpack-plugin": "^2.3.26"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.29.8",
+    "@rsbuild/core": "^1",
+    "bunchee": "^6.9.3",
+    "typescript": "^5.9.3",
+    "webpack": "^5.105.4"
+  },
+  "peerDependencies": {
+    "@rsbuild/core": "^1",
+    "webpack": "^5"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "packageManager": "yarn@4.18.0"
+}