+
+
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
new file mode 100644
index 0000000..1daa330
--- /dev/null
+++ 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
new file mode 100644
index 0000000..2f36686
--- /dev/null
+++ b/src/__tests__/__snapshots__/mixed-shorthand-and-longhand-class.expected/html.marko
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
"blue")(),
+ orange,
+ ...colorList.map((item) => item.color),
+ green,
+ "long_list",
+]/>
+
color.indexOf("e") >= 0)
+ .map((color) => color.toUpperCase()),
+]/>
+
+
+
+
+
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
new file mode 100644
index 0000000..2f36686
--- /dev/null
+++ b/src/__tests__/__snapshots__/mixed-shorthand-and-longhand-class.expected/with-parens.marko
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
"blue")(),
+ orange,
+ ...colorList.map((item) => item.color),
+ green,
+ "long_list",
+]/>
+
color.indexOf("e") >= 0)
+ .map((color) => color.toUpperCase()),
+]/>
+
+
+
+
+
diff --git a/src/__tests__/fixtures/mixed-shorthand-and-longhand-class.marko b/src/__tests__/fixtures/mixed-shorthand-and-longhand-class.marko
new file mode 100644
index 0000000..2d9c909
--- /dev/null
+++ b/src/__tests__/fixtures/mixed-shorthand-and-longhand-class.marko
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+
+ "blue")(), orange, ...colorList.map((item) => item.color), green]/>
+ color.indexOf('e') >= 0).map((color) => color.toUpperCase())/>
+
+
+
+
+
diff --git a/src/index.ts b/src/index.ts
index f838f66..8d3bc8e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -355,17 +355,24 @@ export const printers: Record> = {
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 {