Replace deprecated node-sass with sass #2 (elastic#173942)

The previous PR elastic#161813 was reverted due to the broken webpack config elastic@eef1afc --------- Co-authored-by: Tiago Costa <[email protected]> Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Jon <[email protected]>
jbudz · Jan 2, 2024 · 994360b · 994360b
1 parent 2d2833d
commit 994360b
Show file tree

Hide file tree

Showing 32 changed files with 167 additions and 395 deletions.
diff --git a/WORKSPACE.bazel b/WORKSPACE.bazel
@@ -66,7 +66,6 @@ yarn_install(
     "GECKODRIVER_CDNURL": "https://us-central1-elastic-kibana-184716.cloudfunctions.net/kibana-ci-proxy-cache",
     "CHROMEDRIVER_CDNURL": "https://us-central1-elastic-kibana-184716.cloudfunctions.net/kibana-ci-proxy-cache",
     "CHROMEDRIVER_CDNBINARIESURL": "https://us-central1-elastic-kibana-184716.cloudfunctions.net/kibana-ci-proxy-cache",
-    "SASS_BINARY_SITE": "https://us-central1-elastic-kibana-184716.cloudfunctions.net/kibana-ci-proxy-cache/node-sass",
     "RE2_DOWNLOAD_MIRROR": "https://us-central1-elastic-kibana-184716.cloudfunctions.net/kibana-ci-proxy-cache/node-re2",
     "CYPRESS_DOWNLOAD_MIRROR": "https://us-central1-elastic-kibana-184716.cloudfunctions.net/kibana-ci-proxy-cache/cypress",
   }

diff --git a/package.json b/package.json
@@ -769,7 +769,6 @@
     "multimatch": "^4.0.0",
     "mutation-observer": "^1.0.3",
     "ncp": "^2.0.0",
-    "node-sass": "^8.0.0",
     "null-loader": "^3.0.0",
     "nyc": "^15.0.1",
     "oboe": "^2.1.4",
@@ -792,7 +791,8 @@
     "regenerate": "^1.4.0",
     "resolve": "^1.7.1",
     "rxjs-marbles": "^5.0.6",
-    "sass-loader": "^10.4.1",
+    "sass-embedded": "^1.69.5",
+    "sass-loader": "^10.5.1",
     "sass-resources-loader": "^2.0.1",
     "selenium-webdriver": "^4.16.0",
     "simple-git": "^3.16.0",

diff --git a/packages/kbn-optimizer/BUILD.bazel b/packages/kbn-optimizer/BUILD.bazel
@@ -49,7 +49,7 @@ RUNTIME_DEPS = [
   "@npm//json-stable-stringify",
   "@npm//lmdb",
   "@npm//loader-utils",
-  "@npm//node-sass",
+  "@npm//sass-embedded",
   "@npm//normalize-path",
   "@npm//pirates",
   "@npm//rxjs",

diff --git a/packages/kbn-optimizer/src/worker/webpack.config.ts b/packages/kbn-optimizer/src/worker/webpack.config.ts
@@ -171,12 +171,12 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker:
                         )
                       )};\n${content}`;
                     },
-                    webpackImporter: false,
-                    implementation: require('node-sass'),
+                    implementation: require('sass-embedded'),
                     sassOptions: {
-                      outputStyle: worker.dist ? 'compressed' : 'nested',
+                      outputStyle: worker.dist ? 'compressed' : 'expanded',
                       includePaths: [Path.resolve(worker.repoRoot, 'node_modules')],
-                      sourceMapRoot: `/${bundle.type}:${bundle.id}`,
+                      sourceMap: true,
+                      quietDeps: true,
                     },
                   },
                 },

diff --git a/packages/kbn-pm/src/commands/bootstrap.ts b/packages/kbn-pm/src/commands/bootstrap.ts
@@ -71,8 +71,6 @@ export const BootstrapCommand: ICommand = {
       await runBazel(['clean']);
       await runBazel(['run', '@nodejs//:yarn'], runOffline, {
         env: {
-          SASS_BINARY_SITE:
-            'https://us-central1-elastic-kibana-184716.cloudfunctions.net/kibana-ci-proxy-cache/node-sass',
           RE2_DOWNLOAD_MIRROR:
             'https://us-central1-elastic-kibana-184716.cloudfunctions.net/kibana-ci-proxy-cache/node-re2',
         },

diff --git a/packages/kbn-storybook/src/webpack.config.ts b/packages/kbn-storybook/src/webpack.config.ts
@@ -109,9 +109,10 @@ export default function ({ config: storybookConfig }: { config: Configuration })
                     resolve(REPO_ROOT, 'src/core/public/core_app/styles/_globals_v7light.scss')
                   )};\n${content}`;
                 },
