Repository: sveltejs/prettier-plugin-svelte
Pull request #171 (2021-01-02 15:14:30)

Change default sort order to scripts-markup-styles
Closes #108 


Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index afa9df0..370474a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Unreleased
 
 * Rework of the tag breaking logic with the goal to be more in line with how Prettier formats HTML. This includes respecting the user's decision to have child tags in seperate 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.
+* Default sort order is now `scripts-markup-styles`. This is a breaking change.
 
 ## 1.4.2
 
diff --git a/README.md b/README.md
index 91cf907..3093c4d 100644
--- a/README.md
+++ b/README.md
@@ -21,8 +21,8 @@ and add your preferred configuration options:
 
 
 - **`svelteSortOrder`**
-  - Default: `scripts-styles-markup`
-  - Sort order for scripts, styles, and markup.
+  - Default: `scripts-markup-styles`
+  - Sort order for scripts, markup, and styles.
 
 - **`svelteStrictMode`**
   - Default: `false`
diff --git a/src/options.ts b/src/options.ts
index 483285f..025912f 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -15,11 +15,11 @@ export interface PluginOptions {
 export const options: Record<keyof PluginOptions, SupportOption> = {
     svelteSortOrder: {
         type: 'choice',
-        default: 'scripts-styles-markup',
-        description: 'Sort order for scripts, styles, and markup',
+        default: 'scripts-markup-styles',
+        description: 'Sort order for scripts, markup, and styles',
         choices: [
-            { value: 'scripts-styles-markup' },
             { value: 'scripts-markup-styles' },
+            { value: 'scripts-styles-markup' },
             { value: 'markup-styles-scripts' },
             { value: 'markup-scripts-styles' },
             { value: 'styles-markup-scripts' },
@@ -51,8 +51,8 @@ export const options: Record<keyof PluginOptions, SupportOption> = {
 };
 
 export type SortOrder =
-    | 'scripts-styles-markup'
     | 'scripts-markup-styles'
+    | 'scripts-styles-markup'
     | 'markup-styles-scripts'
     | 'markup-scripts-styles'
     | 'styles-markup-scripts'


Test patch:
diff --git a/test/formatting/samples/top-level-comments/output.html b/test/formatting/samples/top-level-comments/output.html
index 4cc26de..3936d50 100644
--- a/test/formatting/samples/top-level-comments/output.html
+++ b/test/formatting/samples/top-level-comments/output.html
@@ -2,9 +2,9 @@
 <script>
 </script>
 
+<!-- here's the actual HTML -->
+<h1>Title</h1>
+
 <!-- add your styles here -->
 <style>
 </style>
-
-<!-- here's the actual HTML -->
-<h1>Title</h1>
diff --git a/test/formatting/samples/trim-whitespace-after-style/options.json b/test/formatting/samples/trim-whitespace-after-style/options.json
new file mode 100644
index 0000000..d1a6ebd
--- /dev/null
+++ b/test/formatting/samples/trim-whitespace-after-style/options.json
@@ -0,0 +1,3 @@
+{
+    "svelteSortOrder": "scripts-styles-markup"
+}
diff --git a/test/printer/samples/indent-script-and-style.html b/test/printer/samples/indent-script-and-style.html
index 3313f2d..a92bba9 100644
--- a/test/printer/samples/indent-script-and-style.html
+++ b/test/printer/samples/indent-script-and-style.html
@@ -2,10 +2,10 @@
 let x = 5;
 </script>
 
+<div />
+
 <style>
 div::after {
     content: "No indent";
 }
 </style>
-
-<div />
diff --git a/test/printer/samples/prettier-ignore-style.html b/test/printer/samples/prettier-ignore-style.html
index 5ce8adc..090fd63 100644
--- a/test/printer/samples/prettier-ignore-style.html
+++ b/test/printer/samples/prettier-ignore-style.html
@@ -1,11 +1,11 @@
 <script>
 </script>
 
+<h1>Title</h1>
+
 <!-- prettier-ignore -->
 <style>
   .doNotFormatMe
 {
 }
 </style>
-
-<h1>Title</h1>
diff --git a/test/printer/samples/s-after-style-tag.options.json b/test/printer/samples/s-after-style-tag.options.json
new file mode 100644
index 0000000..d1a6ebd
--- /dev/null
+++ b/test/printer/samples/s-after-style-tag.options.json
@@ -0,0 +1,3 @@
+{
+    "svelteSortOrder": "scripts-styles-markup"
+}
diff --git a/test/printer/samples/script-and-style.html b/test/printer/samples/script-and-style.html
index 8ae3058..27e88ea 100644
--- a/test/printer/samples/script-and-style.html
+++ b/test/printer/samples/script-and-style.html
@@ -2,10 +2,10 @@
     const name = "world";
 </script>
 
+<h1>Hello {name}!</h1>
+
 <style>
     h1 {
         color: red;
     }
 </style>
-
-<h1>Hello {name}!</h1>
diff --git a/test/printer/samples/sort-order-scripts-markup-styles.options.json b/test/printer/samples/sort-order-scripts-markup-styles.options.json
deleted file mode 100644
index 6b318c3..0000000
--- a/test/printer/samples/sort-order-scripts-markup-styles.options.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "svelteSortOrder": "scripts-markup-styles"
-}
\ No newline at end of file
diff --git a/test/printer/samples/sort-order-scripts-markup-styles.html b/test/printer/samples/sort-order-scripts-styles-markup.html
similarity index 100%
rename from test/printer/samples/sort-order-scripts-markup-styles.html
rename to test/printer/samples/sort-order-scripts-styles-markup.html
index 27e88ea..8ae3058 100644
--- a/test/printer/samples/sort-order-scripts-markup-styles.html
+++ b/test/printer/samples/sort-order-scripts-styles-markup.html
@@ -2,10 +2,10 @@
     const name = "world";
 </script>
 
-<h1>Hello {name}!</h1>
-
 <style>
     h1 {
         color: red;
     }
 </style>
+
+<h1>Hello {name}!</h1>
diff --git a/test/printer/samples/sort-order-scripts-styles-markup.options.json b/test/printer/samples/sort-order-scripts-styles-markup.options.json
new file mode 100644
index 0000000..d1a6ebd
--- /dev/null
+++ b/test/printer/samples/sort-order-scripts-styles-markup.options.json
@@ -0,0 +1,3 @@
+{
+    "svelteSortOrder": "scripts-styles-markup"
+}
diff --git a/test/printer/samples/style-lang-less.html b/test/printer/samples/style-lang-less.html
index e74bac9..12784d7 100644
--- a/test/printer/samples/style-lang-less.html
+++ b/test/printer/samples/style-lang-less.html
@@ -1,3 +1,5 @@
+<div>foo</div>
+
 <style lang="less">
     @color: red;
 
@@ -5,5 +7,3 @@
         color: @color;
     }
 </style>
-
-<div>foo</div>
diff --git a/test/printer/samples/style-lang-scss.html b/test/printer/samples/style-lang-scss.html
index b7409e0..3683aa4 100644
--- a/test/printer/samples/style-lang-scss.html
+++ b/test/printer/samples/style-lang-scss.html
@@ -1,3 +1,5 @@
+<div>foo</div>
+
 <style lang="scss">
     $color: red;
 
@@ -5,5 +7,3 @@
         color: $color;
     }
 </style>
-
-<div>foo</div>
diff --git a/test/printer/samples/style-type-less.html b/test/printer/samples/style-type-less.html
index ef001e8..c663328 100644
--- a/test/printer/samples/style-type-less.html
+++ b/test/printer/samples/style-type-less.html
@@ -1,3 +1,5 @@
+<div>foo</div>
+
 <style type="text/less">
     @color: red;
 
@@ -5,5 +7,3 @@
         color: @color;
     }
 </style>
