diff --git a/CHANGELOG.md b/CHANGELOG.md index 0496c3db..86c513f6 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index 589d550e..a21307bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,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" @@ -3361,9 +3361,9 @@ } }, "node_modules/svelte": { - "version": "3.46.0", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.46.0.tgz", - "integrity": "sha512-dTe/u1VYcWvmnrXUB9ZHtlYvLWrOiCStWyNyUzZGBjReUbKEJv6Bgv/9Amf24WKkml5+I2aluBh2FdWeWl6ziA==", + "version": "3.46.1", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.46.1.tgz", + "integrity": "sha512-Ue8ivq+G45AfZZL4Z93xNFiC352wPkyGiY9QSuWjxXh6jiaZMrpthinjc1rz0OSTceuST7Pxr1HDBj2KioliZg==", "dev": true, "engines": { "node": ">= 8" @@ -6224,9 +6224,9 @@ } }, "svelte": { - "version": "3.46.0", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.46.0.tgz", - "integrity": "sha512-dTe/u1VYcWvmnrXUB9ZHtlYvLWrOiCStWyNyUzZGBjReUbKEJv6Bgv/9Amf24WKkml5+I2aluBh2FdWeWl6ziA==", + "version": "3.46.1", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.46.1.tgz", + "integrity": "sha512-Ue8ivq+G45AfZZL4Z93xNFiC352wPkyGiY9QSuWjxXh6jiaZMrpthinjc1rz0OSTceuST7Pxr1HDBj2KioliZg==", "dev": true }, "temp-dir": { diff --git a/package.json b/package.json index 0162ff1f..d8207f7a 100644 --- a/package.json +++ b/package.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" diff --git a/src/print/index.ts b/src/print/index.ts index a51a75c3..a83e75a9 100644 --- a/src/print/index.ts +++ b/src/print/index.ts @@ -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, print: PrintFn, quotes: boolean, - node: AttributeNode, + node: AttributeNode | StyleDirectiveNode, ) { const valueDocs = path.map((childPath) => childPath.call(print), 'value'); diff --git a/src/print/node-helpers.ts b/src/print/node-helpers.ts index 3699bfa3..a4d9f96d 100644 --- a/src/print/node-helpers.ts +++ b/src/print/node-helpers.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; } diff --git a/src/print/nodes.ts b/src/print/nodes.ts index 260d2793..a219d518 100644 --- a/src/print/nodes.ts +++ b/src/print/nodes.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 diff --git a/test/formatting/samples/style-directive/input.html b/test/formatting/samples/style-directive/input.html new file mode 100644 index 00000000..5f9b88d4 --- /dev/null +++ b/test/formatting/samples/style-directive/input.html @@ -0,0 +1,4 @@ +
+
+
+
diff --git a/test/formatting/samples/style-directive/output.html b/test/formatting/samples/style-directive/output.html new file mode 100644 index 00000000..b8e18f9c --- /dev/null +++ b/test/formatting/samples/style-directive/output.html @@ -0,0 +1,4 @@ +
+
+
+
diff --git a/test/printer/samples/style-directive.html b/test/printer/samples/style-directive.html new file mode 100644 index 00000000..792ee27f --- /dev/null +++ b/test/printer/samples/style-directive.html @@ -0,0 +1,7 @@ +
+
+
+
+
+
+