1
- # parcel-css -loader
1
+ # lightningcss -loader
2
2
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 )
4
4
5
5
## Install
6
6
7
7
``` bash
8
- pnpm add -D parcel-css -loader
8
+ pnpm add -D lightningcss -loader
9
9
```
10
10
11
11
## Usage
@@ -16,13 +16,13 @@ webpack config example:
16
16
17
17
``` js
18
18
// webpack.config.js
19
- const { ParcelCssMinifyPlugin } = require (' parcel-css -loader' )
19
+ const { LightningCssMinifyPlugin } = require (' lightningcss -loader' )
20
20
21
21
module .exports = {
22
22
optimization: {
23
23
minimize: true ,
24
24
minimizer: [
25
- new ParcelCssMinifyPlugin ()
25
+ new LightningCssMinifyPlugin ()
26
26
]
27
27
},
28
28
};
@@ -36,8 +36,8 @@ webpack config example:
36
36
``` diff
37
37
// webpack.config.js
38
38
39
- // need install `@parcel/css `
40
- const parcelCSS = require('@parcel/css ')
39
+ // need install `lightningcss `
40
+ const LightningCSS = require('lightningcss ')
41
41
42
42
module.exports = {
43
43
module: {
@@ -49,9 +49,9 @@ module.exports = {
49
49
'css-loader',
50
50
- 'postcss-loader',
51
51
+ {
52
- + loader: 'parcel-css -loader',
52
+ + loader: 'lightningcss -loader',
53
53
+ options: {
54
- + implementation: parcelCSS
54
+ + implementation: LightningCSS
55
55
+ }
56
56
+ }
57
57
'sass-loader'
@@ -62,21 +62,21 @@ module.exports = {
62
62
};
63
63
```
64
64
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 ` .
66
66
67
67
## Config
68
68
69
69
``` js
70
70
// 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 ' )
73
73
74
74
module .exports = {
75
75
optimization: {
76
76
minimizer: [
77
- new ParcelCssMinifyPlugin ({
78
- implementation: parcelCss
79
- // ... parcel css options
77
+ new LightningCssMinifyPlugin ({
78
+ implementation: LightningCSS
79
+ // ... lightningcss options
80
80
})
81
81
]
82
82
},
@@ -85,6 +85,21 @@ module.exports = {
85
85
86
86
You can see type tips for detailed configurable items
87
87
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
+
88
103
# # License
89
104
90
105
MIT
0 commit comments