Component Library Scaffolding (#1407)

bitwarden_license/src/app/main.ts

@@ -6,6 +6,7 @@ import "jquery";
 import "popper.js";
 
 require("src/scss/styles.scss");
+require("src/scss/tailwind.css");
 
 import { AppModule } from "./app.module";
 

package.json

@@ -43,6 +43,7 @@
     "@types/webpack": "^5.28.0",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
     "@typescript-eslint/parser": "^5.10.1",
+    "autoprefixer": "^10.4.2",
     "buffer": "^6.0.3",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^10.0.0",
@@ -59,12 +60,15 @@
     "husky": "^7.0.4",
     "lint-staged": "^12.1.2",
     "mini-css-extract-plugin": "^2.4.5",
+    "postcss": "^8.4.6",
+    "postcss-loader": "^6.2.1",
     "prettier": "2.5.1",
     "process": "^0.11.10",
     "rimraf": "^3.0.2",
     "sass": "^1.32.10",
     "sass-loader": "^12.4.0",
     "style-loader": "^3.3.1",
+    "tailwindcss": "^3.0.18",
     "terser-webpack-plugin": "^5.2.5",
     "ts-loader": "^9.2.5",
     "typescript": "4.3.5",
@@ -100,7 +104,8 @@
     "rxjs": "^7.4.0",
     "sweetalert2": "^10.16.6",
     "webcrypto-shim": "0.1.7",
-    "whatwg-fetch": "3.6.2"
+    "whatwg-fetch": "3.6.2",
+    "zone.js": "0.11.4"
   },
   "engines": {
     "node": "~16",

postcss.config.js

@@ -0,0 +1,4 @@
+/* eslint-disable no-undef */
+module.exports = {
+  plugins: [require("tailwindcss"), require("autoprefixer"), require("postcss-nested")],
+};

src/app/main.ts

@@ -6,6 +6,7 @@ import "jquery";
 import "popper.js";
 
 require("../scss/styles.scss");
+require("../scss/tailwind.css");
 
 import { AppModule } from "./app.module";
 

src/scss/tailwind.css

@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import "../../jslib/components/src/tw-theme.css";

tailwind.config.js

@@ -0,0 +1,4 @@
+/* eslint-disable no-undef, @typescript-eslint/no-var-requires */
+const config = require("./jslib/components/tailwind.config.base");
+
+module.exports = config;

tsconfig.json

@@ -6,6 +6,7 @@
       "tldjs": ["jslib/common/src/misc/tldjs.noop"],
       "jslib-common/*": ["jslib/common/src/*"],
       "jslib-angular/*": ["jslib/angular/src/*"],
+      "@bitwarden/components": ["jslib/components/src"],
       "src/*": ["src/*"]
     }
   },

webpack.config.js

@@ -50,6 +50,16 @@ const moduleRules = [
       "sass-loader",
     ],
   },
+  {
+    test: /\.css$/,
+    use: [
+      {
+        loader: MiniCssExtractPlugin.loader,
+      },
+      "css-loader",
+      "postcss-loader",
+    ],
+  },
   {
     test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
     loader: "@ngtools/webpack",