fix: refine attributeRegex (#345)

Fix attributeRegex so that it correctly matches attributes that are not enclosed in quotes.
fix #344

---------

Co-authored-by: Simon Holthausen <[email protected]>

Author: Rolaka

CHANGELOG.md

@@ -5,6 +5,7 @@
 -   (feat) support `requirePragma` and `insertPragma` options ([#350](https://github.com/sveltejs/prettier-plugin-svelte/issues/350))
 -   (feat) support `<svelte:document>`
 -   (feat) trim whitespace in `class` attributes ([#339](https://github.com/sveltejs/prettier-plugin-svelte/issues/339))
+-   (fix) handle script/style attributes without quotes ([#344](https://github.com/sveltejs/prettier-plugin-svelte/issues/344))
 
 ## 2.9.0
 

src/lib/extractAttributes.ts

@@ -2,15 +2,16 @@ import { AttributeNode, TextNode } from '../print/nodes';
 
 export function extractAttributes(html: string): AttributeNode[] {
     const extractAttributesRegex = /<[a-z]+[\s\n]*([\s\S]*?)>/im;
-    const attributeRegex = /([^\s=]+)(?:=("|')([\s\S]*?)\2)?/gim;
+    const attributeRegex = /([^\s=]+)(?:=(?:(?:("|')([\s\S]*?)\2)|(?:(\S+?)(?:\s|>|$))))?/gim;
 
     const [, attributesString] = html.match(extractAttributesRegex)!;
 
     const attrs: AttributeNode[] = [];
 
     let match: RegExpMatchArray | null;
     while ((match = attributeRegex.exec(attributesString))) {
-        const [all, name, quotes, value] = match;
+        const [all, name, quotes, valueQuoted, valueUnquoted] = match;
+        const value = valueQuoted || valueUnquoted;
         const attrStart = match.index!;
 
         let valueNode: AttributeNode['value'];

test/formatting/samples/attributes-without-quotes/input.html

@@ -0,0 +1,13 @@
+<script  lang="ts"context=module
+></script>
+
+<script  lang=ts boolean></script>
+
+<p class=foo>asd</p>
+<div>
+    <script  lang=ts>d</script>
+</div>
+
+<style lang="less
+
+"></style>

test/formatting/samples/attributes-without-quotes/output.html

@@ -0,0 +1,16 @@
+<script lang="ts" context="module"></script>
+
+<script lang="ts" boolean></script>
+
+<p class="foo">asd</p>
+<div>
+    <script lang="ts">
+        d;
+    </script>
+</div>
+
+<style
+    lang="less
+
+"
+></style>