@vyriy/webpack-config 0.4.7 → 0.4.9

package/README.md

@@ -8,6 +8,7 @@ This package provides small typed Webpack helpers for Vyriy client and server bu
 
 - browser and SSR config generators
 - an HTML plugin helper backed by `html-webpack-plugin` and `@vyriy/html`
+- reusable script and style module rules
 - a node_modules externalizer for server bundles
 
 ## Install
@@ -146,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:
@@ -158,4 +159,33 @@ HTML plugin defaults:
 - minification enabled for whitespace, comments, JS, and CSS
 - local plugin options override shared defaults
 
+## Style Rules
+
+The `style(options?)` helper creates the shared CSS/SCSS/Sass rule:
+
+```ts
+import { style } from '@vyriy/webpack-config';
+
+style({ mode: 'inject' });
+style({ mode: 'extract' });
+style({ mode: 'ignore' });
+```
+
+Modes:
+
+- `inject` uses `style-loader`, so ordinary style imports are inserted into the document head.
+- `extract` uses `mini-css-extract-plugin`, so ordinary style imports become CSS files that can be linked by HTML or served by webpack-dev-server.
+- `ignore` uses `null-loader`, which is useful for SSR bundles.
+
+All non-ignored modes also support inline CSS string imports:
+
+```ts
+import css from './profile-card.scss?inline';
+
+const styles = document.createElement('style');
+styles.textContent = css;
+```
+
+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/index.d.ts

@@ -1,5 +1,6 @@
 export * from './csr.js';
 export * from './external.js';
 export * from './html.js';
+export * from './rules.js';
 export * from './ssr.js';
 export type * from './types.js';

package/index.js

@@ -1,4 +1,5 @@
 export * from './csr.js';
 export * from './external.js';
 export * from './html.js';
+export * from './rules.js';
 export * from './ssr.js';

package/package.json

@@ -1,47 +1,8 @@
 {
   "name": "@vyriy/webpack-config",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "description": "Shared Webpack config for Vyriy projects",
   "type": "module",
-  "dependencies": {
-    "@babel/core": "^7.29.7",
-    "@babel/plugin-transform-runtime": "^7.29.7",
-    "@babel/preset-env": "^7.29.7",
-    "@babel/preset-react": "^7.29.7",
-    "@babel/preset-typescript": "^7.29.7",
-    "@babel/register": "^7.29.7",
-    "@babel/runtime": "^7.29.7",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.6.2",
-    "@vyriy/env": "0.4.7",
-    "@vyriy/html": "0.4.7",
-    "@vyriy/path": "0.4.7",
-    "babel-loader": "^10.1.1",
-    "css-loader": "^7.1.4",
-    "cssnano": "^8.0.1",
-    "html-webpack-plugin": "^5.6.7",
-    "mini-css-extract-plugin": "^2.10.2",
-    "null-loader": "^4.0.1",
-    "postcss": "^8.5.15",
-    "postcss-loader": "^8.2.1",
-    "postcss-preset-env": "^11.3.0",
-    "react-refresh": "^0.18.0",
-    "sass": "^1.100.0",
-    "sass-loader": "^17.0.0",
-    "style-loader": "^4.0.0",
-    "terser-webpack-plugin": "^5.6.0",
-    "webpack": "^5.107.2",
-    "webpack-cli": "^7.0.2",
-    "webpack-dev-server": "^5.2.4"
-  },
-  "agents": "./AGENTS.md",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/evheniy/vyriy",
-    "directory": "packages/webpack"
-  },
-  "main": "./index.js",
-  "types": "./index.d.ts",
   "exports": {
     ".": {
       "types": "./index.d.ts",
@@ -178,5 +139,44 @@
       "import": "./ssr.js",
       "default": "./ssr.js"
     }
-  }
+  },
+  "dependencies": {
+    "@babel/core": "^7.29.7",
+    "@babel/plugin-transform-runtime": "^7.29.7",
+    "@babel/preset-env": "^7.29.7",
+    "@babel/preset-react": "^7.29.7",
+    "@babel/preset-typescript": "^7.29.7",
+    "@babel/register": "^7.29.7",
+    "@babel/runtime": "^7.29.7",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.6.2",
+    "@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",
+    "html-webpack-plugin": "^5.6.7",
+    "mini-css-extract-plugin": "^2.10.2",
+    "null-loader": "^4.0.1",
+    "postcss": "^8.5.15",
+    "postcss-loader": "^8.2.1",
+    "postcss-preset-env": "^11.3.0",
+    "react-refresh": "^0.18.0",
+    "sass": "^1.100.0",
+    "sass-loader": "^17.0.0",
+    "style-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.6.1",
+    "webpack": "^5.107.2",
+    "webpack-cli": "^7.0.3",
+    "webpack-dev-server": "^5.2.4"
+  },
+  "agents": "./AGENTS.md",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/evheniy/vyriy",
+    "directory": "packages/webpack"
+  },
+  "main": "./index.js",
+  "types": "./index.d.ts"
 }

