Upgrade to prettier@3

zerodevx · zerodevx · commit d13a6a31b8c8 · 2024-09-21T15:06:59.000+08:00
diff --git a/.prettierignore b/.prettierignore
diff --git a/.prettierrc b/.prettierrc
@@ -3,8 +3,7 @@
   "singleQuote": true,
   "trailingComma": "none",
   "printWidth": 100,
-  "plugins": ["prettier-plugin-svelte"],
-  "pluginSearchDirs": ["."],
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
   "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
   "semi": false,
   "proseWrap": "always",
diff --git a/README.md b/README.md
@@ -56,6 +56,7 @@ Use anywhere in your app - just import the toast controller.
 
 `MyComponent.svelte`:
 
+<!-- prettier-ignore -->
 ```html
 <script>
   import { toast } from '@zerodevx/svelte-toast'
@@ -448,6 +449,7 @@ Additional CSS vars are exposed - specifically, `--toastBtnContent` allows the '
 to be changed. As with CSS `content` keys for pseudo elements, `url()` can be used to load external
 or inline icons.
 
+<!-- prettier-ignore -->
 ```html
 <script>
   import { toast, SvelteToast } from '@zerodevx/svelte-toast'
diff --git a/package.json b/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
-    "format": "prettier --plugin-search-dir . --write .",
-    "lint": "prettier --plugin-search-dir . --check . && eslint && npm run check",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint && npm run check",
     "test": "playwright test",
     "prepublishOnly": "echo 'Did you mean to publish `./package/`, instead of `./`?' && exit 1",
     "build": "zx build.mjs",
@@ -36,8 +36,9 @@
     "is-port-reachable": "^4.0.0",
     "postcss": "^8.4.47",
     "postcss-load-config": "^4.0.2",
-    "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.1",
+    "prettier": "^3.3.3",
+    "prettier-plugin-svelte": "^3.2.6",
+    "prettier-plugin-tailwindcss": "^0.6.6",
     "prismjs": "^1.29.0",
     "svelte": "^4.2.19",
     "svelte-check": "^4.0.2",
diff --git a/src/app.html b/src/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
diff --git a/src/app.postcss b/src/app.postcss
@@ -4,7 +4,7 @@
 
 @layer base {
   html {
-    @apply bg-base-100 text-base-content font-sans;
+    @apply bg-base-100 font-sans text-base-content;
   }
 }
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -382,33 +382,33 @@ $: formatted = Prism.highlight(code, Prism.languages.javascript, 'javascript')
   />
 </svelte:head>
 
-<div class="max-w-3xl mx-auto px-6 mt-8 mb-8">
-  <h1 class="text-4xl font-bold text-center mb-2">svelte-toast</h1>
-  <div class="text-center mb-6">
+<div class="mx-auto mb-8 mt-8 max-w-3xl px-6">
+  <h1 class="mb-2 text-center text-4xl font-bold">svelte-toast</h1>
+  <div class="mb-6 text-center">
     <a
-      class="badge font-mono text-xs px-4 py-3 hover:bg-base-300"
+      class="badge px-4 py-3 font-mono text-xs hover:bg-base-300"
       href="https://github.com/zerodevx/svelte-toast"
       title="Visit Github repo"
       target="_blank"
       rel="noreferrer">GITHUB v{version}</a
     >
   </div>
-  <p class="max-w-2xl mx-auto text-center mb-6">
+  <p class="mx-auto mb-6 max-w-2xl text-center">
     Simple elegant toast notifications for modern web frontends in very little lines of code.
     Because a demo helps better than a thousand API docs, so here it is. Use in Vanilla JS (<strong
       >8kB</strong
     >
     gzipped) or as a Svelte component.
   </p>
   <div class="mockup-code mb-6">
-    <pre class="w-full h-64 text-sm overflow-x-auto"><code class="language-javascript"
+    <pre class="h-64 w-full overflow-x-auto text-sm"><code class="language-javascript"
         >{@html formatted}</code
       ></pre>
   </div>
   <div class="flex flex-wrap justify-around">
     {#each buttons as btn}
       <button
-        class="btn btn-primary w-40 mb-2 text-xs"
+        class="btn btn-primary mb-2 w-40 text-xs"
         class:selected={selected === btn.name}
         on:click={() => {
           clicked(btn)
diff --git a/src/routes/Dummy.svelte b/src/routes/Dummy.svelte
@@ -18,20 +18,20 @@ const accepted = () => clicked(true)
 const declined = () => clicked(false)
 </script>
 
-<div class="w-full h-40 bg-yellow-500 flex flex-col p-2">
-  <div class="h-6 flex flex-row items-center mb-1">
+<div class="flex h-40 w-full flex-col bg-yellow-500 p-2">
+  <div class="mb-1 flex h-6 flex-row items-center">
     <h1 class="font-bold">{title}</h1>
     <div class="flex-1" />
     <span class="font-mono text-xs font-bold">[toastId: {toastId}]</span>
   </div>
-  <p class="flex-1 text-sm overflow-y-scroll">
+  <p class="flex-1 overflow-y-scroll text-sm">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
     labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
     laboris nisi ut aliquip ex ea commodo consequat.
   </p>
-  <div class="h-10 flex flex-row justify-around">
+  <div class="flex h-10 flex-row justify-around">
     <button class="btn btn-sm" on:click={declined}>DECLINE</button>
-    <button class="btn btn-sm btn-primary" on:click={accepted} data-testid="dummyAccept"
+    <button class="btn btn-primary btn-sm" on:click={accepted} data-testid="dummyAccept"
       >ACCEPT</button
     >
   </div>

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<!DOCTYPE html>`
	`1`	`+<!doctype html>`
`2`	`2`	`<html lang="en">`
`3`	`3`	`<head>`
`4`	`4`	`<meta charset="utf-8" />`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@`
`4`	`4`
`5`	`5`	`@layer base {`
`6`	`6`	`html {`
`7`		`- @apply bg-base-100 text-base-content font-sans;`
	`7`	`+ @apply bg-base-100 font-sans text-base-content;`
`8`	`8`	`}`
`9`	`9`	`}`
`10`	`10`