-                implementation: require('node-sass'),
+                implementation: require('sass-embedded'),
                 sassOptions: {
                   includePaths: [resolve(REPO_ROOT, 'node_modules')],
+                  quietDeps: true,
                 },
               },
             },

diff --git a/src/dev/ci_setup/setup_env.sh b/src/dev/ci_setup/setup_env.sh
@@ -131,7 +131,6 @@ export GECKODRIVER_CDNURL="https://us-central1-elastic-kibana-184716.cloudfuncti
 export CHROMEDRIVER_CDNURL="https://us-central1-elastic-kibana-184716.cloudfunctions.net/kibana-ci-proxy-cache"
 export CHROMEDRIVER_CDNBINARIESURL="https://us-central1-elastic-kibana-184716.cloudfunctions.net/kibana-ci-proxy-cache"
 export RE2_DOWNLOAD_MIRROR="https://us-central1-elastic-kibana-184716.cloudfunctions.net/kibana-ci-proxy-cache"
-export SASS_BINARY_SITE="https://us-central1-elastic-kibana-184716.cloudfunctions.net/kibana-ci-proxy-cache/node-sass"
 export CYPRESS_DOWNLOAD_MIRROR="https://us-central1-elastic-kibana-184716.cloudfunctions.net/kibana-ci-proxy-cache/cypress"
 
 export CHECKS_REPORTER_ACTIVE=false

diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
@@ -82,4 +82,5 @@ export const LICENSE_OVERRIDES = {
   '@elastic/[email protected]': ['SSPL-1.0 OR Elastic License 2.0'],
   '[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   '[email protected]': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
+  '@bufbuild/[email protected]': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)
 };
diff --git a/src/plugins/data/public/ui/filter_bar/_global_filter_item.scss b/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 {
@@ -65,8 +65,8 @@
     left: 0;
     width: $euiSizeXS;
     background-color: $kbnGlobalFilterItemBorderColor;
-    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);
   }
 }
 

diff --git a/src/plugins/data/public/ui/saved_query_management/_saved_query_management_component.scss b/src/plugins/data/public/ui/saved_query_management/_saved_query_management_component.scss
@@ -14,13 +14,13 @@
 }
 
 .kbnSavedQueryManagement__text {
-  padding: $euiSizeM $euiSizeM ($euiSizeM / 2) $euiSizeM;
+  padding: $euiSizeM $euiSizeM calc($euiSizeM / 2) $euiSizeM;
 }
 
 .kbnSavedQueryManagement__list {
   @include euiYScrollWithShadows;
   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
 }
