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 = {
errorRecovery?: boolean;
targets?: Targets | string[] | string;
include?: LightningcssFeatureOptions;
exclude?: LightningcssFeatureOptions;
draft?: Drafts;
nonStandard?: NonStandard;
pseudoClasses?: PseudoClasses;
unusedSymbols?: Set<String>;
};
targets
The targets option supports multiple formats, it can be set as a browserslist query string, a browserslist query result, or the native targets of lightningcss.
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%'],
},
};
- Setting the browserslist query result:
const browserslist = require('browserslist');
const loader = {
loader: 'builtin:lightningcss-loader',
/** @type {import('@rspack/core').LightningcssLoaderOptions} */
options: {
targets: browserslist('> 0.2%'),
},
};
- Setting as lightningcss's native
targets, which relies on lightningcss's internal browserslistToTargets method to convert a browserslist query result to lightningcss's targets format:
const browserslist = require('browserslist');
const lightningcss = require('lightningcss');
const loader = {
loader: 'builtin:lightningcss-loader',
/** @type {import('@rspack/core').LightningcssLoaderOptions} */
options: {
targets: lightningcss.browserslistToTargets(browserslist('> 0.2%')),
},
};
