-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.ts
130 lines (111 loc) · 3.82 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import * as postcss from 'postcss';
import * as wp from 'webpack';
/*tslint:disable-next-line:no-var-requires*/
const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');
const cssFinder = makeLoaderFinder('css-loader');
const cssLocalFinder = makeLoaderFinder('css-loader/locals');
interface IModifyConfigTargetDevOptions {
target: 'node' | 'web';
dev: boolean;
}
export interface IStyleConfig {
cssChunkFilename?: string;
cssFilename?: string;
postcssPlugins?: postcss.AcceptedPlugin[];
}
interface IRazzleUserOptions {
[name: string]: any;
}
type IRazzleModifyFunc = (
baseConfig: wp.Configuration,
{ target, dev }: IModifyConfigTargetDevOptions,
webpack: wp.Compiler,
userOptions: IRazzleUserOptions
) => wp.Configuration;
/**
* @param {IModifyConfigOption} pluginConfig - configuration objects for postcss and scss loaders.
* @description returns a function which closes over the pluginConfig and returns an object that can
* be passed along to razzle.
* @returns IRazzleModifyFunc
*/
export default (pluginConfig: IStyleConfig): IRazzleModifyFunc => {
return (
baseConfig: wp.Configuration,
{ target, dev }: IModifyConfigTargetDevOptions,
webpack: wp.Compiler,
userOptions = {}
) => {
const config = { ...baseConfig };
const currentCSSLoader =
config.module && config.module.rules.find<wp.RuleSetRule>(cssFinder);
const currentModuleCSSLoader =
config.module && config.module.rules.find<wp.RuleSetRule>(cssLocalFinder);
if (currentCSSLoader) {
const loaderIdx = (config.module as wp.Module).rules.indexOf(
currentCSSLoader
);
const ruleArray =
currentCSSLoader && currentCSSLoader.use && currentCSSLoader.use;
let nextCSSLoader: wp.RuleSetRule = { ...currentCSSLoader };
const moduleRuleArray =
currentModuleCSSLoader &&
currentModuleCSSLoader.use &&
currentModuleCSSLoader.use;
let nextModuleCSSLoader: wp.RuleSetRule = { ...currentModuleCSSLoader };
if (Array.isArray(ruleArray)) {
const loaderContainer: any = ruleArray.find(ruleItem => {
if (ruleItem && typeof ruleItem === 'object') {
if (ruleItem.loader) {
if (ruleItem.loader.match('postcss-loader')) return true;
}
}
return false;
});
if (Array.isArray(moduleRuleArray)) {
const moduleLoaderContainer: any = (moduleRuleArray as wp.RuleSetUseItem[]).find(
ruleItem => {
if (ruleItem && typeof ruleItem === 'object') {
if (ruleItem.loader) {
if (ruleItem.loader.match('postcss-loader')) return true;
}
}
return false;
}
);
const moduleRuleIdx = ruleArray.indexOf(moduleLoaderContainer);
if (nextModuleCSSLoader.use) {
if (Array.isArray(nextModuleCSSLoader.use)) {
nextModuleCSSLoader.use[moduleRuleIdx] = loaderContainer;
}
} else {
nextModuleCSSLoader = {
use: [loaderContainer]
};
}
}
if (loaderContainer) {
const ruleIdx = ruleArray.indexOf(loaderContainer);
loaderContainer.options = {
...loaderContainer.options,
plugins: pluginConfig.postcssPlugins,
syntax: 'postcss-scss'
};
if (nextCSSLoader.use) {
if (Array.isArray(nextCSSLoader.use)) {
nextCSSLoader.use[ruleIdx] = loaderContainer;
}
} else {
nextCSSLoader = {
use: [loaderContainer]
};
}
if (config.module) {
config.module.rules[loaderIdx] = nextCSSLoader;
}
}
return config;
}
}
return config;
};
};