Skip to content

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

Merged
patak-cat merged 40 commits intovitejs:mainfrom
poyoho:fix/assets-in-style2
Dec 30, 2021
Merged

fix(css): no emit assets in html style tag (fix #5968)#6321
patak-cat merged 40 commits intovitejs:mainfrom
poyoho:fix/assets-in-style2

Conversation

@poyoho
Copy link
Copy Markdown
Member

@poyoho poyoho commented Dec 30, 2021

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.

I accidentally deleted repo before. and break link of #6181😭

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.

poyoho and others added 30 commits December 9, 2021 12:11
@poyoho
test: add url import assets in style tag / inline style tests
ba5ac17
@poyoho
fix: compile style / inline style in index.html
93ef3f3
@poyoho
test: @import test
4736fe8
@poyoho
chore: test unit
5004fc3
@poyoho
feat: ignore repeat to create resolve
6bc8dfa
@poyoho
chore: format
26dc100
@poyoho
Merge branch 'main' into fix/assets-in-style
ab61747
@poyoho
fix: never used import
1005c06
@poyoho
fix: fix resolve importer id
827e94d
@poyoho
feat: define createHTMLCSSCompiler return type
f1ef753
@poyoho
feat: find the css plugin instance re-using transform method
610d9f8
@poyoho
refactor: import proxy handle css tag in html
8cf63a3
@poyoho
Merge branch 'main' into fix/assets-in-style
380e0f5
@poyoho
chore: format
676b01b
@poyoho @bluwy
feat commit for style tag in html emit asset pipline
013071f 
Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
@poyoho @bluwy
feat: commit for style tag in html emit asset pipline
c16aec7 
Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
@poyoho
Merge branch 'vitejs:main' into fix/assets-in-style
e62234d
@poyoho
feat: comment
6e02f9b
@poyoho @Shinigami92
fix: html-inline-script-style-proxy -> html-inline-proxy
b41e001 
Co-authored-by: Shinigami <chrissi92@hotmail.de>
@poyoho @Shinigami92
fix: html-inline-script-style-proxy -> html-inline-proxy
d533d2a 
Co-authored-by: Shinigami <chrissi92@hotmail.de>
@poyoho @Shinigami92
fix: html-inline-script-style-proxy -> html-inline-proxy
b2c6756 
Co-authored-by: Shinigami <chrissi92@hotmail.de>
@poyoho @Shinigami92
fix: html-inline-script-style-proxy -> html-inline-proxy
a19bdda 
Co-authored-by: Shinigami <chrissi92@hotmail.de>
@poyoho
chore: format
1a0400c
@poyoho
refactor: use map to resolve inline style
fc82dec
@poyoho
fix: overwrite inlineCSSRE
5229ab3
@poyoho
chore: format
ed42247
@poyoho
fix: use error variable to overwrite
30255a5
@poyoho
Merge branch 'main' into fix/assets-in-style2
54a3347
@poyoho
chore: nice naming
c2d0508
@poyoho
fix: use diff name and rewrite comment
fd5ed80
@poyoho
Copy link
Copy Markdown
Member Author

poyoho commented Dec 30, 2021

Duplicate of #6181

@Niputi Niputi added the p3-minor-bug An edge case that only affects very specific usage (priority) label Dec 30, 2021
@patak-cat patak-cat merged commit dc9fce1 into vitejs:main Dec 30, 2021
@patak-cat
Copy link
Copy Markdown
Member

patak-cat commented Dec 30, 2021

@poyoho thanks again for the work you're doing lately in Vite, hats off

This was referenced Feb 21, 2022
Closed
Merged
@poyoho poyoho deleted the fix/assets-in-style2 branch February 25, 2022 15:09
@bluwy bluwy mentioned this pull request Mar 12, 2022
Closed
6 tasks
@siwa-ddiesenreither
Copy link
Copy Markdown

siwa-ddiesenreither commented Apr 28, 2022

Is there a way to disable the replacement of <div style="background-image: url('test.png')"> with <div style="__VITE_INLINE_CSS__..."> - i just want to build my index.html and host it on a server?

@trtrtr6
Copy link
Copy Markdown

trtrtr6 commented Apr 29, 2022 •
edited
Loading

image

@poyoho

Why exclude underscore here，If there is an underscore on the path, the regularity here cannot match

image

@poyoho
Copy link
Copy Markdown
Member Author

poyoho commented Apr 30, 2022

Is there a way to disable the replacement of <div style="background-image: url('test.png')"> with <div style="__VITE_INLINE_CSS__..."> - i just want to build my index.html and host it on a server?

hi, maybe not, Can you explain in detail why it is used this way?

@siwa-ddiesenreither
Copy link
Copy Markdown

siwa-ddiesenreither commented Apr 30, 2022 •
edited
Loading

Is there a way to disable the replacement of <div style="background-image: url('test.png')"> with <div style="__VITE_INLINE_CSS__..."> - i just want to build my index.html and host it on a server?

hi, maybe not, Can you explain in detail why it is used this way?

I am currently using vite as build tool for my Website Design Preview. I've got some .html files like index.html, content.html, contact.html and scss, js etc. So i am developing with vite hot reload and then run vite build and upload the dist folder to a webserver to show my clients the preview. I have got some div's with inline style attributes with background-images so it would be nice if vite just changes to path to the image as it does in scss and does not replace it with an VITE_INLINE_CSS path.

Edit: i am using vite instead of gulp/webpack etc. because it's freakin fast and i like the way to configure it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@patak-cat patak-cat patak-cat approved these changes

@bluwy bluwy bluwy approved these changes

Assignees

No one assigned

Labels

p3-minor-bug An edge case that only affects very specific usage (priority)

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Assets in <style> tags are not processed by vite build

6 participants

@poyoho @patak-cat @siwa-ddiesenreither @trtrtr6 @bluwy @Niputi