[Prettier Plugin] [v4] More cleanly support multiple tailwind configs

[brhx]

I've made the following prettier config that automatically parses all tailwind entrypoints. Would LOVE to see this as a first-class feature now that it's easier to use multiple configs!

import { readdirSync, readFileSync } from "fs";
import path from "path";
import { fileURLToPath } from "url";

// Get the project root directory
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const root = path.resolve(__dirname);

// Read .prettierignore
const ignoredPaths = readFileSync(path.join(root, ".prettierignore"), "utf-8")
  .split("\n")
  .filter((line) => line.trim() && !line.startsWith("#"))
  .map((path) => path.replace(/^\//, ""));

/** @type {import("prettier").Config} */
const config = {
  experimentalTernaries: true,
  plugins: [
    "prettier-plugin-embed",
    "prettier-plugin-organize-imports",
    "prettier-plugin-tailwindcss",
  ],
  tailwindFunctions: ["twMerge", "twJoin", "cva"],
  overrides: getTailwindOverrides(root),
};

// Find CSS files recursively and configure prettier-plugin-tailwindcss to use
// the closest CSS file as the Tailwind stylesheet for files in that directory
function getTailwindOverrides(startDir) {
  return readdirSync(startDir, { withFileTypes: true }).flatMap((entry) => {
    const fullPath = path.join(startDir, entry.name);
    const relativePath = path.relative(root, fullPath);

    // Skip ignored paths
    if (ignoredPaths.some((p) => relativePath.startsWith(p))) return [];

    // Recursively look into each directory
    if (entry.isDirectory()) return getTailwindOverrides(fullPath);

    // Only process CSS files in this directory
    if (!entry.isFile() || !entry.name.endsWith(".css")) return [];

    // Make sure file is tailwind stylesheet
    const cssContent = readFileSync(fullPath, "utf-8");
    const isTailwind = /^@import\s+["']tailwindcss["']/m.test(cssContent);
    if (!isTailwind) return [];

    // Escape glob-like patterns in path so prettier doesn't get confused
    const escapedPath = relativePath.replace(/([()])/g, "\\$1");

    return [
      {
        files: path.join(root, "**", "*"),
        options: { tailwindStylesheet: `./${escapedPath}` },
      },
    ];
  });
}

export default config;