Configure VSCode Tailwind extension to work in cva and cn args (#5311)

2026-04-21 14:37:17 +00:00 · 2024-08-06 15:40:55 +02:00 · 2024-08-06 15:40:55 +02:00 · 5832d9408a
commit 5832d9408a
parent 2613730b65
11 changed files with 22 additions and 12 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -36,6 +36,8 @@ const HIVE_RESTRICTED_SYNTAX = [
  },
 ];

+const tailwindCallees = ['clsx', 'cn', 'cva', 'cx'];
+
 module.exports = {
  ignorePatterns: [
    'scripts',
@ -195,6 +197,7 @@ module.exports = {
      files: ['packages/web/app/**'],
      settings: {
        tailwindcss: {
+          callees: tailwindCallees,
          config: 'packages/web/app/tailwind.config.cjs',
          whitelist: ['drag-none', 'graphiql-toolbar-icon', 'graphiql-toolbar-button'],
        },
@ -214,6 +217,7 @@ module.exports = {
          rootDir: 'packages/web/docs',
        },
        tailwindcss: {
+          callees: tailwindCallees,
          config: 'packages/web/docs/tailwind.config.cjs',
        },
      },
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -22,5 +22,11 @@
  },
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
-  "git.mergeEditor": false
+  "git.mergeEditor": false,
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
+    ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
+    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ]
 }
--- a/packages/web/app/src/components/target/settings/schema-contracts.tsx
+++ b/packages/web/app/src/components/target/settings/schema-contracts.tsx
@ -524,7 +524,7 @@ function CreateContractDialogContent(props: {
                              >
                                <Check
                                  className={cn(
-                                    'mr-2 h-4 w-4',
+                                    'mr-2 size-4',
                                    form.values.includeTags.includes(value)
                                      ? 'opacity-100'
                                      : 'opacity-0',
@ -637,7 +637,7 @@ function CreateContractDialogContent(props: {
                              >
                                <Check
                                  className={cn(
-                                    'mr-2 h-4 w-4',
+                                    'mr-2 size-4',
                                    form.values.excludeTags.includes(value)
                                      ? 'opacity-100'
                                      : 'opacity-0',
--- a/packages/web/app/src/components/ui/calendar.tsx
+++ b/packages/web/app/src/components/ui/calendar.tsx
@ -37,7 +37,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
        ),
        day: cn(
          buttonVariants({ variant: 'ghost' }),
-          'h-8 w-8 p-0 font-normal aria-selected:opacity-100',
+          'size-8 p-0 font-normal aria-selected:opacity-100',
        ),
        day_range_start: 'day-range-start',
        day_range_end: 'day-range-end',
--- a/packages/web/app/src/components/ui/checkbox.tsx
+++ b/packages/web/app/src/components/ui/checkbox.tsx
@ -10,7 +10,7 @@ const Checkbox = React.forwardRef<
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
-      'border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      'border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
      className,
    )}
    {...props}
--- a/packages/web/app/src/components/ui/command.tsx
+++ b/packages/web/app/src/components/ui/command.tsx
@ -14,7 +14,7 @@ const Command = React.forwardRef<
  <CommandPrimitive
    ref={ref}
    className={cn(
-      'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+      'bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-md',
      className,
    )}
    {...props}
--- a/packages/web/app/src/components/ui/dropdown-menu.tsx
+++ b/packages/web/app/src/components/ui/dropdown-menu.tsx
@ -75,7 +75,7 @@ const DropdownMenuItem = React.forwardRef<
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm p-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      inset && 'pl-8',
      active && 'bg-accent text-orange-500',
      className,
@ -138,7 +138,7 @@ const DropdownMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Label
    ref={ref}
-    className={cn('px-2 py-2 text-sm font-semibold', inset && 'pl-8', className)}
+    className={cn('p-2 text-sm font-semibold', inset && 'pl-8', className)}
    {...props}
  />
 ));
--- a/packages/web/app/src/components/ui/radio-group.tsx
+++ b/packages/web/app/src/components/ui/radio-group.tsx
@ -21,7 +21,7 @@ const RadioGroupItem = React.forwardRef<
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
-        'border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square size-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...props}
--- a/packages/web/app/src/components/ui/spinner.tsx
+++ b/packages/web/app/src/components/ui/spinner.tsx
@ -6,7 +6,7 @@ export const Spinner = ({ className }: { className?: string }): ReactElement =>
    // Copied from https://chakra-ui.com/docs/components/spinner#usage
    <div
      className={cn(
-        'h-6 w-6 animate-spin rounded-full text-orange-500',
+        'size-6 animate-spin rounded-full text-orange-500',
        'border-2 border-b-transparent border-l-transparent border-r-current border-t-current',
        '[animation-duration:0.45s]',
        className,
--- a/packages/web/app/src/components/ui/switch.tsx
+++ b/packages/web/app/src/components/ui/switch.tsx
@ -18,7 +18,7 @@ const Switch = React.forwardRef<
  >
    <SwitchPrimitives.Thumb
      className={cn(
-        'bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+        'bg-background pointer-events-none block size-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
      )}
    />
  </SwitchPrimitives.Root>
--- a/packages/web/app/src/stories/schema-filter.stories.tsx
+++ b/packages/web/app/src/stories/schema-filter.stories.tsx
@ -79,7 +79,7 @@ const Template = () => {
                  onSelect={() => handleChange(schema.service)}
                >
                  <Check
-                    className={cn('mr-2 h-4 w-4', term === schema.id ? 'opacity-100' : 'opacity-0')}
+                    className={cn('mr-2 size-4', term === schema.id ? 'opacity-100' : 'opacity-0')}
                  />
                  {schema.service}
                </CommandItem>