Comments (7)
Nice find! Thanks for taking the time to report, analyze and track this issue. π₯
Here's the lowdown: in the realm of content-script, I've nixed the preflight feature
βοΈ from tailwindcss, while in other environs, I've kept preflight live and kicking (to dodge any potential tailwindcss style snafus, though they seem to be rarer than a blue moon π).Does this ensure that content script styling does not conflict with page styles anymore?
OH and If you are willing to create pull request, that would be awesome! π
I have resolved the issue and submitted a PR π οΈ
from vite-vue3-chrome-extension-v3.
I have checked on multiple tailwind css baes sites and I don't see any problem with styles being overwritten.
Can you please mention specify? Thanks
I overlooked that this project has some differences from mine:
This project did not intend to use tailwindcss in the content-script (although I think it is entirely possible to do so, for example, if you want to implement a feature where selecting a word pops up something like a tooltip, then the style of that tooltip could be entirely written in Tailwind)
And then conflicts arise in the situation where:
When you use document.body.appendChild(myElementWhoUseTailwind)
to insert web elements in the content-script rather than using an iframe (I am not sure if iframe will cause conflicts), this can lead to Tailwind's styles being applied to the webpage as well, thereby causing conflicts.
Of course, the way I'm using it is a bit different from the above, as I'm using a vue3 app mounted on myElementWhoUseTailwind, and then the components use Tailwind.
from vite-vue3-chrome-extension-v3.
Even with a prefix added which solved some bugs, my plugin still messed with the source webpage π£. After thoroughly checking each part (yep, I went through commenting it out bit by bit π) turns out, the culprit was the @tailwind base
's preflight
causing the chaos. So, if you want to keep your plugin from altering the original page, you've got to disable that bad boy. ππ«
from vite-vue3-chrome-extension-v3.
After my relentless efforts, I've hit upon the ultimate hack π‘: utilizing distinct tailwindcss setups for content-script and other contexts. Here's the lowdown: in the realm of content-script, I've nixed the preflight feature
from vite-vue3-chrome-extension-v3.
Nice find! Thanks for taking the time to report, analyze and track this issue. π₯
Here's the lowdown: in the realm of content-script, I've nixed the preflight feature
βοΈ from tailwindcss, while in other environs, I've kept preflight live and kicking (to dodge any potential tailwindcss style snafus, though they seem to be rarer than a blue moon π).
Does this ensure that content script styling does not conflict with page styles anymore?
OH and If you are willing to create pull request, that would be awesome! π
from vite-vue3-chrome-extension-v3.
I have checked on multiple tailwind css baes sites and I don't see any problem with styles being overwritten.
Can you please mention specify? Thanks
from vite-vue3-chrome-extension-v3.
Absolutely, this is the correct use case.
While normal content script page/frame has not issue when using tailwind css, this use case (injecting custom elements into webpage with tailwind styling) is still very much valid.
We have to find a way for this. Noted with thanks!
from vite-vue3-chrome-extension-v3.
Related Issues (20)
- I want to use vue-18n in this project. However there is an error. Can you give me some solution? HOT 1
- Chrome V3 Refused to execute inline script ... HOT 1
- Question: image paths inside vue components HOT 1
- [Feature] Add on install webpage example
- [Feature] Add DaisyUI
- content-script does not use iframe, style issue HOT 2
- How do I quickly apply changes from this repository to my plugin? HOT 1
- When my plugin opens a local html page, it can't find the js file in the same directory as the page? HOT 7
- [Feature] Add offscreen document sample
- [Feature] Support live reload for Install & Update pages
- Scripts should use `module` type
- [TODO] migrate to unplugin-vue-router
- [Feature] Add tailwind prettier plugin class support
- [Feature] Add oxc plugin for vscode
- Switch to chrome-types
- Add vue devtools vite plugin HOT 12
- Global error handling to avoid extension context issues HOT 1
- Source files (.ts) in dist folder HOT 7
- TODO Update to Vite 5 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vite-vue3-chrome-extension-v3.