Setting up tailwind and css modules env

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

package.json

@@ -241,7 +241,7 @@
   },
   "devDependencies": {
     "@emeraldpay/hashicon-react": "^0.4.0",
-    "@material-ui/core": "^4.10.1",
+    "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
@@ -335,6 +335,8 @@
     "nodemon": "^2.0.4",
     "open": "^7.3.1",
     "patch-package": "^6.2.2",
+    "postcss": "^8.2.14",
+    "postcss-loader": "~3.0.0",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.2.0",
     "progress-bar-webpack-plugin": "^2.1.0",
@@ -350,6 +352,7 @@
     "sharp": "^0.26.1",
     "spectron": "11.0.0",
     "style-loader": "^1.2.1",
+    "tailwindcss": "^2.1.2",
     "ts-jest": "26.3.0",
     "ts-loader": "^7.0.5",
     "ts-node": "^8.10.2",
@@ -358,6 +361,7 @@
     "typedoc-plugin-markdown": "^2.4.0",
     "typeface-roboto": "^0.0.75",
     "typescript": "4.0.2",
+    "typescript-plugin-css-modules": "^3.2.0",
     "url-loader": "^4.1.0",
     "webpack": "^4.44.2",
     "webpack-cli": "^3.3.11",

postcss.config.js

@@ -0,0 +1,7 @@
+const tailwindcss = require("tailwindcss");
+
+module.exports = {
+  plugins: [
+    tailwindcss("./tailwind.config.js")
+  ],
+};

src/renderer/components/app.tsx

@@ -1,3 +1,4 @@
+import "tailwindcss/tailwind.css";
 import React from "react";
 import { observable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";

tailwind.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  purge: ["src/**/*.{js,jsx,ts,tsx}"],
+  darkMode: "class",
+  theme: {
+    fontFamily: {
+      sans: ["Roboto", "Helvetica", "Arial", "sans-serif"],
+    },
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+};

tsconfig.json

@@ -28,7 +28,8 @@
         "node_modules/*",
         "types/*"
       ]
-    }
+    },
+    "plugins": [{ "name": "typescript-plugin-css-modules" }]
   },
   "ts-node": {
     "compilerOptions": {

types/mocks.d.ts

@@ -17,3 +17,7 @@ declare module "*.ttf" {
   const content: string;
   export = content;
 }
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}

webpack.renderer.ts

@@ -97,9 +97,28 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
           }
         },
         {
-          test: /\.s?css$/,
+          test: /\.css$/,
           use: [
             // https://webpack.js.org/plugins/mini-css-extract-plugin/
+            isDevelopment ? "style-loader" : MiniCssExtractPlugin.loader,
+            {
+              loader: "css-loader",
+              options: {
+                modules: {
+                  auto: true,
+                  mode: "local",
+                  localIdentName: "[path][name]__[local]--[hash:base64:5]",
+                }
+              },
+            },
+            {
+              loader: "postcss-loader"
+            }
+          ]
+        },
+        {
+          test: /\.scss$/,
+          use: [
             isDevelopment ? "style-loader" : MiniCssExtractPlugin.loader,
             {
               loader: "css-loader",
@@ -120,7 +139,7 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
               }
             },
           ]
-        }
+        },
       ]
     },