chore: tailwind linter

- use clsx to build complex classNames

Author: akiver

.vscode/settings.json

@@ -1,11 +1,14 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
   "files.associations": {
     "*.css": "tailwindcss"
   },
-  "tailwindCSS.rootFontSize": 14,
   "search.exclude": {
     "cs2-server-plugin/cs2-server-plugin/deps": true,
     "csgo-server-plugin/csgo-server-plugin/deps": true
-  }
+  },
+  "tailwindCSS.rootFontSize": 14,
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

eslint.config.mjs

@@ -6,6 +6,7 @@ import checkFile from 'eslint-plugin-check-file';
 import localRules from 'eslint-plugin-local-rules';
 import lingui from 'eslint-plugin-lingui';
 import prettier from 'eslint-plugin-prettier/recommended';
+import eslintPluginBetterTailwindcss from 'eslint-plugin-better-tailwindcss';
 
 export default [
   {
@@ -57,6 +58,7 @@ export default [
     plugins: {
       'check-file': checkFile,
       lingui,
+      'better-tailwindcss': eslintPluginBetterTailwindcss,
       'local-rules': localRules,
       'react-hooks': reactHooks,
     },
@@ -72,6 +74,9 @@ export default [
       react: {
         version: 'detect',
       },
+      'better-tailwindcss': {
+        entryPoint: 'src/ui/index.css',
+      },
     },
 
     rules: {
@@ -141,6 +146,11 @@ export default [
       ],
       'check-file/no-index': 'error',
       eqeqeq: 'error',
+      ...eslintPluginBetterTailwindcss.configs['recommended-warn'].rules,
+      ...eslintPluginBetterTailwindcss.configs['recommended-error'].rules,
+      'better-tailwindcss/enforce-consistent-class-order': 'off',
+      'better-tailwindcss/enforce-consistent-line-wrapping': 'off',
+      'better-tailwindcss/no-unregistered-classes': ['error', { ignore: ['dark', 'changelog', 'waveform'] }],
       'lingui/no-unlocalized-strings': [
         'error',
         {

package-lock.json

@@ -78,6 +78,7 @@
     "archiver": "7.0.1",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
     "chokidar": "4.0.3",
+    "clsx": "2.1.1",
     "crc64-ecma": "2.0.0",
     "csgo-protobuf": "4.0.2",
     "csgo-sharecode": "3.1.2",
@@ -94,6 +95,7 @@
     "esbuild": "0.25.9",
     "eslint": "9.34.0",
     "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-better-tailwindcss": "3.7.8",
     "eslint-plugin-check-file": "3.3.0",
     "eslint-plugin-deprecation": "3.0.0",
     "eslint-plugin-lingui": "0.11.0",

package.json

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import clsx from 'clsx';
 import type { PlayerColor } from 'csdm/common/types/counter-strike';
 import { getPlayerColorBorderClassName } from 'csdm/ui/styles/get-player-color-border-class-name';
 
@@ -23,7 +24,10 @@ export function Avatar({ avatarUrl, playerName, playerColor, size }: Props) {
 
   return (
     <img
-      className={`border ${playerColor ? getPlayerColorBorderClassName(playerColor) : 'border-gray-300'} size-[100px]`}
+      className={clsx(
+        'border size-[100px]',
+        playerColor ? getPlayerColorBorderClassName(playerColor) : 'border-gray-300',
+      )}
       style={{
         width: size,
         height: size,

src/ui/components/avatar.tsx

@@ -1,5 +1,6 @@
 import type { ButtonHTMLAttributes, MouseEventHandler, ReactNode } from 'react';
 import React from 'react';
+import clsx from 'clsx';
 
 export const ButtonVariant = {
   Default: 'default',
@@ -39,14 +40,15 @@ export function Button({
   return (
     <button
       ref={ref}
-      className={`px-12 leading-none whitespace-nowrap rounded border flex items-center duration-85 transition-all relative cursor-default h-[30px] aria-disabled:bg-gray-300 aria-disabled:text-gray-600 aria-disabled:border-transparent ${
+      className={clsx(
+        'px-12 leading-none whitespace-nowrap rounded border flex items-center duration-85 transition-all relative cursor-default h-[30px] aria-disabled:bg-gray-300 aria-disabled:text-gray-600 aria-disabled:border-transparent',
         {
           [ButtonVariant.Default]:
             'bg-gray-50 border-gray-400 text-gray-800 active:bg-gray-200 hover:text-gray-900 hover:border-gray-900 focus:border-gray-800 focus-visible:outline-hidden',
           [ButtonVariant.Danger]: 'bg-red-700 border-red-700 text-white active:bg-red-500 hover:bg-red-600',
           [ButtonVariant.Primary]: 'bg-blue-600 border-blue-600 text-white active:bg-blue-800 hover:bg-blue-700',
-        }[variant]
-      }`}
+        }[variant],
+      )}
       aria-disabled={isDisabled}
       type={type}
       onClick={isDisabled ? undefined : handleClick}

src/ui/components/buttons/button.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import React from 'react';
+import clsx from 'clsx';
 import { useContextMenu } from 'csdm/ui/components/context-menu/use-context-menu';
 
 type Props = {
@@ -18,9 +19,10 @@ export function ContextMenuItem({ onClick, children, isDisabled }: Props) {
 
   return (
     <div
-      className={`flex items-center leading-none h-32 px-16 min-w-[224px] hover:bg-gray-200 select-none rounded ${
-        isDisabled ? 'opacity-50 pointer-events-none' : 'opacity-100 pointer-events-auto hover:text-gray-900'
-      }`}
+      className={clsx(
+        'flex items-center leading-none h-32 px-16 min-w-[224px] hover:bg-gray-200 select-none rounded',
+        isDisabled ? 'opacity-50 pointer-events-none' : 'opacity-100 pointer-events-auto hover:text-gray-900',
+      )}
       onClick={handleClick}
     >
       <div className="flex justify-between items-center flex-1">{children}</div>

src/ui/components/context-menu/context-menu-item.tsx

@@ -51,7 +51,7 @@ export function SubContextMenu({ label, children }: Props) {
 
   return (
     <div
-      className={`relative flex items-center h-32 leading-none px-16 min-w-[224px] hover:bg-gray-300`}
+      className="relative flex items-center h-32 leading-none px-16 min-w-[224px] hover:bg-gray-300"
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >