Skip to content

CSS imported to JS using ?inline contain JS code for URL handling instead of actual URLs when built for production #9694

@Artur-

Description

@Artur-

Describe the bug

One of our project which works fine with Vite 2.x has code like

import previewHacks from './preview-hacks.css?inline';

injectGlobalCss(previewHacks.toString());

where preview-hacks.css contains

@import url('line-awesome/dist/line-awesome/css/line-awesome.min.css');

The line-awesome.min.css file contains

@font-face{
  font-family:'Line Awesome Brands';
  font-style:normal;
  font-weight:400;
  font-display:auto;
  src:url(../fonts/la-brands-400.eot);
  src:url(../fonts/la-brands-400.eot?#iefix) format("embedded-opentype"),url(../fonts/la-brands-400.woff2) format("woff2"),url(../fo
 }

With Vite 3.0.0-3.0.7 the CSS string previewHacks.toString() contains in dev mode

@font-face {
  font-family: 'Line Awesome Brands';
  font-style: normal;
  font-weight: normal;
  font-display: auto;
  src: url("/VAADIN/@fs/path-to-project/node_modules/line-awesome/dist/line-awesome/fonts/la-brands-400.eot");

but when built for production it contains

@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+");

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.7

Used Package Manager

npm

Logs

No response

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    p2-edge-caseBug, but has workaround or limited in scope (priority)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions