Merge pull request #14 from 2coolchampion/dev

Replace Twind with Tailwind

package.json

@@ -23,9 +23,6 @@
   "devDependencies": {
     "@rollup/plugin-typescript": "^8.5.0",
     "@testing-library/react": "13.4.0",
-    "@twind/core": "^1.1.3",
-    "@twind/preset-autoprefix": "^1.0.7",
-    "@twind/preset-tailwind": "^1.1.4",
     "@types/chrome": "0.0.224",
     "@types/jest": "29.0.3",
     "@types/node": "18.15.11",
@@ -35,6 +32,7 @@
     "@typescript-eslint/eslint-plugin": "5.56.0",
     "@typescript-eslint/parser": "5.38.1",
     "@vitejs/plugin-react": "2.2.0",
+    "autoprefixer": "^10.4.16",
     "chokidar": "^3.5.3",
     "cross-env": "^7.0.3",
     "eslint": "8.36.0",
@@ -45,9 +43,11 @@
     "jest": "29.0.3",
     "jest-environment-jsdom": "29.5.0",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.32",
     "prettier": "2.8.8",
     "rollup": "2.79.1",
     "sass": "1.62.1",
+    "tailwindcss": "^3.3.6",
     "ts-jest": "29.0.2",
     "ts-loader": "9.4.2",
     "typescript": "4.8.4",

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/pages/content/components/Demo/index.tsx

@@ -1,7 +1,7 @@
 import { createRoot } from "react-dom/client";
+import '../../../../global.css'
 import App from "@src/pages/content/components/Demo/app";
 import refreshOnUpdate from "virtual:reload-on-update-in-view";
-import { attachTwindStyle } from "@src/shared/style/twind";
 
 refreshOnUpdate("pages/content");
 
@@ -25,12 +25,4 @@ rootIntoShadow.id = "shadow-root";
 const shadowRoot = root.attachShadow({ mode: "open" });
 shadowRoot.appendChild(rootIntoShadow);
 
-/**
- * https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/pull/174
- *
- * In the firefox environment, the adoptedStyleSheets bug may prevent contentStyle from being applied properly.
- * Please refer to the PR link above and go back to the contentStyle.css implementation, or raise a PR if you have a better way to improve it.
- */
-attachTwindStyle(rootIntoShadow, shadowRoot);
-
 createRoot(rootIntoShadow).render(<App />);

src/pages/newtab/index.tsx

@@ -1,9 +1,8 @@
-import React from "react";
 import { createRoot } from "react-dom/client";
 import Newtab from "@pages/newtab/Newtab";
+import '../../global.css'
 import "@pages/newtab/index.css";
 import refreshOnUpdate from "virtual:reload-on-update-in-view";
-import { attachTwindStyle } from "@src/shared/style/twind";
 
 refreshOnUpdate("pages/newtab");
 
@@ -12,9 +11,8 @@ function init() {
   if (!appContainer) {
     throw new Error("Can not find #app-container");
   }
-  attachTwindStyle(appContainer, document);
-  const root = createRoot(appContainer);
 
+  const root = createRoot(appContainer);
   root.render(<Newtab />);
 }
 

src/pages/options/index.tsx

@@ -1,18 +1,17 @@
-import React from "react";
 import { createRoot } from "react-dom/client";
 import Options from "@pages/options/Options";
+import '../../global.css'
 import "@pages/options/index.css";
 import refreshOnUpdate from "virtual:reload-on-update-in-view";
-import { attachTwindStyle } from "@root/src/shared/style/twind";
 
 refreshOnUpdate("pages/options");
 
 function init() {
   const appContainer = document.querySelector("#app-container");
-  attachTwindStyle(appContainer, document);
   if (!appContainer) {
     throw new Error("Can not find #app-container");
   }
+
   const root = createRoot(appContainer);
   root.render(<Options />);
 }

src/pages/panel/index.tsx

@@ -1,9 +1,8 @@
-import React from "react";
 import { createRoot } from "react-dom/client";
 import Panel from "@pages/panel/Panel";
+import '../../global.css'
 import "@pages/panel/index.css";
 import refreshOnUpdate from "virtual:reload-on-update-in-view";
-import { attachTwindStyle } from "@src/shared/style/twind";
 
 refreshOnUpdate("pages/panel");
 
@@ -12,7 +11,7 @@ function init() {
   if (!appContainer) {
     throw new Error("Can not find #app-container");
   }
-  attachTwindStyle(appContainer, document);
+
   const root = createRoot(appContainer);
   root.render(<Panel />);
 }

src/pages/popup/index.tsx

@@ -1,9 +1,8 @@
-import React from "react";
 import { createRoot } from "react-dom/client";
 import "@pages/popup/index.css";
+import '../../global.css'
 import Popup from "@pages/popup/Popup";
 import refreshOnUpdate from "virtual:reload-on-update-in-view";
-import { attachTwindStyle } from "@src/shared/style/twind";
 
 refreshOnUpdate("pages/popup");
 
@@ -12,7 +11,7 @@ function init() {
   if (!appContainer) {
     throw new Error("Can not find #app-container");
   }
-  attachTwindStyle(appContainer, document);
+
   const root = createRoot(appContainer);
   root.render(<Popup />);
 }

src/pages/textAnalyzer/TextAnalyzer.tsx

@@ -120,7 +120,7 @@ const TextAnalyzer = () => {
         id="textbox"
         ref={(node) => (textboxRef.current = node)}
         contentEditable
-        className="border-1 border-orange-100 p-14 w-1/2 mb-10 focus:outline-0 text-3xl"
+        className="border border-orange-100 p-14 w-1/2 mb-10 focus:outline-0 text-3xl"
         onKeyDownCapture={(e: React.KeyboardEvent) => {
           if (currentMode !== "editToken") {
             return;
@@ -187,19 +187,19 @@ const TextAnalyzer = () => {
         className="flex justify-between w-1/2"
         >
           <button
-          className="text-sm p-1 border-1 border-orange-100 hover:bg-purple-900 px-2"
+          className="text-sm p-1 border border-orange-100 hover:bg-purple-900 px-2"
           onClick={addText}
           >
             Paste
           </button>
           <button
-          className="text-sm p-1 border-1 border-orange-100 hover:bg-purple-900 px-2"
+          className="text-sm p-1 border border-orange-100 hover:bg-purple-900 px-2"
           onClick={handleSendToFastAPI}
           >
             Scan
           </button>
           <button
-          className={`text-sm p-1 border-1 border-orange-100 hover:bg-purple-900 px-2 ${currentMode === 'editTokenList' ? 'bg-purple-900' : ''}`}
+          className={`text-sm p-1 border border-orange-100 hover:bg-purple-900 px-2 ${currentMode === 'editTokenList' ? 'bg-purple-900' : ''}`}
           onClick={() => {
             switch (currentMode) {
               case "editTokenList":
@@ -226,7 +226,7 @@ const TextAnalyzer = () => {
             Edit token Lists
           </button>
           <button
-          className={`text-sm p-1 border-1 border-orange-100 hover:bg-purple-900 px-2 ${currentMode === 'editToken' ? 'bg-purple-900' : ''}`}
+          className={`text-sm p-1 border border-orange-100 hover:bg-purple-900 px-2 ${currentMode === 'editToken' ? 'bg-purple-900' : ''}`}
           onClick={() => {
             switch (currentMode) {
               case "editTokenList":

src/pages/textAnalyzer/index.tsx

@@ -1,18 +1,17 @@
-import React from "react";
 import { createRoot } from "react-dom/client";
+import '../../global.css'
 import "@pages/textAnalyzer/index.css";
 import TextAnalyzer from "@root/src/pages/textAnalyzer/TextAnalyzer";
 import refreshOnUpdate from "virtual:reload-on-update-in-view";
-import { attachTwindStyle } from "@src/shared/style/twind";
 
 refreshOnUpdate("src/pages/textAnalyzer");
 
 function init() {
   const appContainer = document.querySelector("#app-container");
-  attachTwindStyle(appContainer, document);
   if (!appContainer) {
     throw new Error("Can not find #app-container");
   }
+
   const root = createRoot(appContainer);
   root.render(<TextAnalyzer />);
 }

tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./src/**/*.{ts,tsx}"],
+  purge: ['./src/**/*.{ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+