From 9be34036a2a14b25241cc209baff6c9fa12478f6 Mon Sep 17 00:00:00 2001
From: "Juan J. Campos" <juan.campos@commercetools.com>
Date: Fri, 15 Nov 2024 15:37:09 +0100
Subject: [PATCH 1/3] feat(spa): Cleanup connector styles on closing SPA

---
 enabler/vite.config.ts | 38 ++++++++++++++++++++++++++++++--------
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/enabler/vite.config.ts b/enabler/vite.config.ts
index 1f33e8e..d0fef2f 100644
--- a/enabler/vite.config.ts
+++ b/enabler/vite.config.ts
@@ -1,20 +1,42 @@
-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";
 
 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);
+        }
+      },
+    }),
   ],
   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`,
     },
   },
-})
+});

From b6d228d3a4b828ba9742bd6e3d4cde1ee3986e81 Mon Sep 17 00:00:00 2001
From: "Juan J. Campos" <juan.campos@commercetools.com>
Date: Mon, 18 Nov 2024 14:17:01 +0100
Subject: [PATCH 2/3] Added explanatory comment

---
 enabler/vite.config.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/enabler/vite.config.ts b/enabler/vite.config.ts
index d0fef2f..3710340 100644
--- a/enabler/vite.config.ts
+++ b/enabler/vite.config.ts
@@ -12,6 +12,8 @@ export default defineConfig({
         try {
           if (typeof document != "undefined") {
             var elementStyle = document.createElement("style");
+            // checkout will look for this attribute to remove the style tag
+            // when the checkout is closed for cleanup purposes
             elementStyle.setAttribute("data-ctc-connector-styles", "");
             for (const attribute in options.attributes) {
               elementStyle.setAttribute(

From 23cdf7592d170780342a86dc2d9a5db015e4a88c Mon Sep 17 00:00:00 2001
From: "Juan J. Campos" <juan.campos@commercetools.com>
Date: Mon, 18 Nov 2024 15:43:11 +0100
Subject: [PATCH 3/3] Remove reference to checkout in comment

---
 enabler/vite.config.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/enabler/vite.config.ts b/enabler/vite.config.ts
index 3710340..e9e0e9a 100644
--- a/enabler/vite.config.ts
+++ b/enabler/vite.config.ts
@@ -12,8 +12,8 @@ export default defineConfig({
         try {
           if (typeof document != "undefined") {
             var elementStyle = document.createElement("style");
-            // checkout will look for this attribute to remove the style tag
-            // when the checkout is closed for cleanup purposes
+            // this attribute will allow the client application using this connector to
+            // identify the style tag and remove it if needed for cleanup purposes
             elementStyle.setAttribute("data-ctc-connector-styles", "");
             for (const attribute in options.attributes) {
               elementStyle.setAttribute(