From c5ed484680f9912b951678dfa20227b70f541519 Mon Sep 17 00:00:00 2001
From: Miki <miki@amazon.com>
Date: Thu, 29 Jun 2023 18:08:24 -0700
Subject: [PATCH] Reduce the amount of comments in compiled CSS and bundled
 CSS-in-JS

Signed-off-by: Miki <miki@amazon.com>
---
 .../osd-optimizer/src/worker/webpack.config.ts    |  7 +++++++
 packages/osd-ui-framework/Gruntfile.js            |  3 ++-
 packages/osd-ui-framework/package.json            |  1 +
 packages/osd-ui-shared-deps/package.json          |  3 +++
 packages/osd-ui-shared-deps/webpack.config.js     | 15 ++++++++++++++-
 yarn.lock                                         |  7 +++++++
 6 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/packages/osd-optimizer/src/worker/webpack.config.ts b/packages/osd-optimizer/src/worker/webpack.config.ts
index f5272c207548..f5ef2880eb16 100644
--- a/packages/osd-optimizer/src/worker/webpack.config.ts
+++ b/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,7 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker:
                     },
                   },
                 },
+                'comment-stripper',
                 {
                   loader: 'sass-loader',
                   options: {
diff --git a/packages/osd-ui-framework/Gruntfile.js b/packages/osd-ui-framework/Gruntfile.js
index e0565b103736..0a052ef2c185 100644
--- a/packages/osd-ui-framework/Gruntfile.js
+++ b/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,7 @@ module.exports = function (grunt) {
           }
 
           postcss([postcssConfig])
-            .process(result.css, { from: src, to: dest })
+            .process(strip(result.css.toString('utf8')), { from: src, to: dest })
             .then((result) => {
               grunt.file.write(dest, result.css);
 
diff --git a/packages/osd-ui-framework/package.json b/packages/osd-ui-framework/package.json
index 6d2cd0ac6f1b..3a9d367397a7 100644
--- a/packages/osd-ui-framework/package.json
+++ b/packages/osd-ui-framework/package.json
@@ -26,6 +26,7 @@
     "@elastic/eui": "npm:@opensearch-project/oui@1.3.0-alpha.2",
     "@osd/babel-preset": "1.0.0",
     "@osd/optimizer": "1.0.0",
+    "comment-stripper": "^0.0.1",
     "grunt": "^1.5.2",
     "grunt-babel": "^8.0.0",
     "grunt-contrib-clean": "^2.0.0",
diff --git a/packages/osd-ui-shared-deps/package.json b/packages/osd-ui-shared-deps/package.json
index b4ddd5b7a63a..036e80048ce2 100644
--- a/packages/osd-ui-shared-deps/package.json
+++ b/packages/osd-ui-shared-deps/package.json
@@ -17,6 +17,7 @@
     "abortcontroller-polyfill": "^1.4.0",
     "angular": "^1.8.2",
     "axios": "^0.27.2",
+    "comment-stripper": "^0.0.1",
     "compression-webpack-plugin": "npm:@amoo-miki/compression-webpack-plugin@4.0.1-rc.1",
     "core-js": "^3.6.5",
     "custom-event-polyfill": "^0.3.0",
@@ -42,6 +43,8 @@
     "@osd/babel-preset": "1.0.0",
     "@osd/dev-utils": "1.0.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "node-sass": "^8.0.0",
+    "sass-loader": "^10.4.1",
     "css-loader": "^5.2.7",
     "del": "^6.1.1",
     "loader-utils": "^2.0.4",
diff --git a/packages/osd-ui-shared-deps/webpack.config.js b/packages/osd-ui-shared-deps/webpack.config.js
index 8acc43fb1793..951f7a4d4879 100644
--- a/packages/osd-ui-shared-deps/webpack.config.js
+++ b/packages/osd-ui-shared-deps/webpack.config.js
@@ -76,7 +76,20 @@ exports.getWebpackConfig = ({ dev = false } = {}) => ({
       },
       {
         test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'comment-stripper',
+            options: {
+              language: 'css',
+            },
+          },
+        ],
+      },
+      {
+        test: /\.scss$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'comment-stripper', 'sass-loader'],
       },
       {
         include: [require.resolve('./theme.ts')],
diff --git a/yarn.lock b/yarn.lock
index 93f11b3f56b7..eb9710abfb14 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6100,6 +6100,13 @@ commander@^5.0.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
   integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
 
+comment-stripper@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/comment-stripper/-/comment-stripper-0.0.1.tgz#01759a158df1de081593fa5a2faf22ed7ac410c5"
+  integrity sha512-7oPLIr3U7tamLi6x2lsxBpyBqHNdEn1fNkz31FBC9nLQl348Gb/3TCdsPDjRGa99oulmGwIZsx5ArxxVvlizWA==
+  dependencies:
+    loader-utils "^2.0.0"
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"