@tsrx/rspack-plugin-solid 0.0.78 → 0.0.80

package/README.md

@@ -0,0 +1,46 @@
+# @tsrx/rspack-plugin-solid
+
+Rspack plugin for compiling `@tsrx/solid` `.tsrx` files.
+
+## Installation
+
+```bash
+pnpm add @tsrx/solid solid-js @solidjs/web
+pnpm add -D @tsrx/rspack-plugin-solid
+```
+
+## Usage
+
+```ts
+import { TsrxSolidRspackPlugin } from '@tsrx/rspack-plugin-solid';
+
+export default {
+  plugins: [new TsrxSolidRspackPlugin()],
+};
+```
+
+The plugin compiles `.tsrx` modules with `@tsrx/solid`, runs the final TypeScript
+and Solid JSX transform through `babel-loader` with `@babel/preset-typescript` and
+`babel-preset-solid`, 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. In development mode it adds `solid-refresh/babel` unless you pass
+`hot: false`.
+
+## Options
+
+- `hot`: whether to add `solid-refresh/babel` to the Babel pipeline. Defaults to
+  `true` unless Rspack is running in production mode.
+- `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/solid-runtime
+```
+
+The plugin only emits bare `@tsrx/solid-runtime/*` imports and does not provide
+the runtime package.

package/package.json

@@ -3,7 +3,7 @@
   "description": "Rspack plugin for @tsrx/solid",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.0.78",
+  "version": "0.0.80",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -25,7 +25,7 @@
     "babel-loader": "^10.1.1",
     "babel-preset-solid": "2.0.0-rc.3",
     "solid-refresh": "0.8.0-next.7",
-    "@tsrx/solid": "0.1.65"
+    "@tsrx/solid": "0.1.67"
   },
   "peerDependencies": {
     "@rspack/core": ">=1.6.0"

package/src/css-loader.js

@@ -7,7 +7,7 @@ import { compile } from '@tsrx/solid';
 /**
  * Re-runs the `@tsrx/solid` 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/solid';
 
 /**
  * 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);
 	}