Fix/styles in vue sfc not injected to shadow dom

[gogoend]

Details

This PR aims to fix the issue: The style tag in the nested component in content scripts doesn't take effect when using Vue SFC.

What I've done is:

1. Add a placeholder string VUE_SFC_STYLE_PLACEHOLDER when process the style-raw pipeline in parcel-transformer-vue
2. Replace the placeholder string in js files with the content of CSS assets in bundler. ( To make it, I copy the dist files of the default js bundler of Parcel, traverse the CSS assets and get their contents. I'm not sure if there is any better way? )

Code of Conduct

• I agree to follow this project's Code of Conduct
• I agree to license this contribution under the MIT LICENSE
• I checked the current PR for duplication.

Contacts

• (OPTIONAL) Discord ID:

If your PR is accepted, we will award you with the Contributor role on Discord server.

To join the server, visit: https://www.plasmo.com/s/d

[gogoend]

Sorry, I've clicked a wrong button.

[louisgv]

@gogoend no worries, re-openning

[louisgv]

This is very interesting - I assume you copied the js file from parcel upstream and pruned their flow type.

Any chance we can use their module directly, and do minor tweak if needed? (i.e via subclassing, or via referencing their exported functions?)

[gogoend]

Yeah, the file is from the dist file of https://github.com/parcel-bundler/parcel/blob/v2/packages/packagers/js/src/ScopeHoistingPackager.js .

[louisgv]

Can we use typescript for this file?

[louisgv]

Is this copied from upstream?

[louisgv]

@gogoend

I'm very intrigued by this PR - the ability to package a separate bundle for style and inject it directly into the transformer seems very powerful. It's a tad sad that the parcel upstream source is flow-based, forcing downstream consumer to resolve to a lot of module copy hack instead of import their stuff directly with typing lol..

Tho, we were able to pull some of their file. So maybe we can reduce the amount of tech debt/copied over code by doing something similar?

see: https://github.com/PlasmoHQ/plasmo/blob/main/core/parcel-core/src/index.ts#L6-L33

[gogoend]

@gogoend no worries, re-openning

emmmm, in fact, I'm trying to do some explorations, and want to view the diff online, but choose the wrong repo, and open this PR by accident. Maybe I should view the diff in my forked repo .

[louisgv]

@gogoend no worries, re-openning

emmmm, in fact, I'm trying to do some explorations, and want to view the diff online, but choose the wrong repo, and open this PR by accident. Maybe I should view the diff in my forked repo .

oh lol - feel free to do it however you like, not a bad PR at all. It helps with visibility too