From 27a0dde9d969f705690909209b3ed34055fec2cf Mon Sep 17 00:00:00 2001 From: Jason Rasmussen Date: Thu, 9 Jan 2025 10:13:38 -0500 Subject: [PATCH] chore: lint tailwind variant classes --- .prettierrc | 1 + .vscode/settings.json | 5 +++++ src/lib/components/Avatar/Avatar.svelte | 12 ++++++------ src/lib/components/Card/Card.svelte | 4 ++-- src/lib/components/Code/Code.svelte | 2 +- src/lib/components/Form/Checkbox.svelte | 2 +- src/lib/components/Form/Input.svelte | 2 +- src/lib/components/Modal/Modal.svelte | 2 +- src/lib/components/Navbar/NavbarItem.svelte | 2 +- .../components/SupporterBadge/SupporterBadge.svelte | 6 +++--- src/lib/components/Switch/Switch.svelte | 4 ++-- 11 files changed, 24 insertions(+), 18 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.prettierrc b/.prettierrc index 01c1301..956666d 100644 --- a/.prettierrc +++ b/.prettierrc @@ -4,6 +4,7 @@ "trailingComma": "all", "printWidth": 100, "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"], + "tailwindFunctions": ["tv"], "overrides": [ { "files": "*.svelte", diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..a914954 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "tailwindCSS.experimental.classRegex": [ + ["([\"'`][^\"'`]*.*?[\"'`])", "[\"'`]([^\"'`]*).*?[\"'`]"] + ] +} diff --git a/src/lib/components/Avatar/Avatar.svelte b/src/lib/components/Avatar/Avatar.svelte index 1e52020..b677611 100644 --- a/src/lib/components/Avatar/Avatar.svelte +++ b/src/lib/components/Avatar/Avatar.svelte @@ -24,11 +24,11 @@ base: 'flex h-full w-full select-none items-center justify-center font-medium', variants: { size: { - tiny: 'w-5 h-5 text-xs', - small: 'w-7 h-7 text-sm', - medium: 'w-10 h-10 text-md', - large: 'w-12 h-12 text-lg', - giant: 'w-16 h-16 text-xl', + tiny: 'h-5 w-5 text-xs', + small: 'h-7 w-7 text-sm', + medium: 'text-md h-10 w-10', + large: 'h-12 w-12 text-lg', + giant: 'h-16 w-16 text-xl', }, color: { primary: 'bg-primary text-light', @@ -46,7 +46,7 @@ }); const wrapper = tv({ - base: 'overflow-hidden shadow-md rounded rounded-full', + base: 'overflow-hidden rounded-full shadow-md', }); const getInitials = (name: string) => { diff --git a/src/lib/components/Card/Card.svelte b/src/lib/components/Card/Card.svelte index e7de291..5b9665c 100644 --- a/src/lib/components/Card/Card.svelte +++ b/src/lib/components/Card/Card.svelte @@ -44,11 +44,11 @@ }); const cardStyles = tv({ - base: 'flex flex-col w-full h-full', + base: 'flex h-full w-full flex-col', variants: { color: { primary: 'bg-primary/25 dark:bg-primary/25', - secondary: 'bg-dark/5 dark:bg-dark/25 text-dark', + secondary: 'bg-dark/5 text-dark dark:bg-dark/25', success: 'bg-success/15 dark:bg-success/30', danger: 'bg-danger/15 dark:bg-danger/50', warning: 'bg-warning/25 dark:bg-warning/50', diff --git a/src/lib/components/Code/Code.svelte b/src/lib/components/Code/Code.svelte index 1ae549a..0acfe65 100644 --- a/src/lib/components/Code/Code.svelte +++ b/src/lib/components/Code/Code.svelte @@ -32,7 +32,7 @@ filledColor: { false: '', - muted: 'bg-gray-600 dark:bg-gray-800 text-light', + muted: 'bg-gray-600 text-light dark:bg-gray-800', primary: 'bg-primary text-light', secondary: 'bg-dark text-light', success: 'bg-success text-light', diff --git a/src/lib/components/Form/Checkbox.svelte b/src/lib/components/Form/Checkbox.svelte index 2627772..21418ee 100644 --- a/src/lib/components/Form/Checkbox.svelte +++ b/src/lib/components/Form/Checkbox.svelte @@ -32,7 +32,7 @@ } = $derived(getFieldContext()); const containerStyles = tv({ - base: 'border-2 ring-offset-background focus-visible:ring-ring peer box-content focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[disabled=true]:opacity-50 overflow-hidden', + base: 'ring-offset-background focus-visible:ring-ring peer box-content overflow-hidden border-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[disabled=true]:opacity-50', variants: { shape: { rectangle: 'rounded-none', diff --git a/src/lib/components/Form/Input.svelte b/src/lib/components/Form/Input.svelte index 157cac5..851ec4a 100644 --- a/src/lib/components/Form/Input.svelte +++ b/src/lib/components/Form/Input.svelte @@ -36,7 +36,7 @@ }); const inputStyles = tv({ - base: 'w-full outline-none disabled:cursor-not-allowed bg-gray-200 dark:bg-gray-600 disabled:bg-gray-300 disabled:text-gray-200 dark:disabled:bg-gray-800 aria-readonly:text-dark/50 dark:aria-readonly:text-dark/75', + base: 'w-full bg-gray-200 outline-none disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-200 aria-readonly:text-dark/50 dark:bg-gray-600 dark:disabled:bg-gray-800 dark:aria-readonly:text-dark/75', variants: { shape: { rectangle: 'rounded-none', diff --git a/src/lib/components/Modal/Modal.svelte b/src/lib/components/Modal/Modal.svelte index 69e75fd..8f3cc6d 100644 --- a/src/lib/components/Modal/Modal.svelte +++ b/src/lib/components/Modal/Modal.svelte @@ -32,7 +32,7 @@ }: Props = $props(); const modalStyles = tv({ - base: 'flex rounded-none border border-subtle bg-subtle sm:rounded-2xl', + base: 'flex rounded-none border border-subtle bg-subtle sm:rounded-2xl', variants: { size: { tiny: 'h-full sm:h-min md:max-w-64', diff --git a/src/lib/components/Navbar/NavbarItem.svelte b/src/lib/components/Navbar/NavbarItem.svelte index ca371dc..fb94878 100644 --- a/src/lib/components/Navbar/NavbarItem.svelte +++ b/src/lib/components/Navbar/NavbarItem.svelte @@ -12,7 +12,7 @@ let { href, title, active = false, ...iconProps }: Props = $props(); const styles = tv({ - base: 'hover:bg-subtle hover:text-primary flex w-full place-items-center gap-4 rounded-r-full py-3 transition-[padding] delay-100 duration-100 pl-5 group-hover:sm:px-5 md:px-5', + base: 'flex w-full place-items-center gap-4 rounded-r-full py-3 pl-5 transition-[padding] delay-100 duration-100 hover:bg-subtle hover:text-primary group-hover:sm:px-5 md:px-5', variants: { active: { true: 'bg-primary/10 text-primary', diff --git a/src/lib/components/SupporterBadge/SupporterBadge.svelte b/src/lib/components/SupporterBadge/SupporterBadge.svelte index d60aa19..b5ab5bc 100644 --- a/src/lib/components/SupporterBadge/SupporterBadge.svelte +++ b/src/lib/components/SupporterBadge/SupporterBadge.svelte @@ -24,7 +24,7 @@ }; const containerStyles = tv({ - base: 'bg-secondary flex place-items-center gap-2 overflow-hidden rounded-lg transition-all', + base: 'bg-secondary flex place-items-center gap-2 overflow-hidden rounded-lg transition-all', variants: { size: { tiny: 'px-2 py-1', @@ -34,8 +34,8 @@ giant: 'px-3 py-2', }, effect: { - hover: 'border border-dark/25 supporter-effect-hover', - always: 'shadow supporter-effect', + hover: 'supporter-effect-hover border border-dark/25', + always: 'supporter-effect shadow', }, }, }); diff --git a/src/lib/components/Switch/Switch.svelte b/src/lib/components/Switch/Switch.svelte index 8017786..a31eb63 100644 --- a/src/lib/components/Switch/Switch.svelte +++ b/src/lib/components/Switch/Switch.svelte @@ -43,7 +43,7 @@ }); const bar = tv({ - base: 'w-12 h-3 my-2 rounded-full border border-transparent', + base: 'my-2 h-3 w-12 rounded-full border border-transparent', variants: { fillColor: { default: 'bg-gray-400', @@ -58,7 +58,7 @@ }); const dot = tv({ - base: 'absolute transition-colors h-6 w-6 rounded-full transition-transform duration-[400ms]', + base: 'absolute h-6 w-6 rounded-full transition-transform duration-[400ms]', variants: { checked: { true: 'translate-x-6',