From 0daa2f1a0861cd15dc1f887abbaf1950380ad0d6 Mon Sep 17 00:00:00 2001
From: qlin <haizekuo@gmail.com>
Date: Wed, 26 Jan 2022 19:34:02 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=20windicss=20?=
 =?UTF-8?q?=E5=9C=A8=E5=BC=80=E5=8F=91=E7=8E=AF=E5=A2=83=20css=20=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E9=A1=BA=E5=BA=8F=E9=97=AE=E9=A2=98=20(#95)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/fes-plugin-windicss/src/index.js     | 20 +++++++++++++++++--
 .../src/plugins/commands/webpackConfig/css.js | 17 ++++++++--------
 .../plugins/commands/webpackConfig/index.js   |  2 +-
 packages/fes-template/src/pages/index.vue     | 18 +++++++++++------
 4 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/packages/fes-plugin-windicss/src/index.js b/packages/fes-plugin-windicss/src/index.js
index 6add0d27..ee6c8311 100644
--- a/packages/fes-plugin-windicss/src/index.js
+++ b/packages/fes-plugin-windicss/src/index.js
@@ -13,15 +13,31 @@ export default (api) => {
         }
     });
 
-    api.addEntryImportsAhead(() => [{ source: 'windi.css' }]);
+    api.addEntryImportsAhead(() => [{ source: 'windi-base.css' }, { source: 'windi-components.css' }, { source: 'windi-utilities.css' }]);
 
-    api.chainWebpack((memo) => {
+    api.chainWebpack((memo, { createCSSRule }) => {
         memo.plugin('windicss').use(WindiCSSWebpackPlugin, [
             {
                 config: resolve(__dirname, '../windi.config.js'),
                 ...api.config.windicss
             }
         ]);
+        if (api.env === 'development') {
+            memo.module.rule('css').test((path) => {
+                if (path.endsWith('windi-utilities.css')) {
+                    return false;
+                }
+                return /\.css$/.test(path);
+            });
+            createCSSRule({
+                lang: 'windicss',
+                test: /windi-utilities.css$/,
+                styleLoaderOption: {
+                    insert: 'body'
+                }
+            });
+        }
+
         return memo;
     });
 };
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 e09cba79..24fd6f67 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
@@ -19,14 +19,14 @@ function createRules({
     test,
     loader,
     options,
-    browserslist
+    browserslist,
+    styleLoaderOption
 }) {
     function applyLoaders(rule, isCSSModules) {
         if (isDev) {
             rule.use('extra-css-loader')
                 .loader(require.resolve('style-loader'))
-                .options({
-                });
+                .options(Object.assign({}, styleLoaderOption));
         } else {
             rule.use('extra-css-loader')
                 .loader(require('mini-css-extract-plugin').loader)
@@ -110,13 +110,12 @@ export default function createCssWebpackConfig({
         browserslist
     });
 
-    webpackConfig.plugin('extra-css')
-        .use(require.resolve('mini-css-extract-plugin'), [{
-            filename: isDev ? '[name].css' : '[name].[contenthash:8].css',
-            chunkFilename: isDev ? '[id].css' : '[id].[contenthash:8].css'
-        }]);
-
     if (!isDev) {
+        webpackConfig.plugin('extra-css')
+            .use(require.resolve('mini-css-extract-plugin'), [{
+                filename: '[name].[contenthash:8].css',
+                chunkFilename: '[id].[contenthash:8].css'
+            }]);
         webpackConfig.optimization
             .minimizer('css')
             .use(require.resolve('css-minimizer-webpack-plugin'), [{}]);
diff --git a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/index.js b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/index.js
index 6ee2a43e..e617db70 100644
--- a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/index.js
+++ b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/index.js
@@ -20,7 +20,7 @@ function getTargetsAndBrowsersList({ config }) {
         }, {});
 
     const browserslist = targets.browsers
-      || Object.keys(targets).map(key => `${key} >= ${targets[key] === true ? '0' : targets[key]}`);
+        || Object.keys(targets).map(key => `${key} >= ${targets[key] === true ? '0' : targets[key]}`);
 
     return {
         targets,
diff --git a/packages/fes-template/src/pages/index.vue b/packages/fes-template/src/pages/index.vue
index 4ea7e8a2..ec5f7c64 100644
--- a/packages/fes-template/src/pages/index.vue
+++ b/packages/fes-template/src/pages/index.vue
@@ -1,17 +1,16 @@
 <template>
     <div class="page">
         home
+        <FButton class="m-2">Button</FButton>
     </div>
 </template>
-<config>
-{
-    "name": "index",
-    "title": "$home"
-}
-</config>
+
 <script>
+import { FButton } from '@fesjs/fes-design';
+
 export default {
     components: {
+        FButton
     },
     setup() {
         return {
@@ -24,3 +23,10 @@ export default {
 .page {
 }
 </style>
+
+<config>
+{
+    "name": "index",
+    "title": "$home"
+}
+</config>