Allow : as class prefix-delimeter (#10906)

Co-authored-by: Georgii Dolzhykov <thorn.mailbox@gmail.com>

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>
+```

src/language-html/syntax-attribute.js

@@ -60,7 +60,7 @@ function printImgSrcset(value) {
   );
 }
 
-const prefixDelimiters = ["__", "--", "_", "-"];
+const prefixDelimiters = [":", "__", "--", "_", "-"];
 
 function getClassPrefix(className) {
   const startIndex = className.search(/[^_-]/);

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"]

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>