Add stylelint, styled-components beta, and fix react-contextmenu styling

.babelrc

@@ -17,6 +17,7 @@
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-proposal-object-rest-spread",
     "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-transform-runtime"
+    "@babel/plugin-transform-runtime",
+    "babel-plugin-styled-components"
   ]
 }

.stylelintrc

@@ -0,0 +1,9 @@
+{
+  "processors": [
+    "stylelint-processor-styled-components"
+  ],
+  "extends": [
+    "stylelint-config-recommended",
+    "stylelint-config-styled-components"
+  ]
+}

package.json

@@ -22,7 +22,9 @@
     "build": "cross-env NODE_ENV=production webpack --mode production",
     "bundle-analyzer": "cross-env NODE_ENV=production webpack-dev-server --mode=production --env.BUNDLE_ANALYZER",
     "precommit": "lint-staged",
-    "lint": "eslint ./src",
+    "lint": "yarn lint:js && yarn lint:css",
+    "lint:js": "eslint ./src",
+    "lint:css": "stylelint './src/**/*.js'",
     "test": "concurrently --success \"first\" --kill-others \"yarn test-all\" \"yarn test-server\"",
     "test-server": "cross-env NODE_ENV=test webpack-dev-server --mode development --port 9091 --content-base ./test/fixtures",
     "test-all": "ava",
@@ -75,13 +77,14 @@
     "react-dom": "^16.9.0",
     "react-helmet": "^5.2.0",
     "react-infinite-scroller": "^1.2.4",
+    "react-is": "^16.9.0",
     "react-modal": "^3.10.1",
     "react-router-dom": "^5.0.1",
     "react-select": "^3.0.4",
     "react-toggle": "^4.0.2",
     "react-tooltip": "^3.11.1",
     "recast-wasm": "^0.1.1",
-    "styled-components": "^4.3.2",
+    "styled-components": "^5.0.0-beta.8",
     "styled-icons": "^8.4.2",
     "three": "https://github.com/MozillaReality/three.js.git#0f9b0024725f0dd917caa54c2934a4ba1fc12c4f",
     "three-mesh-bvh": "^0.1.4",
@@ -101,6 +104,7 @@
     "ava": "2.3.0",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.0",
+    "babel-plugin-styled-components": "^1.10.6",
     "concurrently": "^4.1.2",
     "copy-webpack-plugin": "^5.0.4",
     "cors": "^2.8.5",
@@ -122,6 +126,10 @@
     "selfsigned": "^1.10.6",
     "sinon": "^7.4.2",
     "standardized-audio-context-mock": "^7.1.6",
+    "stylelint": "^10.1.0",
+    "stylelint-config-recommended": "^2.2.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-processor-styled-components": "^1.8.0",
     "terser-webpack-plugin": "^2.0.1",
     "webpack": "^4.39.3",
     "webpack-bundle-analyzer": "^3.4.1",
@@ -129,4 +137,4 @@
     "webpack-dev-server": "^3.8.0",
     "worker-loader": "^2.0.0"
   }
-}
+}

src/ui/inputs/Button.js