-
-<div>foo</div>
diff --git a/test/printer/samples/style-type-scss.html b/test/printer/samples/style-type-scss.html
index c24ae65..1c4fc56 100644
--- a/test/printer/samples/style-type-scss.html
+++ b/test/printer/samples/style-type-scss.html
@@ -1,3 +1,5 @@
+<div>foo</div>
+
 <style type="text/scss">
     $color: red;
 
@@ -5,5 +7,3 @@
         color: $color;
     }
 </style>
-
-<div>foo</div>
diff --git a/test/printer/samples/style-with-attributes.html b/test/printer/samples/style-with-attributes.html
index 7c95b5b..55781a8 100644
--- a/test/printer/samples/style-with-attributes.html
+++ b/test/printer/samples/style-with-attributes.html
@@ -1,7 +1,7 @@
+<div>foo</div>
+
 <style foo="bar">
     div {
         color: red;
     }
 </style>
-
-<div>foo</div>
diff --git a/test/printer/samples/style.html b/test/printer/samples/style.html
index 4a32c77..e8f9b5a 100644
--- a/test/printer/samples/style.html
+++ b/test/printer/samples/style.html
@@ -1,7 +1,7 @@
+<div>foo</div>
+
 <style>
     div {
         color: red;
     }
 </style>
-
-<div>foo</div>
diff --git a/test/printer/samples/toplevel-blocks.options.json b/test/printer/samples/toplevel-blocks.options.json
deleted file mode 100644
index 734075b..0000000
--- a/test/printer/samples/toplevel-blocks.options.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "svelteSortOrder": "scripts-markup-styles"
-}
diff --git a/test/printer/samples/toplevel-blocks2.options.json b/test/printer/samples/toplevel-blocks2.options.json
deleted file mode 100644
index 734075b..0000000
--- a/test/printer/samples/toplevel-blocks2.options.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "svelteSortOrder": "scripts-markup-styles"
-}
diff --git a/test/printer/samples/unicode-style.html b/test/printer/samples/unicode-style.html
index 77354bd..3574deb 100644
--- a/test/printer/samples/unicode-style.html
+++ b/test/printer/samples/unicode-style.html
@@ -1,7 +1,7 @@
+<div />
+
 <style>
     div::after {
         content: "Lønn";
     }
 </style>
-
-<div />
diff --git a/test/printer/samples/unsupported-language.html b/test/printer/samples/unsupported-language.html
index f4f825f..bcead87 100644
--- a/test/printer/samples/unsupported-language.html
+++ b/test/printer/samples/unsupported-language.html
@@ -6,11 +6,6 @@ alert "This is not valid JS and should not be formatted."
 
 </script>
 
-<style lang="stylus">
-  h1
-    color: red
-</style>
-
 <template lang="pug">
   h1 My Title
 
@@ -26,3 +21,8 @@ alert "This is not valid JS and should not be formatted."
     p Hey
     <p>ok</p>
 </template>
+
+<style lang="stylus">
+  h1
+    color: red
+</style>