CSS imported to JS using ?inline contain JS code for URL handling instead of actual URLs when built for production #9694
Comments
|
Oh we actually see this in many many of our tests now also when trying to upgrade from 3.0.4 to 3.0.7: vaadin/flow#14356. Which is a bit weird because in the other project, it shows up also with 3.0.4 |
|
Perhaps related to #9381 or some other import meta PR @sapphi-red ? |
|
What is the problem here? Because "@font-face{font-family:Line Awesome Brands;font-style:normal;font-weight:400;font-display:auto;src:url("+new URL('la-brands-400.c0e32387.eot', import.meta.url).href+");"is in JS, it will be evaluated as something like "@font-face{font-family:Line Awesome Brands;font-style:normal;font-weight:400;font-display:auto;src:url(https://example.com/assets/la-brands-400.c0e32387.eot);"which is a valid CSS. This |
|
The problem is that it is not evaluated but the JS code remains in the final string |
|
Just a detail, but injectGlobalCss(previewHacks.toString());It would help a lot to be able to get a reproduction, I wonder if one of your plugins is getting in the way. If it isn't evaluated, it means that the CSS code didn't end up like: when you are importing previewHacks, that is quite strange |
|
The code in the output JS is like So as the CSS is wrapped inside breaking out using I suspect the wrapping is done by |
|
Interesting, this looks like something that could be fixed in ` ... ${new URL().href} ... `For our wrapping, but that also may have issues depending on their (I assume) regex based replacing 🤔 |
|
Thinking about this some more, since we are replacing the URL in I see two options:
Leaning towards 2. if we can find a good implementation. |
patak-dev
added
bug
p3-minor-bug
|
Here is a reproduction case https://github.com/Artur-/vite-vaadin-problem7 |
|
If it's using tagged template literal ( function t(...args){console.log(args)}
t`aa` // [['aa']]
t`a${'url'}a` // [['a', 'a'], 'url']
t(`a${'url'}a`) // ['aurla']For example, if // (a)
export default ".foo { background: url('./foo') }"
// (b)
export default css`.foo { background: url('./foo') }`
// (c)
export default css`.foo { background: url('${new URL('./foo', import.meta.url).href}') }` |
|
Tried import litcss from 'rollup-plugin-lit-css';
export default {
base: './',
plugins: [
{
...litcss({include: '**/*.css*'}),
enforce: 'post'
}
],
}That plugin use |
|
Compared the code produced by two plugins I tested, and both have
|
|
It should be possible to workaround this by making the URL wrapped as Vite expects it so instead of rewriting in the plugin from to it would rewrite to Then |
|
Do you have a reference for @sapphi-red do you have an example where it will break? I know that the named template string could potentially do anything, but I assume that if they see a URL interpolated they must respect it. Maybe they will be adding custom logic to be able to update it later? But I think the resulting CSS should be well-formed. |
|
For the record, this resolves the issue for us https://github.com/umbopepato/rollup-plugin-postcss-lit/pull/54/files |
Oh, interesting. Great that they were so responsive. They will also need to guard against |
|
Well... I created that PR :) |
|
I think this will break if we inject
|
|
|
|
Is this fixed, or still an issue ? |
|
This issue reappears when trying to upgrade from Vite 5 beta 9 to beta 10. Not sure what has changed |
|
In the test logs (https://github.com/vaadin/flow/actions/runs/6627641560/job/18003126076) there are requests for files like |
|
@Artur- beta10 upgrades rollup to v4. rollup v4 uses some additional characters for the reference id. I guess you need to change this line like I did here. |
|
Thanks! That did it and we are 🍏 📗 🟢 💚 with Vite 5 beta 10 |
|
Is there any fix for that problem? Local all work as I need. When I deploy and build i got a 404 error. package.json index.scss vite.config.php |
Describe the bug
One of our project which works fine with Vite 2.x has code like
where
preview-hacks.csscontainsThe
line-awesome.min.cssfile containsWith Vite 3.0.0-3.0.7 the CSS string
previewHacks.toString()contains in dev modebut when built for production it contains
Reproduction
Reproduces in a private Vaadin project. So far I have been unable to trigger it in a simple project. @patak-dev has access to the project though
System Info
System: OS: macOS 12.4 CPU: (10) arm64 Apple M1 Max Memory: 8.07 GB / 64.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 17.9.0 - ~/.nvm/versions/node/v17.9.0/bin/node npm: 8.5.5 - ~/.nvm/versions/node/v17.9.0/bin/npm Browsers: Chrome: 104.0.5112.79 Chrome Canary: 106.0.5241.0 Firefox: 102.0 Safari: 15.5 npmPackages: vite: ^3.0.7 => 3.0.7Used Package Manager
npm
Logs
No response
Validations
The text was updated successfully, but these errors were encountered: