8449ebc221
* Add built-in Sass support * Add copy of CSS tests for SCSS * Fix failing tests * Fix url-loader tests * Remove css file generated by tests * Fix nprogress import for css file * Fix SCSS modules (still 2 tests that need investigating) * Update documentation for Sass support * Fix plain CSS import test * Fix formatting with prettier fix * Update test output to reflect scss usage * Revert "Fix plain CSS import test" This reverts commit 380319d9d0c4bfb19e28c210262ccd82d19f3556. # Conflicts: # test/integration/scss-modules/test/index.test.js * Update loader structure * Resolve loaders before passing to compile function * Remove dead filter code * Arrange loaders in order and push to array * Fix loader order bug * Fix global Sass loader and make module prepocessor optional * Adjust Sass Modules Implementation * Fix typo * Adjust regexps * Use regexes * Simplify global setup * Adjust comments * fix regex * Simplify identifier file * Update Sass Instructions * Remove unneeded fixtures * Adjust global tests * Remove wrapper * Update source maps * Flag scss behavior * Fix css property value * Update fixtures with Sass vars * Turn on Scss support * fix HMR test * Fix snapshots Co-authored-by: Tim Neutkens <tim@timneutkens.nl> Co-authored-by: Joe Haddad <timer150@gmail.com>
63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
import postcss from 'postcss'
|
|
import webpack from 'webpack'
|
|
import { ConfigurationContext } from '../../../utils'
|
|
import { getClientStyleLoader } from './client'
|
|
import { getCssModuleLocalIdent } from './getCssModuleLocalIdent'
|
|
|
|
export function getCssModuleLoader(
|
|
ctx: ConfigurationContext,
|
|
postCssPlugins: postcss.AcceptedPlugin[],
|
|
preProcessors: 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,
|
|
onlyLocals: ctx.isServer,
|
|
modules: {
|
|
// Disallow global style exports so we can code-split CSS and
|
|
// not worry about loading order.
|
|
mode: 'pure',
|
|
// Generate a friendly production-ready name so it's
|
|
// reasonably understandable. The same name is used for
|
|
// development.
|
|
// TODO: Consider making production reduce this to a single
|
|
// character?
|
|
getLocalIdent: getCssModuleLocalIdent,
|
|
},
|
|
},
|
|
})
|
|
|
|
// Compile CSS
|
|
loaders.push({
|
|
loader: require.resolve('postcss-loader'),
|
|
options: {
|
|
ident: '__nextjs_postcss',
|
|
plugins: postCssPlugins,
|
|
sourceMap: true,
|
|
},
|
|
})
|
|
|
|
loaders.push(
|
|
// Webpack loaders run like a stack, so we need to reverse the natural
|
|
// order of preprocessors.
|
|
...preProcessors.reverse()
|
|
)
|
|
|
|
return loaders
|
|
}
|