✨ Use tailwind JIT mode | Add formatter for svelte

.vscode/settings.json

@@ -9,5 +9,8 @@
     "files.eol": "\n",
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
+    },
+    "[svelte]": {
+      "editor.defaultFormatter": "svelte.svelte-vscode"
     }
 }

package.json

@@ -220,7 +220,7 @@
     "svelte-jester": "1.3.0",
     "svelte-loader": "^3.0.0",
     "svelte-preprocess": "^4.6.9",
-    "tailwindcss": "^2.0.3",
+    "tailwindcss": "^2.1.2",
     "ts-jest": "^26.5.3",
     "ts-loader": "^8.0.17",
     "ts-node": "^9.1.1",

src/webview-ui/App.svelte

@@ -1,20 +1,17 @@
 <script lang="ts">
-  import DiffBadge from "./common/DiffBadge.svelte";
-  import SnapshotContainer from "./snapshot/SnapshotContainer.svelte";
-  import TailwindBase from './tailwind/Base.svelte';
-  import TailwindComponents from './tailwind/Components.svelte';
-  import TailwindUtilities from './tailwind/Utilities.svelte';
-  import { onMount, setContext } from "svelte";
-  import { getWebviewData, isCurrentThemeDark, createScrollSync } from "./webviewStateHelpers";
-  import { sendWebviewMessage } from "./vscodeWebviewApi";
+  import DiffBadge from './common/DiffBadge.svelte';
+  import SnapshotContainer from './snapshot/SnapshotContainer.svelte';
+  import { onMount, setContext } from 'svelte';
+  import { getWebviewData, isCurrentThemeDark, createScrollSync } from './webviewStateHelpers';
+  import { sendWebviewMessage } from './vscodeWebviewApi';
 
   const { snapshotData, extensionConfig } = getWebviewData();
   const darkMode = isCurrentThemeDark();
   const syncScroll = createScrollSync();
 
   onMount(() => {
     sendWebviewMessage({ intent: 'webviewReady', ready: true });
-  })
+  });
 
   $: {
     if ($darkMode) {
@@ -24,7 +21,7 @@
     }
   }
 
-  $: diffExists = !!$snapshotData?.resources.some(({diff}) => diff.exists);
+  $: diffExists = !!$snapshotData?.resources.some(({ diff }) => diff.exists);
 
   $: {
     if ($extensionConfig) {
@@ -33,9 +30,6 @@
   }
 </script>
 
-<TailwindBase />
-<TailwindComponents />
-<TailwindUtilities />
 <main class="w-full h-full flex flex-col">
   {#if $snapshotData}
     <div class="flex p-4 shadow space-x-3">
@@ -52,9 +46,14 @@
   {/if}
 </main>
 
-<style global>
-  html, body {
+<style global lang="postcss">
+  @tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+
+  html,
+  body {
     height: 100%;
-    width: 100%
+    width: 100%;
   }
 </style>

src/webview-ui/common/DiffBadge.svelte

@@ -1,6 +1,3 @@
-<span
-  data-testid="diff-badge"
-  class="text-xs text-white px-2 py-0.5 font-medium rounded-full self-center bg-red-600"
->
+<span data-testid="diff-badge" class="text-xs text-white px-2 py-0.5 font-medium rounded-full self-center bg-red-600">
   DIFF
 </span>

src/webview-ui/common/Image.svelte

@@ -3,6 +3,6 @@
   export let alt: string;
 </script>
 
-<div class="h-full w-full flex items-center justify-center"> 
+<div class="h-full w-full flex items-center justify-center">
   <img class="object-scale-down h-full" {src} {alt} />
 </div>

src/webview-ui/common/NoResource.svelte

@@ -3,9 +3,7 @@
 </script>
 
 <div class="h-full w-full flex flex-col justify-center items-center">
-  <p class="snapshot-text text-4xl text-center font-semibold opacity-40 mb-6">
-    Resource Does Not Exist
-  </p>
+  <p class="snapshot-text text-4xl text-center font-semibold opacity-40 mb-6">Resource Does Not Exist</p>
   <div class="h-2/6 w-full opacity-40">
     <Tumbleweed />
   </div>