@tsrx/rspack-plugin-react 0.0.91 → 0.0.92

package/README.md

@@ -0,0 +1,43 @@
+# @tsrx/rspack-plugin-react
+
+Rspack plugin for compiling `@tsrx/react` `.tsrx` files.
+
+## Installation
+
+```bash
+pnpm add -D @tsrx/rspack-plugin-react
+```
+
+## Usage
+
+```ts
+import { TsrxReactRspackPlugin } from '@tsrx/rspack-plugin-react';
+
+export default {
+  plugins: [new TsrxReactRspackPlugin()],
+};
+```
+
+The plugin compiles `.tsrx` modules with `@tsrx/react`, chains
+`builtin:swc-loader` for React's automatic JSX runtime, 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.
+
+## Options
+
+- `jsxImportSource`: automatic JSX runtime import source (default: `'react'`).
+- `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/react-runtime
+```
+
+The plugin only emits bare `@tsrx/react-runtime/*` imports and does not provide
+the runtime package.

package/package.json

@@ -3,7 +3,7 @@
   "description": "Rspack plugin for @tsrx/react",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.0.91",
+  "version": "0.0.92",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -20,7 +20,7 @@
     }
   },
   "dependencies": {
-    "@tsrx/react": "0.2.65"
+    "@tsrx/react": "0.2.66"
   },
   "peerDependencies": {
     "@rspack/core": ">=1.6.0"

package/src/css-loader.js

@@ -7,7 +7,7 @@ import { compile } from '@tsrx/react';
 /**
  * Re-runs the `@tsrx/react` 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.
+ * the 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/react';
 
 /**
  * Compiles `.tsrx` source to TSX and, when a `<style>` block is present,
- * prepends an `import` to the sibling virtual CSS module so rspack can
+ * 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);
 	}