Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fz6m/lightningcss-loader
Speed up your Webpack build with lightningcss (Original parcel-css-loader)
https://github.com/fz6m/lightningcss-loader
autoprefixer lightningcss parcel-css postcss webpack-css-minifier webpack-loader
Last synced: 3 months ago
JSON representation
Speed up your Webpack build with lightningcss (Original parcel-css-loader)
- Host: GitHub
- URL: https://github.com/fz6m/lightningcss-loader
- Owner: fz6m
- License: mit
- Created: 2022-02-20T19:49:45.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-03T12:01:38.000Z (about 2 years ago)
- Last Synced: 2024-10-14T17:06:11.834Z (3 months ago)
- Topics: autoprefixer, lightningcss, parcel-css, postcss, webpack-css-minifier, webpack-loader
- Language: TypeScript
- Homepage:
- Size: 266 KB
- Stars: 55
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# lightningcss-loader
Speed up your Webpack build with [lightningcss](https://github.com/parcel-bundler/lightningcss)
## Install
```bash
pnpm add -D lightningcss-loader
```
## Usage
### Optimize css
webpack config example:
```js
// webpack.config.js
const { LightningCssMinifyPlugin } = require('lightningcss-loader')
module.exports = {
optimization: {
minimize: true,
minimizer: [
new LightningCssMinifyPlugin()
]
},
};
```
### Instead postcss-loader
webpack config example:
```diff
// webpack.config.js
// need install `lightningcss`
const LightningCSS = require('lightningcss')
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: [
'style-loader', // or MiniCssExtractPlugin.loader
'css-loader',
- 'postcss-loader',
+ {
+ loader: 'lightningcss-loader',
+ options: {
+ implementation: LightningCSS
+ }
+ }
'sass-loader'
],
},
],
},
};
```
lightningcss can replace `autoprefixer` and `postcss-preset-env`, if you use custom postcss plugins, you can use both `lightningcss-loader` and `postcss-loader`.
## Config
```js
// webpack.config.js
const { LightningCssMinifyPlugin } = require('lightningcss-loader')
const LightningCSS = require('lightningcss')
module.exports = {
optimization: {
minimizer: [
new LightningCssMinifyPlugin({
implementation: LightningCSS
// ... lightningcss options
})
]
},
};
```
You can see type tips for detailed configurable items
## Migration from `parcel-css-loader`
1. Remove and install:
```bash
pnpm remove parcel-css-loader @parcel/css
pnpm i -D lightningcss-loader lightningcss
```
2. Search code and replace to new name:
- `parcel-css-loader` -> `lightningcss-loader`
- `ParcelCssMinifyPlugin` -> `LightningCssMinifyPlugin`
## License
MIT