From 6dd5eaca9dd7d5280e7e2a33845b41c61c717d54 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Fri, 9 Dec 2022 16:34:23 +0100
Subject: [PATCH] (feat) support style modifiers

closes #330
---
 package-lock.json                         | 18 +++++++++---------
 package.json                              |  2 +-
 src/print/index.ts                        | 20 ++++++++++++++------
 src/print/nodes.ts                        |  1 +
 test/printer/samples/style-directive.html |  8 ++++++++
 5 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6e3bf134..65ab1402 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "prettier-plugin-svelte",
-    "version": "2.8.0",
+    "version": "2.8.1",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "prettier-plugin-svelte",
-            "version": "2.8.0",
+            "version": "2.8.1",
             "license": "MIT",
             "devDependencies": {
                 "@prettier/plugin-pug": "^1.16.0",
@@ -18,7 +18,7 @@
                 "prettier": "^2.7.1",
                 "rollup": "2.36.0",
                 "rollup-plugin-typescript": "1.0.1",
-                "svelte": "^3.47.0",
+                "svelte": "^3.54.0",
                 "ts-node": "^9.1.1",
                 "tslib": "^2.0.3",
                 "typescript": "4.1.3"
@@ -3364,9 +3364,9 @@
             }
         },
         "node_modules/svelte": {
-            "version": "3.47.0",
-            "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.47.0.tgz",
-            "integrity": "sha512-4JaJp3HEoTCGARRWZQIZDUanhYv0iyoHikklVHVLH9xFE9db22g4TDv7CPeNA8HD1JgjXI1vlhR1JZvvhaTu2Q==",
+            "version": "3.54.0",
+            "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.54.0.tgz",
+            "integrity": "sha512-tdrgeJU0hob0ZWAMoKXkhcxXA7dpTg6lZGxUeko5YqvPdJBiyRspGsCwV27kIrbrqPP2WUoSV9ca0gnLlw8YzQ==",
             "dev": true,
             "engines": {
                 "node": ">= 8"
@@ -6227,9 +6227,9 @@
             }
         },
         "svelte": {
-            "version": "3.47.0",
-            "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.47.0.tgz",
-            "integrity": "sha512-4JaJp3HEoTCGARRWZQIZDUanhYv0iyoHikklVHVLH9xFE9db22g4TDv7CPeNA8HD1JgjXI1vlhR1JZvvhaTu2Q==",
+            "version": "3.54.0",
+            "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.54.0.tgz",
+            "integrity": "sha512-tdrgeJU0hob0ZWAMoKXkhcxXA7dpTg6lZGxUeko5YqvPdJBiyRspGsCwV27kIrbrqPP2WUoSV9ca0gnLlw8YzQ==",
             "dev": true
         },
         "temp-dir": {
diff --git a/package.json b/package.json
index daf26b65..89f0b56e 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
         "prettier": "^2.7.1",
         "rollup": "2.36.0",
         "rollup-plugin-typescript": "1.0.1",
-        "svelte": "^3.47.0",
+        "svelte": "^3.54.0",
         "ts-node": "^9.1.1",
         "tslib": "^2.0.3",
         "typescript": "4.1.3"
diff --git a/src/print/index.ts b/src/print/index.ts
index 774c3494..a6d6cb32 100644
--- a/src/print/index.ts
+++ b/src/print/index.ts
@@ -624,25 +624,33 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
                     : concat(['=', ...printJsExpression()]),
             ]);
         case 'StyleDirective':
+            const prefix = [
+                'style:',
+                node.name,
+                node.modifiers && node.modifiers.length
+                    ? concat(['|', join('|', node.modifiers)])
+                    : '',
+            ];
+
             if (isOrCanBeConvertedToShorthand(node)) {
                 if (options.svelteStrictMode) {
-                    return concat(['style:', node.name, '="{', node.name, '}"']);
+                    return concat([...prefix, '="{', node.name, '}"']);
                 } else if (options.svelteAllowShorthand) {
-                    return concat(['style:', node.name]);
+                    return concat([...prefix]);
                 } else {
-                    return concat(['style:', node.name, '={', node.name, '}']);
+                    return concat([...prefix, '={', node.name, '}']);
                 }
             } else {
                 if (node.value === true) {
-                    return concat(['style:', node.name]);
+                    return concat([...prefix]);
                 }
 
                 const quotes = !isLoneMustacheTag(node.value) || options.svelteStrictMode;
                 const attrNodeValue = printAttributeNodeValue(path, print, quotes, node);
                 if (quotes) {
-                    return concat(['style:', node.name, '=', '"', attrNodeValue, '"']);
+                    return concat([...prefix, '=', '"', attrNodeValue, '"']);
                 } else {
-                    return concat(['style:', node.name, '=', attrNodeValue]);
+                    return concat([...prefix, '=', attrNodeValue]);
                 }
             }
         case 'Let':
diff --git a/src/print/nodes.ts b/src/print/nodes.ts
index cbdea261..13dcbb01 100644
--- a/src/print/nodes.ts
+++ b/src/print/nodes.ts
@@ -127,6 +127,7 @@ export interface StyleDirectiveNode extends BaseNode {
     type: 'StyleDirective';
     name: string;
     value: Node[] | true;
+    modifiers?: string[];
 }
 
 export interface LetNode extends BaseNode {
diff --git a/test/printer/samples/style-directive.html b/test/printer/samples/style-directive.html
index 792ee27f..c9faea9d 100644
--- a/test/printer/samples/style-directive.html
+++ b/test/printer/samples/style-directive.html
@@ -5,3 +5,11 @@
 <div style:background="prefix{color}" />
 <div style:background={`prefix${color}`} />
 <div style:background />
+
+<div style:background|important="green" />
+<div style:background|important={color} />
+<div style:background|important="prefix{color}suffix" />
+<div style:background|important="{color}suffix" />
+<div style:background|important="prefix{color}" />
+<div style:background|important={`prefix${color}`} />
+<div style:background|important />