feat(core dom): Add escape_css_id method.

Get an escaped CSS selector for a given id string.

id selectors should - but don't have to - start with a letter.
If the id starts with a number or a dash, it should be escaped.
This method does that for you.

Author: thet

package.json

@@ -44,6 +44,7 @@
         "@patternslib/pat-tiptap": "^4.8.2",
         "@patternslib/pat-upload": "^3.1.1",
         "copy-webpack-plugin": "^11.0.0",
+        "css.escape": "^1.5.1",
         "modernizr": "^3.12.0",
         "pegjs": "0.11.0-master.b7b87ea"
     },

src/core/dom.js

@@ -410,6 +410,29 @@ const get_visible_ratio = (el, container) => {
     return visible_ratio;
 };
 
+/**
+ * Get an escaped CSS selector for a given id string.
+ *
+ * id selectors should - but don't have to - start with a letter.
+ * If the id starts with a number or a dash, it should be escaped.
+ * This method does that for you.
+ *
+ * Alse see:
+ * - https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+ * - https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape
+ *
+ * @param {String} id - The id to escape.
+ *
+ * @returns {String} - The escaped CSS selector.
+ *
+ * @example
+ * escape_css_id_selector("#123"); // returns "#\\31 23""
+ * escape_css_id_selector("#-123"); // returns "#-\\31 23"
+ */
+const escape_css_id = (id) => {
+    return `#${CSS.escape(id.split("#")[1])}`;
+};
+
 const dom = {
     toNodeArray: toNodeArray,
     querySelectorAllAndMe: querySelectorAllAndMe,
@@ -432,6 +455,7 @@ const dom = {
     delete_data: delete_data,
     template: template,
     get_visible_ratio: get_visible_ratio,
+    escape_css_id: escape_css_id,
     add_event_listener: events.add_event_listener, // BBB export. TODO: Remove in an upcoming version.
     remove_event_listener: events.remove_event_listener, // BBB export. TODO: Remove in an upcoming version.
 };

src/core/dom.test.js

@@ -856,3 +856,21 @@ describe("core.dom tests", () => {
         });
     });
 });
+
+describe("escape_css_id", function () {
+    it("returns a standard id selector as-is", function () {
+        expect(dom.escape_css_id("#foo")).toBe("#foo");
+    });
+
+    it("returns an escaped version when the id is a number", function () {
+        expect(dom.escape_css_id("#123")).toBe("#\\31 23");
+    });
+
+    it("returns an escaped version when the id starts with a number", function () {
+        expect(dom.escape_css_id("#1foo")).toBe("#\\31 foo");
+    });
+
+    it("returns an escaped version when the id starts with a dash", function () {
+        expect(dom.escape_css_id("#-1-2-3")).toBe("#-\\31 -2-3");
+    });
+});

src/setup-tests.js

@@ -19,3 +19,6 @@ import dom from "./core/dom";
 dom.is_visible = (el) => {
     return !el.hidden && el.style.display !== "none";
 };
+
+// polyfill css.escape for jsdom
+import("css.escape");