Replace node-sass with sass-embedded (opensearch-project#5338)

* Dart's `sass` uses a lot more memory that `node-sass` which causes failures with CI on Windows when building platform plugins: pagefile size was bumped.

Signed-off-by: Miki <miki@amazon.com>

(cherry picked from commit f822702)
Signed-off-by: Miki <miki@amazon.com>

.github/workflows/build_and_test_workflow.yml

@@ -47,6 +47,14 @@ jobs:
         run: |
           git config --global core.autocrlf false
 
+      - name: Configure pagefile size (Windows only)
+        if: matrix.os == 'windows-latest'
+        uses: al-cheb/configure-pagefile-action@v1.3
+        with:
+          minimum-size: 16GB
+          maximum-size: 64GB
+          disk-root: "C:"
+
       - name: Checkout code
         uses: actions/checkout@v3
 
@@ -146,6 +154,14 @@ jobs:
         run: |
           git config --global core.autocrlf false
 
+      - name: Configure pagefile size (Windows only)
+        if: matrix.os == 'windows-latest'
+        uses: al-cheb/configure-pagefile-action@v1.3
+        with:
+          minimum-size: 16GB
+          maximum-size: 64GB
+          disk-root: "C:"
+
       - name: Checkout code
         uses: actions/checkout@v3
 
@@ -232,6 +248,14 @@ jobs:
         run: |
           git config --global core.autocrlf false
 
+      - name: Configure pagefile size (Windows only)
+        if: matrix.os == 'windows-latest'
+        uses: al-cheb/configure-pagefile-action@v1.3
+        with:
+          minimum-size: 16GB
+          maximum-size: 64GB
+          disk-root: "C:"
+
       - name: Checkout code
         uses: actions/checkout@v3
 
@@ -334,6 +358,14 @@ jobs:
           git config --global core.autocrlf false
         working-directory: .
 
+      - name: Configure pagefile size (Windows only)
+        if: matrix.os == 'windows-latest'
+        uses: al-cheb/configure-pagefile-action@v1.3
+        with:
+          minimum-size: 16GB
+          maximum-size: 64GB
+          disk-root: "C:"
+
       - name: Checkout code
         uses: actions/checkout@v3
         with:

package.json

@@ -128,7 +128,7 @@
   "dependencies": {
     "@aws-crypto/client-node": "^3.1.1",
     "@elastic/datemath": "5.0.3",
-    "@elastic/eui": "npm:@opensearch-project/oui@1.3.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.4.0-alpha.2",
     "@elastic/good": "^9.0.1-kibana3",
     "@elastic/numeral": "^2.5.0",
     "@elastic/request-crypto": "2.0.0",

packages/osd-interpreter/package.json

@@ -27,7 +27,7 @@
     "del": "^6.1.1",
     "getopts": "^2.2.5",
     "pegjs": "0.10.0",
-    "sass-loader": "npm:@amoo-miki/sass-loader@10.4.1-node-sass-9.0.0-libsass-3.6.5",
+    "sass-loader": "npm:@amoo-miki/sass-loader@10.4.1-node-sass-9.0.0-libsass-3.6.5-with-sass-embedded.rc1",
     "style-loader": "^1.1.3",
     "supports-color": "^7.0.0",
     "url-loader": "^2.2.0",

packages/osd-optimizer/package.json

@@ -52,10 +52,10 @@
     "css-loader": "^5.2.7",
     "file-loader": "^6.2.0",
     "loader-utils": "^2.0.4",
-    "node-sass": "npm:@amoo-miki/node-sass@9.0.0-libsass-3.6.5",
+    "sass-embedded": "1.66.1",
     "postcss-loader": "^4.2.0",
     "raw-loader": "^4.0.2",
-    "sass-loader": "npm:@amoo-miki/sass-loader@10.4.1-node-sass-9.0.0-libsass-3.6.5",
+    "sass-loader": "npm:@amoo-miki/sass-loader@10.4.1-node-sass-9.0.0-libsass-3.6.5-with-sass-embedded.rc1",
     "style-loader": "^1.1.3",
     "url-loader": "^2.2.0",
     "val-loader": "^2.1.2",

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

@@ -189,9 +189,9 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker:
                       )};\n${content}`;
                     },
                     webpackImporter: false,
-                    implementation: require('node-sass'),
+                    implementation: require('sass-embedded'),
                     sassOptions: {
-                      outputStyle: 'nested',
+                      outputStyle: 'compressed',
                       includePaths: [Path.resolve(worker.repoRoot, 'node_modules')],
                       sourceMapRoot: `/${bundle.type}:${bundle.id}`,
                     },

packages/osd-ui-framework/Gruntfile.js

@@ -29,7 +29,7 @@
  */
 
 const { strip } = require('comment-stripper');
-const sass = require('node-sass');
+const sass = require('sass-embedded');
 const postcss = require('postcss');
 const postcssConfig = require('@osd/optimizer/postcss.config.js');
 
@@ -70,6 +70,26 @@ module.exports = function (grunt) {
 
   grunt.registerTask('prodBuild', ['clean:target', 'copy:makeProdBuild', 'babel:prodBuild']);
 
+  const uiFrameworkCompile = async (src, dest) => {
+    try {
+      const { css: compiledCSS } = await sass.compileAsync(src);
+      const result = await postcss([postcssConfig]).process(
+        strip(compiledCSS, { language: 'css' }),
+        {
+          from: src,
+          to: dest,
+        }
+      );
+
+      grunt.file.write(dest, result.css);
+      if (result.map) {
+        grunt.file.write(`${dest}.map`, result.map);
+      }
+    } catch (ex) {
+      grunt.log.error(ex);
+    }
+  };
+
   grunt.registerTask('compileCss', function () {
     const done = this.async();
     Promise.all([
@@ -79,34 +99,4 @@ module.exports = function (grunt) {
       uiFrameworkCompile('src/kui_next_dark.scss', 'dist/kui_next_dark.css'),
     ]).then(done);
   });
-
-  function uiFrameworkCompile(src, dest) {
-    return new Promise((resolve) => {
-      sass.render(
-        {
-          file: src,
-        },
-        function (error, result) {
-          if (error) {
-            grunt.log.error(error);
-          }
-
-          postcss([postcssConfig])
-            .process(strip(result.css.toString('utf8'), { language: 'css' }), {
-              from: src,
-              to: dest,
-            })
-            .then((result) => {
-              grunt.file.write(dest, result.css);
-
-              if (result.map) {
-                grunt.file.write(`${dest}.map`, result.map);
-              }
-
-              resolve();
-            });
-        }
-      );
-    });
-  }
 };

packages/osd-ui-framework/package.json

@@ -23,16 +23,16 @@
     "enzyme-adapter-react-16": "^1.9.1"
   },
   "devDependencies": {
-    "@elastic/eui": "npm:@opensearch-project/oui@1.3.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.4.0-alpha.2",
     "@osd/babel-preset": "1.0.0",
     "@osd/optimizer": "1.0.0",
     "comment-stripper": "^0.0.4",
     "grunt": "^1.5.2",
     "grunt-babel": "^8.0.0",
     "grunt-contrib-clean": "^2.0.0",
     "grunt-contrib-copy": "^1.0.0",
-    "node-sass": "npm:@amoo-miki/node-sass@9.0.0-libsass-3.6.5",
-    "sass-loader": "npm:@amoo-miki/sass-loader@10.4.1-node-sass-9.0.0-libsass-3.6.5",
+    "sass-embedded": "1.66.1",
+    "sass-loader": "npm:@amoo-miki/sass-loader@10.4.1-node-sass-9.0.0-libsass-3.6.5-with-sass-embedded.rc1",
     "postcss": "^8.4.5",
     "sinon": "^7.4.2"
   }

packages/osd-ui-framework/src/components/local_nav/_local_search.scss

@@ -43,7 +43,7 @@
  */
 .kuiLocalSearchAssistedInput__assistance {
   position: absolute;
-  right: $kuiFormControlHorizontalPadding / 2;
+  right: calc($kuiFormControlHorizontalPadding / 2);
   top: 50%; /* 1 */
   z-index: 2;
   transform: translateY(-50%); /* 1 */

packages/osd-ui-shared-deps/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@elastic/charts": "31.1.0",
-    "@elastic/eui": "npm:@opensearch-project/oui@1.3.0",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.4.0-alpha.2",
     "@elastic/numeral": "^2.5.0",
     "@opensearch/datemath": "5.0.3",
     "@osd/i18n": "1.0.0",
@@ -46,9 +46,9 @@
     "css-loader": "^5.2.7",
     "del": "^6.1.1",
     "loader-utils": "^2.0.4",
-    "node-sass": "npm:@amoo-miki/node-sass@9.0.0-libsass-3.6.5",
-    "sass-loader": "npm:@amoo-miki/sass-loader@10.4.1-node-sass-9.0.0-libsass-3.6.5",
+    "sass-embedded": "1.66.1",
+    "sass-loader": "npm:@amoo-miki/sass-loader@10.4.1-node-sass-9.0.0-libsass-3.6.5-with-sass-embedded.rc1",
     "val-loader": "^2.1.2",
     "webpack": "npm:@amoo-miki/webpack@4.46.0-rc.2"
   }
-}
+}

scripts/postinstall.js

@@ -30,8 +30,48 @@ const removeUnwantedFolders = async (root, unwantedNames) => {
 
   return promises;
 };
+
+const patchFile = async (file, patch) => {
+  console.log(`Patching ${file}`);
+  const patches = Array.isArray(patch) ? patch : [patch];
+  let fileContent = await fs.readFile(file, 'utf8');
+  for (const { from, to } of patches) {
+    // The splitting by `to` is to make sure we don't patch already patched ones
+    fileContent = fileContent
+      .split(to)
+      .map((token) => token.split(from))
+      .flat()
+      .join(to);
+  }
+  await fs.writeFile(file, fileContent);
+};
+
 const run = async () => {
   const promises = await removeUnwantedFolders('node_modules', ['demo', 'example', 'examples']);
+
+  promises.push(
+    patchFile('node_modules/font-awesome/scss/_variables.scss', {
+      from: '(30em / 14)',
+      to: 'calc(30em / 14)',
+    })
+  );
+  promises.push(
+    patchFile('node_modules/@elastic/charts/dist/theme.scss', [
+      {
+        from: '$legendItemVerticalPadding / 2',
+        to: 'calc($legendItemVerticalPadding / 2)',
+      },
+      {
+        from: '$echLegendRowGap / 2',
+        to: 'calc($echLegendRowGap / 2)',
+      },
+      {
+        from: '$euiBorderRadius / 2',
+        to: 'calc($euiBorderRadius / 2)',
+      },
+    ])
+  );
+
   await Promise.all(promises);
 };
 

src/core/public/core_app/styles/_mixins.scss

@@ -18,7 +18,7 @@
   text-align: center;
   background-color: $euiColorEmptyShade;
   border-radius: 100%;
-  padding: $euiSize / 2;
+  padding: calc($euiSize / 2);
 
   .euiIcon {
     vertical-align: baseline;

src/core/public/styles/_ace_overrides.scss

@@ -8,7 +8,7 @@
 // it is being scoped by a known outer selector
 .coreSystemRootDomElement {
   .ace-tm {
-    $aceBackground: tintOrShade($euiColorLightShade, 50%, 0);
+    $aceBackground: tintOrShade($euiColorLightShade, 50%, 0%);
 
     background-color: $euiColorLightestShade;
     color: $euiTextColor;

src/plugins/data/public/ui/filter_bar/_global_filter_item.scss

@@ -6,8 +6,8 @@
   line-height: $euiSize;
   border: none;
   color: $euiTextColor;
-  padding-top: $euiSizeM / 2;
-  padding-bottom: $euiSizeM / 2;
+  padding-top: calc($euiSizeM / 2);
+  padding-bottom: calc($euiSizeM / 2);
   white-space: normal; /* 1 */
 
   .euiBadge__childButton {
@@ -67,8 +67,8 @@
     left: 0;
     width: $euiSizeXS;
     background-color: $osdGlobalFilterItemBorderColor;
-    border-top-left-radius: $euiBorderRadius / 2;
-    border-bottom-left-radius: $euiBorderRadius / 2;
+    border-top-left-radius: calc($euiBorderRadius / 2);
+    border-bottom-left-radius: calc($euiBorderRadius / 2);
   }
 }
 

src/plugins/data/public/ui/saved_query_management/_saved_query_management_component.scss

@@ -10,11 +10,11 @@
 
 .osdSavedQueryManagement__pagination {
   justify-content: center;
-  padding: ($euiSizeM / 2) $euiSizeM $euiSizeM;
+  padding: calc($euiSizeM / 2) $euiSizeM $euiSizeM;
 }
 
 .osdSavedQueryManagement__text {
-  padding: $euiSizeM $euiSizeM ($euiSizeM / 2) $euiSizeM;
+  padding: $euiSizeM $euiSizeM calc($euiSizeM / 2) $euiSizeM;
 }
 
 .osdSavedQueryManagement__list {
@@ -23,5 +23,5 @@
   max-height: inherit; // Fixes overflow for applied max-height
   // Left/Right padding is calculated to match the left alignment of the
   // popover text and buttons
-  padding: ($euiSizeM / 2) $euiSizeXS !important; // Override flush
+  padding: calc($euiSizeM / 2) $euiSizeXS !important; // Override flush
 }

src/plugins/opensearch_dashboards_react/public/markdown/_markdown.scss

@@ -14,7 +14,7 @@
 $osdDefaultFontSize: 14px;
 
 @function canvasToEm($size) {
-  @return #{$size / $osdDefaultFontSize}em;
+  @return #{calc($size / $osdDefaultFontSize)}em;
 }
 
 .osdMarkdown__body {

src/plugins/vis_builder/public/application/app.scss

@@ -18,7 +18,7 @@
   }
 
   &__resizeButton {
-    transform: translateX(-$euiSizeM / 2);
+    transform: translateX(calc(-1 * $euiSizeM / 2));
   }
 }
 

src/plugins/vis_builder/public/application/components/data_tab/dropbox.scss

@@ -17,8 +17,8 @@
 
   &__container {
     display: grid;
-    grid-gap: $euiSizeXS / 2;
-    padding: $euiSizeS - ($euiSizeXS / 2) $euiSizeS $euiSizeS $euiSizeS;
+    grid-gap: calc($euiSizeXS / 2);
+    padding: calc($euiSizeS - ($euiSizeXS / 2)) $euiSizeS $euiSizeS $euiSizeS;
     background-color: $euiColorLightShade;
     border-radius: $euiBorderRadius;
   }
@@ -32,7 +32,7 @@
   }
 
   &__draggable {
-    padding: $euiSizeXS / 2 0;
+    padding: calc($euiSizeXS / 2) 0;
     animation: pop-in $euiAnimSpeedSlow $euiAnimSlightResistance forwards;
     transform-origin: bottom;
 

src/plugins/vis_builder/public/application/components/workspace.scss

@@ -6,7 +6,7 @@
 $animation-time: 3;
 $animation-multiplier: 5;
 $total-duartion: $animation-time * $animation-multiplier;
-$keyframe-multiplier: 1 / $animation-multiplier;
+$keyframe-multiplier: calc(1 / $animation-multiplier);
 
 .vbWorkspace {
   display: grid;

src/plugins/vis_default_editor/public/_agg_params.scss

@@ -1,7 +1,7 @@
 .visEditorAggParam--half {
   margin: $euiSize 0;
   display: inline-block;
-  width: calc(50% - #{$euiSizeS / 2});
+  width: calc(50% - #{calc($euiSizeS / 2)});
 }
 
 .visEditorAggParam--half-size {

src/plugins/vis_type_timeseries/public/application/components/_vis_with_splits.scss

@@ -24,6 +24,6 @@
   > .tvbVis {
     // Apply the minimum height on the vis itself so it doesn't interfere with flex calculations
     // Gauges are not completely square, so the height is just slightly less than the width
-    min-height: $tvbSplitBlockVisMinSize / 1.25;
+    min-height: calc($tvbSplitBlockVisMinSize / 1.25);
   }
 }