Skip to content

Commit f2e0016

Browse files
SunLxySunLxy
authored
fix(@kkt/ssr):node 端对 css-loader 加 属性 & fix(@kkt/plugin-less): 修改在 webpack.modules.rules 中的位置 (#20)
1 parent 06a3061 commit f2e0016

File tree

17 files changed

+167
-102
lines changed

17 files changed

+167
-102
lines changed

‎.github/workflows/ci.yml

+2
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ jobs:
2020

2121
- run: npm install
2222
- run: npm run hoist
23+
# - run: yarn
24+
# - run: yarn run build
2325
- run: npm run build
2426

2527
- run: mkdir -p build

‎core/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@kkt/ssr",
3-
"version": "3.1.2",
3+
"version": "3.1.3",
44
"description": "",
55
"license": "MIT",
66
"main": "lib/index.js",
@@ -26,6 +26,7 @@
2626
"@types/webpack-node-externals": "^2.5.3"
2727
},
2828
"dependencies": {
29+
"css-loader": "^6.7.1",
2930
"kkt": "~7.1.5",
3031
"mini-css-extract-plugin": "2.6.0",
3132
"react-scripts": "^5.0.0",

‎core/src/overrides/utils.ts

+45-15
Original file line numberDiff line numberDiff line change
@@ -107,8 +107,7 @@ export const restOutPut = (conf: WebpackConfiguration, options: WebpackConfigura
107107
};
108108
};
109109

