release: WRNexusJS 0.2.35

packages/compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/compiler",
-  "version": "0.2.35",
+  "version": "0.2.36",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/compiler/src/parser.ts

@@ -526,18 +526,37 @@ export function parseHtmlView(src: string, pos: number): { nodes: ViewNode[]; en
   };
 
   const readAttributeName = (): string => {
-    const first = src[i];
-
-    if (i >= src.length || (!isNameStart(first!) && first !== ":" && first !== "$")) {
+    if (i >= src.length) {
       return fail("Expected an attribute name");
     }
 
-    const start = i++;
+    const start = i;
+
+    while (i < src.length) {
+      const char = src[i];
+      const next = src[i + 1];
+
+      if (
+        char === "=" ||
+        char === ">" ||
+        char === '"' ||
+        char === "'" ||
+        char === " " ||
+        char === "\t" ||
+        char === "\n" ||
+        char === "\r" ||
+        (char === "/" && next === ">")
+      ) {
+        break;
+      }
 
-    while (i < src.length && isAttributeNamePart(src[i]!, src[i + 1])) {
       i++;
     }
 
+    if (i === start) {
+      return fail("Expected an attribute name");
+    }
+
     return src.slice(start, i);
   };
 

packages/compiler/test/compiler.test.ts

@@ -646,3 +646,46 @@ component CookieToggle {
 
   expect(binding[1]).toBe("base {personalizationCookies ? 'enabled' : 'disabled'}");
 });
+test("parses class directives containing Tailwind arbitrary values", () => {
+  const ast = parse(`
+component PageHeader {
+  state centered = false
+
+  view {
+    <div
+      class="py-12"
+      class:lg:grid-cols-[minmax(0,1fr)_auto]="!centered"
+      class:dark:bg-white/10="centered"
+      class:w-[calc(100%-2rem)]="centered"
+    >
+      Header
+    </div>
+  }
+}
+`);
+
+  expect(ast).toBeDefined();
+});
+test("compiles Tailwind arbitrary values in class directives", () => {
+  const output = generate(
+    parse(`
+component PageHeader {
+  state centered = false
+
+  view {
+    <div
+      class="py-12"
+      class:lg:grid-cols-[minmax(0,1fr)_auto]="!centered"
+      class:dark:bg-white/10="centered"
+    >
+      Header
+    </div>
+  }
+}
+`),
+  );
+
+  expect(output).toContain("lg:grid-cols-[minmax(0,1fr)_auto]");
+
+  expect(output).toContain("dark:bg-white/10");
+});