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

Author: hasparus

.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',
         },
       },

.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\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ]
 }

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',

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',

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}

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}

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}
   />
 ));

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}

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,

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>

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>