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: 100
  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: 100
@@ -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,
  },
  },
  },

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

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

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