feat: add style-components stack

add theme file and example button to get things started
add stylelint to keep style consistent
add lint:css command

.babelrc

@@ -1,4 +1,4 @@
 {
   "presets": [ "@babel/preset-env", "@babel/preset-react"],
-  "plugins": ["add-module-exports"]
+  "plugins": ["add-module-exports", "babel-plugin-styled-components"]
 }

.stylelintrc

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

README.md

@@ -80,6 +80,24 @@ yarn build:dev
 yarn test
 ```
 
+## Lint
+
+### Javascript
+Code style rules are available in `.eslintrc`.
+
+You can manually lint .js files running the following command:
+```
+npm run lint
+```
+
+### Styles
+Styling rules are available in `.stylelintrc`.
+
+You can manually the styled components running the following command:
+```
+npm run lint:css
+```
+
 ### Integration tests
 
 Inspect the extension _background_ to get its console and run `window.integrationTest()`.

package.json

@@ -10,6 +10,7 @@
     "clean": "rm -rf build",
     "test": "LMEM_BACKEND_ORIGIN='' LMEM_SCRIPTS_ORIGIN='.' NODE_ENV=test mocha --compilers js:@babel/register test/app --recursive",
     "lint": "git ls-files -om --exclude-standard | grep \\.js$ | xargs eslint --fix",
+    "lint:css":"stylelint './src/**/*.js'",
     "analyse": "babel-node ./node_modules/webpack/bin/webpack --optimize-minimize --mode production --config webpack/chromium.config.js --profile --json > stats.json"
   },
   "pre-commit": [
@@ -59,6 +60,7 @@
     "babel-loader": "^8.0.4",
     "babel-plugin-add-module-exports": "^1.0.0",
     "babel-plugin-macros": "^2.4.2",
+    "babel-plugin-styled-components": "^1.8.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.19",
     "chai": "^3.5.0",
     "chai-as-promised": "^5.3.0",
@@ -99,6 +101,11 @@
     "sinon": "^6.3.5",
     "sinon-chai": "^3.2.0",
     "style-loader": "^0.23.1",
+    "stylelint": "^9.7.1",
+    "stylelint-config-recommended": "^2.1.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-custom-processor-loader": "^0.5.0",
+    "stylelint-processor-styled-components": "^1.5.0",
     "svg-url-loader": "^2.0.2",
     "webpack": "^4.23.1",
     "webpack-cli": "^3.1.2",
@@ -127,6 +134,7 @@
     "redux-persist-immutable": "^4.2.0",
     "redux-thunk": "^2.0.1",
     "remote-redux-devtools": "^0.5.13",
+    "styled-components": "^4.0.3",
     "whatwg-url": "^3.0.0"
   }
 }

src/app/content/containers/Root.js

@@ -2,16 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
 import { hot } from 'react-hot-loader';
+import { ThemeProvider } from 'styled-components';
 import App from './App';
 
-const Root = ({ store }) => (
+const Root = ({ store, theme }) => (
   <Provider store={store}>
-    <App />
+    <ThemeProvider theme={theme}>
+      <App />
+    </ThemeProvider>
   </Provider>
 );
 
 Root.propTypes = {
   store: PropTypes.object.isRequired, // eslint-disable-line
+  theme: PropTypes.object.isRequired, // eslint-disable-line
 };
 
 export default hot(module)(Root);

src/app/content/index.js

@@ -4,7 +4,6 @@ import { render } from 'react-dom';
 import { createStore } from 'redux';
 import Root from './containers/Root';
 
-
 import rootReducer from './reducers';
 
 import prepareRecoActions from './actions/recommendations';
@@ -13,6 +12,7 @@ import prepareFilterActions from './actions/filters';
 import portCommunication from './portCommunication';
 
 import fromJS from '../utils/customFromJS';
+import theme from '../theme';
 
 const {
   updateDeactivatedWebsites,
@@ -186,7 +186,7 @@ chrome.runtime.onConnect.addListener(function listener(portToBackground) {
               });
             })
               .then((lmemContainer) => {
-                render(<Root store={store} />, lmemContainer);
+                render(<Root store={store} theme={theme} />, lmemContainer);
               });
 
           });

src/app/options/OptionRoot.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Provider, connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
+import { ThemeProvider } from 'styled-components';
 
 import OptionScreen from './OptionScreen';
 import filterActions from '../content/actions/filters';
@@ -42,14 +43,17 @@ function mapDispatchToProps(dispatch) {
 
 const Options = connect(mapStateToProps, mapDispatchToProps)(OptionScreen);
 
-const OptionRoot = ({ store }) => (
+const OptionRoot = ({ store, theme }) => (
   <Provider store={store}>
-    <Options />
+    <ThemeProvider theme={theme}>
+      <Options />
+    </ThemeProvider>
   </Provider>
 );
 
 OptionRoot.propTypes = {
   store: PropTypes.object.isRequired, // eslint-disable-line
+  theme: PropTypes.object.isRequired, // eslint-disable-line
 };
 
 export default hot(module)(OptionRoot);

src/app/options/index.js

@@ -2,9 +2,10 @@ import React from 'react';
 import { render } from 'react-dom';
 
 import OptionRoot from './OptionRoot';
+import theme from '../theme';
 
 import mainStyles from '../styles/main.scss?inline'; // eslint-disable-line
 
 const { store } = chrome.extension.getBackgroundPage();
 
-render(<OptionRoot store={store} />, document.getElementById('root'));
+render(<OptionRoot store={store} theme={theme} />, document.getElementById('root'));

src/app/popup/PopupRoot.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Provider, connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
+import { ThemeProvider } from 'styled-components';
 
 import PopupScreen from './PopupScreen';
 import uiActions from '../content/actions/ui';
@@ -35,14 +36,17 @@ function mapDispatchToProps(dispatch) {
 
 const Popup = connect(mapStateToProps, mapDispatchToProps)(PopupScreen);
 
-const PopupRoot = ({ store }) => (
+const PopupRoot = ({ store, theme }) => (
   <Provider store={store}>
-    <Popup />
+    <ThemeProvider theme={theme}>
+      <Popup />
+    </ThemeProvider>
   </Provider>
 );
 
 PopupRoot.propTypes = {
   store: PropTypes.object.isRequired, // eslint-disable-line
+  theme: PropTypes.object.isRequired, // eslint-disable-line
 };
 
 export default hot(module)(PopupRoot);

src/app/popup/index.js

@@ -2,9 +2,10 @@ import React from 'react';
 import { render } from 'react-dom';
 
 import PopupRoot from './PopupRoot';
+import theme from '../theme';
 
 import '../styles/main.scss?inline'; // eslint-disable-line
 
 const { store } = chrome.extension.getBackgroundPage();
 
-render(<PopupRoot store={store} />, document.getElementById('root'));
+render(<PopupRoot store={store} theme={theme} />, document.getElementById('root'));

src/app/theme.js

@@ -0,0 +1,3 @@
+export default {
+  main: 'purple'
+};

src/components/atoms/Button.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export default styled.button`
+  font-size: 1em;
+  margin: 1em;
+  padding: 0.25em 1em;
+  border-radius: 3px;
+
+  color: ${props => props.theme.main};
+  border: 2px solid ${props => props.theme.main};
+`;

webpack/base.config.js

@@ -40,8 +40,8 @@ const baseConfig = ({
         ],
         use: [
           { loader: 'babel-loader' },
+          { loader: 'stylelint-custom-processor-loader' },
         ],
-
       },
       {
         test: /\.scss?$/,