diff --git a/src/plugins/discover/public/application/apps/main/components/doc_table/_doc_table.scss b/src/plugins/discover/public/application/apps/main/components/doc_table/_doc_table.scss
@@ -68,7 +68,7 @@
     dt {
       background-color: transparentize(shade($euiColorPrimary, 20%), .9);
       color: $euiTextColor;
-      padding: ($euiSizeXS / 2) $euiSizeXS;
+      padding: calc($euiSizeXS / 2) $euiSizeXS;
       margin-right: $euiSizeXS;
       word-break: normal;
       border-radius: $euiBorderRadius;

diff --git a/src/plugins/kibana_react/public/markdown/_markdown.scss b/src/plugins/kibana_react/public/markdown/_markdown.scss
@@ -14,7 +14,7 @@
 $kbnDefaultFontSize: 14px;
 
 @function canvasToEm($size) {
-  @return #{$size / $kbnDefaultFontSize}em;
+  @return #{calc($size / $kbnDefaultFontSize)}em;
 }
 
 .kbnMarkdown__body {

diff --git a/src/plugins/vis_default_editor/public/_agg_params.scss b/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 {

diff --git a/src/plugins/vis_types/timeseries/public/application/components/_vis_with_splits.scss b/src/plugins/vis_types/timeseries/public/application/components/_vis_with_splits.scss
@@ -20,7 +20,7 @@
   > .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);
   }
 }
 

