From f3685aa555b2840db79b49a884256b20c366d379 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 9 Dec 2022 16:36:57 +0100
Subject: [PATCH] (feat) support style modifiers (#331)

closes #330
---
 CHANGELOG.md                              | 210 +++++++++++-----------
 package-lock.json                         |  18 +-
 package.json                              |   2 +-
 src/print/index.ts                        |  20 ++-
 src/print/nodes.ts                        |   1 +
 test/printer/samples/style-directive.html |   8 +
 6 files changed, 140 insertions(+), 119 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e373dbd4..961e0c8a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,105 +1,109 @@
 # prettier-plugin-svelte changelog
 
+## 2.9.0 (unreleased)
+
+-   (feat) support style modifiers ([#330](https://github.com/sveltejs/prettier-plugin-svelte/issues/330))
+
 ## 2.8.1
 
-* (fix) format `{#await .. catch ..}..{/await}` correctly ([#323](https://github.com/sveltejs/prettier-plugin-svelte/issues/323)) 
-* (fix) respect strict mode and shorthand options when formatting bindings ([#321](https://github.com/sveltejs/prettier-plugin-svelte/issues/321)) 
+-   (fix) format `{#await .. catch ..}..{/await}` correctly ([#323](https://github.com/sveltejs/prettier-plugin-svelte/issues/323))
+-   (fix) respect strict mode and shorthand options when formatting bindings ([#321](https://github.com/sveltejs/prettier-plugin-svelte/issues/321))
 
 ## 2.8.0
 
-* (feat) support `singleAttributePerLine` Prettier option ([#305](https://github.com/sveltejs/prettier-plugin-svelte/issues/305))
-* (feat) add `svelteSortOrder: none` Prettier option which skips reordering scripts/styles/html ([#305](https://github.com/sveltejs/prettier-plugin-svelte/issues/314))
+-   (feat) support `singleAttributePerLine` Prettier option ([#305](https://github.com/sveltejs/prettier-plugin-svelte/issues/305))
+-   (feat) add `svelteSortOrder: none` Prettier option which skips reordering scripts/styles/html ([#305](https://github.com/sveltejs/prettier-plugin-svelte/issues/314))
 
 ## 2.7.1
 
-* (fix) check for snipped content in JS expressions ([#290](https://github.com/sveltejs/prettier-plugin-svelte/issues/290))
-* (fix) handle `<!DOCTYPE>` ([#298](https://github.com/sveltejs/prettier-plugin-svelte/issues/298))
+-   (fix) check for snipped content in JS expressions ([#290](https://github.com/sveltejs/prettier-plugin-svelte/issues/290))
+-   (fix) handle `<!DOCTYPE>` ([#298](https://github.com/sveltejs/prettier-plugin-svelte/issues/298))
 
 ## 2.7.0
 
-* (feat) Support `<svelte:element>` ([#285](https://github.com/sveltejs/prettier-plugin-svelte/pull/285))
-* (fix) Respect `htmlWhitespaceSensitivity: 'ignore'` setting in components ([#281](https://github.com/sveltejs/prettier-plugin-svelte/issues/281))
+-   (feat) Support `<svelte:element>` ([#285](https://github.com/sveltejs/prettier-plugin-svelte/pull/285))
+-   (fix) Respect `htmlWhitespaceSensitivity: 'ignore'` setting in components ([#281](https://github.com/sveltejs/prettier-plugin-svelte/issues/281))
 
 ## 2.6.0
 
-* (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))
+-   (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
 
-* (fix) Better handling of destructured values with defaults in `{#each}` and `{#await}` blocks ([#269](https://github.com/sveltejs/prettier-plugin-svelte/issues/269))
-* (fix) Prevent `<script>`/`<style>` contents from being erased in certain cases ([#268](https://github.com/sveltejs/prettier-plugin-svelte/issues/268))
-* (fix) Format `{expressions}` inside `<pre>` tags ([#266](https://github.com/sveltejs/prettier-plugin-svelte/issues/266))
+-   (fix) Better handling of destructured values with defaults in `{#each}` and `{#await}` blocks ([#269](https://github.com/sveltejs/prettier-plugin-svelte/issues/269))
+-   (fix) Prevent `<script>`/`<style>` contents from being erased in certain cases ([#268](https://github.com/sveltejs/prettier-plugin-svelte/issues/268))
+-   (fix) Format `{expressions}` inside `<pre>` tags ([#266](https://github.com/sveltejs/prettier-plugin-svelte/issues/266))
 
 ## 2.5.0
 
-* (feat) Support `bracketSameLine` option and deprecate `svelteBracketNewLine` ([#251](https://github.com/sveltejs/prettier-plugin-svelte/pull/251))
-* (fix) Prevent script/style contents from being erased in certain cases ([#255](https://github.com/sveltejs/prettier-plugin-svelte/issues/255))
-* (fix) Properly format nested array patterns ([#259](https://github.com/sveltejs/prettier-plugin-svelte/issues/259))
+-   (feat) Support `bracketSameLine` option and deprecate `svelteBracketNewLine` ([#251](https://github.com/sveltejs/prettier-plugin-svelte/pull/251))
+-   (fix) Prevent script/style contents from being erased in certain cases ([#255](https://github.com/sveltejs/prettier-plugin-svelte/issues/255))
+-   (fix) Properly format nested array patterns ([#259](https://github.com/sveltejs/prettier-plugin-svelte/issues/259))
 
 ## 2.4.0
 
-* (feat) Add support for formatting Pug inside `<template>` tags, if the corresponding plugin is available ([#248](https://github.com/sveltejs/prettier-plugin-svelte/pull/248))
-* (fix) Adjust checks for whether we're inside another tag when snipping tags ([#244](https://github.com/sveltejs/prettier-plugin-svelte/issues/244), [#246](https://github.com/sveltejs/prettier-plugin-svelte/issues/246))
+-   (feat) Add support for formatting Pug inside `<template>` tags, if the corresponding plugin is available ([#248](https://github.com/sveltejs/prettier-plugin-svelte/pull/248))
+-   (fix) Adjust checks for whether we're inside another tag when snipping tags ([#244](https://github.com/sveltejs/prettier-plugin-svelte/issues/244), [#246](https://github.com/sveltejs/prettier-plugin-svelte/issues/246))
 
 ## 2.3.1
 
-* (fix) More robust check for `hardline` to prevent trailing empty lines in `<style>`/`<script>` tags ([#222](https://github.com/sveltejs/prettier-plugin-svelte/issues/222))
+-   (fix) More robust check for `hardline` to prevent trailing empty lines in `<style>`/`<script>` tags ([#222](https://github.com/sveltejs/prettier-plugin-svelte/issues/222))
 
 ## 2.3.0
 
-* (fix) Adjust snip regex to not break commented-out `<script>`/`<style>` tags ([#212](https://github.com/sveltejs/prettier-plugin-svelte/issues/212))
-* (fix) Don't snip `<style>` tags that are inside `<script>` tags ([#219](https://github.com/sveltejs/prettier-plugin-svelte/issues/219), [#70](https://github.com/sveltejs/prettier-plugin-svelte/issues/70))
-* (fix) Better formatting of long attribute values with mustache tags in between ([#221](https://github.com/sveltejs/prettier-plugin-svelte/pull/221))
-* (fix) Format properly when using Prettier 2.3.0+ ([#222](https://github.com/sveltejs/prettier-plugin-svelte/issues/222))
-* (fix) Keep parentheses in `<script>` tags for which JS is assumed ([#218](https://github.com/sveltejs/prettier-plugin-svelte/issues/218))
-* (feat) Support range ignores at HTML top level ([#225](https://github.com/sveltejs/prettier-plugin-svelte/issues/225))
+-   (fix) Adjust snip regex to not break commented-out `<script>`/`<style>` tags ([#212](https://github.com/sveltejs/prettier-plugin-svelte/issues/212))
+-   (fix) Don't snip `<style>` tags that are inside `<script>` tags ([#219](https://github.com/sveltejs/prettier-plugin-svelte/issues/219), [#70](https://github.com/sveltejs/prettier-plugin-svelte/issues/70))
+-   (fix) Better formatting of long attribute values with mustache tags in between ([#221](https://github.com/sveltejs/prettier-plugin-svelte/pull/221))
+-   (fix) Format properly when using Prettier 2.3.0+ ([#222](https://github.com/sveltejs/prettier-plugin-svelte/issues/222))
+-   (fix) Keep parentheses in `<script>` tags for which JS is assumed ([#218](https://github.com/sveltejs/prettier-plugin-svelte/issues/218))
+-   (feat) Support range ignores at HTML top level ([#225](https://github.com/sveltejs/prettier-plugin-svelte/issues/225))
 
 ## 2.2.0
 
-* Add support for `<svelte:fragment>` ([#213](https://github.com/sveltejs/prettier-plugin-svelte/pull/213))
+-   Add support for `<svelte:fragment>` ([#213](https://github.com/sveltejs/prettier-plugin-svelte/pull/213))
 
 ## 2.1.6
 
-* Fix incorrect removal of comment ([#207](https://github.com/sveltejs/prettier-plugin-svelte/issues/207))
+-   Fix incorrect removal of comment ([#207](https://github.com/sveltejs/prettier-plugin-svelte/issues/207))
 
 ## 2.1.5
 
-* Fix retrieval of comment belonging to `<script>`/`<style>` block ([#205](https://github.com/sveltejs/prettier-plugin-svelte/issues/205))
+-   Fix retrieval of comment belonging to `<script>`/`<style>` block ([#205](https://github.com/sveltejs/prettier-plugin-svelte/issues/205))
 
 ## 2.1.4
 
-* Don't print an empty line at the end of code embedded inside Markdown (further fixes) ([#202](https://github.com/sveltejs/prettier-plugin-svelte/issues/202))
+-   Don't print an empty line at the end of code embedded inside Markdown (further fixes) ([#202](https://github.com/sveltejs/prettier-plugin-svelte/issues/202))
 
 ## 2.1.3
 
-* Don't print an empty line at the end of code embedded inside Markdown ([#202](https://github.com/sveltejs/prettier-plugin-svelte/issues/202))
+-   Don't print an empty line at the end of code embedded inside Markdown ([#202](https://github.com/sveltejs/prettier-plugin-svelte/issues/202))
 
 ## 2.1.2
 
-* Keep whitespace around `<script>`/`<style>` tags ([#197](https://github.com/sveltejs/prettier-plugin-svelte/issues/197))
-* Make `<script>`/`<style>` tag snipping case-sensitive ([#198](https://github.com/sveltejs/prettier-plugin-svelte/issues/198))
+-   Keep whitespace around `<script>`/`<style>` tags ([#197](https://github.com/sveltejs/prettier-plugin-svelte/issues/197))
+-   Make `<script>`/`<style>` tag snipping case-sensitive ([#198](https://github.com/sveltejs/prettier-plugin-svelte/issues/198))
 
 ## 2.1.1
 
-* Fix `svelteBracketNewLine: true` sometimes not having `>` on a separate line ([#194](https://github.com/sveltejs/prettier-plugin-svelte/issues/194))
+-   Fix `svelteBracketNewLine: true` sometimes not having `>` on a separate line ([#194](https://github.com/sveltejs/prettier-plugin-svelte/issues/194))
 
 ## 2.1.0
 
-* Support Prettier's `htmlWhitespaceSensitivity` setting
-* When `svelteBracketNewLine` is set to `true` and only the closing tag has whitespace before it, print the closing `>` on a separate line
+-   Support Prettier's `htmlWhitespaceSensitivity` setting
+-   When `svelteBracketNewLine` is set to `true` and only the closing tag has whitespace before it, print the closing `>` on a separate line
 
 ## 2.0.3
 
-* When `svelteBracketNewLine` is set to `false`, don't print the closing `>` in a separate line if possible ([#183](https://github.com/sveltejs/prettier-plugin-svelte/issues/183))
+-   When `svelteBracketNewLine` is set to `false`, don't print the closing `>` in a separate line if possible ([#183](https://github.com/sveltejs/prettier-plugin-svelte/issues/183))
 
 ## 2.0.2
 
-* Fix formatting of `<template>` tags with an unsupported language inside
+-   Fix formatting of `<template>` tags with an unsupported language inside
 
 ## 2.0.1
 
-* Fix formatting of inline element when there's a line at the start/end ([#183](https://github.com/sveltejs/prettier-plugin-svelte/issues/183))
+-   Fix formatting of inline element when there's a line at the start/end ([#183](https://github.com/sveltejs/prettier-plugin-svelte/issues/183))
 
 ## 2.0.0
 
@@ -107,116 +111,116 @@ This release comes with a rewrite of the HTML formatting. The output is now much
 
 The complete list of changes:
 
-* Rework the tag breaking logic with the goal to be more in line with how Prettier formats standard HTML. This includes respecting the user's decision to have child tags in separate lines even if they don't exceed the maximum line width ([#143](https://github.com/sveltejs/prettier-plugin-svelte/issues/143), [#117](https://github.com/sveltejs/prettier-plugin-svelte/issues/117)). This is a breaking change because tags are broken up differently now than before.
-* `<svelte:options>` is now part of `svelteSortOrder`. Default sort order is now `options-scripts-markup-styles`. This is a breaking change. ([#73](https://github.com/sveltejs/prettier-plugin-svelte/issues/73))
-* `svelteBracketNewLine` defaults to `true` now to be more in line with how Prettier formats standard HTML. This is a breaking change
-* Fix formatting of fenced Svelte code blocks inside Markdown ([#129](https://github.com/sveltejs/prettier-plugin-svelte/issues/129))
-* Everything that is not explicitly a block element is now treated as an inline element, including components. This is a breaking change ([#159](https://github.com/sveltejs/prettier-plugin-svelte/issues/159))
-* Single quotes are no longer forced except inside quoted attributes/events/etc. This is a breaking change ([#94](https://github.com/sveltejs/prettier-plugin-svelte/issues/94))
-* If the content inside a `{tag}` is too long, break it up if possible (excluding `{#if}`/`{#await}`/etc. blocks). This is a breaking change ([#170](https://github.com/sveltejs/prettier-plugin-svelte/issues/170))
-* If the content of a `<script>`/`<style>` tag is completely empty (no whitespace), don't put the closing tag on a new line ([#87](https://github.com/sveltejs/prettier-plugin-svelte/issues/87))
+-   Rework the tag breaking logic with the goal to be more in line with how Prettier formats standard HTML. This includes respecting the user's decision to have child tags in separate lines even if they don't exceed the maximum line width ([#143](https://github.com/sveltejs/prettier-plugin-svelte/issues/143), [#117](https://github.com/sveltejs/prettier-plugin-svelte/issues/117)). This is a breaking change because tags are broken up differently now than before.
+-   `<svelte:options>` is now part of `svelteSortOrder`. Default sort order is now `options-scripts-markup-styles`. This is a breaking change. ([#73](https://github.com/sveltejs/prettier-plugin-svelte/issues/73))
+-   `svelteBracketNewLine` defaults to `true` now to be more in line with how Prettier formats standard HTML. This is a breaking change
+-   Fix formatting of fenced Svelte code blocks inside Markdown ([#129](https://github.com/sveltejs/prettier-plugin-svelte/issues/129))
+-   Everything that is not explicitly a block element is now treated as an inline element, including components. This is a breaking change ([#159](https://github.com/sveltejs/prettier-plugin-svelte/issues/159))
+-   Single quotes are no longer forced except inside quoted attributes/events/etc. This is a breaking change ([#94](https://github.com/sveltejs/prettier-plugin-svelte/issues/94))
+-   If the content inside a `{tag}` is too long, break it up if possible (excluding `{#if}`/`{#await}`/etc. blocks). This is a breaking change ([#170](https://github.com/sveltejs/prettier-plugin-svelte/issues/170))
+-   If the content of a `<script>`/`<style>` tag is completely empty (no whitespace), don't put the closing tag on a new line ([#87](https://github.com/sveltejs/prettier-plugin-svelte/issues/87))
 
 ## 1.4.2
 
-* Pass options to embedded parser ([#162](https://github.com/sveltejs/prettier-plugin-svelte/issues/162))
-* Fall back to raw text if there is a parser error in a JS expression inside a moustache tag ([#163](https://github.com/sveltejs/prettier-plugin-svelte/issues/163))
+-   Pass options to embedded parser ([#162](https://github.com/sveltejs/prettier-plugin-svelte/issues/162))
+-   Fall back to raw text if there is a parser error in a JS expression inside a moustache tag ([#163](https://github.com/sveltejs/prettier-plugin-svelte/issues/163))
 
 ## 1.4.1
 
-* Format next node correctly when previous node has a comment as last child ([#152](https://github.com/sveltejs/prettier-plugin-svelte/issues/152))
-* Only `prettier-ignore` comments should ignore formatting of next line ([#151](https://github.com/sveltejs/prettier-plugin-svelte/issues/151))
-* Do not encode entities in attribute values ([#29](https://github.com/sveltejs/prettier-plugin-svelte/issues/29))
-* Fix raw printing of unsupported languages ([#156](https://github.com/sveltejs/prettier-plugin-svelte/issues/156))
+-   Format next node correctly when previous node has a comment as last child ([#152](https://github.com/sveltejs/prettier-plugin-svelte/issues/152))
+-   Only `prettier-ignore` comments should ignore formatting of next line ([#151](https://github.com/sveltejs/prettier-plugin-svelte/issues/151))
+-   Do not encode entities in attribute values ([#29](https://github.com/sveltejs/prettier-plugin-svelte/issues/29))
+-   Fix raw printing of unsupported languages ([#156](https://github.com/sveltejs/prettier-plugin-svelte/issues/156))
 
 ## 1.4.0
 
-* Fix print order of attributes and body ([#146](https://github.com/sveltejs/prettier-plugin-svelte/issues/146))
-* Support the new `{#key}` block introduced in Svelte 3.28.0 ([#147](https://github.com/sveltejs/prettier-plugin-svelte/pull/147))
+-   Fix print order of attributes and body ([#146](https://github.com/sveltejs/prettier-plugin-svelte/issues/146))
+-   Support the new `{#key}` block introduced in Svelte 3.28.0 ([#147](https://github.com/sveltejs/prettier-plugin-svelte/pull/147))
 
 ## 1.3.0
 
-* Add `vscodeLanguageIds` for VS Code consumers, including coc-prettier ([#138](https://github.com/sveltejs/prettier-plugin-svelte/issues/138))
-* Keep comments directly before `<style>`, `<script>` or `<template>` tags together with the tag when reformatting ([#137](https://github.com/sveltejs/prettier-plugin-svelte/issues/137))
-* Keep inline elements together even when inside text ([#139](https://github.com/sveltejs/prettier-plugin-svelte/issues/139))
-* Don't format `class` attributes ([#145](https://github.com/sveltejs/prettier-plugin-svelte/pull/145))
+-   Add `vscodeLanguageIds` for VS Code consumers, including coc-prettier ([#138](https://github.com/sveltejs/prettier-plugin-svelte/issues/138))
+-   Keep comments directly before `<style>`, `<script>` or `<template>` tags together with the tag when reformatting ([#137](https://github.com/sveltejs/prettier-plugin-svelte/issues/137))
+-   Keep inline elements together even when inside text ([#139](https://github.com/sveltejs/prettier-plugin-svelte/issues/139))
+-   Don't format `class` attributes ([#145](https://github.com/sveltejs/prettier-plugin-svelte/pull/145))
 
 ## 1.2.1
 
-* Skip formatting `<style>` or `<script>` tags if in an unsupported language or if `prettier-ignore`d ([#55](https://github.com/sveltejs/prettier-plugin-svelte/issues/55), [#59](https://github.com/sveltejs/prettier-plugin-svelte/issues/59), [#95](https://github.com/sveltejs/prettier-plugin-svelte/issues/95))
-* Make error location properties compatible with both Svelte and Prettier ([#71](https://github.com/sveltejs/prettier-plugin-svelte/issues/71))
-* Handle/preserve comments in event handlers ([#96](https://github.com/sveltejs/prettier-plugin-svelte/issues/96))
-* Fix Node 10 compatibility ([#135](https://github.com/sveltejs/prettier-plugin-svelte/issues/135))
+-   Skip formatting `<style>` or `<script>` tags if in an unsupported language or if `prettier-ignore`d ([#55](https://github.com/sveltejs/prettier-plugin-svelte/issues/55), [#59](https://github.com/sveltejs/prettier-plugin-svelte/issues/59), [#95](https://github.com/sveltejs/prettier-plugin-svelte/issues/95))
+-   Make error location properties compatible with both Svelte and Prettier ([#71](https://github.com/sveltejs/prettier-plugin-svelte/issues/71))
+-   Handle/preserve comments in event handlers ([#96](https://github.com/sveltejs/prettier-plugin-svelte/issues/96))
+-   Fix Node 10 compatibility ([#135](https://github.com/sveltejs/prettier-plugin-svelte/issues/135))
 
 ## 1.2.0
 
-* Don't format contents of `<pre>` or its attributes, apart from `class` ([#28](https://github.com/sveltejs/prettier-plugin-svelte/issues/28))
-* Fix whitespace issues ([#58](https://github.com/sveltejs/prettier-plugin-svelte/issues/58), [#103](https://github.com/sveltejs/prettier-plugin-svelte/issues/103), [#24](https://github.com/sveltejs/prettier-plugin-svelte/issues/24))
-* Add option to disable first level of indentation in `<script>` and `<style>` tags ([#105](https://github.com/sveltejs/prettier-plugin-svelte/issues/105))
-* Fix output when rewriting shorthand attributes to not use the shorthand syntax ([#110](https://github.com/sveltejs/prettier-plugin-svelte/issues/110))
-* Add support for object destructuring reassignment ([#113](https://github.com/sveltejs/prettier-plugin-svelte/issues/113))
+-   Don't format contents of `<pre>` or its attributes, apart from `class` ([#28](https://github.com/sveltejs/prettier-plugin-svelte/issues/28))
+-   Fix whitespace issues ([#58](https://github.com/sveltejs/prettier-plugin-svelte/issues/58), [#103](https://github.com/sveltejs/prettier-plugin-svelte/issues/103), [#24](https://github.com/sveltejs/prettier-plugin-svelte/issues/24))
+-   Add option to disable first level of indentation in `<script>` and `<style>` tags ([#105](https://github.com/sveltejs/prettier-plugin-svelte/issues/105))
+-   Fix output when rewriting shorthand attributes to not use the shorthand syntax ([#110](https://github.com/sveltejs/prettier-plugin-svelte/issues/110))
+-   Add support for object destructuring reassignment ([#113](https://github.com/sveltejs/prettier-plugin-svelte/issues/113))
 
 ## 1.1.1
 
-* Fix bug that breaks plugin when using Prettier v2.1.x ([#123](https://github.com/sveltejs/prettier-plugin-svelte/issues/123))
-* Fix incorrectly escaped regexp which broke style tags followed by "s" ([#118](https://github.com/sveltejs/prettier-plugin-svelte/issues/118))
-* Write to console.error to prevent crash and erasion of files ([#115](https://github.com/sveltejs/prettier-plugin-svelte/issues/115))
+-   Fix bug that breaks plugin when using Prettier v2.1.x ([#123](https://github.com/sveltejs/prettier-plugin-svelte/issues/123))
+-   Fix incorrectly escaped regexp which broke style tags followed by "s" ([#118](https://github.com/sveltejs/prettier-plugin-svelte/issues/118))
+-   Write to console.error to prevent crash and erasion of files ([#115](https://github.com/sveltejs/prettier-plugin-svelte/issues/115))
 
 ## 1.1.0
 
-* Support `<!-- prettier-ignore -->` comments ([#59](https://github.com/sveltejs/prettier-plugin-svelte/issues/59))
-* Fix `{#await}` printing with `{:catch}` but no pending block ([#76](https://github.com/sveltejs/prettier-plugin-svelte/pull/76))
-* Fix `{#await}` printing with only a pending block ([#77](https://github.com/sveltejs/prettier-plugin-svelte/pull/77))
-* Support `{#await}` destructuring ([#83](https://github.com/sveltejs/prettier-plugin-svelte/pull/83))
-* Fix other `{#await}` handling in Svelte versions since 3.20 ([#83](https://github.com/sveltejs/prettier-plugin-svelte/pull/83))
+-   Support `<!-- prettier-ignore -->` comments ([#59](https://github.com/sveltejs/prettier-plugin-svelte/issues/59))
+-   Fix `{#await}` printing with `{:catch}` but no pending block ([#76](https://github.com/sveltejs/prettier-plugin-svelte/pull/76))
+-   Fix `{#await}` printing with only a pending block ([#77](https://github.com/sveltejs/prettier-plugin-svelte/pull/77))
+-   Support `{#await}` destructuring ([#83](https://github.com/sveltejs/prettier-plugin-svelte/pull/83))
+-   Fix other `{#await}` handling in Svelte versions since 3.20 ([#83](https://github.com/sveltejs/prettier-plugin-svelte/pull/83))
 
 ## 1.0.0
 
-* Support Prettier 2
-* Add `svelteAllowShorthand` option
-* This plugin has now become an official Svelte project
+-   Support Prettier 2
+-   Add `svelteAllowShorthand` option
+-   This plugin has now become an official Svelte project
 
 ## 0.7.0
 
-* Add `svelteStrictMode` option
-* Support `{#await}` block shorthand syntax
+-   Add `svelteStrictMode` option
+-   Support `{#await}` block shorthand syntax
 
 ## 0.6.0
 
-* Support nested `<script>` and `<style>` tags
-* Add `svelteSortOrder` option
-* Fix printing of HTML entities
-* Add option to add newline to closing angle bracket
-* Support all `<svelte:*>` elements
-* Throw Svelte parsing errors in format Prettier expects
-* Add handling for `|local` transition modifier
-* Prevent `{#if}` blocks nested in an `{#each}`/`{:else}` from being converted into an `{:else if}`
-* Fix whitespace trimming for lonely wrapped mustache tags
+-   Support nested `<script>` and `<style>` tags
+-   Add `svelteSortOrder` option
+-   Fix printing of HTML entities
+-   Add option to add newline to closing angle bracket
+-   Support all `<svelte:*>` elements
+-   Throw Svelte parsing errors in format Prettier expects
+-   Add handling for `|local` transition modifier
+-   Prevent `{#if}` blocks nested in an `{#each}`/`{:else}` from being converted into an `{:else if}`
+-   Fix whitespace trimming for lonely wrapped mustache tags
 
 ## 0.5.1
 
-* Fix attribute wrapping
+-   Fix attribute wrapping
 
 ## 0.5.0
 
-* Remove .html from list of extensions
-* Use `typescript` as parser to handle both JS and TS
-* Add support for event modifiers
-* Support Unicode content in `<script>` and `<style>` blocks
-* Don't print children for empty elements
-* Improve handling of text nodes
-* Prevent extra whitespace for `<script>`-only templates
-* Correctly collapse empty elements
-* Improve directive support
+-   Remove .html from list of extensions
+-   Use `typescript` as parser to handle both JS and TS
+-   Add support for event modifiers
+-   Support Unicode content in `<script>` and `<style>` blocks
+-   Don't print children for empty elements
+-   Improve handling of text nodes
+-   Prevent extra whitespace for `<script>`-only templates
+-   Correctly collapse empty elements
+-   Improve directive support
 
 ## 0.4.2
 
-* Fix script + css and script + module printing
+-   Fix script + css and script + module printing
 
 ## 0.4.1
 
-* Print HTML last
+-   Print HTML last
 
 ## 0.4.0
 
-* Drop support for v2 and fully support v3
-* Make Prettier and Svelte peer deps
+-   Drop support for v2 and fully support v3
+-   Make Prettier and Svelte peer deps
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 />