Refactor styling

.eslintrc.json

@@ -12,9 +12,8 @@
     "prettier/react"
   ],
   "parserOptions": {
-    "ecmaVersion": 8,
+    "ecmaVersion": 9,
     "ecmaFeatures": {
-      "experimentalObjectRestSpread": true,
       "jsx": true
     },
     "sourceType": "module"
@@ -23,5 +22,10 @@
   "rules": {
     "react/prop-types": 0,
     "no-case-declarations": 0
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   }
 }

craco.config.js

@@ -0,0 +1,9 @@
+const CracoLessPlugin = require('craco-less');
+const { ESLINT_MODES } = require('@craco/craco');
+
+module.exports = {
+  plugins: [{ plugin: CracoLessPlugin }],
+  eslint: {
+    mode: ESLINT_MODES.file,
+  },
+};

package.json

@@ -19,30 +19,34 @@
     "redux": "^4.0.1",
     "redux-devtools-extension": "^2.13.2",
     "redux-thunk": "^2.2.0",
-    "styled-components": "^3.3.3",
     "uast-viewer": "^0.4.0"
   },
   "devDependencies": {
+    "@craco/craco": "^5.0.2",
+    "craco-less": "^1.7.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "enzyme-to-json": "^3.3.4",
-    "eslint": "^4.12.1",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-jest": "^21.3.2",
-    "eslint-plugin-react": "^7.5.1",
+    "eslint-config-prettier": "^4.2.0",
+    "eslint-plugin-jest": "^22.5.1",
     "jest-fetch-mock": "^1.1.1",
-    "jest-styled-components": "^5.0.1",
     "prettier": "1.8.2",
-    "react-scripts": "1.0.17",
+    "react-scripts": "^3.0.0",
     "react-test-renderer": "^16.4.1",
     "redux-mock-store": "^1.3.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "eject": "react-scripts eject",
     "lint": "eslint 'src/**/*.js' && prettier -l 'src/**/*.js'",
     "fix-lint-errors": "eslint --fix 'src/**/*.js'; prettier --write 'src/**/*.js'"
-  }
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

src/App.js

@@ -1,6 +1,4 @@
 import React, { Component } from 'react';
-import styled, { injectGlobal } from 'styled-components';
-import 'normalize.css';
 import SplitPane from 'react-split-pane';
 import { withUASTEditor, Editor } from 'uast-viewer';
 import 'uast-viewer/dist/default-theme.css';
@@ -19,44 +17,6 @@ import { init } from './state';
 import { getLanguageMode } from './state/languages';
 import { change as changeCode } from './state/code';
 
-import { font } from './styling/variables';
-
-const Wrap = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-`;
-
-const Content = styled.div`
-  display: flex;
-  height: 100%;
-  flex-direction: row;
-  position: relative;
-`;
-
-const RightPanel = styled.div`
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  position: relative;
-`;
-
-// eslint-disable-next-line
-injectGlobal`
-  .ReactCodeMirror, .CodeMirror {
-    height: 100%;
-  }
-
-  .CodeMirror {
-    font-family: ${font.family.code};
-    font-size: ${font.size.large};
-  }
-`;
-
 export class App extends Component {
   componentDidMount() {
     return this.props.init();
@@ -90,15 +50,15 @@ export class App extends Component {
           style={{ height: '100%' }}
         />
 
-        <RightPanel>
+        <div className="bblfsh-app__right-panel">
           <Options />
           <SearchPanel />
           <ParseModeSwitcher />
           <UASTViewer
             uastViewerProps={uastViewerProps}
             showLocations={showLocation}
           />
-        </RightPanel>
+        </div>
       </SplitPane>
     );
   }
@@ -111,9 +71,11 @@ export class App extends Component {
     }
 
     return (
-      <Wrap>
+      <div className="bblfsh-app__wrap">
         <Header />
-        <Content>{code !== null ? this.renderContent() : <Spinner />}</Content>
+        <div className="bblfsh-app__content">
+          {code !== null ? this.renderContent() : <Spinner />}
+        </div>
 
         <Footer versionsState={versions} languages={langList} />
 
@@ -130,7 +92,7 @@ export class App extends Component {
             })}
           </Notifications>
         ) : null}
-      </Wrap>
+      </div>
     );
   }
 }

src/App.test.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { App } from './App';
-import 'jest-styled-components';
 import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 

src/__snapshots__/App.test.js.snap

@@ -1,21 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`render while loading 1`] = `
-<styled.div>
+<div
+  className="bblfsh-app__wrap"
+>
   <Connect(Header) />
-  <styled.div>
-    <styled.div />
-  </styled.div>
+  <div
+    className="bblfsh-app__content"
+  >
+    <Spinner />
+  </div>
   <Footer
     languages={Object {}}
   />
-</styled.div>
+</div>
 `;
 
 exports[`render with errors 1`] = `
-<styled.div>
+<div
+  className="bblfsh-app__wrap"
+>
   <Connect(Header) />
-  <styled.div>
+  <div
+    className="bblfsh-app__content"
+  >
     <SplitPane
       allowResize={true}
       defaultSize="50%"
@@ -35,14 +43,16 @@ exports[`render with errors 1`] = `
         }
         theme="solarized light"
       />
-      <styled.div>
+      <div
+        className="bblfsh-app__right-panel"
+      >
         <Connect(Options) />
         <Connect(SearchPanel) />
         <Connect(ParseModeSwitcher) />
         <UASTViewer />
-      </styled.div>
+      </div>
     </SplitPane>
-  </styled.div>
+  </div>
   <Footer
     languages={Object {}}
   />
@@ -58,13 +68,17 @@ exports[`render with errors 1`] = `
       onRemove={[Function]}
     />
   </Notifications>
-</styled.div>
+</div>
 `;
 
 exports[`renders without crashing 1`] = `
-<styled.div>
+<div
+  className="bblfsh-app__wrap"
+>
   <Connect(Header) />
-  <styled.div>
+  <div
+    className="bblfsh-app__content"
+  >
     <SplitPane
       allowResize={true}
       defaultSize="50%"
@@ -84,14 +98,16 @@ exports[`renders without crashing 1`] = `
         }
         theme="solarized light"
       />
-      <styled.div>
+      <div
+        className="bblfsh-app__right-panel"
+      >
         <Connect(Options) />
         <Connect(SearchPanel) />
         <Connect(ParseModeSwitcher) />
         <UASTViewer />
-      </styled.div>
+      </div>
     </SplitPane>
-  </styled.div>
+  </div>
   <Footer
     languages={
       Object {
@@ -113,5 +129,5 @@ exports[`renders without crashing 1`] = `
       }
     }
   />
-</styled.div>
+</div>
 `;