[CL-349] Allow @apply styles to be used in CL css

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"),
+  ],
 };

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 {

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"),
+  ],
 };

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";

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"),
+  ],
 };

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.
  *

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));
 }
 

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 {

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