(feat) support style modifiers (#331)

closes #330
sveltejs · Dec 9, 2022 · f3685aa · f3685aa
1 parent d992637
commit f3685aa
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 119 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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 />