From bcdccf02db54700623d5262df103577bf77bcaf5 Mon Sep 17 00:00:00 2001
From: harrywan <harrywan@webank.com>
Date: Tue, 8 Jun 2021 14:49:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81css=20modules?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/zh/guide/css.md                          | 14 +++
 .../src/plugins/commands/webpackConfig/css.js | 93 +++++++++++--------
 packages/fes-template/.fes.js                 |  3 +
 packages/fes-template/src/pages/index.vue     | 21 ++++-
 4 files changed, 89 insertions(+), 42 deletions(-)

diff --git a/docs/zh/guide/css.md b/docs/zh/guide/css.md
index e5968698..0cfaed03 100644
--- a/docs/zh/guide/css.md
+++ b/docs/zh/guide/css.md
@@ -23,5 +23,19 @@ Fes.js 中约定 `src/global.css` 为全局样式，如果存在此文件，会
 </style>
 ```
 
+## CSS Modules
+支持 `Vue` 的 [CSS Modules](https://vue-loader.vuejs.org/zh/guide/css-modules.html#%E7%94%A8%E6%B3%95) 用法，可以直接使用：
+```vue
+<style module>
+.layout-content {
+  max-width: 1000px;
+}
+```
+如果想直接引入CSS文件的话，则CSS文件名需要包含`.module`，比如：
+```js
+import style from '@/styles/index.module.css'
+console.log(style)
+```
+
 ## CSS 预处理器
 Fes.js 内置支持 `less`，不支持 `sass` 和 `stylus`，但如果有需求，可以通过 `chainWebpack` 配置或者 `fes-plugin` 插件的形式支持。
\ No newline at end of file
diff --git a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/css.js b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/css.js
index 95dd53fe..2a8da0e3 100644
--- a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/css.js
+++ b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/css.js
@@ -21,45 +21,62 @@ function createRules({
     options,
     browserslist
 }) {
+    function applyLoaders(rule, isCSSModules) {
+        if (isDev) {
+            rule.use('extra-css-loader')
+                .loader(require.resolve('style-loader'))
+                .options({
+                });
+        } else {
+            rule.use('extra-css-loader')
+                .loader(require('mini-css-extract-plugin').loader)
+                .options({
+                });
+        }
+
+        rule.use('css-loader')
+            .loader(require.resolve('css-loader'))
+            .options(
+                deepmerge(
+                    {
+                        importLoaders: 1,
+                        // https://webpack.js.org/loaders/css-loader/#onlylocals
+                        ...(isCSSModules
+                            ? {
+                                modules: {
+                                    localIdentName: '[local]___[hash:base64:5]'
+                                }
+                            }
+                            : {})
+                    },
+                    config.cssLoader || {}
+                )
+            );
+
+        rule.use('postcss-loader')
+            .loader(require.resolve('postcss-loader'))
+            .options(deepmerge({
+                postcssOptions: () => ({
+                    plugins: [
+                        // https://github.com/luisrudge/postcss-flexbugs-fixes
+                        require('postcss-flexbugs-fixes'),
+                        require('postcss-safe-parser'),
+                        [require('autoprefixer'), { ...config.autoprefixer, overrideBrowserslist: browserslist }],
+                        ...(config.extraPostCSSPlugins ? config.extraPostCSSPlugins : [])
+                    ]
+                })
+            }, config.postcssLoader || {}));
+
+        if (loader) {
+            rule.use(loader)
+                .loader(require.resolve(loader))
+                .options(options);
+        }
+    }
+
     const rule = webpackConfig.module.rule(lang).test(test);
-
-    if (isDev) {
-        rule.use('extra-css-loader')
-            .loader(require.resolve('style-loader'))
-            .options({
-            });
-    } else {
-        rule.use('extra-css-loader')
-            .loader(require('mini-css-extract-plugin').loader)
-            .options({
-            });
-    }
-
-    rule.use('css-loader')
-        .loader(require.resolve('css-loader'))
-        .options({
-            ...config.cssLoader
-        });
-
-    rule.use('postcss-loader')
-        .loader(require.resolve('postcss-loader'))
-        .options(deepmerge({
-            postcssOptions: () => ({
-                plugins: [
-                    // https://github.com/luisrudge/postcss-flexbugs-fixes
-                    require('postcss-flexbugs-fixes'),
-                    require('postcss-safe-parser'),
-                    [require('autoprefixer'), { ...config.autoprefixer, overrideBrowserslist: browserslist }],
-                    ...(config.extraPostCSSPlugins ? config.extraPostCSSPlugins : [])
-                ]
-            })
-        }, config.postcssLoader || {}));
-
-    if (loader) {
-        rule.use(loader)
-            .loader(require.resolve(loader))
-            .options(options);
-    }
+    applyLoaders(rule.oneOf('css-modules').resourceQuery(/module/), true);
+    applyLoaders(rule.oneOf('css'), false);
 }
 
 export default function createCssWebpackConfig({
diff --git a/packages/fes-template/.fes.js b/packages/fes-template/.fes.js
index d11dd6d1..974b680e 100644
--- a/packages/fes-template/.fes.js
+++ b/packages/fes-template/.fes.js
@@ -80,4 +80,7 @@ export default {
         strict: true,
     },
     dynamicImport: true,
+    extraBabelPlugins: [
+        ['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }, 'ant-design-vue'],
+    ]
 };
diff --git a/packages/fes-template/src/pages/index.vue b/packages/fes-template/src/pages/index.vue
index 1627aaa8..1fb60d14 100644
--- a/packages/fes-template/src/pages/index.vue
+++ b/packages/fes-template/src/pages/index.vue
@@ -1,5 +1,7 @@
 <template>
-    <div class="haizekuo">
+    <div :class="$style.red">
+        <a-input placeholder="请输入。。。" />
+        <a-button type="primary">Primary</a-button>
         <div>国际化 {{t("test")}}</div>
         fes & 拉夫德鲁 <br />
         <access :id="accessId"> accessOnepicess1 <input /> </access>
@@ -22,8 +24,16 @@ import { ref, onMounted } from 'vue';
 import {
     useAccess, useRouter, useI18n, locale, enums, request
 } from '@fesjs/fes';
+import { Button, Input } from 'ant-design-vue';
 
 export default {
+    components: {
+        [Button.name]: Button,
+        [Input.name]: Input,
+    },
+    mounted(){
+        console.log("$style:", this.$style)
+    },
     setup() {
         const fes = ref('fes upgrade to vue3');
         const accessOnepicess = useAccess('/onepiece1');
@@ -123,8 +133,11 @@ export default {
 };
 </script>
 
-<style scoped>
-.haizekuo {
-    /* background: url('../images/icon.png'); */
+<style module>
+.red {
+  color: red;
+}
+.bold {
+  font-weight: bold;
 }
 </style>