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

## Summary The previous PR #161813 was reverted due to the broken webpack config eef1afc --------- Co-authored-by: Tiago Costa <tiago.costa@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Jon <jon@elastic.co> (cherry picked from commit d4be2a3)
elastic · Dec 28, 2023 · 304cd39 · 304cd39
1 parent fabe951
commit 304cd39
Show file tree

Hide file tree

Showing 36 changed files with 167 additions and 393 deletions.
diff --git a/WORKSPACE.bazel b/WORKSPACE.bazel
@@ -60,7 +60,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/kbn_pm/src/lib/bazel.mjs b/kbn_pm/src/lib/bazel.mjs
@@ -150,8 +150,6 @@ export async function installYarnDeps(log, opts = undefined) {
     offline: opts?.offline,
     quiet: opts?.quiet,
     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/package.json b/package.json
@@ -1589,7 +1589,6 @@
     "mutation-observer": "^1.0.3",
     "native-hdr-histogram": "^1.0.0",
     "nock": "12.0.3",
-    "node-sass": "^8.0.0",
     "null-loader": "^3.0.0",
     "nyc": "^15.1.0",
     "oboe": "^2.1.4",
@@ -1617,7 +1616,8 @@
     "regenerate": "^1.4.0",
     "resolve": "^1.22.0",
     "rxjs-marbles": "^7.0.1",
-    "sass-loader": "^10.4.1",
+    "sass-embedded": "^1.69.5",
+    "sass-loader": "^10.5.1",
     "selenium-webdriver": "^4.16.0",
     "simple-git": "^3.16.0",
     "sinon": "^7.4.2",

diff --git a/packages/kbn-dom-drag-drop/src/sass/drag_drop.scss b/packages/kbn-dom-drag-drop/src/sass/drag_drop.scss
@@ -99,7 +99,7 @@ $reorderItemMargin: $euiSizeS;
   position: absolute;
   width: 100%;
   top: 0;
-  height: calc(100% + #{$reorderItemMargin / 2});
+  height: calc(100% + #{calc($reorderItemMargin / 2)});
 }
 
 .domDragDrop-translatableDrop {

diff --git a/packages/kbn-optimizer/src/worker/webpack.config.ts b/packages/kbn-optimizer/src/worker/webpack.config.ts
@@ -185,12 +185,12 @@ export function getWebpackConfig(
                         )
                       )};\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-storybook/src/webpack.config.ts b/packages/kbn-storybook/src/webpack.config.ts
@@ -115,9 +115,10 @@ export default ({ config: storybookConfig }: { config: Configuration }) => {
                     resolve(REPO_ROOT, 'src/core/public/styles/core_app/_globals_v8light.scss')
                   )};\n${content}`;
                 },
-                implementation: require('node-sass'),
+                implementation: require('sass-embedded'),
                 sassOptions: {
                   includePaths: [resolve(REPO_ROOT, 'node_modules')],
+                  quietDeps: true,
                 },
               },
             },

diff --git a/.../kbn-unified-field-list/src/containers/unified_field_list_sidebar/field_list_sidebar.scss b/.../kbn-unified-field-list/src/containers/unified_field_list_sidebar/field_list_sidebar.scss
@@ -53,7 +53,7 @@
 
 .unifiedFieldListSidebar .unifiedFieldListItemButton {
   &.kbnFieldButton {
-    margin-bottom: $euiSizeXS / 2;
+    margin-bottom: calc($euiSizeXS / 2);
   }
 
   &.domDragDrop-isDraggable {

diff --git a/renovate.json b/renovate.json
@@ -362,7 +362,7 @@
     {
       "groupName": "scss",
       "packageNames": [
-        "node-sass"
+        "sass-embedded"
       ],
       "reviewers": [
         "team:kibana-operations"
@@ -673,4 +673,4 @@
       "enabled": true
     }
   ]
-}
+}
diff --git a/src/dev/build/tasks/install_dependencies_task.ts b/src/dev/build/tasks/install_dependencies_task.ts
@@ -32,8 +32,6 @@ export const InstallDependencies: Task = {
       {
         cwd: build.resolvePath(),
         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/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
@@ -88,4 +88,5 @@ export const LICENSE_OVERRIDES = {
   '@elastic/eui@90.0.1-backport.0': ['SSPL-1.0 OR Elastic License 2.0'],
   'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
+  '@bufbuild/protobuf@1.2.1': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)
 };
diff --git a/src/plugins/console/public/styles/_app.scss b/src/plugins/console/public/styles/_app.scss
@@ -42,7 +42,7 @@
     padding: 0 $euiSizeS;
     display: inline-block;
     text-decoration: none;
-    border-radius: $euiBorderRadius / 2;
+    border-radius: calc($euiBorderRadius / 2);
     white-space: nowrap;
     vertical-align: middle;
     cursor: default;

diff --git a/src/plugins/controls/public/options_list/components/options_list.scss b/src/plugins/controls/public/options_list/components/options_list.scss
@@ -65,7 +65,7 @@
     }
 
     .optionsList__actionsRow {
-      margin: ($euiSizeS / 2) 0 !important;
+      margin: calc($euiSizeS / 2) 0 !important;
 
       .optionsList__actionBarDivider {
         height: $euiSize;
@@ -97,4 +97,4 @@
     color: $euiTextSubduedColor;
     padding: $euiSizeM;
   }
-}
+}
diff --git a/src/plugins/discover/public/components/doc_table/_doc_table.scss b/src/plugins/discover/public/components/doc_table/_doc_table.scss
@@ -69,7 +69,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/unified_search/public/filter_bar/filter_item/filter_item.scss b/src/plugins/unified_search/public/filter_bar/filter_item/filter_item.scss
@@ -8,8 +8,8 @@
   line-height: $euiSize;
   border: none;
   color: $euiTextColor;
-  padding-top: $euiSizeM / 2 + 1px;
-  padding-bottom: $euiSizeM / 2 + 1px;
+  padding-top: calc($euiSizeM / 2) + 1px;
+  padding-bottom: calc($euiSizeM / 2) + 1px;
   white-space: normal; /* 1 */
 
   &:not(.globalFilterItem-isDisabled) {
@@ -54,8 +54,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/unified_search/public/saved_query_management/saved_query_management_list.scss b/src/plugins/unified_search/public/saved_query_management/saved_query_management_list.scss
@@ -5,13 +5,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/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: $euiSize * 12 / 1.25;
+    min-height: calc($euiSize * 12 / 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
@@ -101,7 +101,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
@@ -110,7 +110,7 @@ module.exports = {
           {
             loader: 'sass-loader',
             options: {
-              implementation: require('node-sass'),
+              implementation: require('sass-embedded'),
               sourceMap: !isProd,
             },
           },
@@ -147,10 +147,9 @@ module.exports = {
                   path.resolve(KIBANA_ROOT, 'src/core/public/styles/core_app/_globals_v8light.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
@@ -25,8 +25,8 @@
   flex: 0 0 auto;
   height: $lnsSuggestionHeight;
   margin-right: $euiSizeS;
-  margin-left: $euiSizeXS / 2;
-  margin-bottom: $euiSizeXS / 2;
+  margin-left: calc($euiSizeXS / 2);
+  margin-bottom: calc($euiSizeXS / 2);
   padding: 0 $euiSizeS;
   box-shadow: none !important; // sass-lint:disable-line no-important
 

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
@@ -129,7 +129,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
@@ -41,7 +41,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%;
-}
+}