From 6515d88a08269826b2c8d783672a53356347c855 Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Fri, 14 Feb 2025 15:36:22 -0500
Subject: [PATCH] [CL-349] Allow @apply styles to be used in CL css

---
 apps/browser/postcss.config.js                  |  7 ++++++-
 apps/browser/src/popup/scss/tailwind.css        |  4 ++--
 apps/desktop/postcss.config.js                  |  7 ++++++-
 apps/desktop/src/scss/tailwind.css              |  4 ++--
 apps/web/postcss.config.js                      |  7 ++++++-
 apps/web/src/scss/tailwind.css                  |  3 +--
 libs/components/src/search/search.component.css |  4 ++--
 libs/components/src/toast/toastr.css            |  2 +-
 libs/components/src/tw-theme.css                | 10 ++++------
 9 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/apps/browser/postcss.config.js b/apps/browser/postcss.config.js
index 83e237f06e5..a4dee9d4362 100644
--- a/apps/browser/postcss.config.js
+++ b/apps/browser/postcss.config.js
@@ -1,4 +1,9 @@
 /* eslint-disable no-undef, @typescript-eslint/no-require-imports */
 module.exports = {
-  plugins: [require("tailwindcss"), require("autoprefixer"), require("postcss-nested")],
+  plugins: [
+    require("postcss-import"),
+    require("postcss-nested"),
+    require("tailwindcss"),
+    require("autoprefixer"),
+  ],
 };
diff --git a/apps/browser/src/popup/scss/tailwind.css b/apps/browser/src/popup/scss/tailwind.css
index 0d2a88a9667..b49fe912861 100644
--- a/apps/browser/src/popup/scss/tailwind.css
+++ b/apps/browser/src/popup/scss/tailwind.css
@@ -1,9 +1,9 @@
+@import "../../../../../libs/components/src/tw-theme.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import "../../../../../libs/components/src/tw-theme.css";
-
 @layer components {
   /** Safari Support */
   html.browser_safari .tw-styled-scrollbar::-webkit-scrollbar {
diff --git a/apps/desktop/postcss.config.js b/apps/desktop/postcss.config.js
index c39e7ea0355..05e2b04124f 100644
--- a/apps/desktop/postcss.config.js
+++ b/apps/desktop/postcss.config.js
@@ -1,4 +1,9 @@
 /* eslint-disable @typescript-eslint/no-require-imports, no-undef */
 module.exports = {
-  plugins: [require("tailwindcss"), require("autoprefixer"), require("postcss-nested")],
+  plugins: [
+    require("postcss-import"),
+    require("postcss-nested"),
+    require("tailwindcss"),
+    require("autoprefixer"),
+  ],
 };
diff --git a/apps/desktop/src/scss/tailwind.css b/apps/desktop/src/scss/tailwind.css
index e58785aecb0..531133affc0 100644
--- a/apps/desktop/src/scss/tailwind.css
+++ b/apps/desktop/src/scss/tailwind.css
@@ -1,5 +1,5 @@
+@import "../../../../libs/components/src/tw-theme.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@import "../../../../libs/components/src/tw-theme.css";
diff --git a/apps/web/postcss.config.js b/apps/web/postcss.config.js
index c39e7ea0355..05e2b04124f 100644
--- a/apps/web/postcss.config.js
+++ b/apps/web/postcss.config.js
@@ -1,4 +1,9 @@
 /* eslint-disable @typescript-eslint/no-require-imports, no-undef */
 module.exports = {
-  plugins: [require("tailwindcss"), require("autoprefixer"), require("postcss-nested")],
+  plugins: [
+    require("postcss-import"),
+    require("postcss-nested"),
+    require("tailwindcss"),
+    require("autoprefixer"),
+  ],
 };
diff --git a/apps/web/src/scss/tailwind.css b/apps/web/src/scss/tailwind.css
index 1ac7b154011..0ae3c291b56 100644
--- a/apps/web/src/scss/tailwind.css
+++ b/apps/web/src/scss/tailwind.css
@@ -1,9 +1,8 @@
+@import "../../../../libs/components/src/tw-theme.css";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import "../../../../libs/components/src/tw-theme.css";
-
 /*
  * Web specific global styling.
  *
diff --git a/libs/components/src/search/search.component.css b/libs/components/src/search/search.component.css
index 35304438a88..b1626d5e735 100644
--- a/libs/components/src/search/search.component.css
+++ b/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.svg");
-  -webkit-mask-image: url("./close-button.svg");
+  mask-image: url("~@bitwarden/components/src/search/close-button.svg");
+  -webkit-mask-image: url("~@bitwarden/components/src/search/close-button.svg");
   background-color: rgba(var(--color-text-muted));
 }
 
diff --git a/libs/components/src/toast/toastr.css b/libs/components/src/toast/toastr.css
index 3b569dc0b16..7cb243a96c5 100644
--- a/libs/components/src/toast/toastr.css
+++ b/libs/components/src/toast/toastr.css
@@ -1,5 +1,5 @@
-@import "~ngx-toastr/toastr";
 @import "./toast.tokens.css";
+@import "ngx-toastr/toastr";
 
 /* Override all default styles from `ngx-toaster` */
 .toast-container .ngx-toastr {
diff --git a/libs/components/src/tw-theme.css b/libs/components/src/tw-theme.css
index 0a5a66337ac..97af946c863 100644
--- a/libs/components/src/tw-theme.css
+++ b/libs/components/src/tw-theme.css
@@ -1,4 +1,8 @@
 @import "./reset.css";
+@import "./popover/popover.component.css";
+@import "./toast/toast.tokens.css";
+@import "./toast/toastr.css";
+@import "./search/search.component.css";
 
 :root {
   --color-transparent-hover: rgb(0 0 0 / 0.02);
@@ -194,12 +198,6 @@
   --tw-ring-offset-color: #002b36;
 }
 
-@import "./popover/popover.component.css";
-@import "./search/search.component.css";
-
-@import "./toast/toast.tokens.css";
-@import "./toast/toastr.css";
-
 /**
  * tw-break-words does not work with table cells:
  * https://github.com/tailwindlabs/tailwindcss/issues/835