build(js,css): add browserslistrc and update JS / CSS toolchains (#4083)

Opentrons · Sep 20, 2019 · 33a4012 · 33a4012
1 parent 5595f8d
commit 33a4012
Show file tree

Hide file tree

Showing 30 changed files with 3,426 additions and 2,056 deletions.
diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1,18 @@
+# browser support for the purposes of JS polyfills and CSS prefixes
+# note: inclusion in this list does not imply QA of these browsers, but rather
+# a best-effort to ensure basic CSS and JS compatibility
+
+# explicitly support the latest version of every browser
+last 1 version
+
+# include all browsers with a global usage threshold
+> 0.5%
+
+# include popular institutional browsers that may not hit global thresholds
+Firefox ESR
+ie 11
+
+# explicitly don't support browsers that are too old
+not dead
+not ie < 11
+not ie_mob <= 11
diff --git a/app/package.json b/app/package.json
@@ -26,6 +26,7 @@
     "@thi.ng/paths": "^1.6.5",
     "classnames": "^2.2.5",
     "connected-react-router": "^6.5.2",
+    "core-js": "^3.2.1",
     "events": "^3.0.0",
     "formik": "^1.3.1",
     "history": "^4.7.2",
@@ -45,7 +46,6 @@
     "remark-react": "^4.0.3",
     "reselect": "^4.0.0",
     "rxjs": "^6.5.1",
-    "semver": "^5.5.0",
-    "winston": "^2.2.0"
+    "semver": "^5.5.0"
   }
 }
diff --git a/app/src/components/AppSettings/AddManualIp/styles.css b/app/src/components/AppSettings/AddManualIp/styles.css
@@ -24,7 +24,7 @@
   width: 100%;
 
   &:focus {
-    box-shadow: 0 0.125rem 0.25rem 0 color(var(--c-black) alpha(0.5));
+    box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
   }
 }
 
@@ -36,7 +36,7 @@
 
   &:hover,
   &:active {
-    background-color: color(var(--c-bg-light) shade(10%));
+    background-color: color-mod(var(--c-bg-light) shade(10%));
   }
 
   &:focus {

diff --git a/app/src/components/ConnectModules/styles.css b/app/src/components/ConnectModules/styles.css
@@ -37,7 +37,7 @@
   padding: 1rem;
   flex-direction: column;
   align-items: center;
-  background-color: color(var(--c-black) alpha(0.99));
+  background-color: color-mod(var(--c-black) alpha(0.99));
   height: 100%;
 }
 

diff --git a/app/src/components/DeckMap/styles.css b/app/src/components/DeckMap/styles.css
@@ -42,7 +42,7 @@
 }
 
 .labware_spinner_wrapper {
-  background-color: color(var(--c-black) alpha(0.5));
+  background-color: color-mod(var(--c-black) alpha(0.5));
   display: flex;
   justify-content: center;
   align-items: center;
@@ -59,7 +59,7 @@
 .name_overlay {
   font-size: 0.5rem;
   color: var(--c-font-light);
-  background-color: color(var(--c-black) alpha(0.75));
+  background-color: color-mod(var(--c-black) alpha(0.75));
   padding: 0.25rem;
   border-radius: 0 0 3px 3px;
 }

diff --git a/app/src/components/ModuleControls/styles.css b/app/src/components/ModuleControls/styles.css
@@ -45,7 +45,7 @@
   &:focus {
     outline: none;
     background-color: var(--c-white);
-    box-shadow: 0 0.125rem 0.25rem 0 color(var(--c-black) alpha(0.5));
+    box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
   }
 }
 
@@ -58,6 +58,6 @@
   }
 
   &:hover {
-    background-color: color(var(--c-bg-light) shade(10%));
+    background-color: color-mod(var(--c-bg-light) shade(10%));
   }
 }
diff --git a/app/src/components/PrepareModules/styles.css b/app/src/components/PrepareModules/styles.css
@@ -37,7 +37,7 @@
   padding: 1rem;
   flex-direction: column;
   align-items: center;
-  background-color: color(var(--c-black) alpha(0.99));
+  background-color: color-mod(var(--c-black) alpha(0.99));
   height: 100%;
 }
 

diff --git a/app/src/components/ReviewDeck/styles.css b/app/src/components/ReviewDeck/styles.css
@@ -35,7 +35,7 @@
   padding: 1rem;
   flex-direction: column;
   align-items: center;
-  background-color: color(var(--c-black) alpha(0.99));
+  background-color: color-mod(var(--c-black) alpha(0.99));
   height: 100%;
 }
 

diff --git a/babel.config.js b/babel.config.js
@@ -1,21 +1,8 @@
 'use strict'
 
