Builtin lightningcss-loader
The builtin:lightningcss-loader uses the builtin lightningcss from Rspack to process CSS, which can replace the syntax lowering functionality in postcss-loader to make the CSS transformation faster.
Example
To use builtin:lightningcss-loader in your project, you need to configure it as follows.
const rspack = require('@rspack/core');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'builtin:lightningcss-loader',
options: {
targets: 'ie 10',
},
},
// ... other loaders
],
},
],
},
};
Type Declarations
You can use the LightningcssLoaderOptions type exported by @rspack/core to enable type hints:
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'builtin:lightningcss-loader',
/** @type {import('@rspack/core').LightningcssLoaderOptions} */
options: {
targets: 'ie 10',
},
},
// ... other loaders
],
},
],
},
};
Options
Below are the configurations supported by builtin:lightningcss-loader. For detailed configuration, please refer to lightningcss document
type LightningcssFeatureOptions = {
nesting?: boolean;
notSelectorList?: boolean;
dirSelector?: boolean;
langSelectorList?: boolean;
isSelector?: boolean;
textDecorationThicknessPercent?: boolean;
mediaIntervalSyntax?: boolean;
mediaRangeSyntax?: boolean;
customMediaQueries?: boolean;
clampFunction?: boolean;
colorFunction?: boolean;
oklabColors?: boolean;
labColors?: boolean;
p3Colors?: boolean;
hexAlphaColors?: boolean;
spaceSeparatedColorNotation?: boolean;
fontFamilySystemUi?: boolean;
doublePositionGradients?: boolean;
vendorPrefixes?: boolean;
logicalProperties?: boolean;
selectors?: boolean;
mediaQueries?: boolean;
color?: boolean;
};
type LightningcssLoaderOptions = {
minify?: boolean;
errorRecovery?: boolean;
targets?: string[] | string;
include?: LightningcssFeatureOptions;
exclude?: LightningcssFeatureOptions;
/**
* @deprecated Use `drafts` instead.
* This will be removed in the next major version.
*/
draft?: Drafts;
drafts?: Drafts;
nonStandard?: NonStandard;
pseudoClasses?: PseudoClasses;
unusedSymbols?: Set<String>;
};
targets
browserslist query string.
Here are some examples of setting targets.
- Setting a browserslist query string:
const loader = {
loader: 'builtin:lightningcss-loader',
/** @type {import('@rspack/core').LightningcssLoaderOptions} */
options: {
targets: 'ie 10',
},
};
- Setting an array of browserslist query strings:
const loader = {
loader: 'builtin:lightningcss-loader',
/** @type {import('@rspack/core').LightningcssLoaderOptions} */
options: {
targets: ['chrome >= 87', 'edge >= 88', '> 0.5%'],
},
};
