feat(bundler-webpack): enable css-modules for .module.css files (close #1557) (#1560)

BREAKING CHANGE: For webpack bundler, css-modules will be enabled for `*.module.[ext]` files. The previous `*.[ext]?module` usage is no longer supported.

Author: meteorlxy

e2e/docs/.vuepress/theme/client/config.ts

@@ -1,5 +1,6 @@
 import { defineClientConfig } from 'vuepress/client'
 import RootComponentFromTheme from './components/RootComponentFromTheme.vue'
+import CssModulesLayout from './layouts/CssModulesLayout.vue'
 import CustomLayout from './layouts/CustomLayout.vue'
 import Layout from './layouts/Layout.vue'
 import NotFound from './layouts/NotFound.vue'
@@ -16,6 +17,7 @@ export default defineClientConfig({
   },
 
   layouts: {
+    CssModulesLayout,
     CustomLayout,
     Layout,
     NotFound,

e2e/docs/.vuepress/theme/client/layouts/CssModulesLayout.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import styles from '../styles/styles.module.css'
+import variables from '../styles/variables.module.scss'
+</script>
+
+<template>
+  <div class="e2e-theme-css-modules-layout">
+    <main class="e2e-theme-css-modules-layout-content">
+      <div id="e2e-theme-css-modules-scss">{{ variables.fooScss }}</div>
+      <div id="e2e-theme-css-modules-css" :class="styles.greenText">
+        CSS modules green text
+      </div>
+      <Content />
+    </main>
+  </div>
+</template>

e2e/docs/.vuepress/theme/client/styles/styles.module.css

@@ -0,0 +1,3 @@
+.greenText {
+  color: rgb(0, 129, 0);
+}

e2e/docs/.vuepress/theme/client/styles/variables.module.scss

@@ -0,0 +1,3 @@
+:export {
+  fooScss: 234px;
+}

e2e/docs/styles/css-modules.md

@@ -0,0 +1,3 @@
+---
+layout: CssModulesLayout
+---

e2e/tests/styles/css-modules.spec.ts

@@ -0,0 +1,10 @@
+import { expect, test } from '@playwright/test'
+
+test('Should load CSS modules correctly', async ({ page }) => {
+  await page.goto('styles/css-modules.html')
+  await expect(page.locator('#e2e-theme-css-modules-scss')).toHaveText('234px')
+  await expect(page.locator('#e2e-theme-css-modules-css')).toHaveCSS(
+    'color',
+    'rgb(0, 129, 0)',
+  )
+})

packages/bundler-webpack/src/config/handleModuleStyles.ts

@@ -13,8 +13,6 @@ import type {
 
 const require = createRequire(import.meta.url)
 
-type StyleRule = Config.Rule<Config.Rule<Config.Module>>
-
 /**
  * Set webpack module to handle style files
  */
@@ -29,36 +27,19 @@ export const handleModuleStyles = ({
   isBuild: boolean
   isServer: boolean
 }): void => {
-  const createStyleRules = ({
+  const handleStyle = <T extends LoaderOptions = LoaderOptions>({
     lang,
     test,
+    loaderName,
+    loaderOptions,
   }: {
     lang: string
     test: RegExp
-  }): {
-    modulesRule: StyleRule
-    normalRule: StyleRule
-  } => {
-    const baseRule = config.module.rule(lang).test(test)
-    const modulesRule = baseRule.oneOf('modules').resourceQuery(/module/)
-    const normalRule = baseRule.oneOf('normal')
-    return {
-      modulesRule,
-      normalRule,
-    }
-  }
-
-  const applyStyleHandlers = ({
-    rule,
-    cssModules,
-    loaderName,
-    loaderOptions = {},
-  }: {
-    rule: StyleRule
-    cssModules: boolean
     loaderName?: string
-    loaderOptions?: LoaderOptions
+    loaderOptions?: T
   }): void => {
+    const rule = config.module.rule(lang).test(test)
+
     if (!isServer) {
       if (isBuild) {
         rule.use('extract-css-loader').loader(MiniCssExtractPlugin.loader)
@@ -72,13 +53,14 @@ export const handleModuleStyles = ({
       .use('css-loader')
       .loader(require.resolve('css-loader'))
       .options({
-        modules: cssModules
-          ? {
-              localIdentName: `[local]_[contenthash:base64:8]`,
-              exportOnlyLocals: isServer,
-            }
-          : false,
-        importLoaders: 1,
+        modules: {
+          auto: true,
+          exportLocalsConvention: 'as-is',
+          exportOnlyLocals: isServer,
+          localIdentName: `[local]_[contenthash:base64:8]`,
+          namedExport: false,
+        },
+        importLoaders: loaderName ? 2 : 1,
       })
 
     // use postcss-loader
@@ -94,41 +76,13 @@ export const handleModuleStyles = ({
 
     // use extra loader
     if (loaderName) {
-      rule.use(loaderName).loader(loaderName).options(loaderOptions)
+      rule
+        .use(loaderName)
+        .loader(loaderName)
+        .options(loaderOptions ?? {})
     }
   }
 
-  const handleStyle = <T extends LoaderOptions = LoaderOptions>({
-    lang,
-    test,
-    loaderName,
-    loaderOptions,
-  }: {
-    lang: string
-    test: RegExp
-    loaderName?: string
-    loaderOptions?: T
-  }): void => {
-    const { modulesRule, normalRule } = createStyleRules({
-      lang,
-      test,
-    })
-
-    applyStyleHandlers({
-      rule: modulesRule,
-      cssModules: true,
-      loaderName,
-      loaderOptions,
-    })
-
-    applyStyleHandlers({
-      rule: normalRule,
-      cssModules: false,
-      loaderName,
-      loaderOptions,
-    })
-  }
-
   handleStyle({
     lang: 'css',
     test: /\.css$/,