search

Jonghakseo / chrome-extension-boilerplate-react-vite

Chrome Extension Boilerplate with React + Vite + Typescript
MIT License
2.22k stars 322 forks source link

In the error window, `[TWIND_INVALID_CLASS] Unknown class ...` continues to appear #243

Closed wonkyDD closed 10 months ago

wonkyDD commented 10 months ago

Describe the bug

If I check at chrome://extensions/?errors=<extension_id>,
it shows a warning related to twind

With each additional tailwind selector, the warnings grow out of control, obscuring the errors that should be checked.

image


It's not just a popup issue, I keep getting the same warning when I open newtab as well. I've confirmed that options is fine.

To Reproduce

  1. git clone https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite.git
  2. pnpm install
  3. pnpm dev
  4. Load unpacked extension in the dist/ path
  5. open new tab or popup

Expected behavior Do not show any warning.

Desktop (please complete the following information):

github-actions[bot] commented 10 months ago

Thank you for your contribution. We will check and reply to you as soon as possible.

PatrykKuniczak commented 10 months ago

Describe the bug

If I check at chrome://extensions/?errors=<extension_id>,
it shows a warning related to twind

With each additional tailwind selector, the warnings grow out of control, obscuring the errors that should be checked.

image


It's not just a popup issue, I keep getting the same warning when I open newtab as well. I've confirmed that options is fine.

To Reproduce

  1. git clone https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite.git
  2. pnpm install
  3. pnpm dev
  4. Load unpacked extension in the dist/ path
  5. open new tab or popup

Expected behavior Do not show any warning.

Desktop (please complete the following information):

  • OS: Mac 13.0.1
  • Browser chrome 118.0.5993.117
  • Node Version v18.17.1

Owner know twid is a big trouble, he want to remove that, its under investigation 😁

wonkyDD commented 10 months ago

@PatrykKuniczak Thanks for letting me know!

By the way If the owner were to remove twind, would the only way to do that be to follow the pull request and copy it piece by piece? Is there any other best practice?

I'm not sure how much removing twind would change the template.

PatrykKuniczak commented 10 months ago

@wonkyDD here's this comment in my issue https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/issues/184#issuecomment-1787239283

If you thing about remove twind after PR, then yes, seeing PR an copy changed lines or IMO better, copy entire file when the change is done is good strategy, IDn how much it change project, we will see 😁

On my project i remove it but i see the bug from issue above, still ocurr, i think i don't remove STH

Jonghakseo commented 10 months ago

I have removed the dependencies and code related to TWIND in the above PR. It would be helpful if you could refer to the changes in this PR and remove them from your existing project.

As mentioned in the PR, users have their own preferred style solutions. People who do not use this boilerplate should not have to worry about removing unnecessary style code written in TWIND(also other solution).

Personally, I use ChakraUI or emotion for styling the content script. Others may use MUI or Antd or inline style objects.

Some suggest that it would be better to provide guidelines for setting up the style instead of adding style-related dependencies to the repository.

Jonghakseo commented 10 months ago

I think I can create a user guide for emotion and ChakraUI. I'll add them as I test them.

And I'll add them to the README.md.

Jonghakseo commented 10 months ago

@all-contributors please add @wonkyDD for bug

allcontributors[bot] commented 10 months ago

@Jonghakseo

I've put up a pull request to add @wonkyDD! :tada: