fix: issue where duplicating shorthand and longhand class/id

marko-js · Mar 16, 2023 · fc6662c · fc6662c
1 parent 4120604
commit fc6662c
Show file tree

Hide file tree

Showing 6 changed files with 173 additions and 9 deletions.
diff --git a/src/__tests__/__snapshots__/mixed-shorthand-and-longhand-class.expected/auto.marko b/src/__tests__/__snapshots__/mixed-shorthand-and-longhand-class.expected/auto.marko
@@ -0,0 +1,35 @@
+<div class="string blue"/>
+<div class=["blue", "string_list"]/>
+
+<div class=["templatestring", `${blue}`]/>
+<div class=[`${blue}`, "templatestring_list"]/>
+
+<div class=["dynamic", blue]/>
+<div class=[blue, "dynamic_list"]/>
+
+<div class=["red", blue, "green", yellow, "mixed_list"]/>
+<div class=[
+  red,
+  yellow,
+  (() => "blue")(),
+  orange,
+  ...colorList.map((item) => item.color),
+  green,
+  "long_list",
+]/>
+<div class=[
+  "long_item",
+  ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]
+    .filter((color) => color.indexOf("e") >= 0)
+    .map((color) => color.toUpperCase()),
+]/>
+
+<div class=["red", "multiple"] class="blue"/>
+<div class="multiple red" class=["blue"]/>
+
+<div class=[
+  "multiple",
+  {
+    blue: maybeBlue,
+  },
+]/>
diff --git a/src/__tests__/__snapshots__/mixed-shorthand-and-longhand-class.expected/concise.marko b/src/__tests__/__snapshots__/mixed-shorthand-and-longhand-class.expected/concise.marko
@@ -0,0 +1,35 @@
+div.string.blue
+div class=["blue", "string_list"]
+
+div class=["templatestring", `${blue}`]
+div class=[`${blue}`, "templatestring_list"]
+
+div class=["dynamic", blue]
+div class=[blue, "dynamic_list"]
+
+div class=["red", blue, "green", yellow, "mixed_list"]
+div class=[
+  red,
+  yellow,
+  (() => "blue")(),
+  orange,
+  ...colorList.map((item) => item.color),
+  green,
+  "long_list",
+]
+div class=[
+  "long_item",
+  ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]
+    .filter((color) => color.indexOf("e") >= 0)
+    .map((color) => color.toUpperCase()),
+]
+
+div.blue class=["red", "multiple"]
+div.multiple.red class=["blue"]
+
+div class=[
+  "multiple",
+  {
+    blue: maybeBlue,
+  },
+]
diff --git a/src/__tests__/__snapshots__/mixed-shorthand-and-longhand-class.expected/html.marko b/src/__tests__/__snapshots__/mixed-shorthand-and-longhand-class.expected/html.marko
@@ -0,0 +1,35 @@
+<div class="string blue"/>
+<div class=["blue", "string_list"]/>
+
+<div class=["templatestring", `${blue}`]/>
+<div class=[`${blue}`, "templatestring_list"]/>
+
+<div class=["dynamic", blue]/>
+<div class=[blue, "dynamic_list"]/>
+
+<div class=["red", blue, "green", yellow, "mixed_list"]/>
+<div class=[
+  red,
+  yellow,
+  (() => "blue")(),
+  orange,
+  ...colorList.map((item) => item.color),
+  green,
+  "long_list",
+]/>
+<div class=[
+  "long_item",
+  ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]
+    .filter((color) => color.indexOf("e") >= 0)
+    .map((color) => color.toUpperCase()),
+]/>
+
+<div class=["red", "multiple"] class="blue"/>
+<div class="multiple red" class=["blue"]/>
+
+<div class=[
+  "multiple",
+  {
+    blue: maybeBlue,
+  },
+]/>
diff --git a/src/__tests__/__snapshots__/mixed-shorthand-and-longhand-class.expected/with-parens.marko b/src/__tests__/__snapshots__/mixed-shorthand-and-longhand-class.expected/with-parens.marko
@@ -0,0 +1,35 @@
+<div class="string blue"/>
+<div class=["blue", "string_list"]/>
+
+<div class=["templatestring", `${blue}`]/>
+<div class=[`${blue}`, "templatestring_list"]/>
+
+<div class=["dynamic", blue]/>
+<div class=[blue, "dynamic_list"]/>
+
+<div class=["red", blue, "green", yellow, "mixed_list"]/>
+<div class=[
+  red,
+  yellow,
+  (() => "blue")(),
+  orange,
+  ...colorList.map((item) => item.color),
+  green,
+  "long_list",
+]/>
+<div class=[
+  "long_item",
+  ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]
+    .filter((color) => color.indexOf("e") >= 0)
+    .map((color) => color.toUpperCase()),
+]/>
+
+<div class=["red", "multiple"] class="blue"/>
+<div class="multiple red" class=["blue"]/>
+
+<div class=[
+  "multiple",
+  {
+    blue: maybeBlue,
+  },
+]/>
diff --git a/src/__tests__/fixtures/mixed-shorthand-and-longhand-class.marko b/src/__tests__/fixtures/mixed-shorthand-and-longhand-class.marko
@@ -0,0 +1,17 @@
+<div.string class="blue"/>
+<div.string_list class=["blue"]/>
+
+<div.templatestring class=`${blue}`/>
+<div.templatestring_list class=[`${blue}`]/>
+
+<div.dynamic class=blue/>
+<div.dynamic_list class=[blue]/>
+
+<div.mixed_list class=["red", blue, "green", yellow]/>
+<div.long_list class=[red, yellow, (() => "blue")(), orange, ...colorList.map((item) => item.color), green]/>
+<div.long_item class=["red", "orange", "yellow", "green", "blue", "indigo", "violet"].filter((color) => color.indexOf('e') >= 0).map((color) => color.toUpperCase())/>
+
+<div.multiple class=["red"] class="blue" />
+<div.multiple class="red" class=["blue"] />
+
+<div.multiple class={ blue: maybeBlue } />
diff --git a/src/index.ts b/src/index.ts
@@ -355,17 +355,24 @@ export const printers: Record<string, Printer<Node>> = {
               const childNode = childPath.getValue();
 
               if (
-                (literalTagName === "style" ||
-                  opts.markoSyntax === "concise") &&
                 t.isMarkoAttribute(childNode) &&
-                (childNode.name === "class" || childNode.name === "id") &&
-                t.isStringLiteral(childNode.value) &&
-                !childNode.modifier &&
-                shorthandIdOrClassReg.test(childNode.value.value)
+                (childNode.name === "class" || childNode.name === "id")
               ) {
-                const symbol = childNode.name === "class" ? "." : "#";
-                doc[shorthandIndex] +=
-                  symbol + childNode.value.value.split(/ +/).join(symbol);
+                if (
+                  (literalTagName === "style" ||
+                    opts.markoSyntax === "concise") &&
+                  t.isStringLiteral(childNode.value) &&
+                  !childNode.modifier &&
+                  shorthandIdOrClassReg.test(childNode.value.value)
+                ) {
+                  const symbol = childNode.name === "class" ? "." : "#";
+                  doc[shorthandIndex] +=
+                    symbol + childNode.value.value.split(/ +/).join(symbol);
+                } else {
+                  // Fix issue where class/id shorthands don't have the correct source location when merged.
+                  childNode.value.loc = null;
+                  attrsDoc.push(print(childPath));
+                }
               } else if ((childNode as t.MarkoAttribute).default) {
                 doc.push(print(childPath));
               } else {