Builtin lightningcss-loader
Lightning CSS is a high performance CSS parser, transformer and minifier written in Rust. It supports parsing and transforming many modern CSS features into syntax supported by target browsers, and also provides a better compression ratio.
Rspack provides a built-in builtin:lightningcss-loader, which is based on Lightning CSS to transform CSS. It can replace the postcss-loader and autoprefixer for CSS syntax downgrading, prefixing, and other functionalities, offering better performance.
Example
To use builtin:lightningcss-loader in your project, you need to configure it as follows.
rspack.config.mjs
import { rspack } from '@rspack/core';
export default {
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:
rspack.config.mjs
export default {
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%'],
},
};
