@vyriy/webpack-config 0.4.8 → 0.4.10

package/README.md

@@ -147,7 +147,8 @@ 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`
+- webpack-dev-server uses shared CORS headers for local cross-origin bundle consumption
+- CSS is extracted with `MiniCssExtractPlugin` in production and development
 - development builds enable React refresh with `ReactRefreshWebpackPlugin`
 
 HTML plugin defaults:
@@ -186,6 +187,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

@@ -1,6 +1,7 @@
 import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { path } from '@vyriy/path';
+import { devServer } from './dev-server.js';
 import { mode } from './mode.js';
 import { optimization } from './optimization.js';
 import { performance } from './performance.js';
@@ -12,16 +13,20 @@ export const csr = (entry, output, transform) => {
     const base = {
         context: path(),
         devtool: false,
+        devServer: devServer(),
         mode: webpackMode,
         target: isProduction ? 'browserslist' : 'web',
         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/dev-server.d.ts

@@ -0,0 +1,7 @@
+import type { Configuration as DevServerConfiguration } from 'webpack-dev-server';
+export declare const devServerCorsHeaders: {
+    readonly 'Access-Control-Allow-Headers': "*";
+    readonly 'Access-Control-Allow-Methods': "GET, HEAD, OPTIONS";
+    readonly 'Access-Control-Allow-Origin': "*";
+};
+export declare const devServer: (options?: DevServerConfiguration) => DevServerConfiguration;

package/dev-server.js

@@ -0,0 +1,19 @@
+export const devServerCorsHeaders = {
+    'Access-Control-Allow-Headers': '*',
+    'Access-Control-Allow-Methods': 'GET, HEAD, OPTIONS',
+    'Access-Control-Allow-Origin': '*',
+};
+const isHeadersRecord = (headers) => {
+    return Boolean(headers) && !Array.isArray(headers) && typeof headers === 'object';
+};
+export const devServer = (options = {}) => {
+    return {
+        ...options,
+        headers: isHeadersRecord(options.headers)
+            ? {
+                ...devServerCorsHeaders,
+                ...options.headers,
+            }
+            : (options.headers ?? devServerCorsHeaders),
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vyriy/webpack-config",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "description": "Shared Webpack config for Vyriy projects",
   "type": "module",
   "exports": {
@@ -29,6 +29,16 @@
       "import": "./csr.js",
       "default": "./csr.js"
     },
+    "./dev-server": {
+      "types": "./dev-server.d.ts",
+      "import": "./dev-server.js",
+      "default": "./dev-server.js"
+    },
+    "./dev-server.js": {
+      "types": "./dev-server.d.ts",
+      "import": "./dev-server.js",
+      "default": "./dev-server.js"
+    },
     "./external": {
       "types": "./external.d.ts",
       "import": "./external.js",
@@ -149,9 +159,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.10",
+    "@vyriy/html": "0.4.10",
+    "@vyriy/path": "0.4.10",
     "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';
     }