@vyriy/webpack-config 0.4.8 → 0.4.9

package/README.md

@@ -147,7 +147,7 @@ Shared defaults:
 CSR defaults:
 
 - loaders and Babel extensions are resolved from this package for workspace and package-manager isolation
-- production builds extract CSS with `MiniCssExtractPlugin`
+- CSS is extracted with `MiniCssExtractPlugin` in production and development
 - development builds enable React refresh with `ReactRefreshWebpackPlugin`
 
 HTML plugin defaults:
@@ -186,6 +186,6 @@ const styles = document.createElement('style');
 styles.textContent = css;
 ```
 
-This is useful for custom elements that place styles inside a Shadow DOM. When a custom element should use a linked stylesheet instead, use `style({ mode: 'extract' })` and add `MiniCssExtractPlugin` to the Webpack plugins in both production and development. Webpack dev server can serve the extracted CSS from memory, while production emits the same kind of CSS asset to disk.
+This is useful for custom elements that place styles inside a Shadow DOM. CSR builds extract ordinary stylesheet imports by default, so custom elements can also use a linked stylesheet without local rule replacement. Webpack dev server can serve the extracted CSS from memory, while production emits the same kind of CSS asset to disk.
 
 See the article with a complete browser and SSR bundling walkthrough: <https://vyriy.dev/examples/vyriy-webpack-config/>.

package/csr.js

@@ -17,11 +17,14 @@ export const csr = (entry, output, transform) => {
         entry,
         output,
         module: {
-            rules: rules(false, isProduction),
+            rules: rules(false, isProduction, 'extract'),
         },
         optimization: optimization(isProduction),
         performance,
-        plugins: isProduction ? [new MiniCssExtractPlugin()] : [new ReactRefreshWebpackPlugin()],
+        plugins: [
+            new MiniCssExtractPlugin(),
+            ...(isProduction ? [] : [new ReactRefreshWebpackPlugin()]),
+        ],
         resolve: resolve(),
     };
     return transform ? transform(base) : base;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vyriy/webpack-config",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "description": "Shared Webpack config for Vyriy projects",
   "type": "module",
   "exports": {
@@ -149,9 +149,9 @@
     "@babel/register": "^7.29.7",
     "@babel/runtime": "^7.29.7",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.6.2",
-    "@vyriy/env": "0.4.8",
-    "@vyriy/html": "0.4.8",
-    "@vyriy/path": "0.4.8",
+    "@vyriy/env": "0.4.9",
+    "@vyriy/html": "0.4.9",
+    "@vyriy/path": "0.4.9",
     "babel-loader": "^10.1.1",
     "css-loader": "^7.1.4",
     "cssnano": "^8.0.1",

package/rules.d.ts

@@ -1,6 +1,6 @@
 import type { RuleSetRule } from 'webpack';
-import type { WebpackStyleRuleOptions } from './types.js';
+import type { WebpackStyleMode, WebpackStyleRuleOptions } from './types.js';
 export declare const SCRIPT_TEST: RegExp;
 export declare const STYLE_TEST: RegExp;
 export declare const style: ({ mode }?: WebpackStyleRuleOptions) => RuleSetRule;
-export declare const rules: (isSsr?: boolean, isProduction?: boolean) => RuleSetRule[];
+export declare const rules: (isSsr?: boolean, isProduction?: boolean, styleMode?: WebpackStyleMode) => RuleSetRule[];

package/rules.js

@@ -49,11 +49,14 @@ export const style = ({ mode = 'extract' } = {}) => {
         ],
     };
 };
-export const rules = (isSsr = false, isProduction = true) => {
+export const rules = (isSsr = false, isProduction = true, styleMode) => {
     let mode;
     if (isSsr) {
         mode = 'ignore';
     }
+    else if (styleMode) {
+        mode = styleMode;
+    }
     else if (isProduction) {
         mode = 'extract';
     }