Add styled-components, even if it is broken

Author: DaneEveritt

.yarnclean

@@ -0,0 +1 @@
+@types/react-native

package.json

@@ -24,6 +24,7 @@
         "react-transition-group": "^4.1.0",
         "socket.io-client": "^2.2.0",
         "sockette": "^2.0.6",
+        "styled-components": "^4.3.2",
         "use-react-router": "^1.0.7",
         "ws-wrapper": "^2.0.0",
         "xterm": "^3.14.4",
@@ -46,11 +47,14 @@
         "@types/react-redux": "^7.1.1",
         "@types/react-router-dom": "^4.3.3",
         "@types/react-transition-group": "^2.9.2",
+        "@types/styled-components": "^4.1.18",
         "@types/webpack-env": "^1.13.6",
         "@types/yup": "^0.26.17",
         "@typescript-eslint/eslint-plugin": "^1.10.1",
         "@typescript-eslint/parser": "^1.10.1",
         "babel-loader": "^8.0.5",
+        "babel-plugin-styled-components": "^1.10.6",
+        "babel-plugin-tailwind-components": "^0.5.10",
         "css-loader": "^2.1.0",
         "cssnano": "^4.0.3",
         "eslint": "^5.16.0",

resources/scripts/.eslintrc.yml

@@ -11,6 +11,8 @@ plugins:
 extends:
   - "standard"
   - "plugin:@typescript-eslint/recommended"
+globals:
+  tw: "readonly"
 rules:
   semi:
     - error

resources/scripts/gloabl.d.ts

@@ -0,0 +1 @@
+declare function tw(a: TemplateStringsArray | string): any;

webpack.config.js

@@ -71,8 +71,15 @@ module.exports = {
                         loader: 'babel-loader',
                         options: {
                             cacheDirectory: !isProduction,
-                            presets: ['@babel/preset-env', '@babel/preset-react'],
-                            plugins: ['react-hot-loader/babel', '@babel/plugin-syntax-dynamic-import'],
+                            presets: ['@babel/env', '@babel/react'],
+                            plugins: [
+                                'react-hot-loader/babel',
+                                '@babel/plugin-syntax-dynamic-import',
+                                ['styled-components', {
+                                    displayName: true,
+                                }],
+                                'tailwind-components',
+                            ],
                         },
                     },
                     {