Unicode escape sequences in CSS class names are broken during build

[adamwathan]

Version

3.0.0-rc.3

Reproduction link

https://github.com/adamwathan/vue-cli-3-css-escape-bug/blob/master/src/App.vue#L19

Steps to reproduce

Create a CSS class in a component's <style> block that includes an escaped digit anywhere but the first character, like:

.foo-\35 0 {
  width: 100px;
  height: 100px;
  background-color: red;
}

Note that \35(space) is the unicode code point for just 5: https://mathiasbynens.be/notes/css-escapes

What is expected?

The resulting CSS is unchanged from what was entered, and using the class foo-50 in your markup applies those styles.

This works fine in Vue CLI 2.* projects: https://codesandbox.io/s/y3koz7zr4z

As well as in regular HTML/CSS: https://jsfiddle.net/4pc1L95n/

What is actually happening?

Somewhere in the build process, the backslash in front of the 3 is being stripped, and you get this resulting CSS instead:

.foo-35 0 {
  width: 100px;
  height: 100px;
  background-color: red;
}

That means foo-50 as a class no longer works properly in the markup.

---

Of course digits in the middle of CSS classes don't need to be escaped, but we had an issue with Tailwind CSS where folks were escaping the user-supplied portion of classes generated by plugins, and those classes stopped working for people in Vue CLI 3 and Nuxt.js projects when we upgraded our CSS escape function to be spec-compliant:

tailwindlabs/tailwindcss#509

[haoqunjiang]

The Vue CLI 2 version does not work as I run it locally.

Seems like a webpack css-loader bug webpack-contrib/css-loader#578

[yyx990803]

If this is a CSS Loader issue I'm afraid there's nothing we can do about it in Vue CLI...