fix: use CSS.escape to escape selector content

refs #60
fczbkk · Sep 8, 2021 · efbbefb · fregante · Jun 9, 2022 · efbbefb
1 parent a2f10d8
commit efbbefb
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 14 deletions.
diff --git a/src/utilities-selectors.ts b/src/utilities-selectors.ts
@@ -38,6 +38,15 @@ export const SPECIAL_CHARACTERS_RE = /[ !"#$%&'()\[\]{|}<>*+,./;=?@^`~\\]/
  * Escapes special characters used by CSS selector items.
  */
 export function sanitizeSelectorItem (input = ''): string {
+  return CSS?.escape?.(input) ?? legacySanitizeSelectorItem(input)
+}
+
+/**
+ * Legacy version of escaping utility, originally used for IE11-. Should
+ * probably be replaced by a polyfill:
+ * https://github.com/mathiasbynens/CSS.escape
+ */
+export function legacySanitizeSelectorItem (input = ''): string {
   return input.split('')
     .map((character) => {
       if (character === ':') {

diff --git a/test/selector-attribute.spec.js b/test/selector-attribute.spec.js
@@ -52,7 +52,7 @@ describe('selector - attribute', function () {
   it('should quote attribute values', function () {
     root.innerHTML = '<div aaa="bbb:ccc"></div>'
     const result = getAttributeSelectors([root.firstElementChild])
-    assert.include(result, '[aaa=\'bbb\\3A ccc\']')
+    assert.include(result, '[aaa=\'bbb\\:ccc\']')
   })
 
   it('should ignore Angular attributes', function () {
@@ -104,7 +104,7 @@ describe('selector - attribute', function () {
   it('should escape attribute values', () => {
     root.innerHTML = '<div width="30%"></div><div width="100%"></div>'
     const result = getCssSelector(root.firstElementChild)
-    assert.deepEqual(result, "[width='30\\%']")
+    assert.deepEqual(result, "[width='\\33 0\\%']")
   })
 
 })
diff --git a/test/selector-class.spec.js b/test/selector-class.spec.js
@@ -53,7 +53,7 @@ describe('selector - class', function () {
     root.innerHTML = '<div class="aaa:bbb"></div>'
     const result = getClassSelectors([root.firstElementChild])
     assert.lengthOf(result, 1)
-    assert.include(result, '.aaa\\3A bbb')
+    assert.include(result, '.aaa\\:bbb')
   })
 
   it('should ignore class names that start with a number', function () {

diff --git a/test/selector-id.spec.js b/test/selector-id.spec.js
@@ -36,7 +36,7 @@ describe('selector - ID', function () {
 
   it('should escape colon character', function () {
     root.innerHTML = '<div id="aaa:bbb"></div>'
-    assert.deepEqual(getIdSelector([root.firstElementChild]), ['#aaa\\3A bbb'])
+    assert.deepEqual(getIdSelector([root.firstElementChild]), ['#aaa\\:bbb'])
   })
 
   it('should ignore ID beginning with a number', function () {

diff --git a/test/selector-tag.spec.js b/test/selector-tag.spec.js
@@ -25,7 +25,7 @@ describe('selector - tag', function () {
     root.innerHTML = '<aaa:bbb></aaa:bbb>'
     const element = root.firstElementChild
     const selector = getTagSelector([element])
-    assert.equal(selector, 'aaa\\3A bbb')
+    assert.equal(selector, 'aaa\\:bbb')
     assert.equal(root.querySelector(selector), element)
   })
 

diff --git a/test/utilities-sanitize-selector-item.spec.js b/test/utilities-sanitize-selector-item.spec.js
@@ -8,19 +8,11 @@ describe('utilities - sanitizeSelectorItem', function () {
   })
 
   it('should escape colon', function () {
-    assert.equal(sanitizeSelectorItem('aaa:bbb'), 'aaa\\3A bbb')
+    assert.equal(sanitizeSelectorItem('aaa:bbb'), 'aaa\\:bbb')
   })
 
   it('should escape special characters', function () {
     assert.equal(sanitizeSelectorItem('aaa[bbb=ccc]'), 'aaa\\[bbb\\=ccc\\]')
   })
 
-  it('should escape letters with accents', function () {
-    assert.equal(sanitizeSelectorItem('aáä'), 'a\\E1\\E4')
-  })
-
-  it('should escape double unicode characters', function () {
-    assert.equal(sanitizeSelectorItem('😀'), '\\uD83D\\uDE00')
-  })
-
 })