[Manual Backport 2.x] Reduce the amount of comments in compiled CSS and bundled CSS-in-JS

CHANGELOG.md

@@ -18,7 +18,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Saved Object Service] Add Repository Factory Provider ([#4149](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4149))
 - Enable plugins to augment visualizations with additional data and context ([#4361](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4361))
 - New management overview page and rename stack management to dashboard management ([#4287](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4287))
-
+- Reduce the amount of comments in compiled CSS ([#4648](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4648))
 
 ### 🐛 Bug Fixes
 

packages/osd-optimizer/package.json

@@ -48,6 +48,7 @@
     "@types/watchpack": "^1.1.6",
     "@types/webpack": "^4.41.31",
     "babel-loader": "^8.2.3",
+    "comment-stripper": "^0.0.4",
     "css-loader": "^5.2.7",
     "file-loader": "^6.2.0",
     "loader-utils": "^2.0.4",

packages/osd-optimizer/src/worker/webpack.config.ts

@@ -137,6 +137,12 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker:
                 sourceMap: !worker.dist,
               },
             },
+            {
+              loader: 'comment-stripper',
+              options: {
+                language: 'css',
+              },
+            },
           ],
         },
         {
@@ -164,6 +170,12 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker:
                     },
                   },
                 },
+                {
+                  loader: 'comment-stripper',
+                  options: {
+                    language: 'css',
+                  },
+                },
                 {
                   loader: 'sass-loader',
                   options: {

packages/osd-ui-framework/Gruntfile.js

@@ -28,6 +28,7 @@
  * under the License.
  */
 
+const { strip } = require('comment-stripper');
 const sass = require('node-sass');
 const postcss = require('postcss');
 const postcssConfig = require('@osd/optimizer/postcss.config.js');
@@ -91,7 +92,10 @@ module.exports = function (grunt) {
           }
 
           postcss([postcssConfig])
-            .process(result.css, { from: src, to: dest })
+            .process(strip(result.css.toString('utf8'), { language: 'css' }), {
+              from: src,
+              to: dest,
+            })
             .then((result) => {
               grunt.file.write(dest, result.css);