@mainset/bundler-webpack 0.1.0 → 0.2.0-rc.2

package/dist/esm/webpack-config/config-fragments/common-webapp.fragment.mjs

@@ -0,0 +1,19 @@
+import { resolveHostPackageNodeModulesPath, runtimePathById, } from '@mainset/cli/runtime';
+import { merge } from '@mainset/toolkit-js';
+import fs from 'fs';
+import path from 'path';
+import { commonWebpackConfigFragment } from './common.fragment.mjs';
+// The entry point for Global styles
+const cssGlobalStylesEntry = path.join(runtimePathById.src, 'styles', 'global.css');
+const scssGlobalStylesEntry = path.join(runtimePathById.src, 'styles', 'global.scss');
+const defaultEntry = [
+    resolveHostPackageNodeModulesPath('@mainset/bundler-webpack', '@babel/polyfill'),
+];
+if (fs.existsSync(cssGlobalStylesEntry))
+    defaultEntry.push(cssGlobalStylesEntry);
+if (fs.existsSync(scssGlobalStylesEntry))
+    defaultEntry.push(scssGlobalStylesEntry);
+const commonWebappWebpackConfigFragment = merge(commonWebpackConfigFragment, {
+    entry: defaultEntry,
+});
+export { commonWebappWebpackConfigFragment };

package/dist/esm/webpack-config/config-fragments/common.fragment.mjs

@@ -1,35 +1,19 @@
-import { resolveHostPackageNodeModulesPath, runtimePathById, } from '@mainset/cli/runtime';
-import babelConfig from '../../babel.config.mjs';
+import { runtimePathById } from '@mainset/cli/runtime';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import path from 'path';
+import { BABEL_LOADER__RULE__WEBPACK_CONFIG_FRAGMENT, FONTS__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK, IMAGES__RULE__WEBPACK_CONFIG_FRAGMENT, } from './module-rules/index.mjs';
 const commonWebpackConfigFragment = {
     output: {
         path: runtimePathById.dist,
     },
     module: {
         rules: [
-            {
-                test: /\.(ts|tsx)$/,
-                exclude: /node_modules/,
-                use: {
-                    loader: resolveHostPackageNodeModulesPath('@mainset/bundler-webpack', 'babel-loader'),
-                    options: babelConfig,
-                },
-            },
-            {
-                test: /\.(svg|png)$/,
-                type: 'asset/resource',
-                generator: {
-                    filename: '[name].[hash].[ext]',
-                    outputPath: 'dist/assets/images',
-                },
-            },
-            {
-                test: /\.(woff|woff2|eot|ttf|otf)$/,
-                type: 'asset/resource',
-                generator: {
+            BABEL_LOADER__RULE__WEBPACK_CONFIG_FRAGMENT,
+            IMAGES__RULE__WEBPACK_CONFIG_FRAGMENT,
+            Object.assign(Object.assign({}, FONTS__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK), { type: 'asset/resource', generator: {
                     filename: '[name].[hash].[ext]',
                     outputPath: 'dist/assets/fonts',
-                },
-            },
+                } }),
         ],
     },
     resolve: {
@@ -44,5 +28,16 @@ const commonWebpackConfigFragment = {
             '.tsx',
         ],
     },
+    plugins: [
+        new CopyWebpackPlugin({
+            patterns: [
+                {
+                    from: path.join(runtimePathById.root, 'public'),
+                    to: path.join(runtimePathById.dist),
+                    noErrorOnMissing: true, // optional: don't error if public doesn't exist
+                },
+            ],
+        }),
+    ],
 };
 export { commonWebpackConfigFragment };

package/dist/esm/webpack-config/config-fragments/csr-webapp.fragment.mjs

@@ -1,15 +1,13 @@
-import { resolveHostPackageNodeModulesPath, runtimePathById, } from '@mainset/cli/runtime';
+import { runtimePathById } from '@mainset/cli/runtime';
 import { merge } from '@mainset/toolkit-js';
 import fs from 'fs';
 import path from 'path';
