rsnext/packages/next/build/webpack/config/blocks/css/loaders/global.ts
Jiachi Liu 5f2e44d451
Refactor app dir related flags (#41166)
simplify the `appDir` passing down
2022-10-04 22:16:44 +00:00

56 lines
1.6 KiB
TypeScript

import type { webpack } from 'next/dist/compiled/webpack/webpack'
import type { ConfigurationContext } from '../../../utils'
import { getClientStyleLoader } from './client'
import { cssFileResolve } from './file-resolve'
export function getGlobalCssLoader(
ctx: ConfigurationContext,
postcss: any,
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({
hasAppDir: ctx.hasAppDir,
isDevelopment: ctx.isDevelopment,
assetPrefix: ctx.assetPrefix,
})
)
}
// Resolve CSS `@import`s and `url()`s
loaders.push({
loader: require.resolve('../../../../loaders/css-loader/src'),
options: {
postcss,
importLoaders: 1 + preProcessors.length,
// Next.js controls CSS Modules eligibility:
modules: false,
url: (url: string, resourcePath: string) =>
cssFileResolve(url, resourcePath, ctx.experimental.urlImports),
import: (url: string, _: any, resourcePath: string) =>
cssFileResolve(url, resourcePath, ctx.experimental.urlImports),
},
})
// Compile CSS
loaders.push({
loader: require.resolve('../../../../loaders/postcss-loader/src'),
options: {
postcss,
},
})
loaders.push(
// Webpack loaders run like a stack, so we need to reverse the natural
// order of preprocessors.
...preProcessors.slice().reverse()
)
return loaders
}