Replace gulp-clean-css with postcss-lightningcss

config/postcss-plugins-default.js

@@ -19,15 +19,6 @@ function postCssPlugins(config, stylesheet) {
     let purgeCss = purgeCssConfig && !purgeCssDisabled;
 
     return [
-        $.autoprefixer(),
-        $.postcssurl({
-            url: function (asset) {
-                if (!asset.url || asset.url.indexOf("base64") !== -1) {
-                    return asset.url;
-                }
-                return $.path.relative(`${config.webdir}/${stylesheet.destDir}/`, asset.absolutePath).split("\\").join("/");
-            }
-        }),
         // conditionally run PurgeCSS if any config (local or global) was found
         purgeCss ? $.purgecss({
             content: purgeCssConfig.content,
@@ -38,7 +29,17 @@ function postCssPlugins(config, stylesheet) {
                 }
             ],
             safelist: purgeCssConfig.safelist
-        }) : false
+        }) : false,
+        $.postcssurl({
+            url: function (asset) {
+                if (!asset.url || asset.url.indexOf("base64") !== -1) {
+                    return asset.url;
+                }
+                return $.path.relative(`${config.webdir}/${stylesheet.destDir}/`, asset.absolutePath).split("\\").join("/");
+            }
+        }),
+        $.autoprefixer(),
+        $.lightningcss({ sourceMap: false }),
     ].filter(Boolean); // Strip falsy values (this enables conditional plugins like PurgeCSS)
 }
 

package.json

@@ -24,6 +24,7 @@
     "gulp-terser": "^2.0.1",
     "minimist": "^1.2.0",
     "postcss": "^8.0.9",
+    "postcss-lightningcss": "^0.9.0",
     "postcss-url": "^10.1.3",
     "stylelint": "^14.1.0",
     "stylelint-config-sass-guidelines": "^9.0.1",

plugins/index.js

@@ -21,6 +21,7 @@ module.exports = function(config) {
     $['log'] = require('fancy-log');
     $['path'] = require('path');
     $['postcssurl'] = require('postcss-url');
+    $['lightningcss'] = require('postcss-lightningcss');
     $['purgecss'] = require('@fullhuman/postcss-purgecss');
     $['through2'] = require('through2');
     $['webpack'] = require('webpack');

tasks/styles.js

@@ -18,7 +18,6 @@ function styles(gulp, $, config) {
                 }).on('error', $.sass.logError))
                 .pipe($.postcss(config.styles.postCssPlugins(config, stylesheet)))
                 .pipe($.concat(stylesheet.name))
-                .pipe($.cleanCss({ compatibility: 'ie11' }))
                 .pipe(config.development ? $.sourcemaps.write('.') : $.through2.obj())
                 .pipe(gulp.dest(`${config.webdir}/${stylesheet.destDir}`))
                 .pipe($.browserSync.reload({ stream: true }));