examples

package.json

@@ -44,7 +44,15 @@
     "bench": "vitest bench",
     "version-packages": "node ./scripts/version-packages.mjs",
     "vite": "pnpm run --filter=vite-playground dev",
-    "nextjs": "pnpm run --filter=nextjs-playground dev"
+    "vite:build": "pnpm run --filter=vite-playground build",
+    "nextjs": "pnpm run --filter=nextjs-playground dev",
+    "nextjs:webpack": "pnpm run --filter=nextjs-playground dev -- --webpack",
+    "nextjs:build": "pnpm run --filter=nextjs-playground build",
+    "nextjs:webpack:build": "pnpm run --filter=nextjs-playground build -- --webpack",
+    "webpack": "pnpm run --filter=webpack-playground dev",
+    "webpack:build": "pnpm run --filter=webpack-playground build",
+    "rspack": "pnpm run --filter=rspack-playground dev",
+    "rspack:build": "pnpm run --filter=rspack-playground build"
   },
   "license": "MIT",
   "devDependencies": {

playgrounds/.gitignore

@@ -0,0 +1 @@
+com.chrome.devtools.json

playgrounds/nextjs/app/layout.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
-import './globals.css'
+
+import '../styles/config.css'
+import '../styles/main.scss'
 
 const inter = Inter({ subsets: ['latin'] })
 

playgrounds/nextjs/app/page.tsx

@@ -1,5 +1,5 @@
-import styles from './page.module.css'
+import { App } from '@/components/App'
 
 export default function Home() {
-  return <h1 className={styles.heading}>Hello world!</h1>
+  return <App />
 }

playgrounds/nextjs/components/App.tsx

@@ -0,0 +1,14 @@
+import { Button } from "./Button";
+import { Input } from "./Input";
+
+export function App() {
+  return (
+    <div className="m-3 p-3 border">
+      <h1 className="text-blue-500">Hello World</h1>
+      <hr className="my-2" />
+      <Button />
+      <hr className="my-2" />
+      <Input />
+    </div>
+  )
+}

playgrounds/nextjs/components/Button.module.css

@@ -0,0 +1,8 @@
+@reference "#config.css";
+
+.button {
+    --bg-color: blue;
+    @apply text-white rounded;
+    padding: 10px;
+    background: var(--bg-color);
+}

playgrounds/nextjs/components/Button.tsx

@@ -0,0 +1,5 @@
+import * as cx from './Button.module.css';
+
+export const Button = () => {
+  return <button className={cx.button}>button (css module)</button>;
+}

playgrounds/nextjs/components/Input.module.scss

@@ -0,0 +1,9 @@
+@reference "#config.css";
+
+$-bg-color: green;
+
+.input {
+  padding: 8px;
+  background-color: $-bg-color;
+  @apply border-4 border-red-500 rounded;
+}

playgrounds/nextjs/components/Input.tsx

@@ -0,0 +1,5 @@
+import * as cx from './Input.module.scss';
+
+export const Input = () => {
+  return <input className={cx.input} placeholder='input (scss module)' />;
+}

playgrounds/nextjs/next.config.mjs

@@ -1,4 +1,61 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+    sassOptions: {
+        outputStyle: 'expanded',
+        sourceMap: true,
+    },
+    turbopack: {},
+    webpack: (config, options) => {
+        function updateCssLoader(use) {
+            if (!use || typeof use !== 'object') return
+            if (typeof use.loader !== 'string') return
+            if (!use.loader.includes('css-loader')) return
+
+            if (use.options?.modules === true) {
+                use.options.modules = {
+                    localIdentName: '_[local]_[hash:5]',
+                }
+                return
+            }
+
+            if (use.options?.modules && typeof use.options.modules === 'object') {
+                use.options.modules.localIdentName = '_[local]_[hash:5]'
+            }
+        }
+
+        function walkRules(rules) {
+            for (let rule of rules) {
+                if (rule.oneOf) {
+                    walkRules(rule.oneOf)
+                }
+
+                if (Array.isArray(rule.use)) {
+                    for (let use of rule.use) {
+                        if (typeof use === 'string') continue
+                        updateCssLoader(use)
+                    }
+                } else if (rule.use && typeof rule.use === 'object') {
+                    updateCssLoader(rule.use)
+                }
+            }
+        }
+
+        if (config.module?.rules) {
+            walkRules(config.module.rules)
+        }
+
+        if (options.dev) {
+            Object.defineProperty(config, 'devtool', {
+                get() {
+                    return 'source-map'
+                },
+                set() {
+                    return 'source-map'
+                },
+            })
+        }
+        return config
+    }
+}
 
 export default nextConfig

playgrounds/nextjs/package.json

