Subscribe on changes!

CSS Plugin error: vite run build

avatar
May 6th 2020

Describe the bug

The vite:css | transform hook is throwing error when CSS has url() with inline image reference url('data:image/....)'

System Info

  • required vite version: 0.11.1
  • required Operating System: Windows
  • required Node version: 12.13.1
  • Optional:
    • npm version: 6.14.4
    • Installed vue version (from yarn.lock or package-lock.json): 3.0.0-beta.9
    • Installed @vue/compiler-sfc version: 3.0.0-beta.9

Logs

[Error: ENOENT: no such file or directory, open 'C:\mk\dev\vuejs\sb\vite.tests\create.build.1\src\data:image\svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A\www.w3.org\2000\svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22\%3E%3C\svg%3E'] {
  errno: -4058,
  code: 'PLUGIN_ERROR',
  syscall: 'open',
  path: 'C:\\mk\\dev\\vuejs\\sb\\vite.tests\\create.build.1\\src\\data:image\\svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A\\www.w3.org\\2000\\svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22\\%3E%3C\\svg%3E',
  pluginCode: 'ENOENT',
  plugin: 'vite:css',
  hook: 'transform',
  id: 'C:\\mk\\dev\\vuejs\\sb\\vite.tests\\create.build.1\\src\\main.css',
  watchFiles: [
    'C:\\mk\\dev\\vuejs\\sb\\vite.tests\\create.build.1\\src\\index.html',
    'src\\main.js',
    'C:\\mk\\dev\\vuejs\\sb\\vite.tests\\create.build.1\\node_modules\\vue\\dist\\vue.runtime.esm-bundler.js',
    'C:\\mk\\dev\\vuejs\\sb\\vite.tests\\create.build.1\\src\\main.css',
    'C:\\mk\\dev\\vuejs\\sb\\vite.tests\\create.build.1\\src\\store\\index.js',
    'C:\\mk\\dev\\vuejs\\sb\\vite.tests\\create.build.1\\src\\components\\app\\app.vue'
  ]
}

Since it wasn't related to #57, created new issue https://github.com/vuejs/vite/blob/01135fa1edede1f46acd7c83d18e5131ebc7cbd7/src/node/buildPluginCss.ts#L13

fixed with: const urlRE = /(url\(\s*['"]?(?!data:))([^"')]+)(["']?\s*\))/