CSS fails minification due to erroneous comment match inside of base64 string

[Jaeiya]

Describe the bug

I have a base64 encoded font in a CSS file. When it is parsed through the built-in minifier used by Vite (during the build process), it fails compilation because of an error introduced by the fix for issue #426.

This specific font I'm using, when converted to base64, includes // as part of its string. The code below interprets this as a comment and completely removes the rest of the base64 string, thereby rendering the font unusable.

When the file is minified, however, the entire rest of the file is erased as well, because it's interpreted as part of the comment (minifier places everything on same line).

vite/packages/vite/src/node/plugins/css.ts

Lines 118 to 120 in 60fca98

	// if build, analyze url() asset reference
	// account for comments https://github.com/vitejs/vite/issues/426
	css = css.replace(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm, '$1')

Extra Info

I had originally thought this would be fixed by #936 but as it turns out, this was an entirely separate issue.

Reproduction

1. Create a CSS file
2. Insert // in any CSS property that accepts a string ex: font-family: '//';
3. Import the file in any view (I'm using Vue)
4. Build the project in production mode (This only happens in production mode)

System Info

• vite version: 2.0 beta 4
• Operating System: Windows 8.1
• Node version: 14.15.1
• Optional:
  • Vue version: 3.0.4
  • @vue/compiler-sfc version: 3.0.4

The error message when minifying fails

This doesn't entirely reflect the specific error going on, as it's not directly related to the minifier, but I'm including this for completeness sake.

[yyx990803]

Did this work in Vite 1 with a stricter comment removal?

[Jaeiya]

I did not try it with Vite 1.0. Unfortunately I didn't use Vite to compile my css at the time, I decided to do that when I upgraded to 2.0. When I have some time, I can mock up a test and try it out.