support escaping in class literals for great tailwinds justice

Author: 1cg

src/_hyperscript.js

@@ -356,7 +356,10 @@
                         value += consumeChar(); // consume final curly
                     }
                 } else {
-                    while (Lexer.isValidCSSClassChar(currentChar())) {
+                    while (Lexer.isValidCSSClassChar(currentChar()) || currentChar() === "\\") {
+                        if (currentChar() === "\\") {
+                            consumeChar();
+                        }
                         value += consumeChar();
                     }
                 }
@@ -2322,7 +2325,7 @@
         * @returns {string}
         */
         escapeSelector(str) {
-            return str.replace(/:/g, function (str) {
+            return str.replace(/[:&()\[\]\/]/g, function (str) {
                 return "\\" + str;
             });
         }

test/commands/toggle.js

@@ -186,4 +186,14 @@ describe("the toggle command", function () {
 		div.click();
 		getComputedStyle(div2).visibility.should.equal("visible");
 	});
+
+	it("can toggle crazy tailwinds class ref on a single form", function () {
+		var form = make("<form _='on click toggle .group-\\[:nth-of-type\\(3\\)_\\&\\]:block'></form>");
+		form.classList.contains("group-[:nth-of-type(3)_&]:block").should.equal(false);
+		form.click();
+		console.log(form, form.classList);
+		form.classList.contains("group-[:nth-of-type(3)_&]:block").should.equal(true);
+		form.click();
+		form.classList.contains("group-[:nth-of-type(3)_&]:block").should.equal(false);
+	});
 });

test/expressions/classRef.js

@@ -47,4 +47,16 @@ describe("the classRef expression", function () {
         Array.from(value)[0].should.equal(div);
     });
 
+	it("slashes in class references work", function () {
+        var div = make("<div class='-c1/22'></div>");
+        var value = evalHyperScript(".-c1\\/22");
+        Array.from(value)[0].should.equal(div);
+    });
+
+	it("tailwind insanity in class references work", function () {
+        var div = make("<div class='group-[:nth-of-type(3)_&]:block'></div>");
+        var value = evalHyperScript(".group-\\[:nth-of-type\\(3\\)_\\&\\]:block");
+        Array.from(value)[0].should.equal(div);
+    });
+
 });

www/expressions.md

@@ -47,7 +47,7 @@ main expression types:
 You can refer to an element by ID directly in hyperscript as follows:
 
 ```html
-<div _="on click put 'Clicked!' into #example.innerHTML">Click Me</div>
+<button _="on click put 'Clicked!' into #example.innerHTML">Click Me</button>
 <div id="example"></div>
 ```
 
@@ -59,7 +59,7 @@ The `#example` is an ID literal and will evaluate to the element with the given
 You can refer to a group of elements by class directly in hyperscript as follows:
 
 ```html
-<div _="on click put 'Clicked!' into .example.innerHTML">Click Me</div>
+<button _="on click put 'Clicked!' into .example.innerHTML">Click Me</button>
 <div class="example"></div>
 <div class="example"></div>
 ```
@@ -68,6 +68,19 @@ The `#example` is an ID literal and will evaluate all the elements with the clas
 text into their `innerHTML` when the top div is clicked.  Note that the [put command](/commands/put) can work with
 collections as well as single values, so it can put the given value into all the returned elements.
 
+If you want to use non-standard characters in a class name you can escape them using the backslash `\` character.  For
+example, consider the complex tailwinds class (`group-[:nth-of-type(3)_&]:block`)[https://tailwindcss.com/docs/hover-focus-and-other-states#arbitrary-groups].
+In this class the following characters are non-standard: `[]()&`.  Another common caracter in tailwinds classes is the
+forward slash `/`.
+
+Therefore, to express this class in hyperscript you would write the following:
+
+```html
+<button _="on click toggle .group-\[:nth-of-type\(3\)_\&\]:block">
+   Toggle Tailwinds Class
+</button>
+```
+
 ### Query Literals
 
 You can refer to a group of elements by an arbitrary [CSS selector](https://www.w3schools.com/cssref/css_selectors.asp)