feat: add prettier-plugin-classnames plugin

Author: u3u

package.json

@@ -70,12 +70,15 @@
     "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
     "@prettier/plugin-php": "^0.22.1",
     "@prettier/plugin-xml": "^3.2.2",
+    "@prettier/sync": "^0.3.0",
     "@shufo/prettier-plugin-blade": "^1.13.4",
     "deepmerge": "^4.3.1",
     "local-pkg": "^0.4.3",
     "prettier-plugin-astro": "^0.12.3",
+    "prettier-plugin-classnames": "^0.3.2",
     "prettier-plugin-ini": "^1.1.0",
     "prettier-plugin-jsdoc": "^1.3.0",
+    "prettier-plugin-merge": "^0.5.1",
     "prettier-plugin-nginx": "^1.0.3",
     "prettier-plugin-packagejson": "^2.4.9",
     "prettier-plugin-prisma": "^5.0.0",
@@ -89,6 +92,7 @@
     "@total-typescript/ts-reset": "^0.5.1",
     "@tsconfig/node18": "^18.2.2",
     "@types/node": "^20.11.0",
+    "@types/react": "^18.2.47",
     "@u3u/eslint-config": "^2.15.0",
     "@u3u/prettier-config": "link:",
     "dedent": "^1.5.1",

pnpm-lock.yaml

@@ -34,20 +34,20 @@ export default defineConfig({
   ],
 
   plugins: [
-    require.resolve('@ianvs/prettier-plugin-sort-imports'),
-    require.resolve('prettier-plugin-sort-json'),
-    require.resolve('prettier-plugin-packagejson'),
-    require.resolve('prettier-plugin-jsdoc'),
-    require.resolve('prettier-plugin-nginx'),
-    require.resolve('prettier-plugin-ini'),
-    require.resolve('prettier-plugin-sh'),
-    require.resolve('prettier-plugin-sql'),
-    require.resolve('@prettier/plugin-xml'),
-    require.resolve('@prettier/plugin-php'),
-    require.resolve('@shufo/prettier-plugin-blade'),
-    require.resolve('prettier-plugin-prisma'),
-    require.resolve('prettier-plugin-astro'),
-  ],
+    '@ianvs/prettier-plugin-sort-imports',
+    'prettier-plugin-sort-json',
+    'prettier-plugin-packagejson',
+    'prettier-plugin-jsdoc',
+    'prettier-plugin-nginx',
+    'prettier-plugin-ini',
+    'prettier-plugin-sh',
+    'prettier-plugin-sql',
+    '@prettier/plugin-xml',
+    '@prettier/plugin-php',
+    '@shufo/prettier-plugin-blade',
+    'prettier-plugin-prisma',
+    'prettier-plugin-astro',
+  ].map((item) => require.resolve(item)),
 
   // https://github.com/shufo/prettier-plugin-blade/tree/main?tab=readme-ov-file#options
   sortHtmlAttributes: 'alphabetical',

src/index.ts

@@ -1,5 +1,12 @@
 import { extendConfig } from './utils';
 
+const tailwindAttributes = [
+  //
+  'class:list',
+  'class',
+  'tw',
+];
+
 const tailwindFunctions = [
   //
   'classed',
@@ -16,9 +23,16 @@ const tailwindFunctions = [
 ];
 
 export default extendConfig({
-  plugins: [require.resolve('prettier-plugin-tailwindcss')],
+  customAttributes: tailwindAttributes,
+  customFunctions: tailwindFunctions,
 
-  tailwindAttributes: ['tw', 'class:list'],
+  plugins: [
+    //
+    'prettier-plugin-tailwindcss',
+    'prettier-plugin-classnames',
+    'prettier-plugin-merge',
+  ].map((item) => require.resolve(item)),
 
+  tailwindAttributes,
   tailwindFunctions,
 });

src/tw.ts

@@ -0,0 +1,24 @@
+const tw = String.raw
+const clsx = (...args: any) => args
+const twMerge = clsx
+const twJoin = clsx
+
+export const classes = clsx(
+  'px-4 py-2 text-base text-white rounded bg-blue-500',
+  {
+    'text-gray-100 bg-blue-700': true,
+  },
+)
+
+export const styles = {
+  root: tw`dark:text-white text-md text-black`,
+  base: twMerge(['z-[1] relative', twJoin('inset-0 absolute flex items-center')]),
+}
+
+export function Callout({ children }: React.PropsWithChildren) {
+  return (
+    <label className="[view-transition-name:upload] mx-auto max-w-md cursor-pointer flex flex-col items-center justify-center gap-2 rounded-lg bg-white p-8 shadow-panel transition active:scale-95 border-2 border-dashed border-transparent can-hover:hover:border-primary hover:-translate-y-1">
+      {children}
+    </label>
+  );
+}

test/__fixtures__/tw.ts

@@ -185,6 +185,18 @@ export const styles = {
   root: tw\`text-md text-black dark:text-white\`,
   base: twMerge(['relative z-[1]', twJoin('absolute inset-0 flex items-center')]),
 };
+
+export function Callout({ children }: React.PropsWithChildren) {
+  return (
+    <label
+      className="shadow-panel can-hover:hover:border-primary mx-auto flex max-w-md cursor-pointer flex-col items-center justify-center
+        gap-2 rounded-lg border-2 border-dashed border-transparent bg-white p-8 transition [view-transition-name:upload]
+        hover:-translate-y-1 active:scale-95"
+    >
+      {children}
+    </label>
+  );
+}
 "
 `;
 

test/__fixtures__/tw.tsx

@@ -2,7 +2,7 @@ import path from 'node:path';
 import { expect, it } from 'vitest';
 import { format } from './format';
 
-const sortTailwindClassesFiles = ['tw.ts', 'test.astro', 'test.blade.php'];
+const sortTailwindClassesFiles = ['tw.tsx', 'test.astro', 'test.blade.php'];
 
 it('should match snapshots', async () => {
   const { globby } = await import('globby');

test/__snapshots__/index.test.ts.snap

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "allowJs": true,
+    "jsx": "preserve",
     "noEmit": true,
     "resolveJsonModule": true
   },