[PM-2237] Add tailwind to desktop & browser (#5326)

* Add tailwind to desktop

* Add tailwind to browser

* Toy around with using CL in desktop

* Move custom css into the tailwind theme

* Revert component experiment

* Add components to browser tsconfig

* Fix build

apps/browser/postcss.config.js

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

apps/browser/src/popup/main.ts

@@ -4,6 +4,7 @@ import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 import BrowserPlatformUtilsService from "../platform/services/browser-platform-utils.service";
 
 require("./scss/popup.scss");
+require("./scss/tailwind.css");
 
 import { AppModule } from "./app.module";
 

apps/browser/src/popup/scss/tailwind.css

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

apps/browser/tailwind.config.js

@@ -0,0 +1,6 @@
+/* eslint-disable no-undef, @typescript-eslint/no-var-requires */
+const config = require("../../libs/components/tailwind.config.base");
+
+config.content = ["./src/**/*.{html,ts}", "../../libs/components/src/**/*.{html,ts}"];
+
+module.exports = config;

apps/browser/tsconfig.json

@@ -10,8 +10,9 @@
     "sourceMap": true,
     "baseUrl": ".",
     "paths": {
-      "@bitwarden/common/*": ["../../libs/common/src/*"],
       "@bitwarden/angular/*": ["../../libs/angular/src/*"],
+      "@bitwarden/common/*": ["../../libs/common/src/*"],
+      "@bitwarden/components": ["../../libs/components/src"],
       "@bitwarden/exporter/*": ["../../libs/exporter/src/*"]
     },
     "useDefineForClassFields": false

apps/browser/webpack.config.js

@@ -42,6 +42,16 @@ const moduleRules = [
     },
     type: "asset/resource",
   },
+  {
+    test: /\.css$/,
+    use: [
+      {
+        loader: MiniCssExtractPlugin.loader,
+      },
+      "css-loader",
+      "postcss-loader",
+    ],
+  },
   {
     test: /\.scss$/,
     use: [

apps/desktop/postcss.config.js

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

apps/desktop/src/app/main.ts

@@ -3,8 +3,8 @@ import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 
 import { isDev } from "../utils";
 
-// tslint:disable-next-line
 require("../scss/styles.scss");
+require("../scss/tailwind.css");
 
 import { AppModule } from "./app.module";
 

apps/desktop/src/scss/tailwind.css

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

apps/desktop/tailwind.config.js

@@ -0,0 +1,6 @@
+/* eslint-disable no-undef, @typescript-eslint/no-var-requires */
+const config = require("../../libs/components/tailwind.config.base");
+
+config.content = ["./src/**/*.{html,ts}", "../../libs/components/src/**/*.{html,ts}"];
+
+module.exports = config;

apps/desktop/tsconfig.json

@@ -10,8 +10,9 @@
     "types": [],
     "baseUrl": ".",
     "paths": {
-      "@bitwarden/common/*": ["../../libs/common/src/*"],
       "@bitwarden/angular/*": ["../../libs/angular/src/*"],
+      "@bitwarden/common/*": ["../../libs/common/src/*"],
+      "@bitwarden/components": ["../../libs/components/src"],
       "@bitwarden/exporter/*": ["../../libs/exporter/src/*"]
     },
     "useDefineForClassFields": false

apps/desktop/webpack.renderer.js

@@ -109,6 +109,16 @@ const renderer = {
         },
         type: "asset/resource",
       },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+          },
+          "css-loader",
+          "postcss-loader",
+        ],
+      },
       {
         test: /\.scss$/,
         use: [

apps/web/src/scss/tailwind.css

@@ -3,41 +3,3 @@
 @tailwind utilities;
 
 @import "../../../../libs/components/src/tw-theme.css";
-
-/** 
- * tw-break-words does not work with table cells:
- * https://github.com/tailwindlabs/tailwindcss/issues/835
- */
-td.tw-break-words {
-  overflow-wrap: anywhere;
-}
-
-/** 
- * tw-list-none hides summary arrow in Firefox & Chrome but not Safari:
- * https://github.com/tailwindlabs/tailwindcss/issues/924#issuecomment-915509785
- */
-summary.tw-list-none::marker,
-summary.tw-list-none::-webkit-details-marker {
-  display: none;
-}
-
-/** 
- * Arbitrary values can't be used with `text-align`:
- * https://github.com/tailwindlabs/tailwindcss/issues/802#issuecomment-849013311
- */
-.tw-text-unset {
-  text-align: unset;
-}
-
-/**
- * Bootstrap uses z-index: 1050 for modals, dialogs should appear above them.
- * Remove once bootstrap is removed from our codebase.
- * CL-XYZ
- */
-.cdk-overlay-container,
-.cdk-global-overlay-wrapper,
-.cdk-overlay-connected-position-bounding-box,
-.cdk-overlay-backdrop,
-.cdk-overlay-pane {
-  z-index: 2000 !important;
-}

libs/components/src/search/search.component.css

@@ -9,8 +9,8 @@ bit-search input[type="search"]::-webkit-search-cancel-button {
   margin: 0;
   cursor: pointer;
   background-repeat: no-repeat;
-  mask-image: url("./close-button-white.svg");
+  mask-image: url("./close-button.svg");
-  -webkit-mask-image: url("./close-button-white.svg");
+  -webkit-mask-image: url("./close-button.svg");
   background-color: rgba(var(--color-text-muted));
 }
 

libs/components/src/tw-theme.css

@@ -159,3 +159,41 @@
 }
 
 @import "./search/search.component.css";
+
+/** 
+ * tw-break-words does not work with table cells:
+ * https://github.com/tailwindlabs/tailwindcss/issues/835
+ */
+td.tw-break-words {
+  overflow-wrap: anywhere;
+}
+
+/** 
+ * tw-list-none hides summary arrow in Firefox & Chrome but not Safari:
+ * https://github.com/tailwindlabs/tailwindcss/issues/924#issuecomment-915509785
+ */
+summary.tw-list-none::marker,
+summary.tw-list-none::-webkit-details-marker {
+  display: none;
+}
+
+/** 
+ * Arbitrary values can't be used with `text-align`:
+ * https://github.com/tailwindlabs/tailwindcss/issues/802#issuecomment-849013311
+ */
+.tw-text-unset {
+  text-align: unset;
+}
+
+/**
+ * Bootstrap uses z-index: 1050 for modals, dialogs should appear above them.
+ * Remove once bootstrap is removed from our codebase.
+ * CL-XYZ
+ */
+.cdk-overlay-container,
+.cdk-global-overlay-wrapper,
+.cdk-overlay-connected-position-bounding-box,
+.cdk-overlay-backdrop,
+.cdk-overlay-pane {
+  z-index: 2000 !important;
+}