Package Exports

lightningcss-loader
lightningcss-loader/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (lightningcss-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

lightningcss-loader

Speed up your Webpack build with lightningcss

Install

  pnpm add -D lightningcss-loader

Usage

Optimize css

webpack config example:

// webpack.config.js
const { LightningCssMinifyPlugin } = require('lightningcss-loader')

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new LightningCssMinifyPlugin()
    ]
  },
};

Instead of postcss-loader

webpack config example:

// 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

// 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

Advanced

Custom media queries

lightningcss-loader uses a heuristic methods to support Custom media queries syntax.

Make sure the defined @custom-media file no other CSS. otherwise it may generate duplicate CSS and increase the bundle size.

Migration from `parcel-css-loader`

Remove and install:

  pnpm remove parcel-css-loader @parcel/css
  pnpm i -D lightningcss-loader lightningcss

Search code and replace to new name:
- parcel-css-loader -> lightningcss-loader
- ParcelCssMinifyPlugin -> LightningCssMinifyPlugin

License

MIT