-const PRESET_ENV_NO_MODULES = [
-  '@babel/preset-env',
-  {
-    modules: false,
-    // TODO(mc, 2019-03-13): uncomment this line to enable babel polyfill
-    // useBuiltIns: 'usage',
-  },
-]
-
-const PRESET_ENV_CJS_MODULES = ['@babel/preset-env', { modules: 'commonjs' }]
-
 module.exports = {
   env: {
     production: {
-      // TODO(mc, 2019-03-13): add '@babel/plugin-transform-runtime'
-      //   along with useBuiltIns TODO above
       plugins: ['babel-plugin-unassert'],
     },
     development: {
@@ -34,15 +21,32 @@ module.exports = {
     '@babel/plugin-proposal-optional-chaining',
     '@babel/plugin-syntax-dynamic-import',
   ],
-  presets: ['@babel/preset-flow', '@babel/preset-react', PRESET_ENV_NO_MODULES],
+  presets: [
+    '@babel/preset-flow',
+    '@babel/preset-react',
+    ['@babel/preset-env', { modules: false, useBuiltIns: false }],
+  ],
   overrides: [
     {
       test: 'app-shell/**/*',
-      presets: [PRESET_ENV_CJS_MODULES],
+      presets: [
+        [
+          '@babel/preset-env',
+          { modules: 'commonjs', targets: { electron: '6' } },
+        ],
+      ],
+    },
+    {
+      test: ['discovery-client/**/*'],
+      presets: [
+        ['@babel/preset-env', { modules: 'commonjs', targets: { node: '8' } }],
+      ],
     },
+    // app that should be polyfilled
+    // these projects require `core-js` in their package.json `dependencies`
     {
-      test: 'discovery-client/**/*',
-      presets: [PRESET_ENV_CJS_MODULES],
+      test: ['app/**/*', 'labware-library/**/*', 'protocol-designer/**/*'],
+      presets: [['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }]],
     },
   ],
 }
diff --git a/components/src/buttons/buttons.css b/components/src/buttons/buttons.css
@@ -32,7 +32,7 @@
 
     &:active {
       font-weight: var(--fw-regular);
-      background-color: color(var(--c-bg-light) shade(10%));
+      background-color: color-mod(var(--c-bg-light) shade(10%));
     }
 
     &:disabled,
@@ -44,7 +44,7 @@
     &:focus,
     &:hover,
     &.hover {
-      background-color: color(var(--c-med-gray) alpha(25%));
+      background-color: color-mod(var(--c-med-gray) alpha(25%));
     }
     /* stylelint-enable */
   }
@@ -55,7 +55,7 @@
 
     &:active {
       font-weight: var(--fw-regular);
-      background-color: color(var(--c-bg-dark) tint(10%));
+      background-color: color-mod(var(--c-bg-dark) tint(10%));
     }
 
     &:disabled,
@@ -67,7 +67,7 @@
     &:focus,
     &:hover,
     &.hover {
-      background-color: color(var(--c-bg-dark) tint(5%));
+      background-color: color-mod(var(--c-bg-dark) tint(5%));
     }
     /* stylelint-enable */
   }
@@ -90,12 +90,12 @@
   &:focus,
   &:hover,
   &.hover {
-    background-color: color(var(--c-bg-dark) shade(30%));
+    background-color: color-mod(var(--c-bg-dark) shade(30%));
   }
 
   &:active {
     font-weight: var(--fw-regular);
-    background-color: color(var(--c-bg-dark) tint(30%));
+    background-color: color-mod(var(--c-bg-dark) tint(30%));
 
     /* TODO(mc, 2017-12-07): pull shadows out to central file */
     box-shadow:
@@ -110,19 +110,19 @@
     &:focus,
     &:hover,
     &.hover {
-      background-color: color(var(--c-bg-light) shade(5%));
+      background-color: color-mod(var(--c-bg-light) shade(5%));
     }
 
     &:active {
-      background-color: color(var(--c-bg-light) shade(10%));
+      background-color: color-mod(var(--c-bg-light) shade(10%));
     }
   }
 
   &:disabled,
   &.disabled {
     @apply --button-disabled;
 
-    background-color: color(var(--c-bg-dark) tint(70%));
+    background-color: color-mod(var(--c-bg-dark) tint(70%));
     box-shadow: none;
     color: var(--c-font-disabled);
   }

diff --git a/components/src/deck/LabwareNameOverlay.css b/components/src/deck/LabwareNameOverlay.css
@@ -4,7 +4,7 @@
   width: 100%;
   font-size: 0.5rem;
   color: var(--c-font-light);
-  background-color: color(var(--c-black) alpha(0.75));
+  background-color: color-mod(var(--c-black) alpha(0.75));
   padding: 0.25rem;
   border-radius: 0 0 0.5rem 0.5rem;
 }

diff --git a/components/src/deck/Well.css b/components/src/deck/Well.css
@@ -17,7 +17,7 @@
 .selected {
   stroke-width: 1;
   stroke: var(--c-highlight);
-  fill: color(var(--c-highlight) alpha(20%));
+  fill: color-mod(var(--c-highlight) alpha(20%));
 }
 
 .highlighted {
@@ -40,7 +40,7 @@
 }
 
 .empty_tip {
-  fill: color(var(--c-charcoal) alpha(40%));
+  fill: color-mod(var(--c-charcoal) alpha(40%));
 }
 
 .tip_fill {

diff --git a/components/src/deck/labwareRender.css b/components/src/deck/labwareRender.css
@@ -2,7 +2,7 @@
 
 .highlighted_well {
   stroke: var(--c-highlight);
-  fill: color(var(--c-highlight) alpha(20%));
+  fill: color-mod(var(--c-highlight) alpha(20%));
 }
 
 .selected_well {

diff --git a/components/src/forms/SelectField.css b/components/src/forms/SelectField.css
@@ -42,7 +42,7 @@
 
 .select_group {
   &:not(:first-child) {
-    border-top: 1px solid color(var(--c-med-gray) alpha(0.4));
+    border-top: 1px solid color-mod(var(--c-med-gray) alpha(0.4));
   }
 }
 

diff --git a/components/src/forms/forms.css b/components/src/forms/forms.css
@@ -100,7 +100,7 @@
 
   &:focus-within {
     background-color: var(--c-white);
-    box-shadow: 0 0.125rem 0.25rem 0 color(var(--c-black) alpha(0.5));
+    box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
   }
 
   & .suffix {
@@ -168,7 +168,7 @@
 
     &:focus {
       background-color: var(--c-white);
-      box-shadow: 0 0.125rem 0.25rem 0 color(var(--c-black) alpha(0.5));
+      box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
     }
   }
 

diff --git a/components/src/instrument/PipetteSelect.css b/components/src/instrument/PipetteSelect.css
@@ -34,15 +34,15 @@
 
   &:focus-within {
     background-color: var(--c-white);
-    box-shadow: 0 0.125rem 0.25rem 0 color(var(--c-black) alpha(0.5));
+    box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
   }
 }
 
 .select_menu {
   @apply --font-body-1-dark;
 
   background-color: var(--c-white);
-  box-shadow: 0 0.125rem 0.25rem 0 color(var(--c-black) alpha(0.5));
+  box-shadow: 0 0.125rem 0.25rem 0 color-mod(var(--c-black) alpha(0.5));
   border-bottom-left-radius: var(--bd-radius-form-field);
   border-bottom-right-radius: var(--bd-radius-form-field);
   padding-bottom: 0.25rem;
@@ -52,7 +52,7 @@
   padding: 0.25rem 0;
 
   &:not(:first-child) {
-    border-top: 1px solid color(var(--c-med-gray) alpha(0.4));
+    border-top: 1px solid color-mod(var(--c-med-gray) alpha(0.4));
   }
 }
 

diff --git a/components/src/lists/lists.css b/components/src/lists/lists.css
@@ -88,7 +88,7 @@
   padding-top: 1rem;
 
   &:hover {
-    background-color: color(var(--c-black) alpha(5%));
+    background-color: color-mod(var(--c-black) alpha(5%));
   }
 }
 

diff --git a/components/src/styles/colors.css b/components/src/styles/colors.css
@@ -2,7 +2,7 @@
   /* ot brand */
   --c-mustard: #ffd252;
   --c-blue: #006fff;
-  --c-light-blue: color(var(--c-blue) lightness(85%));
+  --c-light-blue: color-mod(var(--c-blue) lightness(85%));
 
   /*
    * grays
@@ -37,7 +37,7 @@
   --c-success: #60b120;
 
   /* Misc */
-  --c-selection-overlay: color(var(--c-highlight) alpha(0.3));
+  --c-selection-overlay: color-mod(var(--c-highlight) alpha(0.3));
   --c-plate-bg: #ccc;
   --c-white: #fff;
   --c-black: #000;

diff --git a/discovery-client/package.json b/discovery-client/package.json
@@ -26,6 +26,7 @@
     "lodash": "^4.17.4",
     "mdns-js": "^1.0.1",
     "node-fetch": "^2.6.0",
+    "stable": "^0.1.8",
     "to-regex": "^3.0.2",
     "yargs": "^12.0.1"
   }

diff --git a/discovery-client/src/service-list.js b/discovery-client/src/service-list.js
@@ -2,6 +2,7 @@
 import differenceBy from 'lodash/differenceBy'
 import partition from 'lodash/partition'
 import uniqBy from 'lodash/uniqBy'
+import stableSort from 'stable'
 
 import {
   makeService,
@@ -88,7 +89,8 @@ function dedupeServices(list: ServiceList) {
     'name'
   )
 
-  return sanitizedWithIp.concat(dedupedWithoutIp).sort(compareServices)
+  // use a stable sort because core-js polyfills can mess with Array.sort order
+  return stableSort(sanitizedWithIp.concat(dedupedWithoutIp), compareServices)
 }
 
 // sort service list by:

diff --git a/labware-library/package.json b/labware-library/package.json
@@ -21,6 +21,7 @@
     "file-saver": "^2.0.1",
     "formik": "^1.5.8",
     "jszip": "^3.2.2",
+    "core-js": "^3.2.1",
     "lodash": "^4.17.4",
     "query-string": "^6.2.0",
     "react": "^16.8.6",