Merge pull request tailwindlabs#483 from tailwindcss/fix-480

Use more robust existing library for escaping class names instead of homegrown regex

Author: adamwathan

__tests__/applyAtRule.test.js

@@ -14,6 +14,23 @@ test("it copies a class's declarations into itself", () => {
   })
 })
 
+test('selectors with invalid characters do not need to be manually escaped', () => {
+  const input = `
+    .a\\:1\\/2 { color: red; }
+    .b { @apply .a:1/2; }
+  `
+
+  const expected = `
+    .a\\:1\\/2 { color: red; }
+    .b { color: red; }
+  `
+
+  return run(input).then(result => {
+    expect(result.css).toEqual(expected)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
 test('it removes important from applied classes by default', () => {
   const input = `
     .a { color: red !important; }

__tests__/escapeClassName.test.js

@@ -0,0 +1,5 @@
+import escapeClassName from '../src/util/escapeClassName'
+
+test('invalid characters are escaped', () => {
+  expect(escapeClassName('w:_$-1/2')).toEqual('w\\:_\\$-1\\/2')
+})

package.json

@@ -43,6 +43,7 @@
   },
   "dependencies": {
     "commander": "^2.11.0",
+    "css.escape": "^1.5.1",
     "fs-extra": "^4.0.2",
     "lodash": "^4.17.5",
     "perfectionist": "^2.4.0",

src/util/escapeClassName.js

@@ -1,3 +1,5 @@
+import escape from 'css.escape'
+
 export default function escapeClassName(className) {
-  return className.replace(/([^A-Za-z0-9\-])/g, '\\$1')
+  return escape(className)
 }

yarn.lock

@@ -1246,6 +1246,10 @@ cross-spawn@^5.0.1, cross-spawn@^5.1.0:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
+css.escape@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
+
 cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.2.tgz#b8036170c79f07a90ff2f16e22284027a243848b"