rm postcss (#2901)

* rm postcss

* move control classes into class

* add clsx

* move back to interface

* add ClassNameValue

Author: GraceGardner

package.json

@@ -79,14 +79,14 @@
   "dependencies": {
     "@codemirror/autocomplete": "^6.17.0",
     "@codemirror/commands": "^6.6.0",
+    "@codemirror/lang-go": "^6.0.1",
+    "@codemirror/lang-java": "^6.0.2",
     "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-php": "^6.0.2",
     "@codemirror/language": "^6.10.2",
     "@codemirror/legacy-modes": "^6.4.0",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.29.0",
-    "@codemirror/lang-java": "^6.0.2",
-    "@codemirror/lang-go": "^6.0.1",
-    "@codemirror/lang-php": "^6.0.2",
     "@fontsource-variable/inter": "^5.0.8",
     "@fontsource/noto-sans-mono": "^5.0.9",
     "@lezer/highlight": "^1.1.3",

src/lib/holocene/table/paginated-table/index.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements';
 
+  import { type ClassNameValue, twMerge as merge } from 'tailwind-merge';
+
   import SkeletonTable from '$lib/holocene/skeleton/table.svelte';
   import Table from '$lib/holocene/table/table.svelte';
 
   type Item = $$Generic;
 
-  interface $$Props extends HTMLAttributes<HTMLTableElement> {
+  interface $$Props extends Omit<HTMLAttributes<HTMLTableElement>, 'class'> {
     visibleItems: Item[];
     loading?: boolean;
     updating?: boolean;
     maxHeight?: string;
     fixed?: boolean;
+    class?: ClassNameValue;
   }
 
   export let visibleItems: Item[];
@@ -20,15 +23,21 @@
   export let maxHeight = '';
   export let fixed = false;
 
+  let className: ClassNameValue = '';
+  export { className as class };
+
   let tableContainer: HTMLDivElement;
 
   $: tableOffset = tableContainer?.offsetTop
-    ? tableContainer?.offsetTop + 32
+    ? tableContainer.offsetTop + 32
     : 0;
 </script>
 
 <div
-  class="paginated-table-wrapper"
+  class={merge(
+    'surface-primary min-h-[154px] grow overflow-auto border border-subtle',
+    className,
+  )}
   bind:this={tableContainer}
   style="max-height: {maxHeight || `calc(100vh - ${tableOffset}px)`}"
 >
@@ -45,7 +54,9 @@
       <slot />
     </Table>
     {#if visibleItems.length}
-      <div class="paginated-table-controls">
+      <div
+        class="surface-primary sticky bottom-0 left-0 flex w-full grow items-center justify-between gap-2 border-t border-subtle px-4 py-2"
+      >
         <slot name="actions-start" />
         <slot name="actions-center" />
         <slot name="actions-end" />
@@ -55,13 +66,3 @@
     {/if}
   {/if}
 </div>
-
-<style lang="postcss">
-  .paginated-table-wrapper {
-    @apply surface-primary min-h-[154px] grow overflow-auto border border-subtle;
-  }
-
-  .paginated-table-controls {
-    @apply surface-primary sticky bottom-0 left-0 flex w-full grow items-center justify-between gap-2 border-t border-subtle px-4 py-2;
-  }
-</style>