1- # parcel-css -loader
1+ # lightningcss -loader
22
3- Speed up your Webpack build with [ parcel css ] ( https://github.com/parcel-bundler/parcel-css )
3+ Speed up your Webpack build with [ lightningcss ] ( https://github.com/parcel-bundler/lightningcss )
44
55## Install
66
77``` bash
8- pnpm add -D parcel-css -loader
8+ pnpm add -D lightningcss -loader
99```
1010
1111## Usage
@@ -16,13 +16,13 @@ webpack config example:
1616
1717``` js
1818// webpack.config.js
19- const { ParcelCssMinifyPlugin } = require (' parcel-css -loader' )
19+ const { LightningCssMinifyPlugin } = require (' lightningcss -loader' )
2020
2121module .exports = {
2222 optimization: {
2323 minimize: true ,
2424 minimizer: [
25- new ParcelCssMinifyPlugin ()
25+ new LightningCssMinifyPlugin ()
2626 ]
2727 },
2828};
@@ -36,8 +36,8 @@ webpack config example:
3636``` diff
3737// webpack.config.js
3838
39- // need install `@parcel/css `
40- const parcelCSS = require('@parcel/css ')
39+ // need install `lightningcss `
40+ const LightningCSS = require('lightningcss ')
4141
4242module.exports = {
4343 module: {
@@ -49,9 +49,9 @@ module.exports = {
4949 'css-loader',
5050- 'postcss-loader',
5151+ {
52- + loader: 'parcel-css -loader',
52+ + loader: 'lightningcss -loader',
5353+ options: {
54- + implementation: parcelCSS
54+ + implementation: LightningCSS
5555+ }
5656+ }
5757 'sass-loader'
@@ -62,21 +62,21 @@ module.exports = {
6262};
6363```
6464
65- parcel css can replace ` autoprefixer ` and ` postcss-preset-env ` , if you use custom postcss plugins, you can use both ` parcel-css -loader` and ` postcss-loader ` .
65+ lightningcss can replace ` autoprefixer ` and ` postcss-preset-env ` , if you use custom postcss plugins, you can use both ` lightningcss -loader` and ` postcss-loader ` .
6666
6767## Config
6868
6969``` js
7070// webpack.config.js
71- const { ParcelCssMinifyPlugin } = require (' parcel-css -loader' )
72- const parcelCss = require (' @parcel/css ' )
71+ const { LightningCssMinifyPlugin } = require (' lightningcss -loader' )
72+ const LightningCSS = require (' lightningcss ' )
7373
7474module .exports = {
7575 optimization: {
7676 minimizer: [
77- new ParcelCssMinifyPlugin ({
78- implementation: parcelCss
79- // ... parcel css options
77+ new LightningCssMinifyPlugin ({
78+ implementation: LightningCSS
79+ // ... lightningcss options
8080 })
8181 ]
8282 },
@@ -85,6 +85,21 @@ module.exports = {
8585
8686You can see type tips for detailed configurable items
8787
88+ ## Migration from ` parcel-css-loader `
89+
90+ 1 . Remove and install:
91+
92+ ``` bash
93+ pnpm remove parcel-css-loader @parcel/css
94+ pnpm i -D lightningcss-loader lightningcss
95+ ```
96+
97+ 2. Search code and replace to new name:
98+
99+ - ` parcel-css-loader` -> ` lightningcss-loader`
100+
101+ - ` ParcelCssMinifyPlugin` -> ` LightningCssMinifyPlugin`
102+
88103# # License
89104
90105MIT
0 commit comments