build: migrate node-sass to latest sass (#1618)

.prettierignore

@@ -8,3 +8,5 @@
 **/dist/
 coverage/
 **/tmp/
+
+packages/charts/src/_reset.scss

e2e-server/server/webpack.config.js

@@ -92,7 +92,15 @@ module.exports = {
               },
             },
           },
-          'sass-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              sassOptions: {
+                // prevent divider deprecation warning messages
+                quietDeps: true,
+              },
+            },
+          },
         ],
       },
     ],

integration/jest_puppeteer.config.js

@@ -54,7 +54,8 @@ const customConfig = {
           : `yarn test:integration:server --port=${port}`,
         port,
         usedPortAction: 'error',
-        launchTimeout: 200000,
+        // TODO: drop back to 200 after eui pow changes are released
+        launchTimeout: 300 * 1000,
         ...(!isLegacyVRTServer && {
           waitOnScheme: {
             // using localhost as the server is running on the local machine

integration/server/webpack.config.js

@@ -88,7 +88,15 @@ module.exports = {
               },
             },
           },
-          'sass-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              sassOptions: {
+                // prevent divider deprecation warning messages
+                quietDeps: true,
+              },
+            },
+          },
         ],
       },
     ],

package.json

@@ -153,8 +153,7 @@
     "mini-css-extract-plugin": "1.6.2",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.32",
-    "node-sass": "^7.0.0",
-    "node-sass-tilde-importer": "^1.0.2",
+    "sass": "^1.49.9",
     "numeral": "^2.0.6",
     "postcss": "^8.3.0",
     "postcss-cli": "^8.3.1",

packages/charts/package.json

@@ -24,7 +24,7 @@
     "build:css": "yarn build:sass && yarn autoprefix:css && yarn concat:sass",
     "build:clean": "echo 'Cleaning dist...' && rm -rf ./dist",
     "build:compile": "echo 'Compiling...' && tsc -p ./tsconfig.json && tsc -p ./tsconfig.nocomments.json",
-    "build:sass": "echo 'Building sass...' && node-sass src/theme_light.scss dist/theme_light.css --output-style compressed --importer=../../node_modules/node-sass-tilde-importer && node-sass src/theme_dark.scss dist/theme_dark.css --output-style compressed --importer=../../node_modules/node-sass-tilde-importer && node-sass src/theme_only_light.scss dist/theme_only_light.css --output-style compressed --importer=../../node_modules/node-sass-tilde-importer && node-sass src/theme_only_dark.scss dist/theme_only_dark.css --output-style compressed --importer=../../node_modules/node-sass-tilde-importer",
+    "build:sass": "echo 'Building sass...' && sass src:dist --style compressed --quiet --color",
     "build:check": "echo 'Type checking dist...' && tsc -p ./tsconfig.check.json",
     "build:watch": "echo 'Watching build...' && yarn build:clean && yarn build:css && tsc -p ./tsconfig.json -w",
     "concat:sass": "echo 'Concat SASS...' && node scripts/concat_sass.js",

packages/charts/src/_eui_imports.scss

@@ -1,2 +1,2 @@
-@import '~@elastic/eui/src/global_styling';
-@import '~@elastic/eui/src/themes/amsterdam/globals';
+@import '../../../node_modules/@elastic/eui/src/global_styling';
+@import '../../../node_modules/@elastic/eui/src/themes/amsterdam/globals';

packages/charts/src/_reset.scss

@@ -0,0 +1,86 @@
+// Used as base reset used with EuiProvider. TODO: remove need for this file export.
+// https://github.com/elastic/eui/blob/master/src/global_styling/reset/reset.ts
+
+// Adapted from Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126)
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: none;
+  vertical-align: baseline;
+}
+h1, h2, h3, h4, h5, h6, p {
+  font-family: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+a[href],
+button,
+[role='button'] {
+  cursor: pointer;
+}
+button {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  color: inherit;
+  border-radius: 0;
+  font-size: inherit;
+}
+input {
+  margin: 0;
+  padding: 0;
+}
+input:disabled {
+  opacity: 1; /* required on iOS */
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+hr {
+  margin: 0;
+}
+fieldset {
+  min-inline-size: auto;
+}
+/* Chrome has an issue around RTL languages in SVGs when letter-spacing is negative
+ * https://bugs.chromium.org/p/chromium/issues/detail?id=966480
+ */
+svg text {
+  letter-spacing: normal !important;
+}

packages/charts/src/theme_dark.scss

@@ -1,6 +1,7 @@
-@import '~@elastic/eui/src/themes/amsterdam/colors_dark';
+@import '../../../node_modules/@elastic/eui/src/themes/amsterdam/colors_dark';
 
 @import 'eui_imports';
+@import 'reset';
 
 // Components
 @import 'components/index';

packages/charts/src/theme_light.scss

@@ -1,6 +1,7 @@
-@import '~@elastic/eui/src/themes/amsterdam/colors_light';
+@import '../../../node_modules/@elastic/eui/src/themes/amsterdam/colors_light';
 
 @import 'eui_imports';
+@import 'reset';
 
 // Components
 @import 'components/index';

packages/charts/src/theme_only_dark.scss

@@ -1,5 +1,4 @@
-// TODO: remove this duplicated file
-@import '~@elastic/eui/src/themes/amsterdam/colors_dark';
+@import '../../../node_modules/@elastic/eui/src/themes/amsterdam/colors_dark';
 
 @import 'eui_imports';
 

packages/charts/src/theme_only_light.scss

@@ -1,5 +1,4 @@
-// TODO: remove this duplicated file
-@import '~@elastic/eui/src/themes/amsterdam/colors_light';
+@import '../../../node_modules/@elastic/eui/src/themes/amsterdam/colors_light';
 
 @import 'eui_imports';
 

playground/webpack.config.js

@@ -54,7 +54,15 @@ module.exports = {
               },
             },
           },