diff --git a/src/plugins/vis_types/timeseries/public/application/visualizations/views/_metric.scss b/src/plugins/vis_types/timeseries/public/application/visualizations/views/_metric.scss
@@ -99,7 +99,7 @@
 .tvbVisMetric__label--additional {
   @include euiTextTruncate;
   font-size: .25em; /* 1 */
-  padding: ($euiSizeXS / 2) 0 0;
+  padding: calc($euiSizeXS / 2) 0 0;
   text-align: center;
   color: $tvbValueColor;
   line-height: 1.2; // Ensure the descenders don't get cut off

diff --git a/src/plugins/vis_types/vislib/public/vislib/lib/layout/_layout.scss b/src/plugins/vis_types/vislib/public/vislib/lib/layout/_layout.scss
@@ -203,7 +203,7 @@
   }
 
   .slice {
-    stroke-width: $euiSizeXS / 2;
+    stroke-width: calc($euiSizeXS / 2);
     stroke: $euiColorEmptyShade;
 
     &:hover {

diff --git a/x-pack/plugins/canvas/shareable_runtime/webpack.config.js b/x-pack/plugins/canvas/shareable_runtime/webpack.config.js
@@ -116,7 +116,7 @@ module.exports = {
           {
             loader: 'sass-loader',
             options: {
-              implementation: require('node-sass'),
+              implementation: require('sass-embedded'),
               sourceMap: !isProd,
             },
           },
@@ -153,10 +153,9 @@ module.exports = {
                   path.resolve(KIBANA_ROOT, 'src/core/public/core_app/styles/_globals_v7light.scss')
                 )};\n${content}`;
               },
-              implementation: require('node-sass'),
-              webpackImporter: false,
+              implementation: require('sass-embedded'),
               sassOptions: {
-                outputStyle: 'nested',
+                outputStyle: 'expanded',
                 includePaths: [path.resolve(KIBANA_ROOT, 'node_modules')],
               },
             },

diff --git a/x-pack/plugins/canvas/storybook/canvas.webpack.ts b/x-pack/plugins/canvas/storybook/canvas.webpack.ts
@@ -38,7 +38,7 @@ export const canvasWebpack = {
           {
             loader: 'sass-loader',
             options: {
-              implementation: require('node-sass'),
+              implementation: require('sass-embedded'),
             },
           },
         ],

diff --git a/...lic/application/common/components/stats_table/components/field_data_row/column_chart.scss b/...lic/application/common/components/stats_table/components/field_data_row/column_chart.scss
@@ -16,7 +16,7 @@
   font-weight: normal;
   text-align: left;
   line-height: 1.1;
-  font-size: #{$euiFontSizeL / 2}; // 10px
+  font-size: #{calc($euiFontSizeL / 2)}; // 10px
 }
 
 .dataGridChart__legend--numeric {

diff --git a/x-pack/plugins/graph/public/components/guidance_panel/_guidance_panel.scss b/x-pack/plugins/graph/public/components/guidance_panel/_guidance_panel.scss
@@ -28,7 +28,7 @@
 .gphGuidancePanel__itemIcon {
   position: absolute;
   left: 0;
-  top: -($euiSizeXS / 2);
+  top: -(calc($euiSizeXS / 2));
   width: $euiSizeL;
   height: $euiSizeL;
   padding: $euiSizeXS;

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.scss
@@ -24,8 +24,8 @@
   width: $lnsSuggestionWidth !important; // sass-lint:disable-line no-important
   height: $lnsSuggestionHeight;
   margin-right: $euiSizeS;
-  margin-left: $euiSizeXS / 2;
-  margin-bottom: $euiSizeXS / 2;
+  margin-left: calc($euiSizeXS / 2);
+  margin-bottom: calc($euiSizeXS / 2);
   box-shadow: none !important; // sass-lint:disable-line no-important
 
   &:focus {

diff --git a/...onnected_components/right_side_controls/layer_control/layer_toc/toc_entry/_toc_entry.scss b/...onnected_components/right_side_controls/layer_control/layer_toc/toc_entry/_toc_entry.scss
@@ -124,7 +124,7 @@
   background-color: $euiColorEmptyShade;
   border: $euiBorderThin;
   color: $euiTextColor;
-  border-radius: $euiBorderRadius / 2;
+  border-radius: calc($euiBorderRadius / 2);
   height: $euiSize;
   width: $euiSizeXL;
   line-height: $euiSize;

diff --git a/x-pack/plugins/ml/public/application/components/influencers_list/_influencers_list.scss b/x-pack/plugins/ml/public/application/components/influencers_list/_influencers_list.scss
@@ -28,7 +28,7 @@
     }
 
     .progress-bar {
-      height: $euiSizeXS / 2;
+      height: calc($euiSizeXS / 2);
       margin-top: $euiSizeM;
       text-align: right;
       line-height: 18px; // SASSTODO: Calc proper value
@@ -96,7 +96,7 @@
     font-size: 11px;
     line-height: 14px;
     border-radius: $euiBorderRadius;
-    padding: $euiSizeXS / 2;
+    padding: calc($euiSizeXS / 2);
     margin-top: $euiSizeXS;
     display: inline-block;
     border: $euiBorderThin;

diff --git a/x-pack/plugins/ml/public/application/components/rule_editor/_rule_editor.scss b/x-pack/plugins/ml/public/application/components/rule_editor/_rule_editor.scss
@@ -49,7 +49,7 @@
 
   // SASSTODO: Dangerous EUI overwrite
   .scope-field-checkbox {
-    margin-right: $euiSizeXS / 2;
+    margin-right: calc($euiSizeXS / 2);
 
     .euiCheckbox {
       margin-top: $euiSizeXS;

diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/_explorer_chart.scss b/x-pack/plugins/ml/public/application/explorer/explorer_charts/_explorer_chart.scss
@@ -15,7 +15,7 @@
       rect.selected-interval {
         fill: rgba(200, 200, 200, .1);
         stroke: $euiColorDarkShade;
-        stroke-width: $euiSizeXS / 2;
+        stroke-width: calc($euiSizeXS / 2);
         stroke-opacity: .8;
       }
 

diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer_annotations.scss b/x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer_annotations.scss
@@ -40,10 +40,10 @@ $mlAnnotationRectDefaultFillOpacity: .05;
 }
 
 .mlAnnotationRect-isBlur {
-  stroke-opacity: $mlAnnotationRectDefaultStrokeOpacity / 2;
+  stroke-opacity: calc($mlAnnotationRectDefaultStrokeOpacity / 2);
   transition: stroke-opacity $euiAnimSpeedFast;
 
-  fill-opacity: $mlAnnotationRectDefaultFillOpacity / 2;
+  fill-opacity: calc($mlAnnotationRectDefaultFillOpacity / 2);
   transition: fill-opacity $euiAnimSpeedFast;
 }
 
@@ -95,9 +95,9 @@ $mlAnnotationRectDefaultFillOpacity: .05;
 }
 
 .mlContextAnnotationRect-isBlur {
-  stroke-opacity: $mlAnnotationRectDefaultStrokeOpacity / 2;
+  stroke-opacity: calc($mlAnnotationRectDefaultStrokeOpacity / 2);
   transition: stroke-opacity $euiAnimSpeedFast;
 
-  fill-opacity: $mlAnnotationRectDefaultFillOpacity / 2;
+  fill-opacity: calc($mlAnnotationRectDefaultFillOpacity / 2);
   transition: fill-opacity $euiAnimSpeedFast;
 }
diff --git a/...plugins/monitoring/public/components/elasticsearch/shard_allocation/shard_allocation.scss b/...plugins/monitoring/public/components/elasticsearch/shard_allocation/shard_allocation.scss
@@ -22,7 +22,7 @@
     margin: $euiSizeS;
     border: 1px solid $euiColorMediumShade;
     border-radius: $euiSizeXS;
-    padding: $euiSizeXS / 2 0;
+    padding: calc($euiSizeXS / 2) 0;
 
     &.monChild--index {
       border-left: $euiSizeXS solid $euiColorSuccess;

diff --git a/x-pack/plugins/monitoring/public/components/status_icon/_status_icon.scss b/x-pack/plugins/monitoring/public/components/status_icon/_status_icon.scss
@@ -1,7 +1,7 @@
 .monStatusIcon {
   display: inline-block;
   margin-left: $euiSizeXS;
-  padding: ($euiSizeXS / 2) $euiSizeS;
+  padding: calc($euiSizeXS / 2) $euiSizeS;
   border-radius: $euiBorderRadius;
   color: $euiColorGhost;
   min-width: 1.9em;

diff --git a/x-pack/plugins/snapshot_restore/public/application/components/policy_form/_policy_form.scss b/x-pack/plugins/snapshot_restore/public/application/components/policy_form/_policy_form.scss
@@ -4,7 +4,7 @@
 .snapshotRestore__policyForm__stepSettings {
   .euiFormRow--hasEmptyLabelSpace {
     min-height: auto;
-    margin-top: $euiFontSizeXS + $euiSizeS + ($euiSizeXXL / 4);
+    margin-top: $euiFontSizeXS + $euiSizeS + calc($euiSizeXXL / 4);
   }
 }
 
@@ -13,4 +13,4 @@
  */
 .snapshotRestore__policyForm__stepSettings__indicesFieldWrapper .euiFormLabel {
   width: 100%;
-}
+}
diff --git a/...t_restore/public/application/components/restore_snapshot_form/_restore_snapshot_form.scss b/...t_restore/public/application/components/restore_snapshot_form/_restore_snapshot_form.scss
@@ -5,7 +5,7 @@
 .snapshotRestore__restoreForm__stepSettings {
   .euiFormRow--hasEmptyLabelSpace {
     min-height: auto;
-    margin-top: $euiFontSizeXS + $euiSizeS + ($euiSizeXXL / 4);
+    margin-top: $euiFontSizeXS + $euiSizeS + calc($euiSizeXXL / 4);
   }
 }
 
@@ -14,4 +14,4 @@
  */
 .snapshotRestore__restoreForm__stepLogistics__indicesFieldWrapper .euiFormLabel {
   width: 100%;
-}
+}
diff --git a/...ion_logs/fix_deprecation_logs/deprecation_logging_toggle/_deprecation_logging_toggle.scss b/...ion_logs/fix_deprecation_logs/deprecation_logging_toggle/_deprecation_logging_toggle.scss
@@ -3,5 +3,5 @@
 // them. With this selector we offset the difference so that the content
 // of the page doesnt jump when toggling between states.
 .upgToggleLoading > .upgLoadingItem {
-  margin: $euiSizeM / 2;
+  margin: calc($euiSizeM / 2);
 }