elastic · patrykkopycinski · Dec 21, 2023 · Jul 12, 2023 · Jul 13, 2023 · Jul 13, 2023
diff --git a/.buildkite/pipelines/on_merge.yml b/.buildkite/pipelines/on_merge.yml
@@ -141,7 +141,7 @@ steps:
     agents:
       queue: n2-4-spot
     key: storybooks
-    timeout_in_minutes: 60
+    timeout_in_minutes: 80
     retry:
       automatic:
         - exit_status: '-1'

diff --git a/.buildkite/pipelines/pull_request/storybooks.yml b/.buildkite/pipelines/pull_request/storybooks.yml
@@ -4,4 +4,4 @@ steps:
     agents:
       queue: n2-4-spot
     key: storybooks
-    timeout_in_minutes: 60
+    timeout_in_minutes: 80
diff --git a/WORKSPACE.bazel b/WORKSPACE.bazel
@@ -57,7 +57,6 @@ yarn_install(
   quiet = False,
   frozen_lockfile = False,
   environment = {
-    "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",
   }
 )
@@ -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
@@ -1479,7 +1479,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",
@@ -1507,6 +1506,7 @@
     "regenerate": "^1.4.0",
     "resolve": "^1.22.0",
     "rxjs-marbles": "^7.0.1",
+    "sass": "^1.63.6",
     "sass-loader": "^10.4.1",
     "selenium-webdriver": "^4.9.1",
     "simple-git": "^3.16.0",

@@ -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 {

@@ -187,11 +187,12 @@ export function getWebpackConfig(
                       )};\n${content}`;
                     },
                     webpackImporter: false,
-                    implementation: require('node-sass'),
+                    implementation: require('sass'),
                     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'),
                 sassOptions: {
                   includePaths: [resolve(REPO_ROOT, 'node_modules')],
+                  quietDeps: true,
                 },
               },
             },

diff --git a/packages/kbn-text-based-editor/src/resizable_button.scss b/packages/kbn-text-based-editor/src/resizable_button.scss
@@ -13,8 +13,8 @@
   z-index: 1;
   cursor: row-resize;
   height: $euiSize;
-  margin-top: -($euiSize / 2);
-  margin-bottom: -($euiSize / 2);
+  margin-top: -(calc($euiSize / 2));
+  margin-bottom: -(calc($euiSize / 2));
 
   &:before,
   &:after {
@@ -64,7 +64,7 @@
         height $euiAnimSpeedFast ease,
         transform $euiAnimSpeedFast ease
       );
-      transition-delay: $euiAnimSpeedFast / 2;
+      transition-delay: calc($euiAnimSpeedFast / 2);
     }
   }
 
@@ -84,4 +84,4 @@
       transform: translate(-50%, 0);
     }
   }
-}
+}
diff --git a/renovate.json b/renovate.json
@@ -152,7 +152,7 @@
     {
       "groupName": "scss",
       "packageNames": [
-        "node-sass"
+        "sass"
       ],
       "reviewers": ["team:kibana-operations"],
       "matchBaseBranches": ["main"],

@@ -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',
         },

@@ -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/discover/public/components/discover_grid/discover_grid.scss b/src/plugins/discover/public/components/discover_grid/discover_grid.scss
@@ -68,8 +68,8 @@
 .dscDiscoverGrid__footer {
   flex-shrink: 0;
   background-color: $euiColorLightShade;
-  padding: $euiSize / 2 $euiSize;
-  margin-top: $euiSize / 4;
+  padding: calc($euiSize / 2) $euiSize;
+  margin-top: calc($euiSize / 4);
   text-align: center;
 }
 

@@ -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;

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

@@ -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);
   }
 }
 

@@ -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
 }
@@ -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 {

@@ -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);
   }
 }
 

@@ -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

@@ -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'),
               sourceMap: !isProd,
             },
           },
@@ -147,7 +147,7 @@ module.exports = {
                   path.resolve(KIBANA_ROOT, 'src/core/public/styles/core_app/_globals_v8light.scss')
                 )};\n${content}`;
               },
-              implementation: require('node-sass'),
+              implementation: require('sass'),
               webpackImporter: false,
               sassOptions: {
                 outputStyle: 'nested',

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'),
             },
           },
         ],

@@ -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 {

@@ -28,7 +28,7 @@
 .gphGuidancePanel__itemIcon {
   position: absolute;
   left: 0;
-  top: -($euiSizeXS / 2);
+  top: -(calc($euiSizeXS / 2));
   width: $euiSizeL;
   height: $euiSizeL;
   padding: $euiSizeXS;

@@ -26,8 +26,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 {

@@ -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;

@@ -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;

@@ -49,7 +49,7 @@
 
   // SASSTODO: Dangerous EUI overwrite
   .scope-field-checkbox {
-    margin-right: $euiSizeXS / 2;
+    margin-right: calc($euiSizeXS / 2);
 
     .euiCheckbox {
       margin-top: $euiSizeXS;

@@ -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;
       }
 

@@ -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;
 }
@@ -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;

@@ -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;