Add plugins to tailwind theme in core, move scrollbar styles to new utility classes

Author: DTCurrie

packages/core/plugins.ts

@@ -0,0 +1,87 @@
+import plugin from 'tailwindcss/plugin';
+import type { OptionalConfig } from 'tailwindcss/types/config';
+
+export const plugins = [
+  plugin(({ addUtilities, matchUtilities, theme }) => {
+    addUtilities({
+      '.scrollbar-thin': {
+        'scrollbar-width': 'thin',
+      },
+    });
+
+    matchUtilities(
+      {
+        scrollbar: (value: string) => ({
+          scrollbarColor: value,
+        }),
+      },
+      { values: theme('colors') ?? {} }
+    );
+
+    matchUtilities(
+      {
+        'scrollbar-w': (value: string) => ({
+          '&::-webkit-scrollbar': {
+            width: value,
+          },
+        }),
+      },
+      { values: theme('spacing') ?? {} }
+    );
+
+    matchUtilities(
+      {
+        'scrollbar-track': (value: string) => ({
+          '&::-webkit-scrollbar-track': {
+            background: value,
+          },
+        }),
+      },
+      { values: theme('colors') ?? {} }
+    );
+
+    matchUtilities(
+      {
+        'scrollbar-thumb': (value: string) => ({
+          '&::-webkit-scrollbar-thumb': {
+            backgroundColor: value,
+          },
+        }),
+      },
+      { values: theme('colors') ?? {} }
+    );
+
+    matchUtilities(
+      {
+        'scrollbar-thumb-border': (value: string) => ({
+          '&::-webkit-scrollbar-thumb': {
+            borderRadius: value,
+          },
+        }),
+      },
+      { values: theme('borderRadius') ?? {} }
+    );
+
+    matchUtilities(
+      {
+        'scrollbar-thumb-border': (value: string) => ({
+          '&::-webkit-scrollbar-thumb': {
+            borderWidth: value,
+          },
+        }),
+      },
+      { values: theme('borderWidth') ?? {} }
+    );
+
+    matchUtilities(
+      {
+        'scrollbar-thumb-border': (value: string) => ({
+          '&::-webkit-scrollbar-thumb': {
+            borderColor: value,
+          },
+        }),
+      },
+      { values: theme('borderColor') ?? {} }
+    );
+  }),
+] satisfies OptionalConfig['plugins'];

packages/core/src/lib/select/select-menu.svelte

@@ -28,7 +28,7 @@ export let heading = '';
   {/if}
   <ul
     role="menu"
-    class="select-menu flex max-h-36 flex-col overflow-y-auto"
+    class="scrollbar-thin scrollbar-black scrollbar-w-1.5 scrollbar-track-transparent scrollbar-thumb-black scrollbar-thumb-border-0 scrollbar-thumb-border-transparent flex max-h-36 flex-col overflow-y-auto"
     tabindex="-1"
     bind:this={element}
     on:mouseleave
@@ -50,25 +50,3 @@ export let heading = '';
     </button>
   {/if}
 </div>
-
-<style>
-/* TODO: Move these do tailwind classes */
-.select-menu::-webkit-scrollbar {
-  width: 6px;
-}
-
-.select-menu::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.select-menu::-webkit-scrollbar-thumb {
-  background-color: black;
-  border-radius: 0;
-  border: 0 solid transparent;
-}
-
-.select-menu {
-  scrollbar-width: thin;
-  scrollbar-color: black transparent;
-}
-</style>

packages/core/svelte.config.js

@@ -23,6 +23,7 @@ const config = {
           '../postcss.config.js',
           '../svelte.config.js',
           '../tailwind.config.ts',
+          '../plugins.ts',
           '../theme.ts',
         ],
       }),

packages/core/tailwind.config.ts

@@ -1,8 +1,10 @@
 import type { Config } from 'tailwindcss';
 import { theme } from './theme';
+import { plugins } from './plugins';
 
 export default {
   content: ['./src/**/*.{ts,svelte}'],
+  plugins,
   theme,
   variants: {
     extend: {},

packages/core/theme.ts

@@ -1,3 +1,5 @@
+import type { OptionalConfig } from 'tailwindcss/types/config';
+
 export const theme = {
   extend: {
     fontFamily: {
@@ -59,4 +61,4 @@ export const theme = {
       'expand-vertical': 'max-height,visibility',
     },
   },
-};
+} satisfies OptionalConfig['theme'];