From 3f09ced95631066a844c88624f1e6d440f7eb553 Mon Sep 17 00:00:00 2001
From: "Juan J. Campos" <juan.campos@commercetools.com>
Date: Fri, 15 Nov 2024 14:56:02 +0100
Subject: [PATCH] feat(chore): Add attribute to adyen style tag for cleanup

---
 enabler/vite.config.ts | 49 +++++++++++++++++++++++++++++++-----------
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/enabler/vite.config.ts b/enabler/vite.config.ts
index 28b7275..71b1fbb 100644
--- a/enabler/vite.config.ts
+++ b/enabler/vite.config.ts
@@ -1,27 +1,52 @@
-import { resolve } from 'path'
-import { defineConfig } from 'vite'
+import { resolve } from "path";
+import { defineConfig } from "vite";
 import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
-import path from 'path';
+import path from "path";
 
 export default defineConfig({
   plugins: [
-    cssInjectedByJsPlugin(),
+    cssInjectedByJsPlugin({
+      injectCodeFunction: function injectCodeCustomRunTimeFunction(
+        cssCode: string,
+        options
+      ) {
+        try {
+          if (typeof document != "undefined") {
+            var elementStyle = document.createElement("style");
+            elementStyle.setAttribute("data-ctc-connector-styles", "");
+            for (const attribute in options.attributes) {
+              elementStyle.setAttribute(
+                attribute,
+                options.attributes[attribute]
+              );
+            }
+            elementStyle.appendChild(document.createTextNode(cssCode));
+            document.head.appendChild(elementStyle);
+          }
+        } catch (e) {
+          console.error("vite-plugin-css-injected-by-js", e);
+        }
+      },
+    }),
   ],
   resolve: {
     alias: {
-      '@adyen-css': path.resolve(__dirname, 'node_modules/@adyen/adyen-web/dist/es/adyen.css')
-    }
+      "@adyen-css": path.resolve(
+        __dirname,
+        "node_modules/@adyen/adyen-web/dist/es/adyen.css"
+      ),
+    },
   },
   build: {
-    outDir: resolve(__dirname, 'public'),
+    outDir: resolve(__dirname, "public"),
     lib: {
       // Could also be a dictionary or array of multiple entry points
-      entry: resolve(__dirname, 'src/main.ts'),
-      
-      name: 'Connector',
-      formats: ['es','umd'],
+      entry: resolve(__dirname, "src/main.ts"),
+
+      name: "Connector",
+      formats: ["es", "umd"],
       // the proper extensions will be added
       fileName: (format) => `connector-enabler.${format}.js`,
     },
   },
-})
+});