Better minify inline CSS

server/sonar-vsts/config/utils.js

@@ -17,15 +17,11 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-const cssMinimizeOptions = {
-  discardComments: { removeAll: true }
-};
-
-const cssLoader = ({ production }) => ({
+const cssLoader = () => ({
   loader: 'css-loader',
   options: {
     importLoaders: 1,
-    minimize: production && cssMinimizeOptions,
+    modules: 'global',
     url: false
   }
 });
@@ -39,17 +35,15 @@ Object.keys(theme).forEach(key => {
   }
 });
 
-const postcssLoader = () => ({
+const postcssLoader = production => ({
   loader: 'postcss-loader',
   options: {
     ident: 'postcss',
     plugins: () => [
       require('autoprefixer'),
-      require('postcss-custom-properties')({
-        importFrom: { customProperties },
-        preserve: false
-      }),
-      require('postcss-calc')
+      require('postcss-custom-properties')({ importFrom: { customProperties }, preserve: false }),
+      require('postcss-calc'),
+      ...(production ? [require('cssnano')({ calc: false, svgo: false })] : [])
     ]
   }
 });

server/sonar-vsts/config/webpack.config.js

@@ -62,9 +62,7 @@ module.exports = ({ production = true }) => ({
       },
       {
         test: /\.css$/,
-        use: ['style-loader', utils.cssLoader({ production }), utils.postcssLoader()].filter(
-          Boolean
-        )
+        use: ['style-loader', utils.cssLoader(), utils.postcssLoader(true)]
       }
     ].filter(Boolean)
   },

server/sonar-vsts/package.json

@@ -40,7 +40,8 @@
     "chalk": "2.4.1",
     "clean-webpack-plugin": "2.0.1",
     "copy-webpack-plugin": "5.0.1",
-    "css-loader": "1.0.1",
+    "css-loader": "2.1.1",
+    "cssnano": "4.1.10",
     "enzyme": "3.9.0",
     "enzyme-adapter-react-16": "1.10.0",
     "enzyme-to-json": "3.3.5",
@@ -55,7 +56,7 @@
     "html-webpack-plugin": "3.2.0",
     "jest": "24.5.0",
     "postcss-calc": "7.0.1",
-    "postcss-custom-properties": "8.0.9",
+    "postcss-custom-properties": "8.0.10",
     "postcss-loader": "3.0.0",
     "prettier": "1.16.4",
     "react-dev-utils": "5.0.0",

server/sonar-web/config/utils.js

@@ -17,15 +17,11 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-const cssMinimizeOptions = {
-  discardComments: { removeAll: true }
-};
-
-const cssLoader = ({ production }) => ({
+const cssLoader = () => ({
   loader: 'css-loader',
   options: {
     importLoaders: 1,
-    minimize: production && cssMinimizeOptions,
+    modules: 'global',
     url: false
   }
 });
@@ -39,17 +35,15 @@ Object.keys(theme).forEach(key => {
   }
 });
 
-const postcssLoader = () => ({
+const postcssLoader = production => ({
   loader: 'postcss-loader',
   options: {
     ident: 'postcss',
     plugins: () => [
       require('autoprefixer'),
-      require('postcss-custom-properties')({
-        importFrom: { customProperties },
-        preserve: false
-      }),
-      require('postcss-calc')
+      require('postcss-custom-properties')({ importFrom: { customProperties }, preserve: false }),
+      require('postcss-calc'),
+      ...(production ? [require('cssnano')({ calc: false, svgo: false })] : [])
     ]
   }
 });

server/sonar-web/config/webpack.config.js

@@ -83,15 +83,15 @@ module.exports = ({ production = true, release = false }) => {
       include: path.resolve(__dirname, '../src/main/js/app/styles'),
       use: [
         production ? MiniCssExtractPlugin.loader : 'style-loader',
-        utils.cssLoader({ production }),
-        utils.postcssLoader()
+        utils.cssLoader(),
+        utils.postcssLoader(production)
       ]
     },
     {
       // inline all other styles
       test: /\.css$/,
       exclude: path.resolve(__dirname, '../src/main/js/app/styles'),
-      use: ['style-loader', utils.cssLoader({ production }), utils.postcssLoader()]
+      use: ['style-loader', utils.cssLoader(), utils.postcssLoader(production)]
     },
     {
       test: /\.md$/,

server/sonar-web/package.json

@@ -90,7 +90,8 @@
     "chalk": "2.4.1",
     "clean-webpack-plugin": "2.0.1",
     "copy-webpack-plugin": "5.0.1",
-    "css-loader": "1.0.1",
+    "css-loader": "2.1.1",
+    "cssnano": "4.1.10",
     "enzyme": "3.9.0",
     "enzyme-adapter-react-16": "1.10.0",
     "enzyme-to-json": "3.3.5",
@@ -109,9 +110,9 @@
     "jest": "24.5.0",
     "lint-staged": "7.3.0",
     "lodash-webpack-plugin": "0.11.5",
-    "mini-css-extract-plugin": "0.5.0",
+    "mini-css-extract-plugin": "0.6.0",
     "postcss-calc": "7.0.1",
-    "postcss-custom-properties": "8.0.9",
+    "postcss-custom-properties": "8.0.10",
     "postcss-loader": "3.0.0",
     "prettier": "1.16.4",
     "raw-loader": "2.0.0",