@@ -11,7 +11,7 @@ export const Button = styled.button.attrs(props => ({
   white-space: nowrap;
   min-height: 24px;
   font-size: 12px;
-  font-family: Lato;
+  font-family: "Lato", sans-serif;
   text-align: center;
   cursor: pointer;
   align-items: center;
@@ -19,15 +19,6 @@ export const Button = styled.button.attrs(props => ({
   text-decoration: none;
   padding: 1px 6px;
 
-  &:disabled {
-    background: ${props => props.theme.disabled};
-    color: ${props => props.theme.disabledText};
-
-    &:hover {
-      background-color: ${props => props.theme.disabled};
-    }
-  }
-
   &:hover {
     color: ${props => props.theme.text};
     background-color: ${props => props.theme.bluePressed};
@@ -37,6 +28,15 @@ export const Button = styled.button.attrs(props => ({
     color: ${props => props.theme.text};
     background-color: ${props => props.theme.bluePressed};
   }
+
+  &:disabled {
+    background: ${props => props.theme.disabled};
+    color: ${props => props.theme.disabledText};
+
+    &:hover {
+      background-color: ${props => props.theme.disabled};
+    }
+  }
 `;
 
 export const MediumButton = styled(Button)`
@@ -55,6 +55,14 @@ export const SecondaryButton = styled(Button)`
   background-color: ${props => props.theme.hover};
   color: ${props => props.theme.text};
 
+  &:hover {
+    background-color: ${props => props.theme.text2};
+  }
+
+  &:active {
+    background-color: ${props => props.theme.text2};
+  }
+
   &:disabled {
     background-color: ${props => props.theme.disabled};
     color: ${props => props.theme.disabledText};
@@ -63,14 +71,6 @@ export const SecondaryButton = styled(Button)`
       background-color: transparent;
     }
   }
-
-  &:hover {
-    background-color: ${props => props.theme.text2};
-  }
-
-  &:active {
-    background-color: ${props => props.theme.text2};
-  }
 `;
 
 export const MenuButton = styled(Button)`
@@ -78,6 +78,14 @@ export const MenuButton = styled(Button)`
   color: ${props => props.theme.text2};
   padding: 1px 8px;
 
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+
+  &:active {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+
   &:disabled {
     background-color: transparent;
     color: ${props => props.theme.disabledText};
@@ -86,12 +94,4 @@ export const MenuButton = styled(Button)`
       background-color: transparent;
     }
   }
-
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.2);
-  }
-
-  &:active {
-    background-color: rgba(255, 255, 255, 0.2);
-  }
 `;

src/ui/inputs/ProgressBar.js

@@ -64,12 +64,6 @@ const ProgressBarContainer = styled.div`
     overflow: hidden;
   }
 
-  & > span {
-    &:after {
-      display: none;
-    }
-  }
-
   @keyframes move {
     0% {
       background-position: 0 0;

src/ui/landing/Callout.js

@@ -9,7 +9,7 @@ const StyledCallout = styled.div`
 `;
 
 const ImageContainer = styled.div`
-  padding-bottom: 56.25%; // 16:9
+  padding-bottom: 56.25%; /* 16:9 */
   position: relative;
   border-radius: 6px;
   overflow: hidden;

src/ui/layout/ContextMenu.js

@@ -52,7 +52,7 @@ export const ContextMenuStyles = createGlobalStyle`
     display: flex;
     flex: 1;
     justify-content: space-between;
-    color: $text;
+    color: ${props => props.theme.text};
   }
 
   .react-contextmenu-item.react-contextmenu-item--active,
@@ -77,23 +77,16 @@ export const ContextMenuStyles = createGlobalStyle`
     height: 1px;
     padding: 0;
   }
-  .react-contextmenu-item--divider:hover {
-  }
 
   .react-contextmenu-item.react-contextmenu-submenu {
     padding: 0;
   }
 
-  .react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item {
-  }
-
-  .react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item:after {
+  .react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item::after {
     display: inline-block;
-    position: absolute;
-    right: 12px;
-    top: 8px;
-    font-size: 14px;
-    content: "\2BC8";
+    font-size: 12px;
+    content: "▸";
+    vertical-align: middle;
   }
 `;
 

src/ui/toolbar/ToolToggle.js

@@ -43,14 +43,14 @@ const ToggleStyle = createGlobalStyle`
     transition: all 0.2s ease;
   }
 
-  .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
-    background-color: #000000;
-  }
-
   .react-toggle--checked .react-toggle-track {
     background-color: #19AB27;
   }
 
+  .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+    background-color: #000000;
+  }
+
   .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
     background-color: #128D15;
   }
@@ -103,7 +103,6 @@ const ToggleStyle = createGlobalStyle`
     border-radius: 50%;
     background-color: #FAFAFA;
     box-sizing: border-box;
-    transition: all 0.25s ease;
   }
 
   .react-toggle--checked .react-toggle-thumb {
@@ -130,6 +129,7 @@ const ToggleText = styled.div`
   user-select: none;
 `;
 
+/* stylelint-disable */
 const ToggleSwitch = styled(Toggle)`
   margin: 0px 16px;
 
@@ -161,7 +161,9 @@ const ToggleSwitch = styled(Toggle)`
     box-shadow: none;
   }
 `;
+/* stylelint-enable */
 
+/* stylelint-disable */
 const ToggleOnOff = styled(Toggle)`
   margin: 0px 16px;
 
@@ -169,6 +171,10 @@ const ToggleOnOff = styled(Toggle)`
     background-color: ${props => props.theme.panel};
   }
 
+  &.react-toggle--checked .react-toggle-thumb {
+    background-color: ${props => props.theme.blue};
+  }
+
   &.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
     background-color: ${props => props.theme.background};
   }
@@ -177,6 +183,12 @@ const ToggleOnOff = styled(Toggle)`
     color: ${props => props.theme.panel};
   }
 
+  > .react-toggle-thumb {
+    background-color: ${props => props.theme.border};
+    border: none;
+    box-shadow: none;
+  }
+
   > .react-toggle-track {
     background-color: ${props => props.theme.panel};
 
@@ -192,17 +204,8 @@ const ToggleOnOff = styled(Toggle)`
       color: ${props => props.theme.border};
     }
   }
-
-  &.react-toggle--checked .react-toggle-thumb {
-    background-color: ${props => props.theme.blue};
-  }
-
-  > .react-toggle-thumb {
-    background-color: ${props => props.theme.border};
-    border: none;
-    box-shadow: none;
-  }
 `;
+/* stylelint-enable */
 
 export default class ToolToggle extends Component {
   constructor(props) {