/
global.ts
55 lines (49 loc) · 1.48 KB
/
global.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
import postcss from 'postcss'
import webpack from 'webpack'
import { ConfigurationContext } from '../../../utils'
import { getClientStyleLoader } from './client'
import { cssFileResolve } from './file-resolve'
export function getGlobalCssLoader(
ctx: ConfigurationContext,
postCssPlugins: readonly postcss.AcceptedPlugin[],
preProcessors: readonly webpack.RuleSetUseItem[] = []
): webpack.RuleSetUseItem[] {
const loaders: webpack.RuleSetUseItem[] = []
if (ctx.isClient) {
// Add appropriate development more or production mode style
// loader
loaders.push(
getClientStyleLoader({
isDevelopment: ctx.isDevelopment,
assetPrefix: ctx.assetPrefix,
})
)
}
// Resolve CSS `@import`s and `url()`s
loaders.push({
loader: require.resolve('css-loader'),
options: {
importLoaders: 1 + preProcessors.length,
sourceMap: true,
// Next.js controls CSS Modules eligibility:
modules: false,
url: cssFileResolve,
import: (url: string, _: any, resourcePath: string) =>
cssFileResolve(url, resourcePath),
},
})
// Compile CSS
loaders.push({
loader: require.resolve('next/dist/compiled/postcss-loader'),
options: {
postcssOptions: { plugins: postCssPlugins, config: false },
sourceMap: true,
},
})
loaders.push(
// Webpack loaders run like a stack, so we need to reverse the natural
// order of preprocessors.
...preProcessors.slice().reverse()
)
return loaders
}