Drop IE support

Author: dmt0

Diff for: THEMING.md

@@ -77,16 +77,3 @@ Here is a sample theme to change the UI from light to dark. We attach all of our
 You can inspect the editor and see a full listing of all variables that you can override:
 
 ![see-css-variables-inspector](https://user-images.githubusercontent.com/11803153/34531018-7e24bbba-f076-11e7-90cd-a35fe5eae84d.png)
-
-## Caveats
-
-CSS custom properties are not supported in IE11. However, you can use a [PostCSS](https://github.com/postcss/postcss) plugin to convert the css properties to their true value when they are used. We are using [PostCSS Custom Properties](https://github.com/postcss/postcss-custom-properties).
-
-The PostCSS plugin we are using only applies to variables that are in the `:root{}` scope. If you'd like to both theme and use your styles to support IE11, you would need to import the unminified IE styles we ship with the editor:
- `import react-chart-editor/lib/react-chart-editor.ie.css` (this stylesheet has the variables attached to the `:root{}` scope).
-
- Then, rather than applying your custom properties to `.theme--dark .plotly-editor--theme-provider`, you would apply your overrides to `:root{}`.
-
- Finally, you would pipe in the PostCSS plugin(s) to your project and produce a css file with the properties applied as their true value. It's recommended to use the [PostCSS Remove Root](https://github.com/cbracco/postcss-remove-root) plugin after you have converted all of the properties.
-
- You can see our PostCSS scripts [here](https://github.com/plotly/react-chart-editor/tree/master/scripts/postcss.js).

Diff for: package.json

@@ -10,7 +10,7 @@
     "lint": "prettier --write \"src/**/*.js\"",
     "make:arrows": "node scripts/makeArrows.js",
     "make:combined-translation-keys": "npm run make:translation-keys && node scripts/combineTranslationKeys.js",
-    "make:lib:css": "mkdirp lib && babel-node scripts/styles.js && SASS_ENV=ie babel-node scripts/styles.js && babel-node scripts/postcss.js && SASS_ENV=ie babel-node scripts/postcss.js",
+    "make:lib:css": "mkdirp lib && babel-node scripts/styles.js && babel-node scripts/styles.js && babel-node scripts/postcss.js && babel-node scripts/postcss.js",
     "make:lib:js": "mkdirp lib && babel src --out-dir lib --ignore=__tests__/* --source-maps",
     "make:lib": "rimraf lib && mkdir lib && npm run make:lib:js && npm run make:lib:css && npm run make:combined-translation-keys",
     "make:translation-keys": "node scripts/findTranslationKeys.js",
@@ -84,8 +84,6 @@
     "node-sass": "4.14.1",
     "postcss": "8.2.13",
     "postcss-combine-duplicated-selectors": "10.0.2",
-    "postcss-custom-properties": "8.0.11",
-    "postcss-remove-root": "0.0.2",
     "prettier": "2.2.1",
     "react": "16.14.0",
     "react-ace": "7.0.5",
@@ -135,6 +133,6 @@
     "url": "https://github.com/plotly/react-chart-editor.git"
   },
   "browserslist": [
-    "ie 11"
+    "last 8 years and not dead"
   ]
 }

Diff for: scripts/postcss.js

@@ -1,85 +1,34 @@
 const fs = require('fs');
 const postcss = require('postcss');
-const customProperties = require('postcss-custom-properties');
 const autoprefixer = require('autoprefixer');
 const cssnano = require('cssnano');
 const combineSelectors = require('postcss-combine-duplicated-selectors');
-const removeRoot = require('postcss-remove-root');
 
 /* eslint-disable no-process-env */
-const SASS_ENV = process.env.SASS_ENV || 'default';
 const BUILD_ENV = process.env.BUILD_ENV || 'lib';
 
 const fileName = `react-chart-editor`;
-const dist = `${BUILD_ENV}/${fileName}.css`;
-
-const internetExplorerPostCSS = () => {
-  /**
-   * IE11 specific post-processing
-   * This will:
-   * - combine duplicate selectors into one,
-   * - convert all css variables into their true value
-   * - remove unneeded `:root{}` after converting vars into their value
-   * - autoprefix for IE11
-   * - minify the css with cssnano
-   */
-  const ie11_plugins = [
-    combineSelectors,
-    customProperties({preserve: false}),
-    removeRoot,
-    autoprefixer({grid: true}),
-    cssnano,
-  ];
-  fs.readFile(`${BUILD_ENV}/${fileName}.ie.css`, (err, css) => {
-    postcss([...ie11_plugins])
-      .process(css, {
-        from: dist,
-        to: `${BUILD_ENV}/${fileName}.ie.min.css`,
-      })
-      .then(result => {
-        fs.writeFile(`${BUILD_ENV}/${fileName}.ie.min.css`, result.css, error => {
-          if (error) {
-            /* eslint-disable no-console */
-            console.log(error);
-          }
-        });
-      });
-  });
-};
-
-const defaultPostCSS = () => {
-  /**
-   * Default post-processing
-   * This will:
-   * - combine duplicate selectors into one,
-   * - convert all css variables into their true value
-   * - remove unneeded `:root{}` after converting vars into their value
-   * - autoprefix for IE11
-   * - minify the css with cssnano
-   */
-  const default_plugins = [combineSelectors, autoprefixer, cssnano];
-  fs.readFile(`${BUILD_ENV}/${fileName}.css`, (err, css) => {
-    postcss([...default_plugins])
-      .process(css, {
-        from: `${BUILD_ENV}/${fileName}.css`,
-        to: `${BUILD_ENV}/${fileName}.min.css`,
-      })
-      .then(result => {
-        fs.writeFile(`${BUILD_ENV}/${fileName}.min.css`, result.css, error => {
-          if (error) {
-            /* eslint-disable no-console */
-            console.log(error);
-          }
-        });
-      });
-  });
-};
 
 /**
- * Run our PostCSS scripts based off of SASS_ENV passed through
+ * This will:
+ * - combine duplicate selectors into one,
+ * - convert all css variables into their true value
+ * - remove unneeded `:root{}` after converting vars into their value
+ * - autoprefix for IE11
+ * - minify the css with cssnano
  */
-if (SASS_ENV === 'ie') {
-  internetExplorerPostCSS();
-} else {
-  defaultPostCSS();
-}
+fs.readFile(`${BUILD_ENV}/${fileName}.css`, (err, css) => {
+  postcss([combineSelectors, autoprefixer, cssnano])
+    .process(css, {
+      from: `${BUILD_ENV}/${fileName}.css`,
+      to: `${BUILD_ENV}/${fileName}.min.css`,
+    })
+    .then((result) => {
+      fs.writeFile(`${BUILD_ENV}/${fileName}.min.css`, result.css, (error) => {
+        if (error) {
+          /* eslint-disable no-console */
+          console.log(error);
+        }
+      });
+    });
+});

Diff for: scripts/styles.js

@@ -3,26 +3,19 @@ const path = require('path');
 const sass = require('node-sass');
 
 /* eslint-disable no-process-env */
-const SASS_ENV = process.env.SASS_ENV || 'default';
 const BUILD_ENV = process.env.BUILD_ENV || 'lib';
 
 const src = 'src/styles/main.scss';
 const fileName = `react-chart-editor`;
-const dist =
-  SASS_ENV === 'ie'
-    ? `${BUILD_ENV}/${fileName}.ie.css`
-    : `${BUILD_ENV}/${fileName}.css`;
+const dist = `${BUILD_ENV}/${fileName}.css`;
 
 /**
  * Compile our scss to css!
- * --
- * the `data:...` line will inject our SASS_ENV value into our scss,
- * so we are able to do conditionals in scss for our env (default|ie)
  */
-fs.readFile(src, function(err, data) {
+fs.readFile(src, function (err, data) {
   sass.render(
     {
-      data: '$ENV: "' + SASS_ENV + '";\n' + data,
+      data,
       includePaths: [path.dirname(src)],
       outFile: dist,
     },
@@ -34,7 +27,7 @@ fs.readFile(src, function(err, data) {
         console.log(error.message);
         console.log(error.line);
       } else {
-        fs.writeFile(dist, result.css, error => {
+        fs.writeFile(dist, result.css, (error) => {
           if (error) {
             /* eslint-disable no-console */
             console.log(error);

Diff for: src/styles/_mixins.scss

@@ -1,7 +1,6 @@
 @mixin vendor($property, $value) {
   -webkit-#{$property}: $value;
   -moz-#{$property}: $value;
-  -ms-#{$property}: $value;
   -o-#{$property}: $value;
   #{$property}: $value;
 }
@@ -34,7 +33,11 @@
   }
 }
 
-@mixin scrollbar($width: 5px, $trackbg: var(--scrollbar-track-background), $thumb-color: var(--scrollbar-thumb-color)) {
+@mixin scrollbar(
+  $width: 5px,
+  $trackbg: var(--scrollbar-track-background),
+  $thumb-color: var(--scrollbar-thumb-color)
+) {
   -webkit-overflow-scrolling: touch;
   &::-webkit-scrollbar {
     background: white;
@@ -163,9 +166,7 @@
   @each $var, $val in $sidebar {
     #{--sidebar}-#{$var}: $val;
   }
-  --editor-width: calc(
-    var(--sidebar-width) + var(--panel-width) + 1px
-  ); // +1px for border
+  --editor-width: calc(var(--sidebar-width) + var(--panel-width) + 1px); // +1px for border
 }
 
 @mixin heading($type: 'base') {

Diff for: src/styles/components/fields/_field.scss

@@ -101,14 +101,6 @@
   }
 }
 
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-  .field {
-    &__widget {
-      flex-basis: auto;
-    }
-  }
-}
-
 .field .field {
   border-top: none;
   .field__no-title {

Diff for: src/styles/components/sidebar/_main.scss

@@ -12,7 +12,6 @@
   border-right: var(--border-default);
   flex-grow: 1;
   @include scrollbar(0px);
-  -ms-overflow-style: none;
 
   &__group {
     background-color: var(--sidebar-group-background-base);

Diff for: src/styles/components/widgets/_colorscalepicker.scss

@@ -29,11 +29,6 @@ $text-padding: 5px;
 .colorscalePickerContainer input:focus {
   outline: none;
 }
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-  .colorscalePickerContainer {
-    display: inline;
-  }
-}
 .colorscalePickerContainer::-webkit-scrollbar {
   width: 5px;
 }

Diff for: src/styles/components/widgets/_numeric-input.scss

@@ -6,10 +6,6 @@
   /* Firefox 19+ */
   color: var(--color-text-placeholder);
 }
-:-ms-input-placeholder {
-  /* IE 10+ */
-  color: var(--color-text-placeholder);
-}
 :-moz-placeholder {
   /* Firefox 18- */
   color: var(--color-text-placeholder);
@@ -24,12 +20,6 @@
   color: var(--color-text-base);
 }
 
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-  .numeric-input__wrapper {
-    flex-basis: auto;
-  }
-}
-
 .numeric-input__number {
   display: inline-block;
   border: var(--border-default);

Diff for: src/styles/components/widgets/_rangeslider.scss

@@ -6,12 +6,10 @@
   min-width: 60px;
   position: relative;
   background: var(--color-background-light);
-  -ms-touch-action: none;
   touch-action: none;
   border: 1px solid var(--color-border-default);
   flex-grow: 1;
 
-
   &,
   .rangeslider__fill {
     display: block;
@@ -74,7 +72,7 @@
   .rangeslider__handle {
     $size: 20px;
     width: $size/3;
-    height: $size*1.5;
+    height: $size * 1.5;
     border-radius: $size;
     top: 50%;
     transform: translate3d(-50%, -50%, 0);

Diff for: src/styles/components/widgets/_text-input.scss

@@ -6,10 +6,6 @@
   /* Firefox 19+ */
   color: var(--color-text-placeholder);
 }
-:-ms-input-placeholder {
-  /* IE 10+ */
-  color: var(--color-text-placeholder);
-}
 :-moz-placeholder {
   /* Firefox 18- */
   color: var(--color-text-placeholder);