fix(css): no emit assets in html style tag (use map) (fix #5968)

[poyoho]

Description

fix #5968

Additional context

I think it is better way to resolve inline style.

• use js import to use css plugin transform inline style. and relace it with a flag, like assets url.
• css-post plugin record transform result.use result replace flag when generateBundle.

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[bluwy]

IIRC, this PR solves the issue in the build output so that inline styles that are converted into CSS (with a custom class name) are not generated as a separate file, which is denoted by &inline. This is a wild ride 😄

I've made a few comments below, and we'll probably want to add a test for CSS specificity as well.

I have two concerns though:

1. &inline or ?inline is already a valid suffix for CSS imports. I've only discovered this recently and it seems to work like ?raw, though I'm still not familiar how it works. Is it intentional that you choose the &inline query as well? We might want to rename it in case it clashes somehow.
2. Probably worth a discussion too if we want to support url() in style=""? It seems to complicate the flow a lot, though I really appreciate that you've already found a solution for it.

[bluwy]

Overall looks good to me! I think there's still merit to discuss the below, but it's an approval for me.

Probably worth a discussion too if we want to support url() in style=""? It seems to complicate the flow a lot

---

Also if #6048 does have css specificity issue that this PR fixes, we should close that one in favour of this.

[poyoho]

yes, we can find the css plugin transfrom it or export transform css method.
now the method refers to the asset plugin, to tell the truth, it's really complicated.😅

[Shinigami92]

@poyoho I think the line got to long 😱
You may need to run format

[poyoho]

Why is it not automatically formatted🤣

[Shinigami92]

Why is it not automatically formattedrofl

I think it has something todo with lint-stage or maybe husky that will come in another PR
And even if, there are ways to bypass it 🙁
So we added this check that cannot be bypassed 🙂

[poyoho]

lint-staged is good for me 😀