-          'sass-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              sassOptions: {
+                // prevent divider deprecation warning messages
+                quietDeps: true,
+              },
+            },
+          },
         ],
       },
     ],

storybook/package.json

@@ -35,7 +35,7 @@
     "@storybook/source-loader": "^6.3.7",
     "@storybook/theming": "^6.3.7",
     "circular-dependency-plugin": "^5.2.2",
-    "sass": "~1.32.0",
+    "sass": "^1.49.9",
     "sass-loader": "^10.1.1",
     "storybook-addon-theme-toggle": "^0.0.1",
     "storybook-addon-background-toggle": "^0.0.1",

storybook/stories/legend/9_color_picker.story.tsx

@@ -6,7 +6,6 @@
  * Side Public License, v 1.
  */
 
-import { EuiColorPicker, EuiWrappingPopover, EuiButton, EuiSpacer, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
 import { action } from '@storybook/addon-actions';
 import { boolean } from '@storybook/addon-knobs';
 import React, { useState, useMemo } from 'react';
@@ -26,6 +25,7 @@ import {
 import { BARCHART_1Y1G } from '@elastic/charts/src/utils/data_samples/test_dataset';
 
 import { useBaseTheme } from '../../use_base_theme';
+import { getColorPicker } from '../utils/components/get_color_picker';
 import { getLegendAction } from '../utils/components/get_legend_action';
 
 const onChangeAction = action('onChange');
@@ -52,22 +52,13 @@ export const Example = () => {
         onChangeAction(c);
       };
 
-      return (
-        <>
-          <EuiWrappingPopover isOpen button={anchor} closePopover={handleClose} anchorPosition="leftCenter">
-            <EuiColorPicker display="inline" color={color} onChange={handleChange} />
-            <EuiSpacer size="m" />
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty size="s" onClick={() => handleChange(null)}>
-                Clear color
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-            <EuiButton fullWidth size="s" onClick={handleClose}>
-              Done
-            </EuiButton>
-          </EuiWrappingPopover>
-        </>
-      );
+      return getColorPicker()({
+        anchor,
+        color,
+        onClose: handleClose,
+        onChange: handleChange,
+        seriesIdentifiers,
+      });
     },
     [setColors],
   );

storybook/stories/utils/components/get_color_picker.tsx

@@ -8,19 +8,18 @@
 
 import {
   EuiButton,
-  EuiButtonIcon,
+  EuiButtonEmpty,
   EuiColorPicker,
-  EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
   EuiWrappingPopover,
   PopoverAnchorPosition,
 } from '@elastic/eui';
-import React from 'react';
+import React, { FC } from 'react';
 
-import { LegendColorPicker } from '@elastic/charts';
+import { LegendColorPickerProps } from '@elastic/charts';
 
-export const getColorPicker = (anchorPosition: PopoverAnchorPosition = 'leftCenter'): LegendColorPicker => ({
+export const getColorPicker = (anchorPosition: PopoverAnchorPosition = 'leftCenter'): FC<LegendColorPickerProps> => ({
   anchor,
   color,
   onClose,
@@ -29,30 +28,22 @@ export const getColorPicker = (anchorPosition: PopoverAnchorPosition = 'leftCent
   <EuiWrappingPopover isOpen button={anchor} closePopover={onClose} anchorPosition={anchorPosition} ownFocus>
     <EuiColorPicker display="inline" color={color} onChange={onChange} />
     <EuiSpacer size="m" />
-    <EuiFlexGroup gutterSize="none" alignItems="center" direction="row">
-      <EuiFlexItem grow={false}>
-        <EuiButton size="s" fill onClick={onClose} title="Confirm color selection">
-          Done
-        </EuiButton>
-      </EuiFlexItem>
-
-      <EuiFlexItem>
-        <EuiSpacer size="m" />
-      </EuiFlexItem>
-
-      <EuiFlexItem grow={false}>
-        <EuiButtonIcon
-          display="base"
-          iconType="cross"
-          color="danger"
-          title="Clear color selection"
-          onClick={() => {
-            onChange(null);
-            anchor.focus();
-            onClose();
-          }}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <EuiFlexItem grow={false}>
+      <EuiButtonEmpty
+        color="danger"
+        size="s"
+        onClick={() => {
+          onChange(null);
+          anchor.focus();
+          onClose();
+        }}
+        title="Clear color selection"
+      >
+        Clear color
+      </EuiButtonEmpty>
+    </EuiFlexItem>
+    <EuiButton fullWidth size="s" iconType="check" title="Confirm color selection" onClick={onClose}>
+      Done
+    </EuiButton>
   </EuiWrappingPopover>
 );

storybook/style.scss

@@ -23,6 +23,7 @@
 html {
   font-size: 14px !important;
   &.light-theme {
+    @import '~@elastic/eui/dist/eui_theme_light';
     @import '~@elastic/charts/src/theme_light';
 
     body,

storybook/webpack.config.js

@@ -26,7 +26,15 @@ const scssLoaders = [
       },
     },
   },
-  'sass-loader',
+  {
+    loader: 'sass-loader',
+    options: {
+      sassOptions: {
+        // prevent divider deprecation warning messages
+        quietDeps: true,
+      },
+    },
+  },
 ];
 
 const MAX_CYCLES = 0;