Merge pull request #13 from argentlabs/fix/css-leak

fix: use shadow dom to prevent css leak
argentlabs · Oct 17, 2023 · ec82fae · ec82fae
2 parents 5cc68da + e1954ed
commit ec82fae
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 91 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -14,6 +14,8 @@ import {
   setStarknetLastConnectedWallet,
 } from "./helpers/lastConnected"
 
+import css from "./theme.css?inline"
+
 export const connect = async ({
   modalMode = "canAsk",
   storeVersion = getStoreVersionFromBrowser(),
@@ -67,9 +69,15 @@ export const connect = async ({
     storeVersion,
   })
 
+  const element = document.createElement("div")
+  document.body.appendChild(element)
+  const target = element.attachShadow({ mode: "open" })
+
+  target.innerHTML = `<style>${css}</style>`
+
   return new Promise((resolve) => {
     const modal = new Modal({
-      target: document.body,
+      target,
       props: {
         dappName,
         callback: async (value: StarknetWindowObject | null) => {

diff --git a/src/modal/ConnectorButton.svelte b/src/modal/ConnectorButton.svelte
@@ -14,15 +14,15 @@
     href={wallet.download}
     target="_blank"
     rel="noopener noreferrer"
-    class={`starknetkit-rounded-md focus:starknetkit-outline-none  focus:starknetkit-ring-2 
-    focus:starknetkit-ring-neutral-200  dark:focus:starknetkit-ring-neutral-700 starknetkit-transition-colors`}
+    class={`rounded-md focus:outline-none  focus:ring-2 
+    focus:ring-neutral-200  dark:focus:ring-neutral-700 transition-colors`}
   >
     <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
     <li
-      class={`starknetkit-flex starknetkit-flex-row-reverse starknetkit-justify-between starknetkit-items-center 
-              starknetkit-p-3 starknetkit-rounded-md starknetkit-cursor-pointer starknetkit-shadow-list-item 
-              dark:starknetkit-shadow-none dark:starknetkit-bg-neutral-800 dark:starknetkit-text-white 
-            hover:starknetkit-bg-neutral-100 dark:hover:starknetkit-bg-neutral-700`}
+      class={`flex flex-row-reverse justify-between items-center 
+              p-3 rounded-md cursor-pointer shadow-list-item 
+              dark:shadow-none dark:bg-neutral-800 dark:text-white 
+            hover:bg-neutral-100 dark:hover:bg-neutral-700`}
       on:click={() => {
         cb(null)
       }}
@@ -33,26 +33,22 @@
       }}
     >
       <span class="w-8 h-8" />
-      <p class="starknetkit-font-semibold starknetkit-text-base starknetkit-p">
+      <p class="font-semibold text-base p">
         Install {wallet.name}
       </p>
-      <img
-        alt={wallet.name}
-        src={wallet.icon}
-        class="starknetkit-w-8 starknetkit-h-8 starknetkit-rounded-full"
-      />
+      <img alt={wallet.name} src={wallet.icon} class="w-8 h-8 rounded-full" />
     </li>
   </a>
 {:else}
   <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
   <li
-    class={`starknetkit-flex starknetkit-flex-row-reverse starknetkit-justify-between starknetkit-items-center 
-            starknetkit-p-3 starknetkit-rounded-md starknetkit-cursor-pointer starknetkit-shadow-list-item 
-            dark:starknetkit-shadow-none dark:starknetkit-bg-neutral-800 dark:starknetkit-text-white 
-          hover:starknetkit-bg-neutral-100 dark:hover:starknetkit-bg-neutral-700 
-          focus:starknetkit-outline-none focus:starknetkit-ring-2 
-        focus:starknetkit-ring-neutral-200 dark:focus:starknetkit-ring-neutral-700 
-          starknetkit-transition-colors`}
+    class={`flex flex-row-reverse justify-between items-center 
+            p-3 rounded-md cursor-pointer shadow-list-item 
+            dark:shadow-none dark:bg-neutral-800 dark:text-white 
+          hover:bg-neutral-100 dark:hover:bg-neutral-700 
+          focus:outline-none focus:ring-2 
+        focus:ring-neutral-200 dark:focus:ring-neutral-700 
+          transition-colors`}
     role="button"
     tabindex="0"
     on:click={async () => {
@@ -65,13 +61,11 @@
     }}
   >
     <span class="w-8 h-8" />
-    <div
-      class="starknetkit-flex starknetkit-flex-col starknetkit-justify-center starknetkit-items-center"
-    >
-      <p class="starknetkit-font-semibold starknetkit-text-base starknetkit-p">
+    <div class="flex flex-col justify-center items-center">
+      <p class="font-semibold text-base p">
         {wallet.title ?? wallet.name}
       </p>
-      <p class="starknetkit-l2 starknetkit-p" style="text-align: center;">
+      <p class="l2 p" style="text-align: center;">
         {wallet.subtitle ?? ""}
       </p>
     </div>
@@ -80,7 +74,7 @@
       <div role="status">
         <svg
           aria-hidden="true"
-          class="starknetkit-w-8 starknetkit-h-8 starknetkit-text-neutral-300 starknetkit-animate-spin dark:starknetkit-text-neutral-600 starknetkit-fill-neutral-600 dark:starknetkit-fill-neutral-300"
+          class="w-8 h-8 text-neutral-300 animate-spin dark:text-neutral-600 fill-neutral-600 dark:fill-neutral-300"
           viewBox="0 0 100 101"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -94,16 +88,12 @@
             fill="currentFill"
           />
         </svg>
-        <span class="starknetkit-sr-only">Loading...</span>
+        <span class="sr-only">Loading...</span>
       </div>
     {:else if isSvg}
       <div style="position: relative;">{@html wallet.icon}</div>
     {:else}
-      <img
-        alt={wallet?.name}
-        src={wallet?.icon}
-        class="starknetkit-w-8 starknetkit-h-8 starknetkit-rounded"
-      />
+      <img alt={wallet?.name} src={wallet?.icon} class="w-8 h-8 rounded" />
     {/if}
   </li>
 {/if}
diff --git a/src/modal/Modal.svelte b/src/modal/Modal.svelte
@@ -46,7 +46,7 @@
       (theme === null &&
         window.matchMedia("(prefers-color-scheme: dark)").matches)
     ) {
-      darkModeControlClass = "starknetkit-dark"
+      darkModeControlClass = "dark"
     } else {
       darkModeControlClass = ""
     }
@@ -74,8 +74,8 @@
 {#if !isInAppBrowser && !emailOnly}
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
-    class={`starknetkit-font starknetkit-backdrop-blur-sm starknetkit-fixed starknetkit-inset-0 starknetkit-flex starknetkit-items-center 
-            starknetkit-justify-center starknetkit-bg-black/25 starknetkit-z-[9999] ${darkModeControlClass}`}
+    class={`modal-font backdrop-blur-sm fixed inset-0 flex items-center 
+            justify-center bg-black/25 z-[9999] ${darkModeControlClass}`}
     on:click={() => cb(null)}
     on:keyup={(e) => {
       if (e.key === "Escape") {
@@ -86,39 +86,33 @@
     <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
     <main
       role="dialog"
-      class={`starknetkit-rounded-3xl starknetkit-shadow-modal dark:shadow-none 
-              starknetkit-w-full starknetkit-max-w-[380px] starknetkit-z-50 
-              starknetkit-mx-6 starknetkit-p-6 starknetkit-pb-8 starknetkit-text-center 
-              starknetkit-bg-slate-50 dark:starknetkit-bg-neutral-900 
-            starknetkit-text-neutral-900 dark:starknetkit-text-white`}
+      class={`rounded-3xl shadow-modal dark:shadow-none 
+              w-full max-w-[380px] z-50 
+              mx-6 p-6 pb-8 text-center 
+              bg-slate-50 dark:bg-neutral-900 
+            text-neutral-900 dark:text-white`}
       on:click={(e) => e.stopPropagation()}
       on:keyup={(e) => {
         e.stopPropagation()
       }}
     >
-      <header
-        class={`starknetkit-flex starknetkit-items-center starknetkit-justify-center starknetkit-flex-col starknetkit-mb-2 starknetkit-relative`}
-      >
-        <h2
-          class="starknetkit-text-sm starknetkit-text-gray-400 starknetkit-font-semibold"
-        >
-          Connect to
-        </h2>
+      <header class={`flex items-center justify-center flex-col mb-2 relative`}>
+        <h2 class="text-sm text-gray-400 font-semibold">Connect to</h2>
         <h1
-          class={`starknetkit-text-xl starknetkit-font-semibold starknetkit-mb-6 
-                  starknetkit-max-w-[240px] starknetkit-overflow-hidden 
-                  starknetkit-whitespace-nowrap starknetkit-text-ellipsis`}
+          class={`text-xl font-semibold mb-6 
+                  max-w-[240px] overflow-hidden 
+                  whitespace-nowrap text-ellipsis`}
         >
           {dappName}
         </h1>
         <span
-          class={`starknetkit-absolute starknetkit-top-0 starknetkit-right-0 starknetkit-p-2 starknetkit-cursor-pointer
-                  starknetkit-rounded-full starknetkit-bg-neutral-100 dark:starknetkit-bg-neutral-800
-                  starknetkit-text-neutral-400 dark:starknetkit-text-white
-                  hover:starknetkit-bg-neutral-100 dark:hover:starknetkit-bg-neutral-700
-                  focus:starknetkit-outline-none focus:starknetkit-ring-2
-                focus:starknetkit-ring-neutral-200 dark:focus:starknetkit-ring-neutral-700
-                  starknetkit-transition-colors`}
+          class={`absolute top-0 right-0 p-2 cursor-pointer
+                  rounded-full bg-neutral-100 dark:bg-neutral-800
+                  text-neutral-400 dark:text-white
+                  hover:bg-neutral-100 dark:hover:bg-neutral-700
+                  focus:outline-none focus:ring-2
+                focus:ring-neutral-200 dark:focus:ring-neutral-700
+                  transition-colors`}
           role="button"
           tabindex="0"
           aria-label="Close"
@@ -144,42 +138,11 @@
         </span>
       </header>
 
-      <ul class="starknetkit-flex starknetkit-flex-col starknetkit-gap-3">
+      <ul class="flex flex-col gap-3">
         {#each modalWallets as wallet}
           <ConnectorButton {wallet} {loadingItem} {cb} />
         {/each}
       </ul>
     </main>
   </div>
 {/if}
-
-<style global>
-  @tailwind utilities;
-  @tailwind components;
-  @tailwind base;
-
-  @import url("https://fonts.googleapis.com/css2?family=Barlow:wght@500;600&display=swap");
-
-  .starknetkit-font {
-    font-family: "Barlow", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
-      Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
-      sans-serif;
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-    text-size-adjust: 100%;
-    font-feature-settings: "kern";
-  }
-
-  .starknetkit-l2 {
-    color: #8c8c8c;
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 14px;
-    letter-spacing: 0em;
-    text-align: left;
-  }
-
-  .starknetkit-p {
-    margin: 0;
-  }
-</style>
diff --git a/src/theme.css b/src/theme.css
@@ -0,0 +1,38 @@
+@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@500;600&display=swap");
+
+@tailwind utilities;
+@tailwind components;
+@tailwind base;
+
+.modal-font {
+  font-family:
+    "Barlow",
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    Helvetica Neue,
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  text-size-adjust: 100%;
+  font-feature-settings: "kern";
+}
+
+.l2 {
+  color: #8c8c8c;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 14px;
+  letter-spacing: 0em;
+  text-align: left;
+}
+
+.p {
+  margin: 0;
+}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -2,7 +2,6 @@
 module.exports = {
   content: ["./src/**/*.{svelte,ts}"],
   darkMode: "class",
-  prefix: "starknetkit-",
   theme: {
     extend: {
       boxShadow: {