Merge pull request #125 from KidkArolis/lightningcss

Replace postcss with lightningcss, use css-loader's import functionality

CHANGELOG.md

@@ -3,6 +3,7 @@
 **Replacing webpack with rspack! 🎉**
 
 - Breaking change: Replaces `webpack` with `rspack` - this adds a significant performance boost to jetpack. This is largely backwards compatible. However, if you customise your webpack in jetpack.config.js you might need to read the rspack [migration guides](https://rspack.dev/guide/migration/webpack).
+- Breaking change: Replaces `postcss` with the faster `lightningcss` via rspack's builtin loaders. It serves the same purpose of lowering css syntax for older browsers.
 - Upgrade `sass-loader` to use the modern `sass-embedded` which is significantly faster, this should be backwards compatible, but expect sass warnings if you're using older sass syntax.
 
 # 2.1.0

docs/01-configuration-options.md

@@ -122,12 +122,14 @@ module.exports = {
     // css modules
     modules: false,
 
-    // a shortcut for setting postcss-preset-env features
-    // by default postcss-preset-env already autoprefixes your css
-    // and enables stage 2 features https://preset-env.cssdb.org/features#stage-2
-    // this allows you to turn on extra features
-    // e.g. { 'nesting-rules': true, 'custom-media-queries': true }
-    features: {},
+    // a shortcut for setting lightningcss feature flags
+    // e.g. { 'nesting': true, colorFunction: true }
+    // see https://rspack.dev/guide/features/builtin-lightningcss-loader#options
+    // and https://lightningcss.dev/transpilation.html
+    features: {
+      include: {},
+      exclude: {},
+    },
 
     // when using Sass, you can specify paths to your global scss resources
     // so that you can use your shared variables & mixins across all Sass styles
@@ -238,7 +240,3 @@ module.exports = {
 ### jetpack/rspack
 
 An export of the rspack module used by jetpack. Useful to access rspack's plugins, etc.
-
-### jetpack/postcss-\*
-
-Several PostCSS modules useful if you're overriding PostCSS config. See [Customizing PostCSS](./04-customizing-postcss.md) for more details

docs/05-customizing-browserslist.md

@@ -1,6 +1,6 @@
 # Customizing browserslist
 
-Jetpack compiles your code using `swc-loader` and `postcss-preset-env` plugins to ensure the code is ready for all the browsers you support. Those projects follow the lovely [browserlist](https://github.com/browserslist/browserslist) convention.
+Jetpack compiles your code using `swc-loader` and rspack's `builtin:lightningcss-loader` plugins to ensure the code is ready for all the browsers you support. Those projects follow the lovely [browserlist](https://github.com/browserslist/browserslist) convention.
 
 Jetpack supports differential serving, that is it can produce 2 bundles - modern and legacy. By default jetpack only builds a modern bundle using the `defaults` [browserslist query](https://browsersl.ist/#q=defaults):
 

docs/07-differential-serving.md

@@ -81,7 +81,7 @@ app.listen(3000, function () {
 })
 ```
 
-This is the most convenient option, but can be undesirable if you'd like to avoid shipping the entire jetpack package with all of it's dependencies (i.e. `rspack`, `swc`, `postcss`, etc.) to your production apps. To avoid that, consider installing `jetpack` as a dev dependency and using the standalone `jetpack-serve` package instead.
+This is the most convenient option, but can be undesirable if you'd like to avoid shipping the entire jetpack package with all of it's dependencies (i.e. `rspack`, `swc`, `sass-embedded`, etc.) to your production apps. To avoid that, consider installing `jetpack` as a dev dependency and using the standalone `jetpack-serve` package instead.
 
 ### jetpack-serve package
 

lib/options.js

@@ -158,8 +158,11 @@ module.exports = function options(command = 'dev', program = {}) {
         // css modules
         modules: false,
 
-        // a shortcut for setting postcss-preset-env features
-        features: {}
+        // a shortcut for setting lightningcss-loader features
+        features: {
+          include: null,
+          exclude: null
+        }
       },
       options.css
     ),

lib/webpack.css.js

@@ -1,15 +1,6 @@
-const postcssrc = require('postcss-load-config')
 const browsers = require('./browsers')
 
 module.exports = async (config, options) => {
-  // allow overriding postcss config
-  let postcssConfigExists = true
-  try {
-    await postcssrc({}, options.dir)
-  } catch (err) {
-    postcssConfigExists = false
-  }
-
   config.module.rules[0].oneOf.push({
     test: /\.css$/,
     use: [
@@ -21,7 +12,6 @@ module.exports = async (config, options) => {
       {
         loader: require.resolve('css-loader'),
         options: {
-          import: false,
           importLoaders: 1,
           sourceMap: false,
           ...(options.css.modules && {
@@ -35,34 +25,21 @@ module.exports = async (config, options) => {
         }
       },
       {
-        loader: require.resolve('postcss-loader'),
+        loader: 'builtin:lightningcss-loader',
         options: {
           sourceMap: !!options.sourceMaps,
-          ...(!postcssConfigExists && {
-            postcssOptions: {
-              plugins: [
-                require('postcss-import')(),
-                require('postcss-flexbugs-fixes')(),
-                require('postcss-preset-env')({
-                  browsers: browsers.query(options),
-                  autoprefixer: {
-                    browsers: undefined,
-                    overrideBrowserslist: browsers.query(options)
-                  },
-                  features: options.css.features
-                })
-              ].filter(Boolean)
-            }
-          })
+          targets: browsers.query(options),
+          include: options.css?.features?.include,
+          exclude: options.css?.features?.exclude
         }
       }
     ]
   })
 
   if (options.production) {
-    const MiniCssExtractPlugin = require('@rspack/core').CssExtractRspackPlugin
+    const { CssExtractRspackPlugin } = require('@rspack/core')
     config.plugins.push(
-      new MiniCssExtractPlugin({
+      new CssExtractRspackPlugin({
         filename: '[name].[contenthash:8].css',
         chunkFilename: '[name].[contenthash:8].chunk.css',
         // if css modules are used in the project, then
@@ -71,8 +48,8 @@ module.exports = async (config, options) => {
       })
     )
     if (options.minify) {
-      const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
-      config.optimization.minimizer.push(new CssMinimizerPlugin())
+      const { LightningCssMinimizerRspackPlugin } = require('@rspack/core')
+      config.optimization.minimizer.push(new LightningCssMinimizerRspackPlugin())
     }
   }
 }

lib/webpack.scss.js

@@ -1,26 +1,17 @@
-const postcssrc = require('postcss-load-config')
 const browsers = require('./browsers')
-const MiniCssExtractPlugin = () => require('@rspack/core').CssExtractRspackPlugin
 
 module.exports = async (config, options) => {
-  // allow overriding postcss config
-  let postcssConfigExists = true
-  try {
-    await postcssrc({}, options.dir)
-  } catch (err) {
-    postcssConfigExists = false
-  }
-
   config.module.rules[0].oneOf.push({
     test: /\.scss$/,
     use: [
       {
-        loader: options.production ? MiniCssExtractPlugin().loader : require.resolve('style-loader')
+        loader: options.production
+          ? require('@rspack/core').CssExtractRspackPlugin.loader
+          : require.resolve('style-loader')
       },
       {
         loader: require.resolve('css-loader'),
         options: {
-          import: false,
           importLoaders: options.css.resources ? 3 : 2,
           sourceMap: false,
           ...(options.css.modules && {
@@ -34,25 +25,12 @@ module.exports = async (config, options) => {
         }
       },
       {
-        loader: require.resolve('postcss-loader'),
+        loader: 'builtin:lightningcss-loader',
         options: {
           sourceMap: !!options.sourceMaps,
-          ...(!postcssConfigExists && {
-            postcssOptions: {
-              plugins: [
-                require('postcss-import')(),
-                require('postcss-flexbugs-fixes')(),
-                require('postcss-preset-env')({
-                  browsers: browsers.query(options),
-                  autoprefixer: {
-                    browsers: undefined,
-                    overrideBrowserslist: browsers.query(options)
-                  },
-                  features: options.css.features
-                })
-              ].filter(Boolean)
-            }
-          })
+          targets: browsers.query(options),
+          include: options.css?.features?.include,
+          exclude: options.css?.features?.exclude
         }
       },
       {