feat(webpack): use newest cssnano for css optimization

and add cssnano config in project

packages/generator-nitro/generators/app/templates/cssnano.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+	preset: [
+		'default',
+		// if the cssnano optimisation causes issues, features can be configured here
+		// see https://cssnano.github.io/cssnano/docs/what-are-optimisations/
+		// {
+		// 	cssDeclarationSorter: false,
+		// },
+	]
+};

packages/nitro-webpack/package.json

@@ -32,14 +32,14 @@
     "autoprefixer": "10.4.19",
     "case-sensitive-paths-webpack-plugin": "2.4.0",
     "css-loader": "5.2.7",
+    "cssnano": "6.1.1",
     "file-loader": "6.2.0",
     "handlebars-loader": "1.7.3",
     "iconfont-webpack-plugin": "5.0.1",
     "imagemin": "7.0.1",
     "img-loader": "4.0.0",
     "js-config-webpack-plugin": "2.0.3",
     "mini-css-extract-plugin": "1.6.2",
-    "optimize-css-assets-webpack-plugin": "6.0.1",
     "postcss": "8.4.38",
     "postcss-loader": "4.3.0",
     "resolve-url-loader": "5.0.0",

packages/nitro-webpack/webpack-config/webpack.config.prod.js

@@ -6,7 +6,6 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const JsConfigWebpackPlugin = require('js-config-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const TsConfigWebpackPlugin = require('ts-config-webpack-plugin');
 const WebpackBar = require('webpackbar');
 const DynamicAliasResolverPlugin = require('../plugins/dynamicAliasResolver');
@@ -143,6 +142,7 @@ module.exports = (options = { rules: {}, features: {} }) => {
 										// grid: 'autoplace': enable autoprefixer grid translations and include autoplacement support.
 										// not enabled - use `/* autoprefixer grid: autoplace */` in your css file
 									}),
+									require('cssnano'),
 								],
 							};
 						},
@@ -163,13 +163,6 @@ module.exports = (options = { rules: {}, features: {} }) => {
 				filename: 'css/[name].min.css',
 				chunkFilename: 'css/[name]-[contenthash:7].min.css',
 			}),
-			new OptimizeCSSAssetsPlugin({
-				cssProcessorOptions: {
-					map: {
-						inline: false,
-					},
-				},
-			})
 		);
 	}
 

packages/project-nitro-twig/cssnano.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+	preset: [
+		'default',
+		// if the cssnano optimisation causes issues, features can be configured here
+		// see https://cssnano.github.io/cssnano/docs/what-are-optimisations/
+		// {
+		// 	cssDeclarationSorter: false,
+		// },
+	]
+};

packages/project-nitro-typescript/cssnano.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+	preset: [
+		'default',
+		// if the cssnano optimisation causes issues, features can be configured here
+		// see https://cssnano.github.io/cssnano/docs/what-are-optimisations/
+		// {
+		// 	cssDeclarationSorter: false,
+		// },
+	]
+};

packages/project-nitro/cssnano.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+	preset: [
+		'default',
+		// if the cssnano optimisation causes issues, features can be configured here
+		// see https://cssnano.github.io/cssnano/docs/what-are-optimisations/
+		// {
+		// 	cssDeclarationSorter: false,
+		// },
+	]
+};