From fbca25cf8b7ffc72b87aed482351ba2ad74ba1a2 Mon Sep 17 00:00:00 2001
From: tkalmar <971164+tkalmar@users.noreply.github.com>
Date: Fri, 21 May 2021 12:21:28 +0200
Subject: [PATCH] Allow `:` as class prefix-delimeter (#10906)

Co-authored-by: Georgii Dolzhykov <thorn.mailbox@gmail.com>
---
 changelog_unreleased/html/10906.md            | 29 +++++++++++++++++++
 src/language-html/syntax-attribute.js         |  2 +-
 .../__snapshots__/jsfmt.spec.js.snap          | 21 ++++++++++++++
 tests/format/html/attributes/class-colon.html |  1 +
 4 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 changelog_unreleased/html/10906.md
 create mode 100644 tests/format/html/attributes/class-colon.html

diff --git a/changelog_unreleased/html/10906.md b/changelog_unreleased/html/10906.md
new file mode 100644
index 000000000..54d664af9
--- /dev/null
+++ b/changelog_unreleased/html/10906.md
@@ -0,0 +1,29 @@
+#### Allow `:` as class prefix delimiter (#10906 by @tkalmar)
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<div class="md:foo md:bar xl:foo xl:prefix2 --prefix2--something-else unrelated_class_to_fill_80_chars"></div>
+
+<!-- Prettier stable -->
+<div
+  class="
+    md:foo
+    md:bar
+    xl:foo
+    xl:prefix2
+    --prefix2--something-else
+    unrelated_class_to_fill_80_chars
+  "
+></div>
+
+<!-- Prettier main -->
+<div
+  class="
+    md:foo md:bar
+    xl:foo xl:prefix2
+    --prefix2--something-else
+    unrelated_class_to_fill_80_chars
+  "
+></div>
+```
diff --git a/src/language-html/syntax-attribute.js b/src/language-html/syntax-attribute.js
index cb655da24..c7caa0a8a 100644
--- a/src/language-html/syntax-attribute.js
+++ b/src/language-html/syntax-attribute.js
@@ -60,7 +60,7 @@ function printImgSrcset(value) {
   );
 }
 
-const prefixDelimiters = ["__", "--", "_", "-"];
+const prefixDelimiters = [":", "__", "--", "_", "-"];
 
 function getClassPrefix(className) {
   const startIndex = className.search(/[^_-]/);
diff --git a/tests/format/html/attributes/__snapshots__/jsfmt.spec.js.snap b/tests/format/html/attributes/__snapshots__/jsfmt.spec.js.snap
index 9dc2e0790..dbfbc7b90 100644
--- a/tests/format/html/attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/html/attributes/__snapshots__/jsfmt.spec.js.snap
@@ -341,6 +341,27 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`class-colon.html format 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<my-tag class="md:foo-bg md:foo-color md:foo--sub-bg md:foo--sub-color xl:foo xl:prefix2 --prefix2--something-else unrelated_class_to_fill_80_chars"></my-tag>
+
+=====================================output=====================================
+<my-tag
+  class="
+    md:foo-bg md:foo-color md:foo--sub-bg md:foo--sub-color
+    xl:foo xl:prefix2
+    --prefix2--something-else
+    unrelated_class_to_fill_80_chars
+  "
+></my-tag>
+
+================================================================================
+`;
+
 exports[`class-leading-dashes.html format 1`] = `
 ====================================options=====================================
 parsers: ["html"]
diff --git a/tests/format/html/attributes/class-colon.html b/tests/format/html/attributes/class-colon.html
new file mode 100644
index 000000000..ebe00f096
--- /dev/null
+++ b/tests/format/html/attributes/class-colon.html
@@ -0,0 +1 @@
+<my-tag class="md:foo-bg md:foo-color md:foo--sub-bg md:foo--sub-color xl:foo xl:prefix2 --prefix2--something-else unrelated_class_to_fill_80_chars"></my-tag>