wonkyDD commented 8 months ago

Describe the bug

https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/issues/263#issuecomment-1818199732 I am trying to integrate shadcn/ui into this template.

It is totally fine for popup, option, newtab and all other pages except for content script.

The repository containing all reproduction processes is here : bug-content-script-css-import

Desktop

OS: macOS silicon sonoma
Browser: chrome (Version 120.0.6099.129 (Official Build) (arm64))
Node Version: v18.17.1

To Reproduce

Steps to reproduce the behavior:

1. Clone repo

git clone https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite.git

2. Init shadcn/ui

pnpm dlx shadcn-ui@latest init

The selected config options are as follows.

All the options are default except for

global css file : src/globals.css
components : @src/components
utils : @src/lib/utils
react server component : no

options.

3. Install shadcn related packages

Referenced guide for shadcn Referenced guide for tailwindcss with postcss

pnpm add -D tailwindcss postcss autoprefixer

pnpm add tailwindcss-animate class-variance-authority clsx tailwind-merge

pnpm add lucide-react @radix-ui/react-icons

4. Follow twind setup guide

pnpm install -D @twind/core @twind/preset-autoprefix @twind/preset-tailwind

Add twind.config.ts and twind.ts files at right place following twind guide. I just copied and pasted below.

// twind.config.ts
import { defineConfig } from '@twind/core';
import presetTailwind from '@twind/preset-tailwind';
import presetAutoprefix from '@twind/preset-autoprefix';

export default defineConfig({
  presets: [presetAutoprefix(), presetTailwind()],
});

// src/shared/style/twind.ts
import { twind, cssom, observe } from '@twind/core';
import 'construct-style-sheets-polyfill';
import config from '@root/twind.config';

export function attachTwindStyle<T extends { adoptedStyleSheets: unknown }>(
  observedElement: Element,
  documentOrShadowRoot: T,
) {
  const sheet = cssom(new CSSStyleSheet());
  const tw = twind(config, sheet);
  observe(tw, observedElement);
  documentOrShadowRoot.adoptedStyleSheets = [sheet.target];
}

5. Add postcss config

Add postcss.config.cjs at the root of project.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

6. Add Button from shadcn for testing

pnpm dlx shadcn-ui@latest add button

It should genrate button.tsx file in src/components/ui path.

7. Edit `src/pages/content/ui/index.tsx` properly

I basically copied and pasted https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/blob/main/src/pages/content/ui/index.tsx . But this part is added.

import '@src/globals.css'; // added
import App from '@pages/content/ui/app'; // added

...

attachTwindStyle(rootIntoShadow, shadowRoot); // added
createRoot(rootIntoShadow).render(<App />);

Full version is here.

import { createRoot } from 'react-dom/client';
import { attachTwindStyle } from '@src/shared/style/twind';
import '@src/globals.css';
import App from '@pages/content/ui/app';
import refreshOnUpdate from 'virtual:reload-on-update-in-view';
import injectedStyle from './injected.css?inline';

refreshOnUpdate('pages/content');

const root = document.createElement('div');
root.id = 'chrome-extension-boilerplate-react-vite-content-view-root';

document.body.append(root);

const rootIntoShadow = document.createElement('div');
rootIntoShadow.id = 'shadow-root';

const shadowRoot = root.attachShadow({ mode: 'open' });
shadowRoot.appendChild(rootIntoShadow);

/** Inject styles into shadow dom */
const styleElement = document.createElement('style');
styleElement.innerHTML = injectedStyle;
shadowRoot.appendChild(styleElement);

/**
 * 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 />);

8. Edit `src/pages/content/ui/app.tsx` for testing

import { useEffect } from 'react';
import { Button } from '@src/components/ui/button';

export default function App() {
  useEffect(() => {
    console.log('content view loaded');
  }, []);

  return (
    <div className='bg-white'>
      <Button>Shadcn Button</Button>
      <h1 className='text-yellow-500'>Content View</h1>
    </div>
  );
}

Expected behavior

Reproducing the process as described above will create the following in the bottom left corner of the browser.

If hot-reload is not working or any content script showing up in browser, please comment out in index.tsx below part which we added before.

// import { attachTwindStyle } from '@src/shared/style/twind';
// import '@src/globals.css'

// attachTwindStyle(rootIntoShadow, shadowRoot);

then uncomment it again. I don't know why this thing happens but this workaround has worked.

However, in the case of "newtab," it works correctly. I commented added at the end of or above line.

// src/pages/newtab/index.tsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import { attachTwindStyle } from '@src/shared/style/twind'; // added
import '@src/globals.css'; // added
import Newtab from '@pages/newtab/Newtab';
import '@pages/newtab/index.css';
import refreshOnUpdate from 'virtual:reload-on-update-in-view';

refreshOnUpdate('pages/newtab');

function init() {
  const appContainer = document.querySelector('#app-container');
  if (!appContainer) {
    throw new Error('Can not find #app-container');
  }
  attachTwindStyle(appContainer, document); // added
  const root = createRoot(appContainer);

  root.render(<Newtab />);
}

init();

// src/pages/newtab/Newtab.tsx
import React from 'react';
import logo from '@assets/img/logo.svg';
import '@pages/newtab/Newtab.css';
import '@pages/newtab/Newtab.scss';
import useStorage from '@src/shared/hooks/useStorage';
import exampleThemeStorage from '@src/shared/storages/exampleThemeStorage';
import withSuspense from '@src/shared/hoc/withSuspense';
import withErrorBoundary from '@src/shared/hoc/withErrorBoundary';
import { Button } from '@src/components/ui/button'; // added

const Newtab = () => {
  const theme = useStorage(exampleThemeStorage);

  return (
    <div
      className="App"
      style={{
        backgroundColor: theme === 'light' ? '#ffffff' : '#000000',
      }}>
      <header className="App-header" style={{ color: theme === 'light' ? '#000' : '#fff' }}>
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/pages/newtab/Newtab.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
          style={{ color: theme === 'light' && '#0281dc', marginBottom: '10px' }}>
          Learn React!
        </a>
        <h6>The color of this paragraph is defined using SASS.</h6>
        <button
          style={{
            backgroundColor: theme === 'light' ? '#fff' : '#000',
            color: theme === 'light' ? '#000' : '#fff',
          }}
          onClick={exampleThemeStorage.toggle}>
          Toggle theme
        </button>
        {/* added */}
        <Button>Shadcn Button</Button> 
      </header>
    </div>
  );
};

export default withErrorBoundary(withSuspense(Newtab, <div> Loading ... </div>), <div> Error Occur </div>);