From d8a121463ee85c55f8674905ca447a13d5be94bb Mon Sep 17 00:00:00 2001
From: Andreas Coroiu <acoroiu@bitwarden.com>
Date: Thu, 15 Dec 2022 15:42:15 +0100
Subject: [PATCH] [EC-838] fix: CSP issues with inline styles (#4219)

---
 .../src/checkbox/checkbox.component.ts        | 18 +++++----------
 libs/components/tailwind.config.base.js       | 23 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/libs/components/src/checkbox/checkbox.component.ts b/libs/components/src/checkbox/checkbox.component.ts
index 07b2066e8a..8e966fa227 100644
--- a/libs/components/src/checkbox/checkbox.component.ts
+++ b/libs/components/src/checkbox/checkbox.component.ts
@@ -7,18 +7,6 @@ import { BitFormControlAbstraction } from "../form-control";
   selector: "input[type=checkbox][bitCheckbox]",
   template: "",
   providers: [{ provide: BitFormControlAbstraction, useExisting: CheckboxComponent }],
-  styles: [
-    `
-      :host:checked:before {
-        -webkit-mask-image: url('data:image/svg+xml,%3Csvg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8" viewBox="0 0 10 10"%3E%3Cpath d="M0.5 6.2L2.9 8.6L9.5 1.4" fill="none" stroke="white" stroke-width="2"%3E%3C/path%3E%3C/svg%3E');
-        mask-image: url('data:image/svg+xml,%3Csvg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8" viewBox="0 0 10 10"%3E%3Cpath d="M0.5 6.2L2.9 8.6L9.5 1.4" fill="none" stroke="white" stroke-width="2"%3E%3C/path%3E%3C/svg%3E');
-        -webkit-mask-position: center;
-        mask-position: center;
-        -webkit-mask-repeat: no-repeat;
-        mask-repeat: no-repeat;
-      }
-    `,
-  ],
 })
 export class CheckboxComponent implements BitFormControlAbstraction {
   @HostBinding("class")
@@ -63,6 +51,9 @@ export class CheckboxComponent implements BitFormControlAbstraction {
     "[&>label:hover]:checked:tw-border-primary-700",
 
     "checked:before:tw-bg-text-contrast",
+    "checked:before:tw-mask-image-[var(--mask-image)]",
+    "checked:before:tw-mask-position-[center]",
+    "checked:before:tw-mask-repeat-[no-repeat]",
 
     "checked:disabled:tw-border-secondary-100",
     "checked:disabled:tw-bg-secondary-100",
@@ -72,6 +63,9 @@ export class CheckboxComponent implements BitFormControlAbstraction {
 
   constructor(@Optional() @Self() private ngControl?: NgControl) {}
 
+  @HostBinding("style.--mask-image")
+  protected maskImage = `url('data:image/svg+xml,%3Csvg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8" viewBox="0 0 10 10"%3E%3Cpath d="M0.5 6.2L2.9 8.6L9.5 1.4" fill="none" stroke="white" stroke-width="2"%3E%3C/path%3E%3C/svg%3E')`;
+
   @HostBinding()
   @Input()
   get disabled() {
diff --git a/libs/components/tailwind.config.base.js b/libs/components/tailwind.config.base.js
index a700a3377d..2420c3dc85 100644
--- a/libs/components/tailwind.config.base.js
+++ b/libs/components/tailwind.config.base.js
@@ -1,5 +1,6 @@
 /* eslint-disable */
 const colors = require("tailwindcss/colors");
+const plugin = require("tailwindcss/plugin");
 
 function rgba(color) {
   return "rgb(var(" + color + ") / <alpha-value>)";
@@ -94,5 +95,25 @@ module.exports = {
       }),
     },
   },
-  plugins: [],
+  plugins: [
+    plugin(function ({ matchUtilities, theme, addUtilities, addComponents, e, config }) {
+      matchUtilities(
+        {
+          "mask-image": (value) => ({
+            "-webkit-mask-image": value,
+            "mask-image": value,
+          }),
+          "mask-position": (value) => ({
+            "-webkit-mask-position": value,
+            "mask-position": value,
+          }),
+          "mask-repeat": (value) => ({
+            "-webkit-mask-repeat": value,
+            "mask-repeat": value,
+          }),
+        },
+        {}
+      );
+    }),
+  ],
 };