[CL-349] Allow @apply styles to be used in CL css (#13414)

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/browser/webpack.config.js

@@ -49,7 +49,13 @@ const moduleRules = [
         loader: MiniCssExtractPlugin.loader,
       },
       "css-loader",
-      "postcss-loader",
+      "resolve-url-loader",
+      {
+        loader: "postcss-loader",
+        options: {
+          sourceMap: true,
+        },
+      },
     ],
   },
   {
@@ -59,7 +65,13 @@ const moduleRules = [
         loader: MiniCssExtractPlugin.loader,
       },
       "css-loader",
-      "sass-loader",
+      "resolve-url-loader",
+      {
+        loader: "sass-loader",
+        options: {
+          sourceMap: true,
+        },
+      },
     ],
   },
   {

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/desktop/webpack.renderer.js

@@ -121,7 +121,13 @@ const renderer = {
             loader: MiniCssExtractPlugin.loader,
           },
           "css-loader",
-          "postcss-loader",
+          "resolve-url-loader",
+          {
+            loader: "postcss-loader",
+            options: {
+              sourceMap: true,
+            },
+          },
         ],
       },
       {
@@ -134,7 +140,13 @@ const renderer = {
             },
           },
           "css-loader",
-          "sass-loader",
+          "resolve-url-loader",
+          {
+            loader: "sass-loader",
+            options: {
+              sourceMap: true,
+            },
+          },
         ],
       },
       // Hide System.import warnings. ref: https://github.com/angular/angular/issues/21560

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

apps/web/webpack.config.js

@@ -49,7 +49,13 @@ const moduleRules = [
         loader: MiniCssExtractPlugin.loader,
       },
       "css-loader",
-      "sass-loader",
+      "resolve-url-loader",
+      {
+        loader: "sass-loader",
+        options: {
+          sourceMap: true,
+        },
+      },
     ],
   },
   {
@@ -59,7 +65,13 @@ const moduleRules = [
         loader: MiniCssExtractPlugin.loader,
       },
       "css-loader",
-      "postcss-loader",
+      "resolve-url-loader",
+      {
+        loader: "postcss-loader",
+        options: {
+          sourceMap: true,
+        },
+      },
     ],
   },
   {

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,9 @@
+@import "@angular/cdk/a11y-prebuilt.css";
 @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,15 +199,6 @@
   --tw-ring-offset-color: #002b36;
 }
 
-/** Used by CDK a11y services */
-@import "@angular/cdk/a11y-prebuilt.css";
-
-@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