Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

build(js,css): add browserslist spec and update JS and CSS toolchains #4083

Merged
merged 1 commit into from
Sep 20, 2019
+3,426 −2,056
Merged

build(js,css): add browserslist spec and update JS and CSS toolchains #4083

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions .browserslistrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
4 changes: 2 additions & 2 deletions app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
}
}
4 changes: 2 additions & 2 deletions app/src/components/AppSettings/AddManualIp/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
}

Expand All @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion app/src/components/ConnectModules/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}

Expand Down
4 changes: 2 additions & 2 deletions app/src/components/DeckMap/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
Expand Down
4 changes: 2 additions & 2 deletions app/src/components/ModuleControls/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
}

Expand All @@ -58,6 +58,6 @@
}

&:hover {
background-color: color(var(--c-bg-light) shade(10%));
background-color: color-mod(var(--c-bg-light) shade(10%));
}
}
2 changes: 1 addition & 1 deletion app/src/components/PrepareModules/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}

Expand Down
2 changes: 1 addition & 1 deletion app/src/components/ReviewDeck/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}

Expand Down
38 changes: 21 additions & 17 deletions babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: {
Expand All @@ -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 }]],
},
],
}
18 changes: 9 additions & 9 deletions components/src/buttons/buttons.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 */
}
Expand All @@ -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,
Expand All @@ -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 */
}
Expand All @@ -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:
Expand All @@ -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);
}
Expand Down
2 changes: 1 addition & 1 deletion components/src/deck/LabwareNameOverlay.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
4 changes: 2 additions & 2 deletions components/src/deck/Well.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -40,7 +40,7 @@
}

.empty_tip {
fill: color(var(--c-charcoal) alpha(40%));
fill: color-mod(var(--c-charcoal) alpha(40%));
}

.tip_fill {
Expand Down
2 changes: 1 addition & 1 deletion components/src/deck/labwareRender.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion components/src/forms/SelectField.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
}

Expand Down
4 changes: 2 additions & 2 deletions components/src/forms/forms.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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));
}
}

Expand Down
6 changes: 3 additions & 3 deletions components/src/instrument/PipetteSelect.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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));
}
}

Expand Down
2 changes: 1 addition & 1 deletion components/src/lists/lists.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%));
}
}

Expand Down
4 changes: 2 additions & 2 deletions components/src/styles/colors.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions discovery-client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
Expand Down
4 changes: 3 additions & 1 deletion discovery-client/src/service-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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:
Expand Down
1 change: 1 addition & 0 deletions labware-library/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading