diff --git a/e2e/cases/css/css-assets/index.test.ts b/e2e/cases/css/css-assets/index.test.ts new file mode 100644 index 0000000000..5b798c4982 --- /dev/null +++ b/e2e/cases/css/css-assets/index.test.ts @@ -0,0 +1,22 @@ +import path from 'node:path'; +import { build } from '@e2e/helper'; +import { globContentJSON } from '@e2e/helper'; +import { expect, test } from '@playwright/test'; + +test('should build CSS assets correctly', async () => { + await expect( + build({ + cwd: __dirname, + rsbuildConfig: {}, + }), + ).resolves.toBeDefined(); + + const outputs = await globContentJSON(path.join(__dirname, 'dist')); + const outputFiles = Object.keys(outputs); + + expect( + outputFiles.find( + (item) => item.includes('static/image/image') && item.endsWith('.jpeg'), + ), + ).toBeTruthy(); +}); diff --git a/e2e/cases/css/css-assets/rsbuild.config.ts b/e2e/cases/css/css-assets/rsbuild.config.ts new file mode 100644 index 0000000000..1d63b545ed --- /dev/null +++ b/e2e/cases/css/css-assets/rsbuild.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from '@rsbuild/core'; +import { pluginReact } from '@rsbuild/plugin-react'; + +export default defineConfig({ + plugins: [pluginReact()], + output: {} +}); diff --git a/e2e/cases/css/css-assets/src/index.tsx b/e2e/cases/css/css-assets/src/index.tsx new file mode 100644 index 0000000000..2fe6322232 --- /dev/null +++ b/e2e/cases/css/css-assets/src/index.tsx @@ -0,0 +1,7 @@ +function load(key: string) { + import(`./test/${key}`).then(res => { + console.log('res', res); + }) +} + +load('a'); diff --git a/e2e/cases/css/css-assets/src/test/a.ts b/e2e/cases/css/css-assets/src/test/a.ts new file mode 100644 index 0000000000..3a90f13425 --- /dev/null +++ b/e2e/cases/css/css-assets/src/test/a.ts @@ -0,0 +1,5 @@ +import styles from './index.module.less'; + +console.log('s', styles); + +export const a = 1; diff --git a/e2e/cases/css/css-assets/src/test/index.module.less b/e2e/cases/css/css-assets/src/test/index.module.less new file mode 100644 index 0000000000..b309110b39 --- /dev/null +++ b/e2e/cases/css/css-assets/src/test/index.module.less @@ -0,0 +1,3 @@ +.header { + background: url('@assets/image.jpeg') no-repeat; +} diff --git a/e2e/cases/css/css-modules-named-export/index.test.ts b/e2e/cases/css/css-modules-named-export/index.test.ts index e68cdf2549..9e9927e75a 100644 --- a/e2e/cases/css/css-modules-named-export/index.test.ts +++ b/e2e/cases/css/css-modules-named-export/index.test.ts @@ -7,6 +7,16 @@ rspackOnlyTest( const rsbuild = await build({ cwd: __dirname, runServer: true, + rsbuildConfig: { + tools: { + cssLoader: { + modules: { + // TODO: css-loader need support named export when namedExports: false. + namedExport: true + } + } + } + } }); const files = await rsbuild.unwrapOutputJSON(); diff --git a/e2e/cases/server/hmr/rsbuild.config.ts b/e2e/cases/server/hmr/rsbuild.config.ts new file mode 100644 index 0000000000..c9962d33f3 --- /dev/null +++ b/e2e/cases/server/hmr/rsbuild.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from '@rsbuild/core'; +import { pluginReact } from '@rsbuild/plugin-react'; + +export default defineConfig({ + plugins: [pluginReact()], +}); diff --git a/e2e/scripts/shared.ts b/e2e/scripts/shared.ts index 2fd8e3d0d2..9a9534232d 100644 --- a/e2e/scripts/shared.ts +++ b/e2e/scripts/shared.ts @@ -146,6 +146,27 @@ export async function dev({ const rsbuild = await createRsbuild(options, plugins); + rsbuild.addPlugins([ + { + // fix hmr problem temporary (only appears in rsbuild repo, because css-loader is not in node_modules/ ) + // https://github.com/web-infra-dev/rspack/issues/5723 + name: 'fix-react-refresh-in-rsbuild', + setup(api) { + api.modifyBundlerChain({ + order: 'post', + handler: (chain, { CHAIN_ID }) => { + if (chain.plugins.has(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH)) { + chain.plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH).tap((config) => { + config[0].exclude = [/node_modules/, /css-loader/]; + return config; + }); + } + }, + }); + }, + }, + ]); + const result = await rsbuild.startDevServer(); return { diff --git a/packages/compat/webpack/src/plugins/css.ts b/packages/compat/webpack/src/plugins/css.ts index b78ef8e90b..7f84da90d9 100644 --- a/packages/compat/webpack/src/plugins/css.ts +++ b/packages/compat/webpack/src/plugins/css.ts @@ -1,26 +1,18 @@ import { type BundlerChainRule, - type CSSExtractOptions, CSS_REGEX, type ModifyChainUtils, type NormalizedConfig, type RsbuildContext, type RsbuildPlugin, - getBrowserslistWithDefault, - getCssLoaderOptions, - getCssModuleLocalIdentName, - getPostcssLoaderOptions, - getSharedPkgCompiledPath, - isUseCssExtract, - mergeChainedOptions, - resolvePackage, + applyCSSRule, } from '@rsbuild/shared'; export async function applyBaseCSSRule({ rule, config, context, - utils: { target, isProd, isServer, CHAIN_ID, isWebWorker }, + utils, importLoaders = 1, }: { rule: BundlerChainRule; @@ -29,108 +21,15 @@ export async function applyBaseCSSRule({ utils: ModifyChainUtils; importLoaders?: number; }) { - const browserslist = await getBrowserslistWithDefault( - context.rootPath, - config, - target, - ); - - // 1. Check user config - const enableExtractCSS = isUseCssExtract(config, target); - const enableCSSModuleTS = Boolean(config.output.enableCssModuleTSDeclaration); - - // 2. Prepare loader options - const localIdentName = getCssModuleLocalIdentName(config, isProd); - - const cssLoaderOptions = getCssLoaderOptions({ + const { default: cssExtractPlugin } = await import('mini-css-extract-plugin'); + return applyCSSRule({ + rule, config, + context, + utils, importLoaders, - isServer, - isWebWorker, - localIdentName, + cssExtractPlugin, }); - - // 3. Create webpack rule - // Order: style-loader/mini-css-extract -> css-loader -> postcss-loader - if (!isServer && !isWebWorker) { - // use mini-css-extract-plugin loader - if (enableExtractCSS) { - const extraCSSOptions: Required = - typeof config.tools.cssExtract === 'object' - ? config.tools.cssExtract - : { - loaderOptions: {}, - pluginOptions: {}, - }; - - rule - .use(CHAIN_ID.USE.MINI_CSS_EXTRACT) - .loader(require('mini-css-extract-plugin').loader) - .options(extraCSSOptions.loaderOptions) - .end(); - } - // use style-loader - else { - const styleLoaderOptions = mergeChainedOptions({ - defaults: {}, - options: config.tools.styleLoader, - }); - - rule - .use(CHAIN_ID.USE.STYLE) - .loader(getSharedPkgCompiledPath('style-loader')) - .options(styleLoaderOptions) - .end(); - } - - // use css-modules-typescript-loader - if (enableCSSModuleTS && cssLoaderOptions.modules) { - rule - .use(CHAIN_ID.USE.CSS_MODULES_TS) - .loader( - resolvePackage( - '@rsbuild/shared/css-modules-typescript-loader', - __dirname, - ), - ) - .options({ - modules: cssLoaderOptions.modules, - }) - .end(); - } - } else { - rule - .use(CHAIN_ID.USE.IGNORE_CSS) - .loader(resolvePackage('@rsbuild/shared/ignore-css-loader', __dirname)) - .end(); - } - - rule - .use(CHAIN_ID.USE.CSS) - .loader(getSharedPkgCompiledPath('css-loader')) - .options(cssLoaderOptions) - .end(); - - if (!isServer && !isWebWorker) { - const postcssLoaderOptions = await getPostcssLoaderOptions({ - browserslist, - config, - root: context.rootPath, - }); - - rule - .use(CHAIN_ID.USE.POSTCSS) - .loader(getSharedPkgCompiledPath('postcss-loader')) - .options(postcssLoaderOptions) - .end(); - } - - // CSS imports should always be treated as sideEffects - rule.merge({ sideEffects: true }); - - // Enable preferRelative by default, which is consistent with the default behavior of css-loader - // see: https://github.com/webpack-contrib/css-loader/blob/579fc13/src/plugins/postcss-import-parser.js#L234 - rule.resolve.preferRelative(true); } export const pluginCss = (): RsbuildPlugin => { diff --git a/packages/compat/webpack/tests/__snapshots__/css.test.ts.snap b/packages/compat/webpack/tests/__snapshots__/css.test.ts.snap index cf97f00383..30c1c61f26 100644 --- a/packages/compat/webpack/tests/__snapshots__/css.test.ts.snap +++ b/packages/compat/webpack/tests/__snapshots__/css.test.ts.snap @@ -12,7 +12,7 @@ exports[`plugin-css > should not apply postcss-loader when target is node 1`] = "test": /\\\\\\.css\\$/, "use": [ { - "loader": "@rsbuild/shared/ignore-css-loader", + "loader": "/packages/shared/dist/loaders/ignoreCssLoader", }, { "loader": "/packages/shared/compiled/css-loader", diff --git a/packages/compat/webpack/tests/__snapshots__/default.test.ts.snap b/packages/compat/webpack/tests/__snapshots__/default.test.ts.snap index eb591fc2bf..92a23f1044 100644 --- a/packages/compat/webpack/tests/__snapshots__/default.test.ts.snap +++ b/packages/compat/webpack/tests/__snapshots__/default.test.ts.snap @@ -1288,7 +1288,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe "test": /\\\\\\.css\\$/, "use": [ { - "loader": "@rsbuild/shared/ignore-css-loader", + "loader": "/packages/shared/dist/loaders/ignoreCssLoader", }, { "loader": "/packages/shared/compiled/css-loader", @@ -1314,7 +1314,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, "use": [ { - "loader": "@rsbuild/shared/ignore-css-loader", + "loader": "/packages/shared/dist/loaders/ignoreCssLoader", }, { "loader": "/packages/shared/compiled/css-loader", @@ -1354,7 +1354,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe "test": /\\\\\\.less\\$/, "use": [ { - "loader": "@rsbuild/shared/ignore-css-loader", + "loader": "/packages/shared/dist/loaders/ignoreCssLoader", }, { "loader": "/packages/shared/compiled/css-loader", @@ -1634,7 +1634,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe "test": /\\\\\\.css\\$/, "use": [ { - "loader": "@rsbuild/shared/ignore-css-loader", + "loader": "/packages/shared/dist/loaders/ignoreCssLoader", }, { "loader": "/packages/shared/compiled/css-loader", @@ -1660,7 +1660,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, "use": [ { - "loader": "@rsbuild/shared/ignore-css-loader", + "loader": "/packages/shared/dist/loaders/ignoreCssLoader", }, { "loader": "/packages/shared/compiled/css-loader", @@ -1700,7 +1700,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe "test": /\\\\\\.less\\$/, "use": [ { - "loader": "@rsbuild/shared/ignore-css-loader", + "loader": "/packages/shared/dist/loaders/ignoreCssLoader", }, { "loader": "/packages/shared/compiled/css-loader", diff --git a/packages/core/src/internal.ts b/packages/core/src/internal.ts index 4ed54c0bc8..774551f764 100644 --- a/packages/core/src/internal.ts +++ b/packages/core/src/internal.ts @@ -9,8 +9,8 @@ export { createContext, createPublicContext } from './createContext'; export { initPlugins, createPluginManager } from './pluginManager'; export { initHooks, type Hooks } from './initHooks'; export { initRsbuildConfig } from './provider/initConfigs'; +export { applyBaseCSSRule } from './provider/plugins/css'; export { getPluginAPI } from './initPlugins'; -export { applyBaseCSSRule, applyCSSModuleRule } from './provider/plugins/css'; export type { InternalContext } from './types'; export { setHTMLPlugin, getHTMLPlugin } from './htmlUtils'; export { formatStats, getStatsOptions } from './provider/shared'; diff --git a/packages/core/src/provider/css-modules-typescript-pre-loader/index.ts b/packages/core/src/provider/css-modules-typescript-pre-loader/index.ts deleted file mode 100644 index f7ca019cf5..0000000000 --- a/packages/core/src/provider/css-modules-typescript-pre-loader/index.ts +++ /dev/null @@ -1,100 +0,0 @@ -import { - type CssModules, - isCssModules, - isInNodeModules, -} from '@rsbuild/shared'; -import type { CssModuleLocalsConvention } from '@rsbuild/shared'; -import cssModulesTypescriptLoader from '@rsbuild/shared/css-modules-typescript-loader'; -import type { LoaderContext } from '@rspack/core'; -import type { PostcssParsePluginOptions } from './postcssIcssExtractPlugin'; - -async function processCss( - inputSource: string, - { - exportLocalsConvention, - }: { - exportLocalsConvention: CssModuleLocalsConvention; - }, -) { - const { default: postcss } = await import('postcss'); - - const { default: localByDefault } = await import( - '@rsbuild/shared/postcss-modules-local-by-default' - ); - - const { default: modulesScope } = await import( - '@rsbuild/shared/postcss-modules-scope' - ); - - const { default: postcssICSSExtractPlugin } = await import( - './postcssIcssExtractPlugin' - ); - - const { default: extractImports } = await import( - '@rsbuild/shared/postcss-modules-extract-imports' - ); - - const { default: modulesValues } = await import( - '@rsbuild/shared/postcss-modules-values' - ); - - const parserOptions = { - exportLocalsConvention, - } as PostcssParsePluginOptions; - - // https://github.com/webpack-contrib/css-loader/blob/4673caa4aa68d5fb1127c172b4afd081bd56eb73/src/utils.js#L776 - const pipeline = postcss([ - localByDefault({ - mode: 'local', - }), - extractImports(), - modulesValues, - modulesScope({ - // scopedName is not important in this scenario - generateScopedName: (exportName: string) => exportName, - exportGlobals: false, - }), - postcssICSSExtractPlugin(parserOptions), - ]); - - await pipeline.process(inputSource, { - from: '/fake-css-modules-loader', - to: undefined, - }); - - return { - cssModuleKeys: parserOptions.cssModuleKeys, - }; -} - -export default async function ( - this: LoaderContext<{ - modules: Required; - mode: string; - }>, - content: string, - ...input: any[] -) { - if (this.cacheable) { - this.cacheable(); - } - - const filename = this.resourcePath; - const { modules } = this.getOptions() || {}; - const callback = this.async(); - - // filter files - if (!isCssModules(filename, modules) || isInNodeModules(filename)) { - return callback(null, content, ...input); - } - - // handle css modules like css-loader, but only get cssModuleKeys not modify the source. - const { cssModuleKeys } = await processCss(content, { - exportLocalsConvention: modules.exportLocalsConvention, - }); - - // @ts-expect-error - this.cssModuleKeys = cssModuleKeys; - - return cssModulesTypescriptLoader.call(this, content, ...input); -} diff --git a/packages/core/src/provider/css-modules-typescript-pre-loader/postcssIcssExtractPlugin.ts b/packages/core/src/provider/css-modules-typescript-pre-loader/postcssIcssExtractPlugin.ts deleted file mode 100644 index c917fdd647..0000000000 --- a/packages/core/src/provider/css-modules-typescript-pre-loader/postcssIcssExtractPlugin.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { type CssModuleLocalsConvention, camelCase } from '@rsbuild/shared'; -// @ts-expect-error -import { extractICSS } from '@rsbuild/shared/icss-utils'; - -import type { AcceptedPlugin as PostCSSPlugin } from 'postcss'; - -const dashesCamelCase = (str: string) => - str.replace(/-+(\w)/g, (_match, firstLetter) => firstLetter.toUpperCase()); - -export type PostcssParsePluginOptions = { - exportLocalsConvention: CssModuleLocalsConvention; - cssModuleKeys: string[]; -}; - -const getExportLocalsConvention = ( - name: string, - exportLocalsConventionType: CssModuleLocalsConvention, -) => { - switch (exportLocalsConventionType) { - case 'camelCase': { - const camelName = camelCase(name); - return camelName === name ? [name] : [name, camelCase(name)]; - } - case 'camelCaseOnly': { - return [camelCase(name)]; - } - case 'dashes': { - const dashesCamelName = dashesCamelCase(name); - return dashesCamelName === name ? [name] : [name, dashesCamelCase(name)]; - } - case 'dashesOnly': { - return [dashesCamelCase(name)]; - } - default: - return [name]; - } -}; - -const plugin = (options: PostcssParsePluginOptions): PostCSSPlugin => { - return { - postcssPlugin: 'postcss-icss-extract', - OnceExit(root) { - const { icssExports } = extractICSS(root); - - const cssModuleKeys = Object.keys(icssExports).reduce( - (total, key) => { - total.push( - ...getExportLocalsConvention(key, options.exportLocalsConvention), - ); - return total; - }, - [], - ); - - options.cssModuleKeys = cssModuleKeys; - }, - }; -}; - -plugin.postcss = true; - -export default plugin; diff --git a/packages/core/src/provider/plugins/css.ts b/packages/core/src/provider/plugins/css.ts index 261c2cfff7..272d94ce8e 100644 --- a/packages/core/src/provider/plugins/css.ts +++ b/packages/core/src/provider/plugins/css.ts @@ -1,23 +1,11 @@ -import path from 'node:path'; import { - type BundlerChain, - CSS_MODULES_REGEX, + type BundlerChainRule, CSS_REGEX, - type ModifyBundlerChainUtils, + type ModifyChainUtils, type RsbuildContext, - type RspackRule, - type RuleSetRule, - getBrowserslistWithDefault, - getCssLoaderOptions, - getCssModuleLocalIdentName, - getPostcssLoaderOptions, - getSharedPkgCompiledPath, - isUseCssExtract, - kebabCase, - logger, - mergeChainedOptions, - resolvePackage, + applyCSSRule, } from '@rsbuild/shared'; +import { CssExtractRspackPlugin } from '@rspack/core'; import type { NormalizedConfig, RsbuildPlugin } from '../../types'; export const enableNativeCss = (config: NormalizedConfig) => @@ -27,239 +15,45 @@ export async function applyBaseCSSRule({ rule, config, context, - utils: { target, isProd, isServer, isWebWorker, CHAIN_ID }, + utils, importLoaders = 1, }: { - rule: ReturnType; + rule: BundlerChainRule; config: NormalizedConfig; context: RsbuildContext; - utils: ModifyBundlerChainUtils; + utils: ModifyChainUtils; importLoaders?: number; }) { - // 1. Check user config - const enableCSSModuleTS = Boolean(config.output.enableCssModuleTSDeclaration); - - const browserslist = await getBrowserslistWithDefault( - context.rootPath, + return applyCSSRule({ + rule, config, - target, - ); - - // when disableExtractCSS, use css-loader + style-loader - if (!enableNativeCss(config)) { - const localIdentName = getCssModuleLocalIdentName(config, isProd); - - const cssLoaderOptions = getCssLoaderOptions({ - config, - importLoaders, - isServer, - isWebWorker, - localIdentName, - }); - - if (!isServer && !isWebWorker) { - const styleLoaderOptions = mergeChainedOptions({ - defaults: {}, - options: config.tools.styleLoader, - }); - - rule - .use(CHAIN_ID.USE.STYLE) - .loader(getSharedPkgCompiledPath('style-loader')) - .options(styleLoaderOptions) - .end(); - - // use css-modules-typescript-loader - if (enableCSSModuleTS && cssLoaderOptions.modules) { - rule - .use(CHAIN_ID.USE.CSS_MODULES_TS) - .loader( - resolvePackage( - '@rsbuild/shared/css-modules-typescript-loader', - __dirname, - ), - ) - .options({ - modules: cssLoaderOptions.modules, - }) - .end(); - } - } else { - rule - .use(CHAIN_ID.USE.IGNORE_CSS) - .loader(resolvePackage('@rsbuild/shared/ignore-css-loader', __dirname)) - .end(); - } - - rule - .use(CHAIN_ID.USE.CSS) - .loader(getSharedPkgCompiledPath('css-loader')) - .options(cssLoaderOptions) - .end(); - } else { - // can not get experiment.css result, so we fake a css-modules-typescript-pre-loader - if (!isServer && !isWebWorker && enableCSSModuleTS) { - const { cssModules } = config.output; - rule - .use(CHAIN_ID.USE.CSS_MODULES_TS) - .loader(path.resolve(__dirname, '../css-modules-typescript-pre-loader')) - .options({ - modules: { - exportLocalsConvention: cssModules.exportLocalsConvention, - auto: cssModules.auto, - }, - }) - .end(); - } - - rule.type('css'); - } - - if (!isServer && !isWebWorker) { - const postcssLoaderOptions = await getPostcssLoaderOptions({ - browserslist, - config, - root: context.rootPath, - }); - - rule - .use(CHAIN_ID.USE.POSTCSS) - .loader(getSharedPkgCompiledPath('postcss-loader')) - .options(postcssLoaderOptions) - .end(); - } - - // CSS imports should always be treated as sideEffects - rule.merge({ sideEffects: true }); - - // Enable preferRelative by default, which is consistent with the default behavior of css-loader - // see: https://github.com/webpack-contrib/css-loader/blob/579fc13/src/plugins/postcss-import-parser.js#L234 - rule.resolve.preferRelative(true); + context, + utils, + importLoaders, + cssExtractPlugin: CssExtractRspackPlugin, + }); } -/** - * Use type: "css/module" rule instead of css-loader modules.auto config - * - * applyCSSModuleRule in modifyRspackConfig, so that other plugins can easily adjust css rule in Chain. - */ -export const applyCSSModuleRule = ( - rules: RspackRule[] | undefined, - ruleTest: RegExp, - config: NormalizedConfig, -) => { - if (!rules || !enableNativeCss(config)) { - return; - } - - const ruleIndex = rules.findIndex( - (r) => r && r !== '...' && r.test === ruleTest, - ); - - if (ruleIndex === -1) { - return; - } - - const cssModulesAuto = config.output.cssModules.auto; - - if (!cssModulesAuto) { - return; - } - - const rule = rules[ruleIndex] as RuleSetRule; - - const { test, type, ...rest } = rule; - - rules[ruleIndex] = { - test: ruleTest, - oneOf: [ - { - ...rest, - test: - typeof cssModulesAuto !== 'boolean' - ? cssModulesAuto - : // auto: true - CSS_MODULES_REGEX, - type: 'css/module', - }, - { - ...rest, - type: 'css', - }, - ], - }; -}; - export const pluginCss = (): RsbuildPlugin => { return { name: 'rsbuild:css', setup(api) { api.modifyBundlerChain(async (chain, utils) => { - const config = api.getNormalizedConfig(); - const rule = chain.module.rule(utils.CHAIN_ID.RULE.CSS); + const config = api.getNormalizedConfig(); rule.test(CSS_REGEX); - await applyBaseCSSRule({ rule, utils, config, context: api.context, }); - - const enableExtractCSS = isUseCssExtract(config, utils.target); - - // TODO: there is no switch to turn off experiments.css sourcemap in rspack, so we manually remove css sourcemap in Rsbuild - if (!config.output.sourceMap.css && enableExtractCSS) { - const { RemoveCssSourcemapPlugin } = await import( - '../../rspack/RemoveCssSourcemapPlugin' - ); - chain - .plugin('remove-css-sourcemap') - .use(RemoveCssSourcemapPlugin, []); - } }); - api.modifyRspackConfig( - async (rspackConfig, { isProd, isServer, isWebWorker }) => { - const config = api.getNormalizedConfig(); - - if (!enableNativeCss(config)) { - rspackConfig.experiments ||= {}; - rspackConfig.experiments.css = false; - return; - } - - let localIdentName = - config.output.cssModules.localIdentName || - // Using shorter classname in production to reduce bundle size - (isProd ? '[local]-[hash:6]' : '[path][name]__[local]-[hash:6]'); - if (localIdentName.includes(':base64')) { - logger.warn( - `Custom hashDigest in output.cssModules.localIdentName is currently not supported when using Rspack, the 'base64' will be ignored.`, - ); - localIdentName = localIdentName.replace(':base64', ''); - } - - // need use "css/module" generator instead of modules.auto config - rspackConfig.module ||= {}; - rspackConfig.module.generator ||= {}; - rspackConfig.module.generator['css/module'] = { - exportsConvention: kebabCase( - config.output.cssModules.exportLocalsConvention, - ), - localIdentName, - exportsOnly: isServer || isWebWorker, - }; - rspackConfig.module.parser ||= {}; - rspackConfig.module.parser['css/module'] = { - namedExports: false, - }; - - const rules = rspackConfig.module?.rules; - - applyCSSModuleRule(rules, CSS_REGEX, config); - }, - ); + api.modifyRspackConfig(async (rspackConfig) => { + rspackConfig.experiments ||= {}; + rspackConfig.experiments.css = false; + }); }, }; }; diff --git a/packages/core/src/provider/plugins/less.ts b/packages/core/src/provider/plugins/less.ts index 0c6fcd32a3..74fee50c32 100644 --- a/packages/core/src/provider/plugins/less.ts +++ b/packages/core/src/provider/plugins/less.ts @@ -40,15 +40,6 @@ export function pluginLess(): RsbuildPlugin { .loader(getSharedPkgCompiledPath('less-loader')) .options(options); }); - - api.modifyRspackConfig(async (rspackConfig) => { - const { applyCSSModuleRule } = await import('./css'); - const config = api.getNormalizedConfig(); - - const rules = rspackConfig.module?.rules; - - applyCSSModuleRule(rules, LESS_REGEX, config); - }); }, }; } diff --git a/packages/core/src/provider/plugins/output.ts b/packages/core/src/provider/plugins/output.ts index 1523c75453..0657f38d88 100644 --- a/packages/core/src/provider/plugins/output.ts +++ b/packages/core/src/provider/plugins/output.ts @@ -1,6 +1,13 @@ import { posix } from 'node:path'; -import { applyOutputPlugin, getDistPath, getFilename } from '@rsbuild/shared'; +import { + applyOutputPlugin, + getDistPath, + getFilename, + isUseCssExtract, + mergeChainedOptions, +} from '@rsbuild/shared'; import { rspack } from '@rspack/core'; +import { CssExtractRspackPlugin } from '@rspack/core'; import type { RsbuildPlugin } from '../../types'; export const pluginOutput = (): RsbuildPlugin => ({ @@ -9,7 +16,7 @@ export const pluginOutput = (): RsbuildPlugin => ({ setup(api) { applyOutputPlugin(api); - api.modifyBundlerChain(async (chain, { CHAIN_ID }) => { + api.modifyBundlerChain(async (chain, { CHAIN_ID, target, isProd }) => { const config = api.getNormalizedConfig(); if (config.output.copy) { @@ -20,20 +27,33 @@ export const pluginOutput = (): RsbuildPlugin => ({ .plugin(CHAIN_ID.PLUGIN.COPY) .use(rspack.CopyRspackPlugin, [options]); } - }); - api.modifyRspackConfig(async (rspackConfig, { isProd }) => { - const config = api.getNormalizedConfig(); const cssPath = getDistPath(config, 'css'); - const cssAsyncPath = getDistPath(config, 'cssAsync'); - const cssFilename = getFilename(config, 'css', isProd); - - rspackConfig.output ||= {}; - rspackConfig.output.cssFilename = posix.join(cssPath, cssFilename); - rspackConfig.output.cssChunkFilename = posix.join( - cssAsyncPath, - cssFilename, - ); + + // css output + if (isUseCssExtract(config, target)) { + const extractPluginOptions = mergeChainedOptions({ + defaults: {}, + options: config.tools.cssExtract?.pluginOptions, + }); + + const cssFilename = getFilename(config, 'css', isProd); + const cssAsyncPath = getDistPath(config, 'cssAsync'); + + chain + .plugin(CHAIN_ID.PLUGIN.MINI_CSS_EXTRACT) + .use(CssExtractRspackPlugin, [ + { + filename: posix.join(cssPath, cssFilename), + chunkFilename: posix.join( + cssAsyncPath, + cssFilename, + ), + ignoreOrder: true, + ...extractPluginOptions, + }, + ]); + } }); }, }); diff --git a/packages/core/src/provider/plugins/sass.ts b/packages/core/src/provider/plugins/sass.ts index 3b12627631..1720b262a5 100644 --- a/packages/core/src/provider/plugins/sass.ts +++ b/packages/core/src/provider/plugins/sass.ts @@ -58,15 +58,6 @@ export function pluginSass(): RsbuildPlugin { .loader(getSharedPkgCompiledPath('sass-loader')) .options(options); }); - - api.modifyRspackConfig(async (rspackConfig) => { - const { applyCSSModuleRule } = await import('./css'); - const config = api.getNormalizedConfig(); - - const rules = rspackConfig.module?.rules; - - applyCSSModuleRule(rules, SASS_REGEX, config); - }); }, }; } diff --git a/packages/core/src/rspack/RemoveCssSourcemapPlugin.ts b/packages/core/src/rspack/RemoveCssSourcemapPlugin.ts deleted file mode 100644 index 27c4536b6d..0000000000 --- a/packages/core/src/rspack/RemoveCssSourcemapPlugin.ts +++ /dev/null @@ -1,27 +0,0 @@ -import type { Compilation, Compiler } from '@rspack/core'; - -export class RemoveCssSourcemapPlugin { - name: string; - - constructor() { - this.name = 'RemoveCssSourcemapPlugin'; - } - - apply(compiler: Compiler) { - compiler.hooks.compilation.tap(this.name, (compilation: Compilation) => { - compilation.hooks.processAssets.tap( - { - name: this.name, - stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE, - }, - () => { - for (const name of Object.keys(compilation.assets)) { - if (name.endsWith('.css.map')) { - compilation.deleteAsset(name); - } - } - }, - ); - }); - } -} diff --git a/packages/core/tests/__snapshots__/builder.test.ts.snap b/packages/core/tests/__snapshots__/builder.test.ts.snap index 554e568cd8..117cd462e0 100644 --- a/packages/core/tests/__snapshots__/builder.test.ts.snap +++ b/packages/core/tests/__snapshots__/builder.test.ts.snap @@ -11,6 +11,7 @@ exports[`should use rspack as default bundler > apply rspack correctly 1`] = ` }, "experiments": { "asyncWebAssembly": true, + "css": false, }, "ignoreWarnings": [ /Conflicting order/, @@ -20,17 +21,7 @@ exports[`should use rspack as default bundler > apply rspack correctly 1`] = ` }, "mode": "development", "module": { - "generator": { - "css/module": { - "exportsConvention": "camel-case", - "exportsOnly": false, - "localIdentName": "[path][name]__[local]-[hash:6]", - }, - }, "parser": { - "css/module": { - "namedExports": false, - }, "javascript": { "exportsPresence": "error", }, @@ -251,316 +242,199 @@ exports[`should use rspack as default bundler > apply rspack correctly 1`] = ` "type": "asset/resource", }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 1, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, + ], }, - ], + "sourceMap": false, + }, }, ], - "test": /\\\\\\.css\\$/, }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.less\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/node_modules", - ], - }, - "sourceMap": false, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 2, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, + ], }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/node_modules", - ], - }, - "sourceMap": false, - }, + "sourceMap": false, + }, + }, + { + "loader": "/packages/shared/compiled/less-loader", + "options": { + "implementation": "/packages/shared/compiled/less", + "lessOptions": { + "javascriptEnabled": true, + "paths": [ + "/node_modules", + ], }, - ], + "sourceMap": false, + }, }, ], - "test": /\\\\\\.less\\$/, }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, + "use": [ { - "resolve": { - "preferRelative": true, + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", + }, + { + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 3, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, + ], }, - ], + "sourceMap": false, + }, }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/resolve-url-loader", + "options": { + "join": [Function], + "sourceMap": false, + }, + }, + { + "loader": "/packages/shared/compiled/sass-loader", + "options": { + "implementation": "/packages/shared/compiled/sass", + "sourceMap": true, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, - }, - ], }, ], - "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, }, ], }, @@ -594,8 +468,6 @@ exports[`should use rspack as default bundler > apply rspack correctly 1`] = ` }, "output": { "chunkFilename": "static/js/async/[name].js", - "cssChunkFilename": "static/css/async/[name].css", - "cssFilename": "static/css/[name].css", "devtoolModuleFilenameTemplate": [Function], "filename": "static/js/[name].js", "hashFunction": "xxhash64", @@ -611,6 +483,13 @@ exports[`should use rspack as default bundler > apply rspack correctly 1`] = ` HotModuleReplacementPlugin { "name": "HotModuleReplacementPlugin", }, + CssExtractRspackPlugin { + "options": { + "chunkFilename": "static/css/async/[name].css", + "filename": "static/css/[name].css", + "ignoreOrder": true, + }, + }, HtmlWebpackPlugin { "options": { "base": false, @@ -678,9 +557,6 @@ exports[`should use rspack as default bundler > apply rspack correctly 1`] = ` "affectedHooks": "compilation", "name": "DefinePlugin", }, - RemoveCssSourcemapPlugin { - "name": "RemoveCssSourcemapPlugin", - }, ], "resolve": { "alias": { diff --git a/packages/core/tests/__snapshots__/css.test.ts.snap b/packages/core/tests/__snapshots__/css.test.ts.snap index 6552f26818..fa1108fa41 100644 --- a/packages/core/tests/__snapshots__/css.test.ts.snap +++ b/packages/core/tests/__snapshots__/css.test.ts.snap @@ -2,343 +2,210 @@ exports[`plugin-css > should apply custom css-modules-typescript-loader when enableCssModuleTSDeclaration 1`] = ` { + "experiments": { + "css": false, + }, "module": { - "generator": { - "css/module": { - "exportsConvention": "camel-case", - "exportsOnly": false, - "localIdentName": "[path][name]__[local]-[hash:6]", - }, - }, - "parser": { - "css/module": { - "namedExports": false, - }, - }, "rules": [ { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/core/src/provider/css-modules-typescript-pre-loader", - "options": { - "modules": { - "auto": true, - "exportLocalsConvention": "camelCase", - }, - }, - }, - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/dist/loaders/cssModulesTypescriptLoader", + "options": { + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/core/src/provider/css-modules-typescript-pre-loader", - "options": { - "modules": { - "auto": true, - "exportLocalsConvention": "camelCase", - }, - }, + }, + { + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 1, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, }, - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + "sourceMap": false, + }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, + ], }, - ], + "sourceMap": false, + }, }, ], - "test": /\\\\\\.css\\$/, }, ], }, - "plugins": [ - RemoveCssSourcemapPlugin { - "name": "RemoveCssSourcemapPlugin", - }, - ], } `; exports[`plugin-css > should override browserslist of autoprefixer when using output.overrideBrowserslist config 1`] = ` { + "experiments": { + "css": false, + }, "module": { - "generator": { - "css/module": { - "exportsConvention": "camel-case", - "exportsOnly": false, - "localIdentName": "[path][name]__[local]-[hash:6]", - }, - }, - "parser": { - "css/module": { - "namedExports": false, - }, - }, "rules": [ { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "Chrome 80", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "Chrome 80", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 1, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "Chrome 80", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "Chrome 80", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "Chrome 80", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "Chrome 80", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, + ], }, - ], + "sourceMap": false, + }, }, ], - "test": /\\\\\\.css\\$/, }, ], }, - "plugins": [ - RemoveCssSourcemapPlugin { - "name": "RemoveCssSourcemapPlugin", - }, - ], } `; exports[`plugin-css > should use custom cssModules rule when using output.cssModules config 1`] = ` { + "experiments": { + "css": false, + }, "module": { - "generator": { - "css/module": { - "exportsConvention": "camel-case", - "exportsOnly": false, - "localIdentName": "[path][name]__[local]-[hash:6]", - }, - }, - "parser": { - "css/module": { - "namedExports": false, - }, - }, "rules": [ { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": [Function], - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 1, + "modules": { + "auto": [Function], + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, + ], }, - ], + "sourceMap": false, + }, }, ], - "test": /\\\\\\.css\\$/, }, ], }, - "plugins": [ - RemoveCssSourcemapPlugin { - "name": "RemoveCssSourcemapPlugin", - }, - ], } `; @@ -357,7 +224,7 @@ exports[`plugin-css injectStyles > should apply ignoreCssLoader when injectStyle "test": /\\\\\\.css\\$/, "use": [ { - "loader": "@rsbuild/shared/ignore-css-loader", + "loader": "/packages/shared/dist/loaders/ignoreCssLoader", }, { "loader": "/packages/shared/compiled/css-loader", @@ -453,116 +320,73 @@ exports[`plugin-less > should add less-loader 1`] = ` "module": { "rules": [ { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.less\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/packages/core/tests/node_modules", - ], - }, - "sourceMap": false, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 2, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, + ], }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/packages/core/tests/node_modules", - ], - }, - "sourceMap": false, - }, + "sourceMap": false, + }, + }, + { + "loader": "/packages/shared/compiled/less-loader", + "options": { + "implementation": "/packages/shared/compiled/less", + "lessOptions": { + "javascriptEnabled": true, + "paths": [ + "/packages/core/tests/node_modules", + ], }, - ], + "sourceMap": false, + }, }, ], - "test": /\\\\\\.less\\$/, }, ], }, @@ -652,122 +476,76 @@ exports[`plugin-less > should add less-loader with excludes 1`] = ` "module": { "rules": [ { - "oneOf": [ + "exclude": [ + /node_modules/, + ], + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.less\\$/, + "use": [ { - "exclude": [ - /node_modules/, - ], - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/packages/core/tests/node_modules", - ], - }, - "sourceMap": false, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "exclude": [ - /node_modules/, - ], - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 2, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, + ], }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/packages/core/tests/node_modules", - ], - }, - "sourceMap": false, - }, + "sourceMap": false, + }, + }, + { + "loader": "/packages/shared/compiled/less-loader", + "options": { + "implementation": "/packages/shared/compiled/less", + "lessOptions": { + "javascriptEnabled": true, + "paths": [ + "/packages/core/tests/node_modules", + ], }, - ], + "sourceMap": false, + }, }, ], - "test": /\\\\\\.less\\$/, }, ], }, @@ -779,116 +557,73 @@ exports[`plugin-less > should add less-loader with tools.less 1`] = ` "module": { "rules": [ { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.less\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": false, - "paths": [ - "/packages/core/tests/node_modules", - ], - }, - "sourceMap": false, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 2, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, + ], }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": false, - "paths": [ - "/packages/core/tests/node_modules", - ], - }, - "sourceMap": false, - }, + "sourceMap": false, + }, + }, + { + "loader": "/packages/shared/compiled/less-loader", + "options": { + "implementation": "/packages/shared/compiled/less", + "lessOptions": { + "javascriptEnabled": false, + "paths": [ + "/packages/core/tests/node_modules", + ], }, - ], + "sourceMap": false, + }, }, ], - "test": /\\\\\\.less\\$/, }, ], }, @@ -900,118 +635,74 @@ exports[`plugin-sass > should add sass-loader 1`] = ` "module": { "rules": [ { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, + "use": [ + { + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", + }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 3, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, + ], }, - ], + "sourceMap": false, + }, }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/resolve-url-loader", + "options": { + "join": [Function], + "sourceMap": false, + }, + }, + { + "loader": "/packages/shared/compiled/sass-loader", + "options": { + "implementation": "/packages/shared/compiled/sass", + "sourceMap": true, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, - }, - ], }, ], - "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, }, ], }, @@ -1102,124 +793,77 @@ exports[`plugin-sass > should add sass-loader with excludes 1`] = ` "module": { "rules": [ { - "oneOf": [ + "exclude": [ + /node_modules/, + ], + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, + "use": [ + { + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", + }, { - "exclude": [ - /node_modules/, - ], - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 3, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, + ], }, - ], + "sourceMap": false, + }, + }, + { + "loader": "/packages/shared/compiled/resolve-url-loader", + "options": { + "join": [Function], + "sourceMap": false, + }, }, { - "exclude": [ - /node_modules/, - ], - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/sass-loader", + "options": { + "implementation": "/packages/shared/compiled/sass", + "sourceMap": true, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, - }, - ], }, ], - "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, }, ], }, diff --git a/packages/core/tests/__snapshots__/default.test.ts.snap b/packages/core/tests/__snapshots__/default.test.ts.snap index 1eb82cab5b..1f6d3003eb 100644 --- a/packages/core/tests/__snapshots__/default.test.ts.snap +++ b/packages/core/tests/__snapshots__/default.test.ts.snap @@ -11,6 +11,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = ` }, "experiments": { "asyncWebAssembly": true, + "css": false, }, "ignoreWarnings": [ /Conflicting order/, @@ -20,17 +21,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = ` }, "mode": "development", "module": { - "generator": { - "css/module": { - "exportsConvention": "camel-case", - "exportsOnly": false, - "localIdentName": "[path][name]__[local]-[hash:6]", - }, - }, "parser": { - "css/module": { - "namedExports": false, - }, "javascript": { "exportsPresence": "error", }, @@ -251,316 +242,199 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = ` "type": "asset/resource", }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 1, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, + ], }, - ], + "sourceMap": false, + }, }, ], - "test": /\\\\\\.css\\$/, }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.less\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/packages/core/tests/node_modules", - ], - }, - "sourceMap": false, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 2, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, + ], }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/packages/core/tests/node_modules", - ], - }, - "sourceMap": false, - }, + "sourceMap": false, + }, + }, + { + "loader": "/packages/shared/compiled/less-loader", + "options": { + "implementation": "/packages/shared/compiled/less", + "lessOptions": { + "javascriptEnabled": true, + "paths": [ + "/packages/core/tests/node_modules", + ], }, - ], + "sourceMap": false, + }, }, ], - "test": /\\\\\\.less\\$/, }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, + "use": [ { - "resolve": { - "preferRelative": true, + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", + }, + { + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 3, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, + ], }, - ], + "sourceMap": false, + }, }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/resolve-url-loader", + "options": { + "join": [Function], + "sourceMap": false, + }, + }, + { + "loader": "/packages/shared/compiled/sass-loader", + "options": { + "implementation": "/packages/shared/compiled/sass", + "sourceMap": true, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, - }, - ], }, ], - "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, }, ], }, @@ -594,8 +468,6 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = ` }, "output": { "chunkFilename": "static/js/async/[name].js", - "cssChunkFilename": "static/css/async/[name].css", - "cssFilename": "static/css/[name].css", "devtoolModuleFilenameTemplate": [Function], "filename": "static/js/[name].js", "hashFunction": "xxhash64", @@ -611,6 +483,13 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = ` HotModuleReplacementPlugin { "name": "HotModuleReplacementPlugin", }, + CssExtractRspackPlugin { + "options": { + "chunkFilename": "static/css/async/[name].css", + "filename": "static/css/[name].css", + "ignoreOrder": true, + }, + }, HtmlWebpackPlugin { "options": { "base": false, @@ -678,9 +557,6 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = ` "affectedHooks": "compilation", "name": "DefinePlugin", }, - RemoveCssSourcemapPlugin { - "name": "RemoveCssSourcemapPlugin", - }, ], "resolve": { "alias": { @@ -715,6 +591,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when prod }, "experiments": { "asyncWebAssembly": true, + "css": false, }, "ignoreWarnings": [ /Conflicting order/, @@ -724,17 +601,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when prod }, "mode": "production", "module": { - "generator": { - "css/module": { - "exportsConvention": "camel-case", - "exportsOnly": false, - "localIdentName": "[local]-[hash:6]", - }, - }, "parser": { - "css/module": { - "namedExports": false, - }, "javascript": { "exportsPresence": "error", }, @@ -955,316 +822,199 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when prod "type": "asset/resource", }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 1, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, + ], }, - ], + "sourceMap": false, + }, }, ], - "test": /\\\\\\.css\\$/, }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.less\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/packages/core/tests/node_modules", - ], - }, - "sourceMap": false, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 2, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, + ], }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/packages/core/tests/node_modules", - ], - }, - "sourceMap": false, - }, + "sourceMap": false, + }, + }, + { + "loader": "/packages/shared/compiled/less-loader", + "options": { + "implementation": "/packages/shared/compiled/less", + "lessOptions": { + "javascriptEnabled": true, + "paths": [ + "/packages/core/tests/node_modules", + ], }, - ], + "sourceMap": false, + }, }, ], - "test": /\\\\\\.less\\$/, }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, + "use": [ + { + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", + }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 3, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, + ], }, - ], + "sourceMap": false, + }, + }, + { + "loader": "/packages/shared/compiled/resolve-url-loader", + "options": { + "join": [Function], + "sourceMap": false, + }, }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/sass-loader", + "options": { + "implementation": "/packages/shared/compiled/sass", + "sourceMap": true, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, - }, - ], }, ], - "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, }, ], }, @@ -1321,8 +1071,6 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when prod }, "output": { "chunkFilename": "static/js/async/[name].[contenthash:8].js", - "cssChunkFilename": "static/css/async/[name].[contenthash:8].css", - "cssFilename": "static/css/[name].[contenthash:8].css", "filename": "static/js/[name].[contenthash:8].js", "hashFunction": "xxhash64", "path": "/packages/core/tests/dist", @@ -1334,6 +1082,13 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when prod "hints": false, }, "plugins": [ + CssExtractRspackPlugin { + "options": { + "chunkFilename": "static/css/async/[name].[contenthash:8].css", + "filename": "static/css/[name].[contenthash:8].css", + "ignoreOrder": true, + }, + }, HtmlWebpackPlugin { "options": { "base": false, @@ -1439,9 +1194,6 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when prod "affectedHooks": "compilation", "name": "DefinePlugin", }, - RemoveCssSourcemapPlugin { - "name": "RemoveCssSourcemapPlugin", - }, ProgressPlugin { "_options": { "prefix": "Client", @@ -1484,6 +1236,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe }, "experiments": { "asyncWebAssembly": true, + "css": false, }, "ignoreWarnings": [ /Conflicting order/, @@ -1493,17 +1246,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe }, "mode": "development", "module": { - "generator": { - "css/module": { - "exportsConvention": "camel-case", - "exportsOnly": true, - "localIdentName": "[path][name]__[local]-[hash:6]", - }, - }, "parser": { - "css/module": { - "namedExports": false, - }, "javascript": { "exportsPresence": "error", }, @@ -1723,126 +1466,109 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe ], }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", + "loader": "/packages/shared/dist/loaders/ignoreCssLoader", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 1, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "exportOnlyLocals": true, + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", }, ], - "test": /\\\\\\.css\\$/, }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.less\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/packages/core/tests/node_modules", - ], - }, - "sourceMap": false, - }, - }, - ], + "loader": "/packages/shared/dist/loaders/ignoreCssLoader", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 2, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "exportOnlyLocals": true, + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/packages/core/tests/node_modules", - ], - }, - "sourceMap": false, - }, + }, + { + "loader": "/packages/shared/compiled/less-loader", + "options": { + "implementation": "/packages/shared/compiled/less", + "lessOptions": { + "javascriptEnabled": true, + "paths": [ + "/packages/core/tests/node_modules", + ], }, - ], + "sourceMap": false, + }, }, ], - "test": /\\\\\\.less\\$/, }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, + "loader": "/packages/shared/dist/loaders/ignoreCssLoader", + }, + { + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 3, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "exportOnlyLocals": true, + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, }, - ], + "sourceMap": false, + }, }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/resolve-url-loader", + "options": { + "join": [Function], + "sourceMap": false, + }, + }, + { + "loader": "/packages/shared/compiled/sass-loader", + "options": { + "implementation": "/packages/shared/compiled/sass", + "sourceMap": true, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, - }, - ], }, ], - "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, }, ], }, @@ -1853,8 +1579,6 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe }, "output": { "chunkFilename": "[name].js", - "cssChunkFilename": "static/css/async/[name].css", - "cssFilename": "static/css/[name].css", "filename": "[name].js", "hashFunction": "xxhash64", "libraryTarget": "commonjs2", @@ -1906,6 +1630,7 @@ exports[`tools.rspack > should match snapshot 1`] = ` }, "experiments": { "asyncWebAssembly": true, + "css": false, }, "ignoreWarnings": [ /Conflicting order/, @@ -1915,17 +1640,7 @@ exports[`tools.rspack > should match snapshot 1`] = ` }, "mode": "development", "module": { - "generator": { - "css/module": { - "exportsConvention": "camel-case", - "exportsOnly": false, - "localIdentName": "[path][name]__[local]-[hash:6]", - }, - }, "parser": { - "css/module": { - "namedExports": false, - }, "javascript": { "exportsPresence": "error", }, @@ -2154,316 +1869,199 @@ exports[`tools.rspack > should match snapshot 1`] = ` "type": "asset/resource", }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 1, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, + ], }, - ], + "sourceMap": false, + }, }, ], - "test": /\\\\\\.css\\$/, }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.less\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/packages/core/tests/node_modules", - ], - }, - "sourceMap": false, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 2, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, + ], }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/packages/core/tests/node_modules", - ], - }, - "sourceMap": false, - }, + "sourceMap": false, + }, + }, + { + "loader": "/packages/shared/compiled/less-loader", + "options": { + "implementation": "/packages/shared/compiled/less", + "lessOptions": { + "javascriptEnabled": true, + "paths": [ + "/packages/core/tests/node_modules", + ], }, - ], + "sourceMap": false, + }, }, ], - "test": /\\\\\\.less\\$/, }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, + "use": [ + { + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", + }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 3, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, + ], }, - ], + "sourceMap": false, + }, }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/resolve-url-loader", + "options": { + "join": [Function], + "sourceMap": false, + }, + }, + { + "loader": "/packages/shared/compiled/sass-loader", + "options": { + "implementation": "/packages/shared/compiled/sass", + "sourceMap": true, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, - }, - ], }, ], - "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, }, ], }, @@ -2497,8 +2095,6 @@ exports[`tools.rspack > should match snapshot 1`] = ` }, "output": { "chunkFilename": "static/js/async/[name].js", - "cssChunkFilename": "static/css/async/[name].css", - "cssFilename": "static/css/[name].css", "devtoolModuleFilenameTemplate": [Function], "filename": "static/js/[name].js", "hashFunction": "xxhash64", @@ -2517,6 +2113,13 @@ exports[`tools.rspack > should match snapshot 1`] = ` HotModuleReplacementPlugin { "name": "HotModuleReplacementPlugin", }, + CssExtractRspackPlugin { + "options": { + "chunkFilename": "static/css/async/[name].css", + "filename": "static/css/[name].css", + "ignoreOrder": true, + }, + }, HtmlWebpackPlugin { "options": { "base": false, @@ -2584,9 +2187,6 @@ exports[`tools.rspack > should match snapshot 1`] = ` "affectedHooks": "compilation", "name": "DefinePlugin", }, - RemoveCssSourcemapPlugin { - "name": "RemoveCssSourcemapPlugin", - }, ], "resolve": { "alias": { diff --git a/packages/core/tests/__snapshots__/output.test.ts.snap b/packages/core/tests/__snapshots__/output.test.ts.snap index 0c2264cf2c..1524e77105 100644 --- a/packages/core/tests/__snapshots__/output.test.ts.snap +++ b/packages/core/tests/__snapshots__/output.test.ts.snap @@ -4,8 +4,6 @@ exports[`plugin-output > should allow to custom server directory with distPath.s { "output": { "chunkFilename": "[name].js", - "cssChunkFilename": "static/css/async/[name].css", - "cssFilename": "static/css/[name].css", "filename": "[name].js", "hashFunction": "xxhash64", "libraryTarget": "commonjs2", @@ -20,14 +18,21 @@ exports[`plugin-output > should allow to set distPath.js and distPath.css to emp { "output": { "chunkFilename": "async/[name].js", - "cssChunkFilename": "async/[name].css", - "cssFilename": "[name].css", "filename": "[name].js", "hashFunction": "xxhash64", "path": "/packages/core/tests/dist", "pathinfo": false, "publicPath": "/", }, + "plugins": [ + CssExtractRspackPlugin { + "options": { + "chunkFilename": "async/[name].css", + "filename": "[name].css", + "ignoreOrder": true, + }, + }, + ], } `; @@ -35,8 +40,6 @@ exports[`plugin-output > should allow to use copy plugin 1`] = ` { "output": { "chunkFilename": "static/js/async/[name].js", - "cssChunkFilename": "static/css/async/[name].css", - "cssFilename": "static/css/[name].css", "filename": "static/js/[name].js", "hashFunction": "xxhash64", "path": "/packages/core/tests/dist", @@ -59,6 +62,13 @@ exports[`plugin-output > should allow to use copy plugin 1`] = ` "affectedHooks": undefined, "name": "CopyRspackPlugin", }, + CssExtractRspackPlugin { + "options": { + "chunkFilename": "static/css/async/[name].css", + "filename": "static/css/[name].css", + "ignoreOrder": true, + }, + }, ], } `; @@ -67,8 +77,6 @@ exports[`plugin-output > should allow to use copy plugin with multiply config 1` { "output": { "chunkFilename": "static/js/async/[name].js", - "cssChunkFilename": "static/css/async/[name].css", - "cssFilename": "static/css/[name].css", "filename": "static/js/[name].js", "hashFunction": "xxhash64", "path": "/packages/core/tests/dist", @@ -105,6 +113,13 @@ exports[`plugin-output > should allow to use copy plugin with multiply config 1` "affectedHooks": undefined, "name": "CopyRspackPlugin", }, + CssExtractRspackPlugin { + "options": { + "chunkFilename": "static/css/async/[name].css", + "filename": "static/css/[name].css", + "ignoreOrder": true, + }, + }, ], } `; @@ -113,14 +128,21 @@ exports[`plugin-output > should allow to use filename.js to modify filename 1`] { "output": { "chunkFilename": "static/js/async/foo.js", - "cssChunkFilename": "static/css/async/[name].css", - "cssFilename": "static/css/[name].css", "filename": "static/js/foo.js", "hashFunction": "xxhash64", "path": "/packages/core/tests/dist", "pathinfo": false, "publicPath": "/", }, + "plugins": [ + CssExtractRspackPlugin { + "options": { + "chunkFilename": "static/css/async/[name].css", + "filename": "static/css/[name].css", + "ignoreOrder": true, + }, + }, + ], } `; @@ -128,13 +150,20 @@ exports[`plugin-output > should set output correctly 1`] = ` { "output": { "chunkFilename": "static/js/async/[name].js", - "cssChunkFilename": "static/css/async/[name].css", - "cssFilename": "static/css/[name].css", "filename": "static/js/[name].js", "hashFunction": "xxhash64", "path": "/packages/core/tests/dist", "pathinfo": false, "publicPath": "/", }, + "plugins": [ + CssExtractRspackPlugin { + "options": { + "chunkFilename": "static/css/async/[name].css", + "filename": "static/css/[name].css", + "ignoreOrder": true, + }, + }, + ], } `; diff --git a/packages/core/tests/css.test.ts b/packages/core/tests/css.test.ts index 91d346f108..8535f24a55 100644 --- a/packages/core/tests/css.test.ts +++ b/packages/core/tests/css.test.ts @@ -100,7 +100,7 @@ describe('plugin-css', () => { const bundlerConfigs = await rsbuild.initConfigs(); expect(JSON.stringify(bundlerConfigs[0])).toContain( - '"localIdentName":"[hash:5]"', + '"localIdentName":"[hash:base64:5]"', ); }); diff --git a/packages/plugin-lightningcss/tests/__snapshots__/index.test.ts.snap b/packages/plugin-lightningcss/tests/__snapshots__/index.test.ts.snap index 355787a454..c427d08a5e 100644 --- a/packages/plugin-lightningcss/tests/__snapshots__/index.test.ts.snap +++ b/packages/plugin-lightningcss/tests/__snapshots__/index.test.ts.snap @@ -5,268 +5,175 @@ exports[`plugins/lightningcss > plugin-lightningcss should be cancelable by user exports[`plugins/lightningcss > plugin-lightningcss should be configurable by users 1`] = ` [ { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/plugin-lightningcss/src/loader", - "options": { - "cssModules": { - "dashedIdents": true, - "pattern": "[hash]-[local]", - }, - "errorRecovery": true, - "implementation": { - "browserslistToTargets": [Function], - "transform": [Function], - }, - "targets": { - "chrome": 5701632, - "edge": 5767168, - "firefox": 5111808, - "safari": 917504, - }, - "visitor": { - "Length": [Function], - }, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 1, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/plugin-lightningcss/src/loader", - "options": { - "cssModules": { - "dashedIdents": true, - "pattern": "[hash]-[local]", - }, - "errorRecovery": true, - "implementation": { - "browserslistToTargets": [Function], - "transform": [Function], - }, - "targets": { - "chrome": 5701632, - "edge": 5767168, - "firefox": 5111808, - "safari": 917504, - }, - "visitor": { - "Length": [Function], - }, - }, + }, + { + "loader": "/packages/plugin-lightningcss/src/loader", + "options": { + "cssModules": { + "dashedIdents": true, + "pattern": "[hash]-[local]", + }, + "errorRecovery": true, + "implementation": { + "browserslistToTargets": [Function], + "transform": [Function], + }, + "targets": { + "chrome": 5701632, + "edge": 5767168, + "firefox": 5111808, + "safari": 917504, + }, + "visitor": { + "Length": [Function], }, - ], + }, }, ], - "test": /\\\\\\.css\\$/, }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.less\\$/, + "use": [ { - "resolve": { - "preferRelative": true, + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", + }, + { + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 2, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/plugin-lightningcss/src/loader", - "options": { - "cssModules": { - "dashedIdents": true, - "pattern": "[hash]-[local]", - }, - "errorRecovery": true, - "implementation": { - "browserslistToTargets": [Function], - "transform": [Function], - }, - "targets": { - "chrome": 5701632, - "edge": 5767168, - "firefox": 5111808, - "safari": 917504, - }, - "visitor": { - "Length": [Function], - }, - }, - }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/node_modules", - ], - }, - "sourceMap": false, - }, + }, + { + "loader": "/packages/plugin-lightningcss/src/loader", + "options": { + "cssModules": { + "dashedIdents": true, + "pattern": "[hash]-[local]", + }, + "errorRecovery": true, + "implementation": { + "browserslistToTargets": [Function], + "transform": [Function], + }, + "targets": { + "chrome": 5701632, + "edge": 5767168, + "firefox": 5111808, + "safari": 917504, + }, + "visitor": { + "Length": [Function], }, - ], + }, }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/less-loader", + "options": { + "implementation": "/packages/shared/compiled/less", + "lessOptions": { + "javascriptEnabled": true, + "paths": [ + "/node_modules", + ], + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/plugin-lightningcss/src/loader", - "options": { - "cssModules": { - "dashedIdents": true, - "pattern": "[hash]-[local]", - }, - "errorRecovery": true, - "implementation": { - "browserslistToTargets": [Function], - "transform": [Function], - }, - "targets": { - "chrome": 5701632, - "edge": 5767168, - "firefox": 5111808, - "safari": 917504, - }, - "visitor": { - "Length": [Function], - }, - }, - }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/node_modules", - ], - }, - "sourceMap": false, - }, - }, - ], }, ], - "test": /\\\\\\.less\\$/, }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, + "use": [ { - "resolve": { - "preferRelative": true, + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", + }, + { + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 3, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/plugin-lightningcss/src/loader", - "options": { - "cssModules": { - "dashedIdents": true, - "pattern": "[hash]-[local]", - }, - "errorRecovery": true, - "implementation": { - "browserslistToTargets": [Function], - "transform": [Function], - }, - "targets": { - "chrome": 5701632, - "edge": 5767168, - "firefox": 5111808, - "safari": 917504, - }, - "visitor": { - "Length": [Function], - }, - }, - }, - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, + }, + { + "loader": "/packages/plugin-lightningcss/src/loader", + "options": { + "cssModules": { + "dashedIdents": true, + "pattern": "[hash]-[local]", + }, + "errorRecovery": true, + "implementation": { + "browserslistToTargets": [Function], + "transform": [Function], + }, + "targets": { + "chrome": 5701632, + "edge": 5767168, + "firefox": 5111808, + "safari": 917504, + }, + "visitor": { + "Length": [Function], }, - ], + }, }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/resolve-url-loader", + "options": { + "join": [Function], + "sourceMap": false, + }, + }, + { + "loader": "/packages/shared/compiled/sass-loader", + "options": { + "implementation": "/packages/shared/compiled/sass", + "sourceMap": true, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/plugin-lightningcss/src/loader", - "options": { - "cssModules": { - "dashedIdents": true, - "pattern": "[hash]-[local]", - }, - "errorRecovery": true, - "implementation": { - "browserslistToTargets": [Function], - "transform": [Function], - }, - "targets": { - "chrome": 5701632, - "edge": 5767168, - "firefox": 5111808, - "safari": 917504, - }, - "visitor": { - "Length": [Function], - }, - }, - }, - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, - }, - ], }, ], - "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, }, ] `; @@ -316,196 +223,139 @@ exports[`plugins/lightningcss > plugin-lightningcss should be configurable by us exports[`plugins/lightningcss > plugin-lightningcss should be configurable by users with true options 1`] = ` [ { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/plugin-lightningcss/src/loader", - "options": { - "targets": { - "chrome": 5701632, - "edge": 5767168, - "firefox": 5111808, - "safari": 917504, - }, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 1, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/plugin-lightningcss/src/loader", - "options": { - "targets": { - "chrome": 5701632, - "edge": 5767168, - "firefox": 5111808, - "safari": 917504, - }, - }, + }, + { + "loader": "/packages/plugin-lightningcss/src/loader", + "options": { + "targets": { + "chrome": 5701632, + "edge": 5767168, + "firefox": 5111808, + "safari": 917504, }, - ], + }, }, ], - "test": /\\\\\\.css\\$/, }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.less\\$/, + "use": [ + { + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", + }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 2, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/plugin-lightningcss/src/loader", - "options": { - "targets": { - "chrome": 5701632, - "edge": 5767168, - "firefox": 5111808, - "safari": 917504, - }, - }, - }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/node_modules", - ], - }, - "sourceMap": false, - }, + }, + { + "loader": "/packages/plugin-lightningcss/src/loader", + "options": { + "targets": { + "chrome": 5701632, + "edge": 5767168, + "firefox": 5111808, + "safari": 917504, }, - ], + }, }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/less-loader", + "options": { + "implementation": "/packages/shared/compiled/less", + "lessOptions": { + "javascriptEnabled": true, + "paths": [ + "/node_modules", + ], + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/plugin-lightningcss/src/loader", - "options": { - "targets": { - "chrome": 5701632, - "edge": 5767168, - "firefox": 5111808, - "safari": 917504, - }, - }, - }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/node_modules", - ], - }, - "sourceMap": false, - }, - }, - ], }, ], - "test": /\\\\\\.less\\$/, }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, + "use": [ { - "resolve": { - "preferRelative": true, + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", + }, + { + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 3, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/plugin-lightningcss/src/loader", - "options": { - "targets": { - "chrome": 5701632, - "edge": 5767168, - "firefox": 5111808, - "safari": 917504, - }, - }, - }, - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, + }, + { + "loader": "/packages/plugin-lightningcss/src/loader", + "options": { + "targets": { + "chrome": 5701632, + "edge": 5767168, + "firefox": 5111808, + "safari": 917504, }, - ], + }, }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/resolve-url-loader", + "options": { + "join": [Function], + "sourceMap": false, + }, + }, + { + "loader": "/packages/shared/compiled/sass-loader", + "options": { + "implementation": "/packages/shared/compiled/sass", + "sourceMap": true, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/plugin-lightningcss/src/loader", - "options": { - "targets": { - "chrome": 5701632, - "edge": 5767168, - "firefox": 5111808, - "safari": 917504, - }, - }, - }, - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, - }, - ], }, ], - "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, }, ] `; @@ -549,196 +399,139 @@ exports[`plugins/lightningcss > plugin-lightningcss should not set lightningCssM exports[`plugins/lightningcss > plugin-lightningcss should replace postcss-loader with lightningcss-loader with default options 1`] = ` [ { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/plugin-lightningcss/src/loader", - "options": { - "targets": { - "chrome": 5701632, - "edge": 5767168, - "firefox": 5111808, - "safari": 917504, - }, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 1, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/plugin-lightningcss/src/loader", - "options": { - "targets": { - "chrome": 5701632, - "edge": 5767168, - "firefox": 5111808, - "safari": 917504, - }, - }, + }, + { + "loader": "/packages/plugin-lightningcss/src/loader", + "options": { + "targets": { + "chrome": 5701632, + "edge": 5767168, + "firefox": 5111808, + "safari": 917504, }, - ], + }, }, ], - "test": /\\\\\\.css\\$/, }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.less\\$/, + "use": [ + { + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", + }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 2, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/plugin-lightningcss/src/loader", - "options": { - "targets": { - "chrome": 5701632, - "edge": 5767168, - "firefox": 5111808, - "safari": 917504, - }, - }, - }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/node_modules", - ], - }, - "sourceMap": false, - }, + }, + { + "loader": "/packages/plugin-lightningcss/src/loader", + "options": { + "targets": { + "chrome": 5701632, + "edge": 5767168, + "firefox": 5111808, + "safari": 917504, }, - ], + }, }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/less-loader", + "options": { + "implementation": "/packages/shared/compiled/less", + "lessOptions": { + "javascriptEnabled": true, + "paths": [ + "/node_modules", + ], + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/plugin-lightningcss/src/loader", - "options": { - "targets": { - "chrome": 5701632, - "edge": 5767168, - "firefox": 5111808, - "safari": 917504, - }, - }, - }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/node_modules", - ], - }, - "sourceMap": false, - }, - }, - ], }, ], - "test": /\\\\\\.less\\$/, }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, + "use": [ + { + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", + }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 3, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/plugin-lightningcss/src/loader", - "options": { - "targets": { - "chrome": 5701632, - "edge": 5767168, - "firefox": 5111808, - "safari": 917504, - }, - }, - }, - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, + }, + { + "loader": "/packages/plugin-lightningcss/src/loader", + "options": { + "targets": { + "chrome": 5701632, + "edge": 5767168, + "firefox": 5111808, + "safari": 917504, }, - ], + }, }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/resolve-url-loader", + "options": { + "join": [Function], + "sourceMap": false, + }, + }, + { + "loader": "/packages/shared/compiled/sass-loader", + "options": { + "implementation": "/packages/shared/compiled/sass", + "sourceMap": true, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/plugin-lightningcss/src/loader", - "options": { - "targets": { - "chrome": 5701632, - "edge": 5767168, - "firefox": 5111808, - "safari": 917504, - }, - }, - }, - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, - }, - ], }, ], - "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, }, ] `; diff --git a/packages/plugin-react/tests/__snapshots__/index.test.ts.snap b/packages/plugin-react/tests/__snapshots__/index.test.ts.snap index 395c97efdb..cc155a87f2 100644 --- a/packages/plugin-react/tests/__snapshots__/index.test.ts.snap +++ b/packages/plugin-react/tests/__snapshots__/index.test.ts.snap @@ -28,6 +28,7 @@ exports[`plugins/react > should work with swc-loader 1`] = ` }, "experiments": { "asyncWebAssembly": true, + "css": false, }, "ignoreWarnings": [ /Conflicting order/, @@ -37,17 +38,7 @@ exports[`plugins/react > should work with swc-loader 1`] = ` }, "mode": "development", "module": { - "generator": { - "css/module": { - "exportsConvention": "camel-case", - "exportsOnly": false, - "localIdentName": "[path][name]__[local]-[hash:6]", - }, - }, "parser": { - "css/module": { - "namedExports": false, - }, "javascript": { "exportsPresence": "error", }, @@ -278,316 +269,199 @@ exports[`plugins/react > should work with swc-loader 1`] = ` "type": "asset/resource", }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 1, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, + ], }, - ], + "sourceMap": false, + }, }, ], - "test": /\\\\\\.css\\$/, }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.less\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/packages/plugin-react/tests/node_modules", - ], - }, - "sourceMap": false, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 2, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, + ], }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/packages/plugin-react/tests/node_modules", - ], - }, - "sourceMap": false, - }, + "sourceMap": false, + }, + }, + { + "loader": "/packages/shared/compiled/less-loader", + "options": { + "implementation": "/packages/shared/compiled/less", + "lessOptions": { + "javascriptEnabled": true, + "paths": [ + "/packages/plugin-react/tests/node_modules", + ], }, - ], + "sourceMap": false, + }, }, ], - "test": /\\\\\\.less\\$/, }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, + "use": [ { - "resolve": { - "preferRelative": true, + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", + }, + { + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 3, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, + ], }, - ], + "sourceMap": false, + }, }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/resolve-url-loader", + "options": { + "join": [Function], + "sourceMap": false, + }, + }, + { + "loader": "/packages/shared/compiled/sass-loader", + "options": { + "implementation": "/packages/shared/compiled/sass", + "sourceMap": true, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, - }, - ], }, ], - "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, }, ], }, @@ -633,8 +507,6 @@ exports[`plugins/react > should work with swc-loader 1`] = ` }, "output": { "chunkFilename": "static/js/async/[name].js", - "cssChunkFilename": "static/css/async/[name].css", - "cssFilename": "static/css/[name].css", "filename": "static/js/[name].js", "hashFunction": "xxhash64", "path": "/packages/plugin-react/tests/dist", @@ -649,6 +521,13 @@ exports[`plugins/react > should work with swc-loader 1`] = ` HotModuleReplacementPlugin { "name": "HotModuleReplacementPlugin", }, + CssExtractRspackPlugin { + "options": { + "chunkFilename": "static/css/async/[name].css", + "filename": "static/css/[name].css", + "ignoreOrder": true, + }, + }, HtmlWebpackPlugin { "options": { "base": false, @@ -716,9 +595,6 @@ exports[`plugins/react > should work with swc-loader 1`] = ` "affectedHooks": "compilation", "name": "DefinePlugin", }, - RemoveCssSourcemapPlugin { - "name": "RemoveCssSourcemapPlugin", - }, ReactRefreshRspackPlugin { "options": { "exclude": /node_modules/i, diff --git a/packages/plugin-rem/tests/__snapshots__/index.test.ts.snap b/packages/plugin-rem/tests/__snapshots__/index.test.ts.snap index 79e538c8ca..5cc1fc3488 100644 --- a/packages/plugin-rem/tests/__snapshots__/index.test.ts.snap +++ b/packages/plugin-rem/tests/__snapshots__/index.test.ts.snap @@ -2,248 +2,150 @@ exports[`plugin-rem > should not run htmlPlugin with enableRuntime is false 1`] = ` { + "experiments": { + "css": false, + }, "module": { - "generator": { - "css/module": { - "exportsConvention": "camel-case", - "exportsOnly": false, - "localIdentName": "[path][name]__[local]-[hash:6]", - }, - }, - "parser": { - "css/module": { - "namedExports": false, - }, - }, "rules": [ { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - { - "AtRule": [Function], - "Declaration": [Function], - "Once": [Function], - "postcssPlugin": "postcss-pxtorem", - }, - ], - }, - "sourceMap": false, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 1, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - { - "AtRule": [Function], - "Declaration": [Function], - "Once": [Function], - "postcssPlugin": "postcss-pxtorem", - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], + }, + { + "AtRule": [Function], + "Declaration": [Function], + "Once": [Function], + "postcssPlugin": "postcss-pxtorem", }, - "sourceMap": false, - }, + ], }, - ], + "sourceMap": false, + }, }, ], - "test": /\\\\\\.css\\$/, }, ], }, - "plugins": [ - RemoveCssSourcemapPlugin { - "name": "RemoveCssSourcemapPlugin", - }, - ], } `; exports[`plugin-rem > should run rem plugin with custom config 1`] = ` { + "experiments": { + "css": false, + }, "module": { - "generator": { - "css/module": { - "exportsConvention": "camel-case", - "exportsOnly": false, - "localIdentName": "[path][name]__[local]-[hash:6]", - }, - }, - "parser": { - "css/module": { - "namedExports": false, - }, - }, "rules": [ { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - { - "AtRule": [Function], - "Declaration": [Function], - "Once": [Function], - "postcssPlugin": "postcss-pxtorem", - }, - ], - }, - "sourceMap": false, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 1, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - { - "AtRule": [Function], - "Declaration": [Function], - "Once": [Function], - "postcssPlugin": "postcss-pxtorem", - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], + }, + { + "AtRule": [Function], + "Declaration": [Function], + "Once": [Function], + "postcssPlugin": "postcss-pxtorem", }, - "sourceMap": false, - }, + ], }, - ], + "sourceMap": false, + }, }, ], - "test": /\\\\\\.css\\$/, }, ], }, "plugins": [ - RemoveCssSourcemapPlugin { - "name": "RemoveCssSourcemapPlugin", - }, AutoSetRootFontSizePlugin { "HtmlPlugin": [Function], "distDir": "static/js", @@ -275,374 +177,227 @@ exports[`plugin-rem > should run rem plugin with custom config 1`] = ` exports[`plugin-rem > should run rem plugin with default config 1`] = ` { + "experiments": { + "css": false, + }, "module": { - "generator": { - "css/module": { - "exportsConvention": "camel-case", - "exportsOnly": false, - "localIdentName": "[path][name]__[local]-[hash:6]", - }, - }, - "parser": { - "css/module": { - "namedExports": false, - }, - }, "rules": [ { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - { - "AtRule": [Function], - "Declaration": [Function], - "Once": [Function], - "postcssPlugin": "postcss-pxtorem", - }, - ], - }, - "sourceMap": false, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 1, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - { - "AtRule": [Function], - "Declaration": [Function], - "Once": [Function], - "postcssPlugin": "postcss-pxtorem", - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], + }, + { + "AtRule": [Function], + "Declaration": [Function], + "Once": [Function], + "postcssPlugin": "postcss-pxtorem", }, - "sourceMap": false, - }, + ], }, - ], + "sourceMap": false, + }, }, ], - "test": /\\\\\\.css\\$/, }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.less\\$/, + "use": [ + { + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", + }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 2, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - { - "AtRule": [Function], - "Declaration": [Function], - "Once": [Function], - "postcssPlugin": "postcss-pxtorem", - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/packages/plugin-rem/tests/node_modules", - ], + { + "AtRule": [Function], + "Declaration": [Function], + "Once": [Function], + "postcssPlugin": "postcss-pxtorem", }, - "sourceMap": false, - }, + ], }, - ], + "sourceMap": false, + }, }, { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - { - "AtRule": [Function], - "Declaration": [Function], - "Once": [Function], - "postcssPlugin": "postcss-pxtorem", - }, - ], - }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/less-loader", - "options": { - "implementation": "/packages/shared/compiled/less", - "lessOptions": { - "javascriptEnabled": true, - "paths": [ - "/packages/plugin-rem/tests/node_modules", - ], - }, - "sourceMap": false, - }, + "loader": "/packages/shared/compiled/less-loader", + "options": { + "implementation": "/packages/shared/compiled/less", + "lessOptions": { + "javascriptEnabled": true, + "paths": [ + "/packages/plugin-rem/tests/node_modules", + ], }, - ], + "sourceMap": false, + }, }, ], - "test": /\\\\\\.less\\$/, }, { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, + "use": [ + { + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", + }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 3, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - { - "AtRule": [Function], - "Declaration": [Function], - "Once": [Function], - "postcssPlugin": "postcss-pxtorem", - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, + { + "AtRule": [Function], + "Declaration": [Function], + "Once": [Function], + "postcssPlugin": "postcss-pxtorem", + }, + ], }, - ], + "sourceMap": false, + }, }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/resolve-url-loader", + "options": { + "join": [Function], + "sourceMap": false, + }, + }, + { + "loader": "/packages/shared/compiled/sass-loader", + "options": { + "implementation": "/packages/shared/compiled/sass", + "sourceMap": true, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - { - "AtRule": [Function], - "Declaration": [Function], - "Once": [Function], - "postcssPlugin": "postcss-pxtorem", - }, - ], - }, - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/resolve-url-loader", - "options": { - "join": [Function], - "sourceMap": false, - }, - }, - { - "loader": "/packages/shared/compiled/sass-loader", - "options": { - "implementation": "/packages/shared/compiled/sass", - "sourceMap": true, - }, - }, - ], }, ], - "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/, }, ], }, "plugins": [ - RemoveCssSourcemapPlugin { - "name": "RemoveCssSourcemapPlugin", - }, AutoSetRootFontSizePlugin { "HtmlPlugin": [Function], "distDir": "static/js", diff --git a/packages/plugin-stylus/src/index.ts b/packages/plugin-stylus/src/index.ts index d753145159..37f1c5eebc 100644 --- a/packages/plugin-stylus/src/index.ts +++ b/packages/plugin-stylus/src/index.ts @@ -65,15 +65,6 @@ export function pluginStylus(options?: PluginStylusOptions): RsbuildPlugin { .loader(require.resolve('stylus-loader')) .options(mergedOptions); }); - - api.modifyRspackConfig(async (rspackConfig) => { - const { applyCSSModuleRule } = await import('@rsbuild/core/internal'); - - const config = api.getNormalizedConfig(); - const rules = rspackConfig.module?.rules; - - applyCSSModuleRule(rules, STYLUS_REGEX, config); - }); }, }; } diff --git a/packages/plugin-stylus/tests/__snapshots__/index.test.ts.snap b/packages/plugin-stylus/tests/__snapshots__/index.test.ts.snap index f2cbfe36ed..02eadbe0a4 100644 --- a/packages/plugin-stylus/tests/__snapshots__/index.test.ts.snap +++ b/packages/plugin-stylus/tests/__snapshots__/index.test.ts.snap @@ -5,102 +5,66 @@ exports[`plugin-stylus > should add stylus loader config correctly 1`] = ` "module": { "rules": [ { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.styl\\(us\\)\\?\\$/, + "use": [ + { + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", + }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 2, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, + ], }, - { - "loader": "/node_modules//stylus-loader/dist/cjs.js", - "options": { - "sourceMap": false, - }, - }, - ], + "sourceMap": false, + }, }, { - "resolve": { - "preferRelative": true, + "loader": "/node_modules//stylus-loader/dist/cjs.js", + "options": { + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - { - "loader": "/node_modules//stylus-loader/dist/cjs.js", - "options": { - "sourceMap": false, - }, - }, - ], }, ], - "test": /\\\\\\.styl\\(us\\)\\?\\$/, }, ], }, @@ -112,108 +76,69 @@ exports[`plugin-stylus > should allow to configure stylus options 1`] = ` "module": { "rules": [ { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.styl\\(us\\)\\?\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - { - "loader": "/node_modules//stylus-loader/dist/cjs.js", - "options": { - "sourceMap": false, - "stylusOptions": { - "lineNumbers": false, - }, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 2, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, + ], }, - { - "loader": "/node_modules//stylus-loader/dist/cjs.js", - "options": { - "sourceMap": false, - "stylusOptions": { - "lineNumbers": false, - }, - }, + "sourceMap": false, + }, + }, + { + "loader": "/node_modules//stylus-loader/dist/cjs.js", + "options": { + "sourceMap": false, + "stylusOptions": { + "lineNumbers": false, }, - ], + }, }, ], - "test": /\\\\\\.styl\\(us\\)\\?\\$/, }, ], }, diff --git a/packages/plugin-stylus/tests/__snapshots__/rspack.test.ts.snap b/packages/plugin-stylus/tests/__snapshots__/rspack.test.ts.snap index f2cbfe36ed..02eadbe0a4 100644 --- a/packages/plugin-stylus/tests/__snapshots__/rspack.test.ts.snap +++ b/packages/plugin-stylus/tests/__snapshots__/rspack.test.ts.snap @@ -5,102 +5,66 @@ exports[`plugin-stylus > should add stylus loader config correctly 1`] = ` "module": { "rules": [ { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.styl\\(us\\)\\?\\$/, + "use": [ + { + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", + }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 2, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, + ], }, - { - "loader": "/node_modules//stylus-loader/dist/cjs.js", - "options": { - "sourceMap": false, - }, - }, - ], + "sourceMap": false, + }, }, { - "resolve": { - "preferRelative": true, + "loader": "/node_modules//stylus-loader/dist/cjs.js", + "options": { + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - { - "loader": "/node_modules//stylus-loader/dist/cjs.js", - "options": { - "sourceMap": false, - }, - }, - ], }, ], - "test": /\\\\\\.styl\\(us\\)\\?\\$/, }, ], }, @@ -112,108 +76,69 @@ exports[`plugin-stylus > should allow to configure stylus options 1`] = ` "module": { "rules": [ { - "oneOf": [ + "resolve": { + "preferRelative": true, + }, + "sideEffects": true, + "test": /\\\\\\.styl\\(us\\)\\?\\$/, + "use": [ { - "resolve": { - "preferRelative": true, - }, - "sideEffects": true, - "test": /\\\\\\.module\\\\\\.\\\\w\\+\\$/i, - "type": "css/module", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, - ], - }, - "sourceMap": false, - }, - }, - { - "loader": "/node_modules//stylus-loader/dist/cjs.js", - "options": { - "sourceMap": false, - "stylusOptions": { - "lineNumbers": false, - }, - }, - }, - ], + "loader": "/node_modules//@rspack/core/dist/builtin-plugin/css-extract/loader.js", }, { - "resolve": { - "preferRelative": true, + "loader": "/packages/shared/compiled/css-loader", + "options": { + "importLoaders": 2, + "modules": { + "auto": true, + "exportLocalsConvention": "camelCase", + "localIdentName": "[path][name]__[local]-[hash:base64:6]", + "namedExport": false, + }, + "sourceMap": false, }, - "sideEffects": true, - "type": "css", - "use": [ - { - "loader": "/packages/shared/compiled/postcss-loader", - "options": { - "postcssOptions": { - "config": false, - "plugins": [ - { - "browsers": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - "info": [Function], - "options": { - "flexbox": "no-2009", - "overrideBrowserslist": [ - "chrome >= 87", - "edge >= 88", - "firefox >= 78", - "safari >= 14", - ], - }, - "postcssPlugin": "autoprefixer", - "prepare": [Function], - }, + }, + { + "loader": "/packages/shared/compiled/postcss-loader", + "options": { + "postcssOptions": { + "config": false, + "plugins": [ + { + "browsers": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", ], + "info": [Function], + "options": { + "flexbox": "no-2009", + "overrideBrowserslist": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + "postcssPlugin": "autoprefixer", + "prepare": [Function], }, - "sourceMap": false, - }, + ], }, - { - "loader": "/node_modules//stylus-loader/dist/cjs.js", - "options": { - "sourceMap": false, - "stylusOptions": { - "lineNumbers": false, - }, - }, + "sourceMap": false, + }, + }, + { + "loader": "/node_modules//stylus-loader/dist/cjs.js", + "options": { + "sourceMap": false, + "stylusOptions": { + "lineNumbers": false, }, - ], + }, }, ], - "test": /\\\\\\.styl\\(us\\)\\?\\$/, }, ], }, diff --git a/packages/shared/src/css.ts b/packages/shared/src/css.ts index 183926ce26..1899054db8 100644 --- a/packages/shared/src/css.ts +++ b/packages/shared/src/css.ts @@ -1,15 +1,21 @@ +import path from 'node:path'; import type { AcceptedPlugin } from 'postcss'; import deepmerge from '../compiled/deepmerge'; import { CSS_MODULES_REGEX, NODE_MODULES_REGEX } from './constants'; +import { getBrowserslistWithDefault } from './getBrowserslist'; import { mergeChainedOptions } from './mergeChainedOptions'; import type { + BundlerChainRule, + CSSExtractOptions, CSSLoaderOptions, + ModifyChainUtils, NormalizedConfig, PostCSSLoaderOptions, PostCSSOptions, + RsbuildContext, RsbuildTarget, } from './types'; -import { isFunction, isPlainObject } from './utils'; +import { getSharedPkgCompiledPath, isFunction, isPlainObject } from './utils'; export const getCssModuleLocalIdentName = ( config: NormalizedConfig, @@ -286,3 +292,119 @@ export const getResolveUrlJoinFn = async () => { createJoinImplementation(rsbuildGenerator), ); }; + +export async function applyCSSRule({ + rule, + config, + context, + utils: { target, isProd, isServer, CHAIN_ID, isWebWorker }, + importLoaders = 1, + cssExtractPlugin, +}: { + rule: BundlerChainRule; + config: NormalizedConfig; + context: RsbuildContext; + utils: ModifyChainUtils; + importLoaders?: number; + cssExtractPlugin: { + loader: string; + }; +}) { + const browserslist = await getBrowserslistWithDefault( + context.rootPath, + config, + target, + ); + + // 1. Check user config + const enableExtractCSS = isUseCssExtract(config, target); + const enableCSSModuleTS = Boolean(config.output.enableCssModuleTSDeclaration); + + // 2. Prepare loader options + const localIdentName = getCssModuleLocalIdentName(config, isProd); + + const cssLoaderOptions = getCssLoaderOptions({ + config, + importLoaders, + isServer, + isWebWorker, + localIdentName, + }); + + // 3. Create webpack rule + // Order: style-loader/mini-css-extract -> css-loader -> postcss-loader + if (!isServer && !isWebWorker) { + // use mini-css-extract-plugin loader + if (enableExtractCSS) { + const extraCSSOptions: Required = + typeof config.tools.cssExtract === 'object' + ? config.tools.cssExtract + : { + loaderOptions: {}, + pluginOptions: {}, + }; + + rule + .use(CHAIN_ID.USE.MINI_CSS_EXTRACT) + .loader(cssExtractPlugin.loader) + .options(extraCSSOptions.loaderOptions) + .end(); + } + // use style-loader + else { + const styleLoaderOptions = mergeChainedOptions({ + defaults: {}, + options: config.tools.styleLoader, + }); + + rule + .use(CHAIN_ID.USE.STYLE) + .loader(getSharedPkgCompiledPath('style-loader')) + .options(styleLoaderOptions) + .end(); + } + + // use css-modules-typescript-loader + if (enableCSSModuleTS && cssLoaderOptions.modules) { + rule + .use(CHAIN_ID.USE.CSS_MODULES_TS) + .loader(path.resolve(__dirname, './loaders/cssModulesTypescriptLoader')) + .options({ + modules: cssLoaderOptions.modules, + }) + .end(); + } + } else { + rule + .use(CHAIN_ID.USE.IGNORE_CSS) + .loader(path.resolve(__dirname, './loaders/ignoreCssLoader')) + .end(); + } + + rule + .use(CHAIN_ID.USE.CSS) + .loader(getSharedPkgCompiledPath('css-loader')) + .options(cssLoaderOptions) + .end(); + + if (!isServer && !isWebWorker) { + const postcssLoaderOptions = await getPostcssLoaderOptions({ + browserslist, + config, + root: context.rootPath, + }); + + rule + .use(CHAIN_ID.USE.POSTCSS) + .loader(getSharedPkgCompiledPath('postcss-loader')) + .options(postcssLoaderOptions) + .end(); + } + + // CSS imports should always be treated as sideEffects + rule.merge({ sideEffects: true }); + + // Enable preferRelative by default, which is consistent with the default behavior of css-loader + // see: https://github.com/webpack-contrib/css-loader/blob/579fc13/src/plugins/postcss-import-parser.js#L234 + rule.resolve.preferRelative(true); +}