(fix) respect strict mode and shorthand options (#332)

when formatting style/class directives
fixes #328

Author: dummdidumm

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
 

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/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}" />

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 />

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}" />

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}" />

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} />