(feat) support style directive (#274)

Requires Svelte 3.46.1 or later

Author: dummdidumm

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 2.6.0 (Unreleased)
 
 * (feat) Support `@const` tag ([#272](https://github.com/sveltejs/prettier-plugin-svelte/issues/272))
+* (feat) Support `style` directive (requires Svelte 3.46.1 or later) ([#274](https://github.com/sveltejs/prettier-plugin-svelte/issues/274))
 
 ## 2.5.1
 

package-lock.json

@@ -37,7 +37,7 @@
         "prettier": "^2.4.1",
         "rollup": "2.36.0",
         "rollup-plugin-typescript": "1.0.1",
-        "svelte": "^3.46.0",
+        "svelte": "^3.46.1",
         "ts-node": "^9.1.1",
         "tslib": "^2.0.3",
         "typescript": "4.1.3"

package.json

@@ -44,6 +44,7 @@ import {
     IfBlockNode,
     Node,
     OptionsNode,
+    StyleDirectiveNode,
     TextNode,
 } from './nodes';
 
@@ -572,6 +573,28 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
                     ? ''
                     : concat(['=', ...printJsExpression()]),
             ]);
+        case 'StyleDirective':
+            if (isOrCanBeConvertedToShorthand(node)) {
+                if (options.svelteStrictMode) {
+                    return concat([line, 'style:', node.name, '="{', node.name, '}"']);
+                } else if (options.svelteAllowShorthand) {
+                    return concat([line, 'style:', node.name]);
+                } else {
+                    return concat([line, 'style:', node.name, '={', node.name, '}']);
+                }
+            } else {
+                if (node.value === true) {
+                    return concat([line, 'style:', node.name]);
+                }
+
+                const quotes = !isLoneMustacheTag(node.value) || options.svelteStrictMode;
+                const attrNodeValue = printAttributeNodeValue(path, print, quotes, node);
+                if (quotes) {
+                    return concat([line, 'style:', node.name, '=', '"', attrNodeValue, '"']);
+                } else {
+                    return concat([line, 'style:', node.name, '=', attrNodeValue]);
+                }
+            }
         case 'Let':
             return concat([
                 line,
@@ -732,7 +755,7 @@ function printAttributeNodeValue(
     path: FastPath<any>,
     print: PrintFn,
     quotes: boolean,
-    node: AttributeNode,
+    node: AttributeNode | StyleDirectiveNode,
 ) {
     const valueDocs = path.map((childPath) => childPath.call(print), 'value');
 

src/print/index.ts

@@ -20,6 +20,7 @@ import {
     ThenBlockNode,
     CommentNode,
     SlotTemplateNode,
+    StyleDirectiveNode,
 } from './nodes';
 import { blockElements, TagName } from '../lib/elements';
 import { FastPath, ParserOptions } from 'prettier';
@@ -281,7 +282,7 @@ export function isAttributeShorthand(node: true | Node[]): node is [AttributeSho
 /**
  * True if node is of type `{a}` or `a={a}`
  */
-export function isOrCanBeConvertedToShorthand(node: AttributeNode): boolean {
+export function isOrCanBeConvertedToShorthand(node: AttributeNode | StyleDirectiveNode): boolean {
     if (isAttributeShorthand(node.value)) {
         return true;
     }

src/print/node-helpers.ts

@@ -119,6 +119,12 @@ export interface ClassNode extends BaseNode {
     expression: Node;
 }
 
+export interface StyleDirectiveNode extends BaseNode {
+    type: 'StyleDirective';
+    name: string;
+    value: Node[] | true;
+}
+
 export interface LetNode extends BaseNode {
     type: 'Let';
     name: string;
@@ -285,6 +291,7 @@ export type Node =
     | EventHandlerNode
     | BindingNode
     | ClassNode
+    | StyleDirectiveNode
     | LetNode
     | DebugTagNode
     | RefNode

src/print/nodes.ts

@@ -0,0 +1,4 @@
+<div style:background=green />
+<div style:background="{color}" />
+<div style:background='prefix{color}suffix' />
+<div style:background={background} />

test/formatting/samples/style-directive/input.html

@@ -0,0 +1,4 @@
+<div style:background="green" />
+<div style:background={color} />
+<div style:background="prefix{color}suffix" />
+<div style:background />

test/formatting/samples/style-directive/output.html

@@ -0,0 +1,7 @@
+<div style:background="green" />
+<div style:background={color} />
+<div style:background="prefix{color}suffix" />
+<div style:background="{color}suffix" />
+<div style:background="prefix{color}" />
+<div style:background={`prefix${color}`} />
+<div style:background />