package/rules.d.ts

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

package/rules.js

@@ -4,29 +4,74 @@ import { postcss } from './postcss.js';
 import { resolveDependency } from './resolve-dependency.js';
 export const SCRIPT_TEST = /\.(mjs|cjs|js|jsx|mts|cts|ts|tsx)$/;
 export const STYLE_TEST = /\.(css|scss|sass)$/;
-export const rules = (isSsr = false, isProduction = true) => [
-    {
-        test: SCRIPT_TEST,
-        exclude: /node_modules/,
-        use: {
-            loader: resolveDependency('babel-loader'),
-            options: babel(isSsr, isProduction),
-        },
+const postcssLoader = () => ({
+    loader: resolveDependency('postcss-loader'),
+    options: {
+        postcssOptions: postcss(),
     },
+});
+const styleLoader = (mode) => {
+    return mode === 'extract' ? MiniCssExtractPlugin.loader : resolveDependency('style-loader');
+};
+const stylesheetLoaders = (mode) => [
+    styleLoader(mode),
+    resolveDependency('css-loader'),
+    postcssLoader(),
+    resolveDependency('sass-loader'),
+];
+const inlineStylesheetLoaders = () => [
     {
-        test: STYLE_TEST,
-        use: isSsr
-            ? [resolveDependency('null-loader')]
-            : [
-                isProduction ? MiniCssExtractPlugin.loader : resolveDependency('style-loader'),
-                resolveDependency('css-loader'),
-                {
-                    loader: resolveDependency('postcss-loader'),
-                    options: {
-                        postcssOptions: postcss(),
-                    },
-                },
-                resolveDependency('sass-loader'),
-            ],
+        loader: resolveDependency('css-loader'),
+        options: {
+            exportType: 'string',
+        },
     },
+    postcssLoader(),
+    resolveDependency('sass-loader'),
 ];
+export const style = ({ mode = 'extract' } = {}) => {
+    if (mode === 'ignore') {
+        return {
+            test: STYLE_TEST,
+            use: [resolveDependency('null-loader')],
+        };
+    }
+    return {
+        test: STYLE_TEST,
+        oneOf: [
+            {
+                resourceQuery: /inline/,
+                use: inlineStylesheetLoaders(),
+            },
+            {
+                use: stylesheetLoaders(mode),
+            },
+        ],
+    };
+};
+export const rules = (isSsr = false, isProduction = true, styleMode) => {
+    let mode;
+    if (isSsr) {
+        mode = 'ignore';
+    }
+    else if (styleMode) {
+        mode = styleMode;
+    }
+    else if (isProduction) {
+        mode = 'extract';
+    }
+    else {
+        mode = 'inject';
+    }
+    return [
+        {
+            test: SCRIPT_TEST,
+            exclude: /node_modules/,
+            use: {
+                loader: resolveDependency('babel-loader'),
+                options: babel(isSsr, isProduction),
+            },
+        },
+        style({ mode }),
+    ];
+};

package/types.d.ts

@@ -7,3 +7,7 @@ export type WebpackExternal = Extract<NonNullable<Configuration['externals']>, u
 export type NodeModulesExternalOptions = {
     allowlist?: (RegExp | string)[];
 };
+export type WebpackStyleMode = 'extract' | 'ignore' | 'inject';
+export type WebpackStyleRuleOptions = {
+    mode?: WebpackStyleMode;
+};