diff --git a/e2e/cases/css/css-inline/index.test.ts b/e2e/cases/css/css-inline/index.test.ts new file mode 100644 index 0000000000..03d843df5d --- /dev/null +++ b/e2e/cases/css/css-inline/index.test.ts @@ -0,0 +1,45 @@ +import { readFileSync } from 'node:fs'; +import path from 'node:path'; +import { build, dev, rspackOnlyTest } from '@e2e/helper'; +import { expect } from '@playwright/test'; + +rspackOnlyTest( + 'should allow to import inline CSS files in development mode', + async ({ page }) => { + const rsbuild = await dev({ + cwd: __dirname, + page, + }); + + const aInline: string = await page.evaluate('window.aInline'); + const bInline: string = await page.evaluate('window.bInline'); + + expect( + aInline.includes('.header-class') && aInline.includes('color: red'), + ).toBe(true); + expect( + bInline.includes('.title-class') && bInline.includes('font-size: 14px'), + ).toBe(true); + + await rsbuild.close(); + }, +); + +rspackOnlyTest( + 'should allow to import inline CSS files in production mode', + async ({ page }) => { + const rsbuild = await build({ + cwd: __dirname, + page, + }); + + expect(await page.evaluate('window.aInline')).toBe( + '.header-class{color:red}', + ); + expect(await page.evaluate('window.bInline')).toBe( + '.title-class{font-size:14px}', + ); + + await rsbuild.close(); + }, +); diff --git a/e2e/cases/css/css-inline/src/a.css b/e2e/cases/css/css-inline/src/a.css new file mode 100644 index 0000000000..9d6dfc4988 --- /dev/null +++ b/e2e/cases/css/css-inline/src/a.css @@ -0,0 +1,3 @@ +.header-class { + color: red; +} diff --git a/e2e/cases/css/css-inline/src/b.module.css b/e2e/cases/css/css-inline/src/b.module.css new file mode 100644 index 0000000000..47206f9644 --- /dev/null +++ b/e2e/cases/css/css-inline/src/b.module.css @@ -0,0 +1,3 @@ +.title-class { + font-size: 14px; +} diff --git a/e2e/cases/css/css-inline/src/index.js b/e2e/cases/css/css-inline/src/index.js new file mode 100644 index 0000000000..d7f033b585 --- /dev/null +++ b/e2e/cases/css/css-inline/src/index.js @@ -0,0 +1,5 @@ +import aInline from './a.css?inline'; +import bInline from './b.module.css?inline'; + +window.aInline = aInline; +window.bInline = bInline; diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx index 3fc6ba217d..dff1751231 100644 --- a/examples/react/src/App.tsx +++ b/examples/react/src/App.tsx @@ -1,4 +1,4 @@ -import rawCss from './App.css?raw'; +import './App.css'; const App = () => { return ( diff --git a/packages/compat/webpack/tests/__snapshots__/default.test.ts.snap b/packages/compat/webpack/tests/__snapshots__/default.test.ts.snap index 97f2048a4d..a3a902872a 100644 --- a/packages/compat/webpack/tests/__snapshots__/default.test.ts.snap +++ b/packages/compat/webpack/tests/__snapshots__/default.test.ts.snap @@ -50,7 +50,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = ` "preferRelative": true, }, "resourceQuery": { - "not": /raw/, + "not": /raw\\|inline/, }, "sideEffects": true, "test": /\\\\\\.css\\$/, @@ -75,6 +75,26 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = ` }, ], }, + { + "resolve": { + "preferRelative": true, + }, + "resourceQuery": /inline/, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "type": "javascript/auto", + "use": [ + { + "loader": "/packages/core/compiled/css-loader/index.js", + "options": { + "exportType": "string", + "importLoaders": 0, + "modules": false, + "sourceMap": false, + }, + }, + ], + }, { "resourceQuery": /raw/, "test": /\\\\\\.css\\$/, @@ -472,7 +492,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when produ "preferRelative": true, }, "resourceQuery": { - "not": /raw/, + "not": /raw\\|inline/, }, "sideEffects": true, "test": /\\\\\\.css\\$/, @@ -497,6 +517,26 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when produ }, ], }, + { + "resolve": { + "preferRelative": true, + }, + "resourceQuery": /inline/, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "type": "javascript/auto", + "use": [ + { + "loader": "/packages/core/compiled/css-loader/index.js", + "options": { + "exportType": "string", + "importLoaders": 0, + "modules": false, + "sourceMap": false, + }, + }, + ], + }, { "resourceQuery": /raw/, "test": /\\\\\\.css\\$/, @@ -889,7 +929,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe "preferRelative": true, }, "resourceQuery": { - "not": /raw/, + "not": /raw\\|inline/, }, "sideEffects": true, "test": /\\\\\\.css\\$/, @@ -915,6 +955,26 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe }, ], }, + { + "resolve": { + "preferRelative": true, + }, + "resourceQuery": /inline/, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "type": "javascript/auto", + "use": [ + { + "loader": "/packages/core/compiled/css-loader/index.js", + "options": { + "exportType": "string", + "importLoaders": 0, + "modules": false, + "sourceMap": false, + }, + }, + ], + }, { "resourceQuery": /raw/, "test": /\\\\\\.css\\$/, @@ -1233,7 +1293,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe "preferRelative": true, }, "resourceQuery": { - "not": /raw/, + "not": /raw\\|inline/, }, "sideEffects": true, "test": /\\\\\\.css\\$/, @@ -1259,6 +1319,26 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe }, ], }, + { + "resolve": { + "preferRelative": true, + }, + "resourceQuery": /inline/, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "type": "javascript/auto", + "use": [ + { + "loader": "/packages/core/compiled/css-loader/index.js", + "options": { + "exportType": "string", + "importLoaders": 0, + "modules": false, + "sourceMap": false, + }, + }, + ], + }, { "resourceQuery": /raw/, "test": /\\\\\\.css\\$/, diff --git a/packages/core/src/configChain.ts b/packages/core/src/configChain.ts index 5d5a8f0dd7..a28d838491 100644 --- a/packages/core/src/configChain.ts +++ b/packages/core/src/configChain.ts @@ -51,6 +51,8 @@ export const CHAIN_ID = { CSS: 'css', /** Rule for raw CSS */ CSS_RAW: 'css-raw', + /** Rule for inline CSS */ + CSS_INLINE: 'css-inline', /** Rule for Less */ LESS: 'less', /** Rule for raw Less */ diff --git a/packages/core/src/plugins/css.ts b/packages/core/src/plugins/css.ts index a08f377352..bdc9de0908 100644 --- a/packages/core/src/plugins/css.ts +++ b/packages/core/src/plugins/css.ts @@ -14,6 +14,7 @@ import type { PostCSSOptions, RsbuildPlugin, Rspack, + RspackChain, } from '../types'; const getCSSModulesLocalIdentName = ( @@ -265,6 +266,7 @@ export const pluginCss = (): RsbuildPlugin => ({ order: 'pre', handler: async (chain, { target, isProd, CHAIN_ID, environment }) => { const rule = chain.module.rule(CHAIN_ID.RULE.CSS); + const inlineRule = chain.module.rule(CHAIN_ID.RULE.CSS_INLINE); const { config } = environment; rule @@ -274,10 +276,16 @@ export const pluginCss = (): RsbuildPlugin => ({ // When using `new URL('./path/to/foo.css', import.meta.url)`, // the module should be treated as an asset module rather than a JS module. .dependency({ not: 'url' }) - // exclude `import './foo.css?raw'` - .resourceQuery({ not: /raw/ }); + // exclude `import './foo.css?raw'` and `import './foo.css?inline'` + .resourceQuery({ not: /raw|inline/ }); - // Support for importing raw CSS files + // Support for `import inlineCss from "a.css?inline"` + inlineRule + .test(CSS_REGEX) + .type('javascript/auto') + .resourceQuery(/inline/); + + // Support for `import rawCss from "a.css?raw"` chain.module .rule(CHAIN_ID.RULE.CSS_RAW) .test(CSS_REGEX) @@ -316,7 +324,18 @@ export const pluginCss = (): RsbuildPlugin => ({ // Number of loaders applied before css-loader for `@import` at-rules let importLoaders = 0; - rule.use(CHAIN_ID.USE.CSS).loader(getCompiledPath('css-loader')); + // Update the normal CSS rule and the inline CSS rule + const updateRules = ( + callback: (rule: RspackChain.Rule, type: 'normal' | 'inline') => void, + ) => { + callback(rule, 'normal'); + callback(inlineRule, 'inline'); + }; + + const cssLoaderPath = getCompiledPath('css-loader'); + updateRules((rule) => { + rule.use(CHAIN_ID.USE.CSS).loader(cssLoaderPath); + }); if (emitCss) { // `builtin:lightningcss-loader` is not supported when using webpack @@ -331,10 +350,18 @@ export const pluginCss = (): RsbuildPlugin => ({ environment.browserslist, ); - rule - .use(CHAIN_ID.USE.LIGHTNINGCSS) - .loader('builtin:lightningcss-loader') - .options(lightningcssOptions); + updateRules((rule, type) => { + const enableMinify = + type === 'inline' && config.mode === 'production'; + rule + .use(CHAIN_ID.USE.LIGHTNINGCSS) + .loader('builtin:lightningcss-loader') + .options( + enableMinify + ? { ...lightningcssOptions, minify: true } + : lightningcssOptions, + ); + }); } const postcssLoaderOptions = await getPostcssLoaderOptions({ @@ -349,10 +376,14 @@ export const pluginCss = (): RsbuildPlugin => ({ postcssLoaderOptions.postcssOptions?.plugins?.length ) { importLoaders++; - rule - .use(CHAIN_ID.USE.POSTCSS) - .loader(getCompiledPath('postcss-loader')) - .options(postcssLoaderOptions); + const postcssLoaderPath = getCompiledPath('postcss-loader'); + + updateRules((rule) => { + rule + .use(CHAIN_ID.USE.POSTCSS) + .loader(postcssLoaderPath) + .options(postcssLoaderOptions); + }); } } @@ -363,20 +394,31 @@ export const pluginCss = (): RsbuildPlugin => ({ localIdentName, emitCss, }); - rule.use(CHAIN_ID.USE.CSS).options(cssLoaderOptions); + + updateRules((rule, type) => { + rule.use(CHAIN_ID.USE.CSS).options( + type === 'inline' + ? ({ + ...cssLoaderOptions, + exportType: 'string', + modules: false, + } satisfies CSSLoaderOptions) + : cssLoaderOptions, + ); + + // 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); + }); const isStringExport = cssLoaderOptions.exportType === 'string'; if (isStringExport && rule.uses.has(CHAIN_ID.USE.MINI_CSS_EXTRACT)) { rule.uses.delete(CHAIN_ID.USE.MINI_CSS_EXTRACT); } - // 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); - // Apply CSS extract plugin if not using style-loader and emitCss is true if (emitCss && !config.output.injectStyles && !isStringExport) { const extractPluginOptions = config.tools.cssExtract.pluginOptions; diff --git a/packages/core/tests/__snapshots__/builder.test.ts.snap b/packages/core/tests/__snapshots__/builder.test.ts.snap index 4bf47a8068..242a3717e2 100644 --- a/packages/core/tests/__snapshots__/builder.test.ts.snap +++ b/packages/core/tests/__snapshots__/builder.test.ts.snap @@ -37,7 +37,7 @@ exports[`should use Rspack as the default bundler > apply Rspack correctly 1`] = "preferRelative": true, }, "resourceQuery": { - "not": /raw/, + "not": /raw\\|inline/, }, "sideEffects": true, "test": /\\\\\\.css\\$/, @@ -73,6 +73,37 @@ exports[`should use Rspack as the default bundler > apply Rspack correctly 1`] = }, ], }, + { + "resolve": { + "preferRelative": true, + }, + "resourceQuery": /inline/, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "type": "javascript/auto", + "use": [ + { + "loader": "/packages/core/compiled/css-loader/index.js", + "options": { + "exportType": "string", + "importLoaders": 1, + "modules": false, + "sourceMap": false, + }, + }, + { + "loader": "builtin:lightningcss-loader", + "options": { + "targets": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + }, + ], + }, { "resourceQuery": /raw/, "test": /\\\\\\.css\\$/, diff --git a/packages/core/tests/__snapshots__/css.test.ts.snap b/packages/core/tests/__snapshots__/css.test.ts.snap index 780ec00978..af18136eb4 100644 --- a/packages/core/tests/__snapshots__/css.test.ts.snap +++ b/packages/core/tests/__snapshots__/css.test.ts.snap @@ -12,7 +12,7 @@ exports[`plugin-css > should use custom cssModules rule when using output.cssMod "preferRelative": true, }, "resourceQuery": { - "not": /raw/, + "not": /raw\\|inline/, }, "sideEffects": true, "test": /\\\\\\.css\\$/, @@ -48,6 +48,37 @@ exports[`plugin-css > should use custom cssModules rule when using output.cssMod }, ], }, + { + "resolve": { + "preferRelative": true, + }, + "resourceQuery": /inline/, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "type": "javascript/auto", + "use": [ + { + "loader": "/packages/core/compiled/css-loader/index.js", + "options": { + "exportType": "string", + "importLoaders": 1, + "modules": false, + "sourceMap": false, + }, + }, + { + "loader": "builtin:lightningcss-loader", + "options": { + "targets": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + }, + ], + }, { "resourceQuery": /raw/, "test": /\\\\\\.css\\$/, @@ -82,7 +113,7 @@ exports[`plugin-css injectStyles > should apply ignoreCssLoader when injectStyle "preferRelative": true, }, "resourceQuery": { - "not": /raw/, + "not": /raw\\|inline/, }, "sideEffects": true, "test": /\\\\\\.css\\$/, @@ -108,6 +139,26 @@ exports[`plugin-css injectStyles > should apply ignoreCssLoader when injectStyle }, ], }, + { + "resolve": { + "preferRelative": true, + }, + "resourceQuery": /inline/, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "type": "javascript/auto", + "use": [ + { + "loader": "/packages/core/compiled/css-loader/index.js", + "options": { + "exportType": "string", + "importLoaders": 0, + "modules": false, + "sourceMap": false, + }, + }, + ], + }, { "resourceQuery": /raw/, "test": /\\\\\\.css\\$/, @@ -135,7 +186,7 @@ exports[`plugin-css injectStyles > should use css-loader + style-loader when inj "preferRelative": true, }, "resourceQuery": { - "not": /raw/, + "not": /raw\\|inline/, }, "sideEffects": true, "test": /\\\\\\.css\\$/, @@ -171,6 +222,37 @@ exports[`plugin-css injectStyles > should use css-loader + style-loader when inj }, ], }, + { + "resolve": { + "preferRelative": true, + }, + "resourceQuery": /inline/, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "type": "javascript/auto", + "use": [ + { + "loader": "/packages/core/compiled/css-loader/index.js", + "options": { + "exportType": "string", + "importLoaders": 1, + "modules": false, + "sourceMap": false, + }, + }, + { + "loader": "builtin:lightningcss-loader", + "options": { + "targets": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + }, + ], + }, { "resourceQuery": /raw/, "test": /\\\\\\.css\\$/, @@ -196,7 +278,7 @@ exports[`should ensure isolation of PostCSS config objects between different bui "preferRelative": true, }, "resourceQuery": { - "not": /raw/, + "not": /raw\\|inline/, }, "sideEffects": true, "test": /\\\\\\.css\\$/, @@ -247,6 +329,52 @@ exports[`should ensure isolation of PostCSS config objects between different bui }, ], }, + { + "resolve": { + "preferRelative": true, + }, + "resourceQuery": /inline/, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "type": "javascript/auto", + "use": [ + { + "loader": "/packages/core/compiled/css-loader/index.js", + "options": { + "exportType": "string", + "importLoaders": 2, + "modules": false, + "sourceMap": false, + }, + }, + { + "loader": "builtin:lightningcss-loader", + "options": { + "targets": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + }, + { + "loader": "/packages/core/compiled/postcss-loader/index.js", + "options": { + "implementation": "/packages/core/compiled/postcss/index.js", + "postcssOptions": { + "config": false, + "plugins": [ + { + "postcssPlugin": "foo", + }, + ], + }, + "sourceMap": false, + }, + }, + ], + }, { "resourceQuery": /raw/, "test": /\\\\\\.css\\$/, @@ -265,7 +393,7 @@ exports[`should ensure isolation of PostCSS config objects between different bui "preferRelative": true, }, "resourceQuery": { - "not": /raw/, + "not": /raw\\|inline/, }, "sideEffects": true, "test": /\\\\\\.css\\$/, @@ -316,6 +444,52 @@ exports[`should ensure isolation of PostCSS config objects between different bui }, ], }, + { + "resolve": { + "preferRelative": true, + }, + "resourceQuery": /inline/, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "type": "javascript/auto", + "use": [ + { + "loader": "/packages/core/compiled/css-loader/index.js", + "options": { + "exportType": "string", + "importLoaders": 2, + "modules": false, + "sourceMap": false, + }, + }, + { + "loader": "builtin:lightningcss-loader", + "options": { + "targets": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + }, + { + "loader": "/packages/core/compiled/postcss-loader/index.js", + "options": { + "implementation": "/packages/core/compiled/postcss/index.js", + "postcssOptions": { + "config": false, + "plugins": [ + { + "postcssPlugin": "bar", + }, + ], + }, + "sourceMap": false, + }, + }, + ], + }, { "resourceQuery": /raw/, "test": /\\\\\\.css\\$/, diff --git a/packages/core/tests/__snapshots__/default.test.ts.snap b/packages/core/tests/__snapshots__/default.test.ts.snap index 54e2da9a22..a50e3fb4d6 100644 --- a/packages/core/tests/__snapshots__/default.test.ts.snap +++ b/packages/core/tests/__snapshots__/default.test.ts.snap @@ -37,7 +37,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = ` "preferRelative": true, }, "resourceQuery": { - "not": /raw/, + "not": /raw\\|inline/, }, "sideEffects": true, "test": /\\\\\\.css\\$/, @@ -73,6 +73,37 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = ` }, ], }, + { + "resolve": { + "preferRelative": true, + }, + "resourceQuery": /inline/, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "type": "javascript/auto", + "use": [ + { + "loader": "/packages/core/compiled/css-loader/index.js", + "options": { + "exportType": "string", + "importLoaders": 1, + "modules": false, + "sourceMap": false, + }, + }, + { + "loader": "builtin:lightningcss-loader", + "options": { + "targets": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + }, + ], + }, { "resourceQuery": /raw/, "test": /\\\\\\.css\\$/, @@ -468,7 +499,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when prod "preferRelative": true, }, "resourceQuery": { - "not": /raw/, + "not": /raw\\|inline/, }, "sideEffects": true, "test": /\\\\\\.css\\$/, @@ -504,6 +535,38 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when prod }, ], }, + { + "resolve": { + "preferRelative": true, + }, + "resourceQuery": /inline/, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "type": "javascript/auto", + "use": [ + { + "loader": "/packages/core/compiled/css-loader/index.js", + "options": { + "exportType": "string", + "importLoaders": 1, + "modules": false, + "sourceMap": false, + }, + }, + { + "loader": "builtin:lightningcss-loader", + "options": { + "minify": true, + "targets": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + }, + ], + }, { "resourceQuery": /raw/, "test": /\\\\\\.css\\$/, @@ -935,7 +998,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe "preferRelative": true, }, "resourceQuery": { - "not": /raw/, + "not": /raw\\|inline/, }, "sideEffects": true, "test": /\\\\\\.css\\$/, @@ -961,6 +1024,26 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe }, ], }, + { + "resolve": { + "preferRelative": true, + }, + "resourceQuery": /inline/, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "type": "javascript/auto", + "use": [ + { + "loader": "/packages/core/compiled/css-loader/index.js", + "options": { + "exportType": "string", + "importLoaders": 0, + "modules": false, + "sourceMap": false, + }, + }, + ], + }, { "resourceQuery": /raw/, "test": /\\\\\\.css\\$/, @@ -1305,7 +1388,7 @@ exports[`tools.rspack > should match snapshot 1`] = ` "preferRelative": true, }, "resourceQuery": { - "not": /raw/, + "not": /raw\\|inline/, }, "sideEffects": true, "test": /\\\\\\.css\\$/, @@ -1341,6 +1424,37 @@ exports[`tools.rspack > should match snapshot 1`] = ` }, ], }, + { + "resolve": { + "preferRelative": true, + }, + "resourceQuery": /inline/, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "type": "javascript/auto", + "use": [ + { + "loader": "/packages/core/compiled/css-loader/index.js", + "options": { + "exportType": "string", + "importLoaders": 1, + "modules": false, + "sourceMap": false, + }, + }, + { + "loader": "builtin:lightningcss-loader", + "options": { + "targets": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + }, + ], + }, { "resourceQuery": /raw/, "test": /\\\\\\.css\\$/, diff --git a/packages/core/tests/__snapshots__/environments.test.ts.snap b/packages/core/tests/__snapshots__/environments.test.ts.snap index 743d34e388..a1dd97b594 100644 --- a/packages/core/tests/__snapshots__/environments.test.ts.snap +++ b/packages/core/tests/__snapshots__/environments.test.ts.snap @@ -1314,7 +1314,7 @@ exports[`environment config > tools.rspack / bundlerChain can be configured in e "preferRelative": true, }, "resourceQuery": { - "not": /raw/, + "not": /raw\\|inline/, }, "sideEffects": true, "test": /\\\\\\.css\\$/, @@ -1350,6 +1350,37 @@ exports[`environment config > tools.rspack / bundlerChain can be configured in e }, ], }, + { + "resolve": { + "preferRelative": true, + }, + "resourceQuery": /inline/, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "type": "javascript/auto", + "use": [ + { + "loader": "/packages/core/compiled/css-loader/index.js", + "options": { + "exportType": "string", + "importLoaders": 1, + "modules": false, + "sourceMap": false, + }, + }, + { + "loader": "builtin:lightningcss-loader", + "options": { + "targets": [ + "chrome >= 87", + "edge >= 88", + "firefox >= 78", + "safari >= 14", + ], + }, + }, + ], + }, { "resourceQuery": /raw/, "test": /\\\\\\.css\\$/, @@ -1680,7 +1711,7 @@ exports[`environment config > tools.rspack / bundlerChain can be configured in e "preferRelative": true, }, "resourceQuery": { - "not": /raw/, + "not": /raw\\|inline/, }, "sideEffects": true, "test": /\\\\\\.css\\$/, @@ -1706,6 +1737,26 @@ exports[`environment config > tools.rspack / bundlerChain can be configured in e }, ], }, + { + "resolve": { + "preferRelative": true, + }, + "resourceQuery": /inline/, + "sideEffects": true, + "test": /\\\\\\.css\\$/, + "type": "javascript/auto", + "use": [ + { + "loader": "/packages/core/compiled/css-loader/index.js", + "options": { + "exportType": "string", + "importLoaders": 0, + "modules": false, + "sourceMap": false, + }, + }, + ], + }, { "resourceQuery": /raw/, "test": /\\\\\\.css\\$/, diff --git a/packages/core/types.d.ts b/packages/core/types.d.ts index f1dc715965..702d4dbd33 100644 --- a/packages/core/types.d.ts +++ b/packages/core/types.d.ts @@ -185,7 +185,15 @@ declare module '*?inline' { } /** - * Raw css + * Inline CSS + */ +declare module '*.css?inline' { + const content: string; + export default content; +} + +/** + * Raw CSS */ declare module '*.css?raw' { const content: string;