Repository: sveltejs/prettier-plugin-svelte
Pull request #332 (2022-12-09 15:59:13)

(fix) respect strict mode and shorthand options
when formatting style/class directives
fies #328


Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 961e0c8..a29d32a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## 2.9.0 (unreleased)
 
 -   (feat) support style modifiers ([#330](https://github.com/sveltejs/prettier-plugin-svelte/issues/330))
+-   (fix) respect strict mode and shorthand options when formatting style/class directives ([#328](https://github.com/sveltejs/prettier-plugin-svelte/issues/328))
 
 ## 2.8.1
 
diff --git a/src/print/index.ts b/src/print/index.ts
index a6d6cb3..66514be 100644
--- a/src/print/index.ts
+++ b/src/print/index.ts
@@ -619,7 +619,10 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
             return concat([
                 'class:',
                 node.name,
-                node.expression.type === 'Identifier' && node.expression.name === node.name
+                node.expression.type === 'Identifier' &&
+                node.expression.name === node.name &&
+                options.svelteAllowShorthand &&
+                !options.svelteStrictMode
                     ? ''
                     : concat(['=', ...printJsExpression()]),
             ]);
@@ -632,7 +635,7 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
                     : '',
             ];
 
-            if (isOrCanBeConvertedToShorthand(node)) {
+            if (isOrCanBeConvertedToShorthand(node) || node.value === true) {
                 if (options.svelteStrictMode) {
                     return concat([...prefix, '="{', node.name, '}"']);
                 } else if (options.svelteAllowShorthand) {
@@ -641,10 +644,6 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
                     return concat([...prefix, '={', node.name, '}']);
                 }
             } else {
-                if (node.value === true) {
-                    return concat([...prefix]);
-                }
-
                 const quotes = !isLoneMustacheTag(node.value) || options.svelteStrictMode;
                 const attrNodeValue = printAttributeNodeValue(path, print, quotes, node);
                 if (quotes) {


Test patch:
diff --git a/test/formatting/samples/strict-mode-false/input.html b/test/formatting/samples/strict-mode-false/input.html
index fdf53ca..a73d77a 100644
--- a/test/formatting/samples/strict-mode-false/input.html
+++ b/test/formatting/samples/strict-mode-false/input.html
@@ -6,3 +6,9 @@
 <input bind:value />
 <input bind:value={value} />
 <input bind:value="{value}" />
+<input class:value />
+<input class:value={value} />
+<input class:value="{value}" />
+<input style:value />
+<input style:value={value} />
+<input style:value="{value}" />
diff --git a/test/formatting/samples/strict-mode-false/output.html b/test/formatting/samples/strict-mode-false/output.html
index b7951e1..5b52393 100644
--- a/test/formatting/samples/strict-mode-false/output.html
+++ b/test/formatting/samples/strict-mode-false/output.html
@@ -6,3 +6,9 @@
 <input bind:value />
 <input bind:value />
 <input bind:value />
+<input class:value />
+<input class:value />
+<input class:value />
+<input style:value />
+<input style:value />
+<input style:value />
diff --git a/test/formatting/samples/strict-mode-true/input.html b/test/formatting/samples/strict-mode-true/input.html
index fdf53ca..a73d77a 100644
--- a/test/formatting/samples/strict-mode-true/input.html
+++ b/test/formatting/samples/strict-mode-true/input.html
@@ -6,3 +6,9 @@
 <input bind:value />
 <input bind:value={value} />
 <input bind:value="{value}" />
+<input class:value />
+<input class:value={value} />
+<input class:value="{value}" />
+<input style:value />
+<input style:value={value} />
+<input style:value="{value}" />
diff --git a/test/formatting/samples/strict-mode-true/output.html b/test/formatting/samples/strict-mode-true/output.html
index e029e6f..44757b5 100644
--- a/test/formatting/samples/strict-mode-true/output.html
+++ b/test/formatting/samples/strict-mode-true/output.html
@@ -6,3 +6,9 @@
 <input bind:value="{value}" />
 <input bind:value="{value}" />
 <input bind:value="{value}" />
+<input class:value="{value}" />
+<input class:value="{value}" />
+<input class:value="{value}" />
+<input style:value="{value}" />
+<input style:value="{value}" />
+<input style:value="{value}" />
diff --git a/test/printer/samples/allow-shorthand-false.html b/test/printer/samples/allow-shorthand-false.html
index 37b1490..98523e6 100644
--- a/test/printer/samples/allow-shorthand-false.html
+++ b/test/printer/samples/allow-shorthand-false.html
@@ -3,3 +3,7 @@
 <input type="text" data={data} />
 
 <input type="text" bind:value={value} />
+
+<input type="text" class:value={value} />
+
+<input type="text" style:value={value} />