vite-plugin-windicss transformCSS error and HMR error with vite-plugin-restart

[yunsii]

Describe the bug

When use background with data:image/svg+xml;utf8 url in pseudo class like this:

// less and
// transformCSS: true
&::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' transform='translate(5,5)'><rect width='14' height='14' style='fill:rgb(62, 207, 142)' rx='24'/><path style='fill:rgb(255,255,255)' d='M9.6 4.2a.5.5 0 01.9.6l-3.6 5c-.1.2-.4.3-.7.1L3.7 7.4a.5.5 0 11.6-.8l2 1.2 3.3-3.6z'/></svg>");
  background-size: cover;
  content: '';
}

render css:

transformCSS: false work well.

Otherwise, when I use vite-plugin-restart, less file HMR will not work.

Minimal Reproductions

https://github.com/yunsii/vite-react/tree/test/vite-plugin

start and open: http://localhost:8000/vite-react/welcome

Versions

• vite-plugin-windicss: 1.6.3
• vite: 2.7.1
• framework(vue/react/svelte/etc): react

[yunsii]

refer to:

• Add vite-plugin-restart after vite-plugin-windicss used, less HMR not work antfu/vite-plugin-restart#9
• windicss/utils/parser parse background with data:image/svg+xml;utf8 url error windicss#743