110-
// 开发模式下 把 css 进行处理
111-
export const restDevModuleRuleCss = (conf: WebpackConfiguration,): WebpackConfiguration => {
110+
export const addMiniCssExtractPlugin = (conf: WebpackConfiguration): WebpackConfiguration => {
112111
return {
113112
...conf,
114113
plugins: conf.plugins.concat([
@@ -120,6 +119,14 @@ export const restDevModuleRuleCss = (conf: WebpackConfiguration,): WebpackConfig
120119
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
121120
})
122121
]),
122+
}
123+
}
124+
125+
// node 环境 把 css 进行处理
126+
export const restDevModuleRuleCss = (conf: WebpackConfiguration,): WebpackConfiguration => {
127+
return {
128+
...conf,
129+
plugins: conf.plugins.filter(plugin => plugin && plugin.constructor && plugin.constructor.name !== "MiniCssExtractPlugin"),
123130
module: {
124131
...conf.module,
125132
rules: getModuleCSSRules(conf.module.rules,)
@@ -128,19 +135,35 @@ export const restDevModuleRuleCss = (conf: WebpackConfiguration,): WebpackConfig
128135
}
129136

130137
/**
131-
* 1. 开发模式下，去除 style-loader 改成 MiniCssExtractPlugin.lader，让他生成 css 文件
138+
* 1. 去除 style-loader|mini-css-extract-plugin
132139
* */
133-
export const getModuleCSSRules = (rules: (webpack.RuleSetRule | '...')[],) => {
140+
export const getModuleCSSRules = (rules: (webpack.RuleSetRule | '...')[], shouldUseSourceMap: boolean = false) => {
134141
const newRules: any = [];
142+
143+
const cssModuleOption = (mode: "icss" | "local") => ({
144+
importLoaders: 3,
145+
sourceMap: shouldUseSourceMap,
146+
modules: {
147+
mode,
148+
exportOnlyLocals: true
149+
},
150+
});
151+
152+
135153
rules.forEach((rule) => {
136154
if (typeof rule === 'string') {
137155
newRules.push(rule);
138156
return;
139157
}
140-
if (/style-loader/.test(rule.loader)) {
158+
159+
if (/(style-loader|mini-css-extract-plugin)/.test(rule.loader)) {
160+
161+
} else if (rule && typeof rule === 'object' && rule.test && /css-loader/.test(rule.loader) && !/postcss-loader/.test(rule.loader)) {
162+
const isModule = [getToString(cssModuleRegex), getToString(sassModuleRegex), getToString(lessModuleRegex),].includes(rule.test.toString())
141163
newRules.push({
142-
loader: MiniCssExtractPlugin.loader,
143-
});
164+
loader: require.resolve("css-loader"),
165+
options: cssModuleOption(isModule ? "local" : "icss")
166+
})
144167
} else if (rule.oneOf) {
145168
const newOneOf = rule.oneOf.map((item) => {
146169
if (
@@ -154,24 +177,31 @@ export const getModuleCSSRules = (rules: (webpack.RuleSetRule | '...')[],) => {
154177
getToString(lessRegex),
155178
].includes(item.test.toString())
156179
) {
180+
const isModule = [getToString(cssModuleRegex), getToString(sassModuleRegex), getToString(lessModuleRegex),].includes(item.test.toString())
157181
let newUse;
158182
if (Array.isArray(item.use)) {
159183
newUse = item.use.map((ite) => {
160-
if (typeof ite === 'string' && /style-loader/.test(ite)) {
184+
if (typeof ite === 'string' && /(style-loader|mini-css-extract-plugin)/.test(ite)) {
185+
return false
186+
} else if (typeof ite === 'string' && /css-loader/.test(ite) && !/postcss-loader/.test(ite)) {
161187
return {
162-
loader: MiniCssExtractPlugin.loader,
163-
};
164-
} else if (typeof ite === 'object' && /style-loader/.test(ite.loader)) {
188+
loader: require.resolve("css-loader"),
189+
options: cssModuleOption(isModule ? "local" : "icss")
190+
}
191+
} else if (typeof ite === 'object' && /(style-loader|mini-css-extract-plugin)/.test(ite.loader)) {
192+
return false
193+
} else if (typeof ite === 'object' && /css-loader/.test(ite.loader) && !/postcss-loader/.test(ite.loader)) {
165194
return {
166-
loader: MiniCssExtractPlugin.loader,
167-
};
195+
loader: require.resolve("css-loader"),
196+
options: cssModuleOption(isModule ? "local" : "icss")
197+
}
168198
}
169199
return ite;
170-
});
200+
}).filter(Boolean);
171201
}
172202
return {
173203
...item,
174-
use: newUse || item.use,
204+
use: newUse || [],
175205
};
176206
}
177207
return item;

‎core/src/script/utils/index.ts

+10-3
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,17 @@ import webpackNodeExternals from "webpack-node-externals"
44
import webpack from "webpack"
55
import { OptionsProps } from "../../interface"
66
import fs from 'fs';
7-
import { restDevModuleRuleCss } from "./../../overrides/utils"
87

98
import { loaderConf, OverridesProps } from "./../../overrides"
109

11-
import { getWbpackBarPlugins, restOutPut, restWebpackManifestPlugin, clearHtmlTemp } from "../../overrides/utils"
10+
import {
11+
getWbpackBarPlugins,
12+
restOutPut,
13+
restWebpackManifestPlugin,
14+
clearHtmlTemp,
15+
addMiniCssExtractPlugin,
16+
restDevModuleRuleCss
17+
} from "../../overrides/utils"
1218

1319
// 引入环境变量
1420
require(`${reactScripts}/config/env`);
@@ -43,7 +49,6 @@ const getWebpackConfig = (newConfig: webpack.Configuration, type: "server" | "cl
4349
if (nodeExternals) {
4450
newConfig.externals = [webpackNodeExternals()]
4551
}
46-
newConfig = restDevModuleRuleCss(newConfig)
4752

4853
return newConfig
4954
}
@@ -61,6 +66,7 @@ export default async (env: "development" | "production", options: OptionsProps)
6166
if (fs.existsSync(overrides.client_path)) {
6267
const configClient = configFactory(env);
6368
let newConfigClient = getWebpackConfig(configClient, "client", overrides, options.clientNodeExternals, options.clientIsChunk, env)
69+
newConfigClient = addMiniCssExtractPlugin(newConfigClient)
6470
if (overridesClientWebpack) {
6571
newConfigClient = overridesClientWebpack(newConfigClient, env, { ...rest, env })
6672
}
@@ -73,6 +79,7 @@ export default async (env: "development" | "production", options: OptionsProps)
7379
let newConfigServer = getWebpackConfig(configServer, "server", overrides, options.serverNodeExternals, options.serverIsChunk, env)
7480
newConfigServer.devtool = false
7581
newConfigServer.target = "node14"
82+
newConfigServer = restDevModuleRuleCss(newConfigServer)
7683
if (overridesServerWebpack) {
7784
newConfigServer = overridesServerWebpack(newConfigServer, env, { ...rest, env })
7885
}

‎example/basic-plugins/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@examples/basic-plugins",
3-
"version": "3.1.2",
3+
"version": "3.1.3",
44
"description": "",
55
"private": true,
66
"scripts": {
@@ -16,7 +16,7 @@
1616
"react-dom": "17.0.2"
1717
},
1818
"devDependencies": {
19-
"@kkt/ssr": "3.1.2",
19+
"@kkt/ssr": "3.1.3",
2020
"kkt": "~7.1.5"
2121
},
2222
"browserslist": {

‎example/basic-routes-rematch-new/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@examples/basic-routes-rematch-new",
3-
"version": "3.1.2",
3+
"version": "3.1.3",
44
"description": "",
55
"private": true,
66
"scripts": {
@@ -21,7 +21,7 @@
2121
"serialize-javascript": "6.0.0"
2222
},
2323
"devDependencies": {
24-
"@kkt/ssr": "3.1.2",
24+
"@kkt/ssr": "3.1.3",
2525
"kkt": "~7.1.5"
2626
},
2727
"browserslist": {

‎example/basic-routes/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@examples/basic-routes",
3-
"version": "3.1.2",
3+
"version": "3.1.3",
44
"description": "",
55
"private": true,
66
"scripts": {
@@ -17,7 +17,7 @@
1717
"react-router-dom": "^6.2.2"
1818
},
1919
"devDependencies": {
20-
"@kkt/ssr": "3.1.2",
20+
"@kkt/ssr": "3.1.3",
2121
"kkt": "~7.1.5"
2222
},
2323
"browserslist": {

‎example/basic/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@examples/basic",
3-
"version": "3.1.2",
3+
"version": "3.1.3",
44
"description": "",
55
"private": true,
66
"scripts": {
@@ -15,7 +15,7 @@
1515
"react-dom": "17.0.2"
1616
},
1717
"devDependencies": {
18-
"@kkt/ssr": "3.1.2",
18+
"@kkt/ssr": "3.1.3",
1919
"kkt": "~7.1.5"
2020
},
2121
"browserslist": {

‎example/react-router-rematch-old/.kktssrrc.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import path from "path"
21
import pluginLess from "@kkt/plugin-less"
32
export default {
43
overridesWebpack: (confArr, env, options) => {
@@ -11,6 +10,9 @@ export default {
1110
})
1211
arr.push({
1312
...newConfig,
13+
module: {
14+
...newConfig.module,
15+
},
1416
resolve: {
1517
...newConfig.resolve,
1618
fallback: newConfig.target !== "node" && {

‎example/react-router-rematch-old/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@examples/basic-routes-rematch-old",
3-
"version": "3.1.2",
3+
"version": "3.1.3",
44
"description": "",
55
"private": true,
66
"scripts": {
@@ -14,7 +14,7 @@
1414
"author": "Kenny Wong <wowohoo@qq.com>",
1515
"license": "MIT",
1616
"dependencies": {
17-
"@kkt/react-ssr-enhanced": "3.1.2",
17+
"@kkt/react-ssr-enhanced": "3.1.3",
1818
"@rematch/core": "2.2.0",
1919
"axios": "0.26.0",
2020
"cookie-parser": "1.4.3",
@@ -30,8 +30,8 @@
3030
"redux": "4.1.2"
3131
},
3232
"devDependencies": {
33-
"@kkt/plugin-less": "3.1.2",
34-
"@kkt/ssr": "3.1.2",
33+
"@kkt/plugin-less": "3.1.3",
34+
"@kkt/ssr": "3.1.3",
3535
"assert": "2.0.0",
3636
"browserify-zlib": "0.2.0",
3737
"buffer": "6.0.3",

‎example/react-router-rematch-old/src/routes/notmatch/index.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import React from 'react';
22
import { Link } from 'react-router-dom';
33
import Helmet from 'react-helmet';
4-
// import styles from './index.module.less';
5-
const styles = {}
4+
import styles from './index.module.less';
65

76
export default function NotMatch() {
87
return (
9-
<div className={styles.wrapper}>
8+
<div className={styles.wrapper} style={{ background: "red" }} >
109
<Helmet>
1110
<title>Page not found</title>
1211
</Helmet>

‎lerna.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,5 @@
66
"packages/react-ssr-enhanced",
77
"packages/kkt-plugin-less"
88
],
9-
"version": "3.1.2"
9+
"version": "3.1.3"
1010
}

‎package.json

-10
Original file line numberDiff line numberDiff line change
@@ -54,15 +54,5 @@
5454
"lint-staged": "12.3.4",
5555
"prettier": "2.5.1",
5656
"tsbb": "~3.7.2"
57-
},
58-
"workspaces": {
59-
"packages": [
60-
"example/*",
61-
"core/",
62-
"packages/create-kkt-ssr",
63-
"packages/react-ssr-enhanced",
64-
"packages/kkt-plugin-less"
65-
],
66-
"nohoist": []
6757
}
6858
}

‎packages/create-kkt-ssr/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "create-kkt-ssr",
3-
"version": "3.1.2",
3+
"version": "3.1.3",
44
"description": "CLI tool to bootstrap KKT applications with no configuration",
55
"main": "lib/index.js",
66
"bin": {

‎packages/kkt-plugin-less/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@kkt/plugin-less",
3-
"version": "3.1.2",
3+
"version": "3.1.3",
44
"description": "Support less.",
55
"main": "lib/index.js",
66
"module": "esm/index.js",

0 commit comments

Comments
 (0)