Use stylelint on styled-components

.stylelintrc

@@ -1,3 +1,10 @@
 {
-  "extends": "stylelint-config-recommended-scss"
+  "processors": [
+    "stylelint-processor-styled-components"
+  ],
+  "extends": [
+    "stylelint-config-recommended",
+    "stylelint-config-styled-components"
+  ],
+  "syntax": "css"
 }

configs/webpack/common.js

@@ -1,7 +1,6 @@
 // Shared config (dev and prod)
 const {resolve} = require("path");
 const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
-const StyleLintPlugin = require("stylelint-webpack-plugin");
 const webpack = require('webpack');
 const Dotenv = require("dotenv-webpack");
 
@@ -44,7 +43,6 @@ module.exports = function (env, argv) {
 
   config.plugins = [
     new webpack.DefinePlugin(envVars),
-    new StyleLintPlugin(),
     new Dotenv({
         path: "./.env"
     }),

package.json

@@ -23,10 +23,10 @@
     "build": "NODE_ENV=production npm-run-all build:client build:server",
     "build:server": "webpack -p --config=configs/webpack/prod.js --env.platform=server",
     "build:client": "webpack -p --config=configs/webpack/prod.js --env.platform=client",
-    "lint": "npm run lint:es && npm run lint:sass",
+    "lint": "npm run lint:es && npm run lint:css",
     "lint:es": "eslint \"./src/**/*.{ts,tsx}\"",
     "lint:es:fix": "eslint --fix \"./src/**/*.{ts,tsx}\"",
-    "lint:sass": "stylelint \"./src/**/*.{scss,css}\"",
+    "lint:css": "stylelint \"./src/**/*.{ts,tsx}\"",
     "start": "npm run start-dev",
     "start-dev": "webpack-dev-server --config=configs/webpack/dev.js",
     "serve": "node dist/js/server.js",
@@ -96,10 +96,9 @@
     "serve": "11.3.2",
     "style-loader": "0.21.0",
     "stylelint": "11.1.1",
-    "stylelint-config-recommended-scss": "4.0.0",
-    "stylelint-config-standard": "19.0.0",
-    "stylelint-scss": "3.12.1",
-    "stylelint-webpack-plugin": "1.0.3",
+    "stylelint-config-recommended": "3.0.0",
+    "stylelint-config-styled-components": "0.1.1",
+    "stylelint-processor-styled-components": "1.10.0",
     "testcafe": "1.6.1",
     "testcafe-react-selectors": "2.1.0",
     "ts-loader": "7.0.5",

src/components/Footer/FooterContent.tsx

@@ -4,6 +4,14 @@ import Anchor from "../Anchor";
 import colors from "@theme/colors";
 import breakpoints from "@theme/breakpoints";
 
+const Columns = styled.div`
+  display: flex;
+  justify-content: space-between;
+  & > div > div {
+    margin-bottom: 1rem;
+  }
+`;
+
 const Content = styled.div`
   display: flex;
 
@@ -46,14 +54,6 @@ const MarginSpace = styled.div`
   margin: auto;
 `;
 
-const Columns = styled.div`
-  display: flex;
-  justify-content: space-between;
-  & > div > div {
-    margin-bottom: 1rem;
-  }
-`;
-
 const Map = styled.div`
   flex: 1;
   @media screen and (max-width: ${breakpoints.mobile}) {

src/views/FrontPage/FrontPageView.tsx

@@ -41,7 +41,8 @@ const SponsorReel = styled.div`
       margin: 0 1rem;
     }
   }
-  img{
+
+  img {
     width: 200px;
     object-fit: cover;
   }