-import { commonWebpackConfigFragment } from './common.fragment.mjs';
+import { commonWebappWebpackConfigFragment } from './common-webapp.fragment.mjs';
+// The entry point for the CSR webapp
 const defaultEntry = path.join(runtimePathById.src, 'index.ts');
 const csrEntry = path.join(runtimePathById.src, 'index.csr.ts');
 const bundlerEntry = fs.existsSync(csrEntry) ? csrEntry : defaultEntry;
-const csrWebappWebpackConfigFragment = merge(commonWebpackConfigFragment, {
-    entry: [
-        resolveHostPackageNodeModulesPath('@mainset/bundler-webpack', '@babel/polyfill'),
-        bundlerEntry,
-    ],
+const csrWebappWebpackConfigFragment = merge(commonWebappWebpackConfigFragment, {
+    entry: [bundlerEntry],
 });
 export { csrWebappWebpackConfigFragment };

package/dist/esm/webpack-config/config-fragments/dev.fragment.mjs

@@ -1,8 +1,35 @@
+import { resolveHostPackageNodeModulesPath } from '@mainset/cli/runtime';
+import { CSS_LOADER__DEV_RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK, CSS_MODULES__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK, CSS_STYLES__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK, CSS_STYLES__RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK, } from './module-rules/index.mjs';
 const devWebpackConfigFragment = {
     mode: 'development',
     output: {
         filename: 'js/[name].js',
         chunkFilename: 'js/[id].js',
     },
+    module: {
+        rules: [
+            Object.assign(Object.assign({}, CSS_STYLES__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK), { oneOf: [
+                    Object.assign(Object.assign({}, CSS_MODULES__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK), { use: [
+                            // NOTE: do NOT use {style-loader} in {production} mode
+                            // https://webpack.js.org/loaders/style-loader/#recommended
+                            resolveHostPackageNodeModulesPath('@mainset/bundler-webpack', 'style-loader'),
+                            // NOTE: by default {css-loader} transforms CSS Modules to hashed class names
+                            // which is not development-friendly
+                            CSS_LOADER__DEV_RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK,
+                            ...CSS_STYLES__RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK,
+                        ] }),
+                    // Pure CSS support without CSS Modules
+                    {
+                        use: [
+                            // NOTE: do NOT use {style-loader} in {production} mode
+                            // https://webpack.js.org/loaders/style-loader/#recommended
+                            resolveHostPackageNodeModulesPath('@mainset/bundler-webpack', 'style-loader'),
+                            resolveHostPackageNodeModulesPath('@mainset/bundler-webpack', 'css-loader'),
+                            ...CSS_STYLES__RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK,
+                        ],
+                    },
+                ] }),
+        ],
+    },
 };
 export { devWebpackConfigFragment };

package/dist/esm/webpack-config/config-fragments/module-rules/index.mjs

@@ -0,0 +1,2 @@
+export * from './module-rules.fragment.mjs';
+export * from './module-rules.chunk.mjs';

package/dist/esm/webpack-config/config-fragments/module-rules/module-rules.chunk.mjs

@@ -0,0 +1,46 @@
+import { resolveHostPackageNodeModulesPath, runtimePathById, } from '@mainset/cli/runtime';
+import fs from 'fs';
+import path from 'path';
+// RegEx patterns for matching module rules in Webpack configuration
+const CSS_STYLES__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK = {
+    test: /\.(sa|sc|c)ss$/,
+};
+const CSS_MODULES__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK = {
+    test: /\.module\.(sa|sc|c)ss$/,
+};
+const FONTS__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK = {
+    test: /\.(woff|woff2|eot|ttf|otf)$/,
+};
+// Use options for CSS loader rule in Webpack configuration
+const CSS_LOADER__PROD_RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK = {
+    loader: resolveHostPackageNodeModulesPath('@mainset/bundler-webpack', 'css-loader'),
+};
+const CSS_LOADER__DEV_RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK = {
+    loader: resolveHostPackageNodeModulesPath('@mainset/bundler-webpack', 'css-loader'),
+    // NOTE: by default {css-loader} transforms CSS Modules to hashed class names
+    // which is not development-friendly
+    options: {
+        modules: {
+            // hashed class names
+            localIdentName: '[local]--[hash:base64:5]',
+        },
+    },
+};
+// Use options for CSS styles rule in Webpack configuration
+const postcssConfigPath = path.join(runtimePathById.root, 'config', 'postcss.config.cjs');
+const CSS_STYLES__RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK = [
+    // resolveHostPackageNodeModulesPath(
+    //   '@mainset/bundler-webpack',
+    //   'resolve-url-loader',
+    // ),
+    {
+        loader: resolveHostPackageNodeModulesPath('@mainset/bundler-webpack', 'postcss-loader'),
+        options: {
+            postcssOptions: {
+                config: fs.existsSync(postcssConfigPath) && postcssConfigPath,
+            },
+        },
+    },
+    resolveHostPackageNodeModulesPath('@mainset/bundler-webpack', 'sass-loader'),
+];
+export { CSS_LOADER__DEV_RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK, CSS_LOADER__PROD_RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK, CSS_MODULES__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK, CSS_STYLES__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK, CSS_STYLES__RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK, FONTS__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK, };

package/dist/esm/webpack-config/config-fragments/module-rules/module-rules.fragment.mjs

@@ -0,0 +1,19 @@
+import { resolveHostPackageNodeModulesPath } from '@mainset/cli/runtime';
+import babelConfig from '../../../babel.config.mjs';
+const BABEL_LOADER__RULE__WEBPACK_CONFIG_FRAGMENT = {
+    test: /\.(ts|mts|tsx)$/,
+    exclude: /node_modules/,
+    use: {
+        loader: resolveHostPackageNodeModulesPath('@mainset/bundler-webpack', 'babel-loader'),
+        options: babelConfig,
+    },
+};
+const IMAGES__RULE__WEBPACK_CONFIG_FRAGMENT = {
+    test: /\.(svg|png)$/,
+    type: 'asset/resource',
+    generator: {
+        filename: '[name].[hash].[ext]',
+        outputPath: 'dist/assets/images',
+    },
+};
+export { IMAGES__RULE__WEBPACK_CONFIG_FRAGMENT, BABEL_LOADER__RULE__WEBPACK_CONFIG_FRAGMENT, };

package/dist/esm/webpack-config/config-fragments/prod.fragment.mjs

@@ -1,4 +1,7 @@
+import { resolveHostPackageNodeModulesPath } from '@mainset/cli/runtime';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import TerserPlugin from 'terser-webpack-plugin';
+import { CSS_LOADER__PROD_RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK, CSS_MODULES__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK, CSS_STYLES__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK, CSS_STYLES__RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK, } from './module-rules/index.mjs';
 const prodWebpackConfigFragment = {
     mode: 'production',
     output: {
@@ -20,5 +23,33 @@ const prodWebpackConfigFragment = {
             },
         },
     },
+    module: {
+        rules: [
+            Object.assign(Object.assign({}, CSS_STYLES__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK), { oneOf: [
+                    Object.assign(Object.assign({}, CSS_MODULES__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK), { use: [
+                            MiniCssExtractPlugin.loader,
+                            // NOTE: allow {css-loader} to transform CSS Modules to hashed class names
+                            CSS_LOADER__PROD_RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK,
+                            ...CSS_STYLES__RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK,
+                        ] }),
+                    // Pure CSS support without CSS Modules
+                    {
+                        use: [
+                            MiniCssExtractPlugin.loader,
+                            // NOTE: do NOT transform Global CSS class names to hashed class names
+                            // as there is regular string used as class in the app code which will not be transformed
+                            resolveHostPackageNodeModulesPath('@mainset/bundler-webpack', 'css-loader'),
+                            ...CSS_STYLES__RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK,
+                        ],
+                    },
+                ] }),
+        ],
+    },
+    plugins: [
+        new MiniCssExtractPlugin({
+            filename: 'css/[name].[chunkhash:8].min.css',
+            chunkFilename: 'css/[id].[chunkhash:8].min.css',
+        }),
+    ],
 };
 export { prodWebpackConfigFragment };

package/dist/esm/webpack-config/config-fragments/ssr-webapp.fragment.mjs

@@ -1,18 +1,18 @@
-import { resolveHostPackageNodeModulesPath, runtimePathById, } from '@mainset/cli/runtime';
+import { runtimePathById } from '@mainset/cli/runtime';
 import { merge } from '@mainset/toolkit-js';
 import fs from 'fs';
 import path from 'path';
-import { commonWebpackConfigFragment } from './common.fragment.mjs';
+import { commonWebappWebpackConfigFragment } from './common-webapp.fragment.mjs';
+// The entry point for the SSR webapp
 const defaultEntry = path.join(runtimePathById.src, 'index.ts');
 const ssrEntry = path.join(runtimePathById.src, 'index.ssr.ts');
 const bundlerEntry = fs.existsSync(ssrEntry) ? ssrEntry : defaultEntry;
-const ssrWebappWebpackConfigFragment = merge(commonWebpackConfigFragment, {
-    entry: [
-        resolveHostPackageNodeModulesPath('@mainset/bundler-webpack', '@babel/polyfill'),
-        bundlerEntry,
-    ],
+const ssrWebappWebpackConfigFragment = merge(
+// NOTE: the Web App config used to compile entry point of {global.css} styles
+commonWebappWebpackConfigFragment, {
+    entry: [bundlerEntry],
     output: {
-        path: path.join(commonWebpackConfigFragment.output.path, 'public'),
+        path: path.join(commonWebappWebpackConfigFragment.output.path, 'public'),
     },
 });
 export { ssrWebappWebpackConfigFragment };

package/dist/esm/webpack-config/dev-server.csr.config.mjs

@@ -1,7 +1,7 @@
 import { runtimePathById } from '@mainset/cli/runtime';
 import { merge } from '@mainset/toolkit-js';
 import csrWebappEnvBasedConfig from './webapp.csr.config.mjs';
-const csrServerDevConfig = merge(csrWebappEnvBasedConfig, {
+const csrDevServerWebappEnvBasedConfig = merge(csrWebappEnvBasedConfig, {
     devtool: 'inline-source-map',
     devServer: {
         port: process.env.PORT || 3000,
@@ -12,4 +12,4 @@ const csrServerDevConfig = merge(csrWebappEnvBasedConfig, {
         hot: true,
     },
 });
-export default csrServerDevConfig;
+export default csrDevServerWebappEnvBasedConfig;

package/dist/esm/webpack-config/server.ssr.config.mjs

@@ -0,0 +1,104 @@
+import { NODE_ENV, resolveHostPackageNodeModulesPath, runtimePathById, } from '@mainset/cli/runtime';
+import { merge } from '@mainset/toolkit-js';
+import path from 'path';
+import { commonWebpackConfigFragment } from './config-fragments/common.fragment.mjs';
+import { BABEL_LOADER__RULE__WEBPACK_CONFIG_FRAGMENT, CSS_LOADER__DEV_RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK, CSS_LOADER__PROD_RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK, CSS_MODULES__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK, CSS_STYLES__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK, CSS_STYLES__RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK, FONTS__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK, IMAGES__RULE__WEBPACK_CONFIG_FRAGMENT, } from './config-fragments/module-rules/index.mjs';
+const nullLoaderModuleRules = [
+    FONTS__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK,
+].map((ruleTestRegexWebpackConfigFragment) => (Object.assign(Object.assign({}, ruleTestRegexWebpackConfigFragment), { use: resolveHostPackageNodeModulesPath('@mainset/bundler-webpack', 'null-loader') })));
+const ssrServerCommonWebpackConfigFragment = {
+    // common config
+    resolve: commonWebpackConfigFragment.resolve,
+    // SSR server dedicated config
+    target: 'node',
+    entry: {
+        'ssr-server.config': path.join(runtimePathById.root, 'config', 'ssr-server.config.mts'),
+    },
+    output: {
+        path: path.join(runtimePathById.dist, 'private'),
+        filename: '[name].mjs',
+        library: {
+            type: 'module',
+        },
+    },
+    experiments: {
+        outputModule: true,
+    },
+    /*
+    optimization: {
+      // !IMPORTANT: {splitChunks} is designed to optimize the client-side JavaScript
+      // When bundling for SSR, splitting chunks usually doesn't make sense, and even breaks SSR — because:
+      // - The server expects a single, self-contained entry file.
+      // - Lazy-loaded chunks may not be resolvable during SSR runtime.
+      splitChunks: false,
+    },
+    */
+    module: {
+        rules: [
+            // common config
+            BABEL_LOADER__RULE__WEBPACK_CONFIG_FRAGMENT,
+            IMAGES__RULE__WEBPACK_CONFIG_FRAGMENT,
+            // do NOT bundle in SSR mode, because they are not used during rendering on the server
+            ...nullLoaderModuleRules,
+        ],
+    },
+};
+const generateSSRCssStylesRuleWebpackConfigFragment = ({ mode }) => {
+    const CSS_LOADER__RULE_USE_OPTIONS__BY_MODE = {
+        [NODE_ENV.PRODUCTION]: CSS_LOADER__PROD_RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK,
+        [NODE_ENV.DEVELOPMENT]: CSS_LOADER__DEV_RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK,
+    };
+    return Object.assign(Object.assign({}, CSS_STYLES__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK), { oneOf: [
+            Object.assign(Object.assign({}, CSS_MODULES__RULE_TEST_REGEX__WEBPACK_CONFIG_CHUNK), { use: [
+                    // NOTE: allow {css-loader} to transform CSS Modules to hashed class names while rendering HTML
+                    merge(CSS_LOADER__RULE_USE_OPTIONS__BY_MODE[mode], {
+                        options: {
+                            modules: {
+                                // !IMPORTANT: attach transformed CSS Modules class names into HTML
+                                // without compiling CSS inside JS file
+                                exportOnlyLocals: true,
+                                // - {exportOnlyLocals: true} tells css-loader to only export the mapping of class names to hashes
+                                //    (for use in SSR), and not to emit or bundle any CSS.
+                                // - This allows your SSR code to inject the correct class names into the rendered HTML,
+                                //    without including or compiling CSS into the server bundle.
+                            },
+                        },
+                    }, {
+                        isSourceObjMutated: false,
+                    }),
+                    ...CSS_STYLES__RULE_USE_OPTIONS__WEBPACK_CONFIG_CHUNK,
+                ] }),
+            // Pure CSS support without CSS Modules
+            {
+                // do NOT bundle in SSR mode, because they are not used during rendering on the server
+                use: [
+                    resolveHostPackageNodeModulesPath('@mainset/bundler-webpack', 'null-loader'),
+                ],
+            },
+        ] });
+};
+const ssrServerProdWebpackConfigFragment = {
+    mode: 'production',
+    module: {
+        rules: [
+            generateSSRCssStylesRuleWebpackConfigFragment({
+                mode: NODE_ENV.PRODUCTION,
+            }),
+        ],
+    },
+};
+const ssrServerDevWebpackConfigFragment = {
+    mode: 'development',
+    module: {
+        rules: [
+            generateSSRCssStylesRuleWebpackConfigFragment({
+                mode: NODE_ENV.DEVELOPMENT,
+            }),
+        ],
+    },
+};
+const ssrServerEnvBasedConfig = {
+    [NODE_ENV.PRODUCTION]: merge(ssrServerProdWebpackConfigFragment, ssrServerCommonWebpackConfigFragment),
+    [NODE_ENV.DEVELOPMENT]: merge(ssrServerDevWebpackConfigFragment, ssrServerCommonWebpackConfigFragment),
+};
+export default ssrServerEnvBasedConfig[process.env.NODE_ENV];

package/dist/esm/webpack-config/webapp.ssr.config.mjs

@@ -5,6 +5,7 @@ import path from 'path';
 import { devWebpackConfigFragment } from './config-fragments/dev.fragment.mjs';
 import { prodWebpackConfigFragment } from './config-fragments/prod.fragment.mjs';
 import { ssrWebappWebpackConfigFragment } from './config-fragments/ssr-webapp.fragment.mjs';
+import ssrServerEnvBasedConfig from './server.ssr.config.mjs';
 const ssrWebappGeneralConfig = merge(ssrWebappWebpackConfigFragment, {
     plugins: [
         new HtmlWebpackPlugin({
@@ -17,4 +18,8 @@ const ssrWebappEnvBasedConfig = {
     [NODE_ENV.PRODUCTION]: merge(prodWebpackConfigFragment, ssrWebappGeneralConfig),
     [NODE_ENV.DEVELOPMENT]: merge(devWebpackConfigFragment, ssrWebappGeneralConfig),
 };
-export default ssrWebappEnvBasedConfig[process.env.NODE_ENV];
+export default [
+    ssrServerEnvBasedConfig,
+    // NOTE: all Env Based configs declared outside {config-fragments} folder
+    ssrWebappEnvBasedConfig[process.env.NODE_ENV],
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mainset/bundler-webpack",
-  "version": "0.1.0",
+  "version": "0.2.0-rc.2",
   "description": "Bundler for web apps",
   "homepage": "https://github.com/mainset/dev-stack-fe/tree/main/packages/bundler-webpack",
   "bugs": {
@@ -15,8 +15,12 @@
   "type": "module",
   "sideEffects": false,
   "files": [
-    "dist"
+    "dist",
+    "src/@types"
   ],
+  "exports": {
+    "./global-types": "./src/@types/bundler.d.ts"
+  },
   "dependencies": {
     "@babel/cli": "^7.27.2",
     "@babel/core": "^7.27.4",
@@ -25,15 +29,29 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "babel-loader": "^10.0.0",
+    "copy-webpack-plugin": "^13.0.0",
+    "css-loader": "^7.1.2",
     "html-webpack-plugin": "^5.6.3",
+    "mini-css-extract-plugin": "^2.9.2",
+    "null-loader": "^4.0.1",
+    "postcss": "^8.5.6",
+    "postcss-loader": "^8.1.1",
+    "sass": "^1.89.2",
+    "sass-loader": "^16.0.5",
+    "style-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.3.14",
     "webpack": "^5.99.9",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.2"
   },
   "devDependencies": {
-    "@mainset/dev-stack-fe": "^0.1.0",
-    "@mainset/cli": "^0.1.0",
+    "@mainset/cli": "^0.2.0-rc.2",
+    "@mainset/dev-stack-fe": "^0.1.1",
+    "@mainset/toolkit-js": "^0.1.0"
+  },
+  "peerDependencies": {
+    "@mainset/cli": "^0.2.0",
+    "@mainset/dev-stack-fe": "^0.1.1",
     "@mainset/toolkit-js": "^0.1.0"
   },
   "scripts": {

package/src/@types/bundler.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.scss' {
+  const styles: { [className: string]: string };
+  export = styles;
+}