@@ -3,11 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --port 5173",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
+  "imports": {
+    "#config.css": "./styles/config.css"
+  },
   "dependencies": {
     "@tailwindcss/postcss": "workspace:^",
     "fast-glob": "^3.3.3",

playgrounds/nextjs/styles/main.scss

@@ -0,0 +1,7 @@
+@reference '#config.css';
+
+body {
+  margin: 4px;
+  padding: 4px;
+  font-family: system-ui, sans-serif;
+}

playgrounds/nextjs/tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -10,17 +14,28 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
-        "name": "next",
-      },
+        "name": "next"
+      }
     ],
     "paths": {
-      "@/*": ["./*"],
+      "@/*": [
+        "./*"
+      ]
     },
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

playgrounds/rspack/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "rspack-playground",
+  "private": true,
+  "scripts": {
+    "lint": "tsc --noEmit",
+    "dev": "rspack serve --config ./rspack.config.js --mode=development",
+    "build": "rspack build --config ./rspack.config.js --mode=production"
+  },
+  "imports": {
+    "#config.css": "./src/styles/config.css"
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "workspace:^",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "tailwindcss": "workspace:^"
+  },
+  "devDependencies": {
+    "@rspack/cli": "^1.0.0",
+    "@rspack/core": "^1.0.0",
+    "@rspack/dev-server": "^1.0.0",
+    "@swc/core": "^1.9.3",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "css-loader": "^7.1.2",
+    "postcss": "^8.4.47",
+    "postcss-loader": "^8.1.1",
+    "sass-embedded": "^1.97.3",
+    "sass-loader": "^16.0.4",
+    "style-loader": "^4.0.0",
+    "swc-loader": "^0.2.6",
+    "typescript": "^5.5.4"
+  }
+}

playgrounds/rspack/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: {
+        '@tailwindcss/postcss': {},
+    },
+}

playgrounds/rspack/rspack.config.js

@@ -0,0 +1,104 @@
+const path = require('node:path')
+const { rspack } = require('@rspack/core')
+
+/** @type {rspack.Configuration} */
+module.exports = (_env, argv) => {
+    const isProd = argv.mode === 'production'
+    const styleLoader = isProd ? rspack.CssExtractRspackPlugin.loader : 'style-loader'
+
+    return {
+        devtool: 'source-map',
+        entry: path.resolve(__dirname, 'src/main.tsx'),
+        output: {
+            path: path.resolve(__dirname, 'dist'),
+            filename: 'bundle.js',
+            clean: true,
+        },
+        resolve: {
+            extensions: ['.ts', '.tsx', '.js'],
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.module\.css$/i,
+                    use: [
+                        styleLoader,
+                        {
+                            loader: 'css-loader',
+                            options: {
+                                modules: {
+                                    localIdentName: '_[local]_[hash:5]',
+                                },
+                            },
+                        },
+                        'postcss-loader',
+                    ],
+                },
+                {
+                    test: /\.module\.scss$/i,
+                    use: [
+                        styleLoader,
+                        {
+                            loader: 'css-loader',
+                            options: {
+                                modules: {
+                                    localIdentName: '_[local]_[hash:5]',
+                                },
+                            },
+                        },
+                        'postcss-loader',
+                        'sass-loader',
+                    ],
+                },
+                {
+                    test: /\.css$/i,
+                    exclude: /\.module\.css$/i,
+                    use: [styleLoader, 'css-loader', 'postcss-loader'],
+                },
+                {
+                    test: /\.scss$/i,
+                    exclude: /\.module\.scss$/i,
+                    use: [styleLoader, 'css-loader', 'postcss-loader', 'sass-loader'],
+                },
+                {
+                    test: /\.(ts|tsx)$/,
+                    exclude: /node_modules/,
+                    use: {
+                        loader: 'swc-loader',
+                        options: {
+                            jsc: {
+                                parser: {
+                                    syntax: 'typescript',
+                                    tsx: true,
+                                },
+                                transform: {
+                                    react: {
+                                        runtime: 'automatic',
+                                        development: process.env.NODE_ENV !== 'production',
+                                    },
+                                },
+                            },
+                        },
+                    },
+                },
+            ],
+        },
+        plugins: [
+            ...(isProd
+                ? [
+                    new rspack.CssExtractRspackPlugin({
+                        filename: '[name].css',
+                    }),
+                ]
+                : []),
+            new rspack.HtmlRspackPlugin({
+                template: path.resolve(__dirname, 'src/index.html'),
+            }),
+        ],
+        devServer: {
+            static: ['public'],
+            port: 5173,
+            hot: false,
+        },
+    }
+}

playgrounds/rspack/src/App.tsx

@@ -0,0 +1,14 @@
+import { Button } from "./components/Button";
+import { Input } from "./components/Input";
+
+export function App() {
+  return (
+    <div className="m-3 p-3 border">
+      <h1 className="text-blue-500">Hello World</h1>
+      <hr className="my-2" />
+      <Button />
+      <hr className="my-2" />
+      <Input />
+    </div>
+  )
+}