fix: created plugin to prefix class names to prevent styling conflicts

postcss.config.js

@@ -1,6 +1,8 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
+    tailwindcss: {
+      config: "./tailwind.popup.config.js",
+    },
     autoprefixer: {},
   },
 }

src/content-scripts/components/AICodeReview/AICodeReviewButton.ts

@@ -16,7 +16,7 @@ export const AICodeReviewButton = (commentNode: HTMLElement) => {
       </span>`,
         onclick: (event: MouseEvent) => {
             event.stopPropagation();
-            menu.classList.toggle("hidden");
+            menu.classList.toggle("oss-hidden");
         },
         id: "os-ai-change-gen",
     });

src/content-scripts/components/AICodeReview/AICodeReviewMenu.ts

@@ -16,17 +16,17 @@ type SuggestionGenerator = (
 
 export const AICodeReviewMenu = (items: HTMLLIElement[]) => {
     const menu = createHtmlElement("div", {
-        className: "SelectMenu js-slash-command-menu hidden mt-6",
+        className: "SelectMenu js-slash-command-menu oss-hidden oss-mt-6",
         innerHTML: `<div class="SelectMenu-modal no-underline">
     <header class="SelectMenu-header">
-       <div class="flex-1">
+       <div class="oss-flex-1">
           <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" class="octicon octicon-code-square">
              <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25Zm7.47 3.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L10.69 8 9.22 6.53a.75.75 0 0 1 0-1.06ZM6.78 6.53 5.31 8l1.47 1.47a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path>
           </svg>
-          <span class="color-fg-muted text-small pl-1">OpenSauced.ai</span>
+          <span class="color-fg-muted oss-text-small oss-pl-1">OpenSauced.ai</span>
        </div>
        <div class="Label Label--success">AI</div>
-       <a class="ml-1 color-fg-muted d-block" target="_blank" href="https://github.com/orgs/open-sauced/discussions">
+       <a class="oss-ml-1 color-fg-muted d-block" target="_blank" href="https://github.com/orgs/open-sauced/discussions">
        Give feedback
        </a>
     </header>
@@ -41,7 +41,7 @@ export const AICodeReviewMenu = (items: HTMLLIElement[]) => {
 
     document.addEventListener("click", event => {
         if (event.target instanceof HTMLElement) {
-            menu.classList.add("hidden");
+            menu.classList.add("oss-hidden");
         }
     });
     return menu;
@@ -83,8 +83,8 @@ const handleSubmit = async (
             return;
         }
 
-        logo.classList.toggle("animate-spin");
-        button.classList.toggle("pointer-events-none");
+        logo.classList.toggle("oss-animate-spin");
+        button.classList.toggle("oss-pointer-events-none");
 
         const selectedLines = document.querySelectorAll(
             ".code-review.selected-line",
@@ -112,7 +112,7 @@ const handleSubmit = async (
                 descriptionConfig.config.maxInputLength,
             )
         ) {
-            logo.classList.toggle("animate-spin");
+            logo.classList.toggle("oss-animate-spin");
             return alert(
                 `Max input length exceeded. Try reducing the number of selected lines to refactor.`,
             );
@@ -124,8 +124,8 @@ const handleSubmit = async (
             descriptionConfig,
         );
 
-        logo.classList.toggle("animate-spin");
-        button.classList.toggle("pointer-events-none");
+        logo.classList.toggle("oss-animate-spin");
+        button.classList.toggle("oss-pointer-events-none");
         if (!suggestionStream) {
             return console.error("No description was generated!");
         }
@@ -135,8 +135,8 @@ const handleSubmit = async (
 
         insertTextAtCursor(textArea as HTMLTextAreaElement, suggestionStream);
     } catch (error: unknown) {
-        logo?.classList.toggle("animate-spin");
-        button?.classList.toggle("pointer-events-none");
+        logo?.classList.toggle("oss-animate-spin");
+        button?.classList.toggle("oss-pointer-events-none");
 
         if (error instanceof Error) {
             console.error("Description generation error:", error.message);

src/content-scripts/components/AddPRToHighlights/AddPRToHighlightsButton.ts

@@ -5,11 +5,11 @@ import { OPEN_SAUCED_INSIGHTS_DOMAIN } from "../../../constants";
 export const AddPRToHighlightsButton = () => {
     const addPRToHighlightsButton = createHtmlElement("a", {
         id: "add-pr-to-highlights-button",
-        className: "relative cursor-pointer",
-        innerHTML: `<img class="mr-1 mt-1" height="16px" width="16px" src=${chrome.runtime.getURL(
+        className: "oss-relative oss-cursor-pointer",
+        innerHTML: `<img class="oss-mr-1 oss-mt-1" height="16px" width="16px" src=${chrome.runtime.getURL(
             openSaucedLogoIcon,
         )}>
-    <details-menu id="details-menu-os" class="dropdown-menu hidden dropdown-menu-sw color-fg-default w-48 mt-2">
+    <details-menu id="details-menu-os" class="dropdown-menu oss-hidden dropdown-menu-sw color-fg-default oss-w-48 oss-mt-2">
     <a href="https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/feed?prurl=${encodeURIComponent(window.location.href)}" class="dropdown-item" target="_blank">
       <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-plus">
         <path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"></path>
@@ -22,7 +22,7 @@ export const AddPRToHighlightsButton = () => {
             if (!menu) {
                 return;
             }
-            menu.classList.toggle("hidden");
+            menu.classList.toggle("oss-hidden");
         },
     });
 
@@ -36,7 +36,7 @@ export const AddPRToHighlightsButton = () => {
         if (!menu) {
             return;
         }
-        menu.classList.add("hidden");
+        menu.classList.add("oss-hidden");
     });
 
     return addPRToHighlightsButton;

src/content-scripts/components/GenerateAIDescription/DescriptionGeneratorButton.ts

@@ -40,22 +40,22 @@ const handleSubmit = async () => {
             return;
         }
 
-        logo.classList.toggle("animate-spin");
-        button.classList.toggle("pointer-events-none");
+        logo.classList.toggle("oss-animate-spin");
+        button.classList.toggle("oss-pointer-events-none");
 
 
         const { protocol, hostname, pathname } = window.location;
         const descriptionStream = await getAiDescription(`${protocol}//${hostname}${pathname}`);
 
-        logo.classList.toggle("animate-spin");
-        button.classList.toggle("pointer-events-none");
+        logo.classList.toggle("oss-animate-spin");
+        button.classList.toggle("oss-pointer-events-none");
 
         const textArea = document.getElementsByName(GITHUB_PR_COMMENT_TEXT_AREA_SELECTOR)[0] as HTMLTextAreaElement;
 
         insertTextAtCursor(textArea, descriptionStream);
     } catch (error: unknown) {
-        logo?.classList.toggle("animate-spin");
-        button?.classList.toggle("pointer-events-none");
+        logo?.classList.toggle("oss-animate-spin");
+        button?.classList.toggle("oss-pointer-events-none");
 
         if (error instanceof Error) {
             alert(error.message);

src/content-scripts/content-scripts.css

@@ -3,6 +3,7 @@ style for content-scripts
 not using tailwindcss base styles because it's interfering with the github page styles
 */
 
+@config  "../../tailwind.content-scripts.config.js";
 @tailwind components;
 @tailwind utilities;
 
@@ -30,4 +31,4 @@ code {
   font-size: 12px;
   color: var(--color-fg-default)!important;
   line-height: 1.5!important;
-}
+}

src/popup.css

@@ -1,3 +1,4 @@
+@config "../tailwind.popup.config.js";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -33,4 +34,4 @@ code {
 
 .swiper-pagination{
   position: relative;
-}
+}

tailwind.config.js → tailwind.content-scripts.config.js

@@ -2,7 +2,8 @@ const plugin = require("tailwindcss/plugin");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  prefix: "oss-",
+  content: ["./src/content-scripts/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
       colors: {
@@ -60,3 +61,4 @@ module.exports = {
   important: true,
   darkMode: "class"
 };
+

tailwind.popup.config.js

@@ -0,0 +1,62 @@
+const plugin = require("tailwindcss/plugin");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./index.html", "./src/**/!(*content-scripts)/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        orange: "hsla(19, 100%, 50%, 1)",
+        lightOrange: "hsla(19, 100%, 50%, 0.5)"
+      },
+      boxShadow: {
+        button: "0 0 0.2rem 0.2rem rgb(245, 131, 106, 0.2)",
+      },
+      backgroundColor: {
+        "gh-gray": "#21262d",
+        "gh-white": "#f6f8fa"
+      }
+    },
+  },
+  plugins: [
+    // plugin for centering dividers
+    // usage: <div class=" divide-white divide-y divider-y-center-2"></div>
+    plugin(function({ matchUtilities, theme }) {
+      matchUtilities(
+        {
+          'divider-x-center': (value) => {
+            return {
+              "& > :not([hidden]):first-child": {
+                paddingLeft: 0,
+              },
+              "& > :not([hidden])": {
+                paddingLeft: value,
+                paddingRight: value,
+              },
+              "& > :not([hidden]):last-child": {
+                paddingRight: 0,
+              },
+            };
+          },
+          'divider-y-center': (value) => {
+            return {
+              "& > :not([hidden]):first-child": {
+                paddingTop: 0,
+              },
+              "& > :not([hidden])": {
+                paddingTop: value,
+                paddingBottom: value,
+              },
+              "& > :not([hidden]):last-child": {
+                paddingBottom: 0,
+              },
+            };
+          }
+        },
+        { values: theme('padding') }
+      )
+    })
+  ],
+  important: true,
+  darkMode: "class"
+};

vite.config.ts

@@ -1,9 +1,88 @@
-import { defineConfig } from "vite";
+import { defineConfig, Plugin } from "vite";
 import react from "@vitejs/plugin-react";
 import { crx } from "@crxjs/vite-plugin";
 import manifest from "./manifest.json" assert { type: "json" };
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), crx({ manifest } as any)],
-});
+  plugins: [
+      react(),
+      crx({ manifest } as any),
+  ],
+});
+
+function classnamePrefixer({ prefix }: { prefix: string }): Plugin {
+    return {
+        name: 'classname-prefixer',
+        transform(code, id) {
+              if (id.endsWith('.tsx')) {
+                  code = code.replace(/className:\s*(['"`])(.*?)\1/g, (_, quote, styles: string) => {
+                      const classNames = customSplit(styles
+                        .trim())
+                        .map((className) => {
+                            if (className.startsWith("${") && className.endsWith("}")) {
+                                let startQuote = null;
+                                let startQuoteIndex = -1;
+                                let updatedClassName = "";
+                                let indexOfLastSplit: null | number = null;
+                                for (let i = 0; i < className.length; i++) {
+                                    if (!startQuote && (className[i] === "'" || className[i] === '"')) {
+                                        startQuote = className[i];
+                                        startQuoteIndex = i;
+                                    } else if (startQuote && (className[i] === startQuote)) {
+                                        const beforeStartStyles = className.slice(indexOfLastSplit ?? 0, startQuoteIndex + 1);
+                                        const styles = className.slice(startQuoteIndex + 1, i);
+                                        const prefixedStyles = styles.split(" ").map((style) => {
+                                            if (style.length) {
+                                                return prefix + style
+                                            }
+                                            return style;
+                                        }).join(" ");
+                                        updatedClassName += beforeStartStyles + prefixedStyles;
+                                        indexOfLastSplit = i;
+                                        startQuote = null;
+                                        startQuoteIndex = -1;
+                                    }
+                                }
+                                updatedClassName += className.slice(indexOfLastSplit ?? 0);
+                                return updatedClassName;
+                            }
+                            else if (!className.includes(":")) {
+                                if (className.length) {
+                                    return prefix + className
+                                }
+                                return className;
+                            }
+                            const indexOfLastColon = className.lastIndexOf(":");
+                            const pre = className.slice(0, indexOfLastColon + 1);
+                            const style = className.slice(indexOfLastColon + 1);
+                            return pre + prefix + style;
+                        }).join(" ");
+                      return `className: ${quote}${classNames}${quote}`;
+                  });
+              }
+              return {
+                  code,
+                  map: null,
+              };
+        },
+    };
+}
+
+function customSplit(str: string) {
+    const result: string[] = [];
+    let start = 0;
+    for (let end = 0; end < str.length; end++) {
+        if (str[start] === "$" && str[start + 1] === "{" && str[end - 1] === "}" && str[end] === " ") {
+            result.push(str.slice(start, end + 1));
+            start = end + 1;
+        }
+        else if (str[end] === " " && str[start] !== "$") {
+            result.push(str.slice(start, end));
+            start = end + 1;
+        }
+    }
+    if (start < str.length)
+    result.push(str.slice(start))
+    return result;
+}