@tsrx/rspack-plugin-vue 0.0.76 → 0.0.78

package/README.md

@@ -0,0 +1,45 @@
+# @tsrx/rspack-plugin-vue
+
+Rspack plugin for compiling `@tsrx/vue` `.tsrx` files.
+
+## Installation
+
+```bash
+pnpm add @tsrx/vue vue vue-jsx-vapor
+pnpm add -D @tsrx/rspack-plugin-vue
+```
+
+## Usage
+
+```ts
+import { TsrxVueRspackPlugin } from '@tsrx/rspack-plugin-vue';
+
+export default {
+  plugins: [new TsrxVueRspackPlugin()],
+};
+```
+
+The plugin compiles `.tsrx` modules with `@tsrx/vue`, runs the result through
+`vue-jsx-vapor`, strips the remaining TypeScript syntax with `builtin:swc-loader`,
+and emits sibling-scoped `<style>` blocks (each styles its siblings and everything
+below them) through Rspack's built-in CSS module type.
+
+It also pushes `.tsrx` into `resolve.extensions` and enables `experiments.css`
+when unset. Editor typechecking should set `jsxImportSource: 'vue-jsx-vapor'`.
+
+## Options
+
+- `vapor`: options forwarded to `vue-jsx-vapor`. By default the plugin enables
+  macros and uses `runtimeModuleName: 'vue-jsx-vapor'`.
+- `runtimeImports`: helper import mode (`'compiler'` by default, or `'direct'` for
+  standalone runtime imports).
+
+When using `runtimeImports: 'direct'`, install the runtime as a direct production
+dependency of the package that owns the compiled modules:
+
+```bash
+pnpm add @tsrx/vue-runtime
+```
+
+The plugin only emits bare `@tsrx/vue-runtime/*` imports and does not provide the
+runtime package.

package/package.json

@@ -3,7 +3,7 @@
   "description": "Rspack plugin for @tsrx/vue",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.0.76",
+  "version": "0.0.78",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "source-map": "^0.7.6",
-    "@tsrx/vue": "0.1.64"
+    "@tsrx/vue": "0.1.66"
   },
   "peerDependencies": {
     "@rspack/core": ">=1.6.0",

package/src/css-loader.js

@@ -7,7 +7,7 @@ import { compile } from '@tsrx/vue';
 /**
  * Re-runs the `@tsrx/vue` compiler against the `.tsrx` source to extract the
  * scoped CSS emitted by its `<style>` block. Invoked when rspack resolves the
- * sibling `?tsrx-css&lang.css` import prepended by the JS loader.
+ * sibling `?tsrx-css&lang.css` import emitted by the JS loader.
  *
  * @this {LoaderContext<{ runtimeImports?: RuntimeImportMode }>}
  * @param {string} source

package/src/js-loader.js

@@ -6,7 +6,7 @@ import { compile } from '@tsrx/vue';
 
 /**
  * Compiles `.tsrx` source to Vue-flavoured TSX and, when a `<style>` block is
- * present, prepends an `import` to the sibling virtual CSS module so rspack can
+ * present, appends an `import` of the sibling virtual CSS module so rspack can
  * include the styles in the asset graph.
  *
  * @this {LoaderContext<{ runtimeImports?: RuntimeImportMode }>}
@@ -21,15 +21,16 @@ export default function jsLoader(source) {
 		const { code, map, css } = compile(source, resourcePath, this.getOptions?.());
 
 		let output = code;
-		/** @type {typeof map | null} */
-		let output_map = map;
 		if (css) {
+			// The import goes after the module's own imports so the stylesheets of
+			// imported themes are added to the asset graph first and a rule in the
+			// applying module wins at equal specificity. Nothing above it moves, so
+			// the compiler's source map still applies.
 			const cssImport = `${resourcePath}?tsrx-css&lang.css`;
-			output = `import ${JSON.stringify(cssImport)};\n${code}`;
-			output_map = null;
+			output = `${code}\nimport ${JSON.stringify(cssImport)};\n`;
 		}
 
-		callback(null, output, /** @type {any} */ (output_map ?? undefined));
+		callback(null, output, /** @type {any} */ (map ?? undefined));
 	} catch (/** @type {any} */ err) {
 		callback(err);
 	}