From 01b20cb671112bbcf4a848806abd287818338ffb Mon Sep 17 00:00:00 2001 From: "r.sohrabi" Date: Thu, 2 May 2024 11:43:49 +0330 Subject: [PATCH 1/3] feat: add tailwind shadow styles to options --- src/content/index.prod.tsx | 12 ++----- src/options/Options.tsx | 17 ++++++++- src/options/index.css | 65 ++++++++++++++++++++++++++++++++++ src/options/index.tsx | 7 ++-- src/utils/createShadowRoot.tsx | 27 ++++++++++++++ 5 files changed, 113 insertions(+), 15 deletions(-) create mode 100644 src/utils/createShadowRoot.tsx diff --git a/src/content/index.prod.tsx b/src/content/index.prod.tsx index e5c6e8f..b2324bb 100644 --- a/src/content/index.prod.tsx +++ b/src/content/index.prod.tsx @@ -1,17 +1,9 @@ import React from 'react'; -import { createRoot } from 'react-dom/client'; +import createShadowRoot from '@utils/createShadowRoot'; import Content from './Content'; import styles from './index.css?inline'; -const container = document.createElement('div'); -const shadow = container.attachShadow({ mode: 'open' }); -const globalStyleSheet = new CSSStyleSheet(); -globalStyleSheet.replaceSync(styles); - -shadow.adoptedStyleSheets = [globalStyleSheet]; -document.body.appendChild(container); - -const root = createRoot(shadow); +const root = createShadowRoot(styles); root.render(); diff --git a/src/options/Options.tsx b/src/options/Options.tsx index a57c937..371d5e0 100644 --- a/src/options/Options.tsx +++ b/src/options/Options.tsx @@ -1,5 +1,20 @@ import React, { JSX } from 'react'; export default function Options(): JSX.Element { - return
Options
; + return ( +
+ + + + +
+ ); } diff --git a/src/options/index.css b/src/options/index.css index e69de29..348ae7f 100644 --- a/src/options/index.css +++ b/src/options/index.css @@ -0,0 +1,65 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@font-face { + font-weight: 900; + src: url('../assets/fonts/Inter-Black.ttf'); + font-family: 'Inter'; +} + +@font-face { + font-weight: 800; + src: url('../assets/fonts/Inter-ExtraBold.ttf'); + font-family: 'Inter'; +} + +@font-face { + font-weight: 700; + src: url('../assets/fonts/Inter-Bold.ttf'); + font-family: 'Inter'; +} + +@font-face { + font-weight: 600; + src: url('../assets/fonts/Inter-SemiBold.ttf'); + font-family: 'Inter'; +} + +@font-face { + font-weight: 500; + src: url('../assets/fonts/Inter-Medium.ttf'); + font-family: 'Inter'; +} + +@font-face { + font-weight: 400; + src: url('../assets/fonts/Inter-Regular.ttf'); + font-family: 'Inter'; +} + +@font-face { + font-weight: 300; + src: url('../assets/fonts/Inter-Light.ttf'); + font-family: 'Inter'; +} + +@font-face { + font-weight: 200; + src: url('../assets/fonts/Inter-ExtraLight.ttf'); + font-family: 'Inter'; +} + +@font-face { + font-weight: 100; + src: url('../assets/fonts/Inter-Thin.ttf'); + font-family: 'Inter'; +} + +:host { + all: initial; + font-weight: 500 !important; + font-size: 16px !important; + font-family: 'Inter', sans-serif !important; + letter-spacing: normal; +} diff --git a/src/options/index.tsx b/src/options/index.tsx index 940c343..a86e331 100644 --- a/src/options/index.tsx +++ b/src/options/index.tsx @@ -1,10 +1,9 @@ import React from 'react'; -import { createRoot } from 'react-dom/client'; +import createShadowRoot from '@utils/createShadowRoot'; +import styles from './index.css?inline'; import Options from './Options'; -import './index.css'; - -const root = createRoot(document.getElementById('my-ext-options-page')!); +const root = createShadowRoot(styles); root.render(); diff --git a/src/utils/createShadowRoot.tsx b/src/utils/createShadowRoot.tsx new file mode 100644 index 0000000..aaf9b81 --- /dev/null +++ b/src/utils/createShadowRoot.tsx @@ -0,0 +1,27 @@ +import { createRoot } from 'react-dom/client'; + +/** + * Creates a shadow root with the specified styles and returns a React root in it. + * @param {string} styles - CSS styles to be applied to the shadow root. + * @returns {ReactRoot} - React root rendered inside the shadow root. + */ +export default function createShadowRoot(styles: string) { + // Create a container element to hold the shadow root + const container = document.createElement('div'); + + // Attach a shadow root to the container element + const shadow = container.attachShadow({ mode: 'open' }); + + // Create a new CSS style sheet and apply the specified styles + const globalStyleSheet = new CSSStyleSheet(); + globalStyleSheet.replaceSync(styles); + + // Apply the style sheet to the shadow root + shadow.adoptedStyleSheets = [globalStyleSheet]; + + // Append the container element to the document body + document.body.appendChild(container); + + // Return a React root created inside the shadow root + return createRoot(shadow); +} From 012bf4ffeb445e90ea57a02da53a7871dcf65ae1 Mon Sep 17 00:00:00 2001 From: "r.sohrabi" Date: Thu, 2 May 2024 13:56:27 +0330 Subject: [PATCH 2/3] perf: use one tailwind css entry --- src/{content => assets/styles}/index.css | 0 src/content/index.dev.tsx | 2 +- src/content/index.prod.tsx | 2 +- src/options/index.css | 65 ------------------------ src/options/index.tsx | 2 +- vite.config.ts | 2 + 6 files changed, 5 insertions(+), 68 deletions(-) rename src/{content => assets/styles}/index.css (100%) delete mode 100644 src/options/index.css diff --git a/src/content/index.css b/src/assets/styles/index.css similarity index 100% rename from src/content/index.css rename to src/assets/styles/index.css diff --git a/src/content/index.dev.tsx b/src/content/index.dev.tsx index 01b16c0..de1e294 100644 --- a/src/content/index.dev.tsx +++ b/src/content/index.dev.tsx @@ -14,7 +14,7 @@ import { createRoot } from 'react-dom/client'; import Content from './Content'; -import './index.css'; +import '@assets/styles/index.css'; const container = document.createElement('div'); diff --git a/src/content/index.prod.tsx b/src/content/index.prod.tsx index b2324bb..8e2df63 100644 --- a/src/content/index.prod.tsx +++ b/src/content/index.prod.tsx @@ -1,8 +1,8 @@ import React from 'react'; +import styles from '@assets/styles/index.css?inline'; import createShadowRoot from '@utils/createShadowRoot'; import Content from './Content'; -import styles from './index.css?inline'; const root = createShadowRoot(styles); diff --git a/src/options/index.css b/src/options/index.css deleted file mode 100644 index 348ae7f..0000000 --- a/src/options/index.css +++ /dev/null @@ -1,65 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -@font-face { - font-weight: 900; - src: url('../assets/fonts/Inter-Black.ttf'); - font-family: 'Inter'; -} - -@font-face { - font-weight: 800; - src: url('../assets/fonts/Inter-ExtraBold.ttf'); - font-family: 'Inter'; -} - -@font-face { - font-weight: 700; - src: url('../assets/fonts/Inter-Bold.ttf'); - font-family: 'Inter'; -} - -@font-face { - font-weight: 600; - src: url('../assets/fonts/Inter-SemiBold.ttf'); - font-family: 'Inter'; -} - -@font-face { - font-weight: 500; - src: url('../assets/fonts/Inter-Medium.ttf'); - font-family: 'Inter'; -} - -@font-face { - font-weight: 400; - src: url('../assets/fonts/Inter-Regular.ttf'); - font-family: 'Inter'; -} - -@font-face { - font-weight: 300; - src: url('../assets/fonts/Inter-Light.ttf'); - font-family: 'Inter'; -} - -@font-face { - font-weight: 200; - src: url('../assets/fonts/Inter-ExtraLight.ttf'); - font-family: 'Inter'; -} - -@font-face { - font-weight: 100; - src: url('../assets/fonts/Inter-Thin.ttf'); - font-family: 'Inter'; -} - -:host { - all: initial; - font-weight: 500 !important; - font-size: 16px !important; - font-family: 'Inter', sans-serif !important; - letter-spacing: normal; -} diff --git a/src/options/index.tsx b/src/options/index.tsx index a86e331..d70c7a2 100644 --- a/src/options/index.tsx +++ b/src/options/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; +import styles from '@assets/styles/index.css?inline'; import createShadowRoot from '@utils/createShadowRoot'; -import styles from './index.css?inline'; import Options from './Options'; const root = createShadowRoot(styles); diff --git a/vite.config.ts b/vite.config.ts index bf6dac2..c3b0327 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -36,6 +36,8 @@ export default defineConfig({ resolve: { alias: { '@': resolve(__dirname, './src'), + '@utils': resolve(__dirname, './src/utils'), + '@assets': resolve(__dirname, './src/assets'), }, }, }); From 296f4588553ef110159a4b1b4a7c6931f2b3e9cd Mon Sep 17 00:00:00 2001 From: "r.sohrabi" Date: Thu, 2 May 2024 14:29:59 +0330 Subject: [PATCH 3/3] feat: add popup with tailwind conf --- src/manifest.ts | 1 + src/popup/Popup.tsx | 20 ++++++++++++++++++++ src/popup/index.html | 12 ++++++++++++ src/popup/index.tsx | 9 +++++++++ 4 files changed, 42 insertions(+) create mode 100644 src/popup/Popup.tsx create mode 100644 src/popup/index.html create mode 100644 src/popup/index.tsx diff --git a/src/manifest.ts b/src/manifest.ts index 6deae5b..d3de10f 100644 --- a/src/manifest.ts +++ b/src/manifest.ts @@ -18,6 +18,7 @@ export default defineManifest({ }, options_page: 'src/options/index.html', action: { + default_popup: 'src/popup/index.html', default_icon: { 16: 'icon16.png', 32: 'icon32.png', diff --git a/src/popup/Popup.tsx b/src/popup/Popup.tsx new file mode 100644 index 0000000..ea64081 --- /dev/null +++ b/src/popup/Popup.tsx @@ -0,0 +1,20 @@ +import React, { JSX } from 'react'; + +export default function Popup(): JSX.Element { + return ( +
+ + + + +
+ ); +} diff --git a/src/popup/index.html b/src/popup/index.html new file mode 100644 index 0000000..878bc91 --- /dev/null +++ b/src/popup/index.html @@ -0,0 +1,12 @@ + + + + + my ext popup page + + + +
+ + + diff --git a/src/popup/index.tsx b/src/popup/index.tsx new file mode 100644 index 0000000..f878930 --- /dev/null +++ b/src/popup/index.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import styles from '@assets/styles/index.css?inline'; +import createShadowRoot from '@utils/createShadowRoot'; + +import Popup from './Popup'; + +const root = createShadowRoot(styles); + +root.render();