[Prettier Plugin] support placeholder (generic class attribute) for tailwindAttributes

[tpoisseau]

Hello,

tailwindAttributes support only strict string equality match to check if it should sort the classes. (I verified it here : https://github.com/tailwindlabs/prettier-plugin-tailwindcss/blob/44435611e1d8ea2a8b43017cff66cc1e81e32dc9/src/index.js#L194 , it use Set.prototype.has to check)

Is it possible to support, like with tailwindcss-intellisense a placeholder syntax ?

In our team, we develop with React, so our tailwindcss-intellisense classAttributes config is ["class", "className", ".*ClassName", "ngClass"]. It's very usefull. With that, we have auto-completion in bodyClassName props for example, we would like the auto-sort ability with that.

If you agree, I can take time to purpose a PR with that feature. We can discuss on the placeholder syntax, using a new config key. From tailwindcss-intellisense it seems it transform the strings config to regex.

Best regards

---

I've search in issues, discussions and PR. But I see no clear decision on this specific point. The PR rejected was more about the scope of (variable name vs html / jsx / template attributes) than generic class support attribute.

[agusterodin]

I'm dying for something like this. What did you end up doing in the interim?

[agusterodin]

I wonder if they would be hesitant to move away from sets for performance reasons.

[tpoisseau]

I dig into the code, I think I can make this feat. But I wait an answer from the team before working on it.

[pmoore95]

My workaround for this was to just create a script to find all attributes with the substring ClassName or ClassNames and insert them into the tailwindAttributes key in .prettierrc.json:

import * as fs from 'fs';
import * as glob from 'glob';

console.log('Finding attributes');

const classNames = new Set();
const PRETTIER_CONFIG_JSON_FILE_PATH = './.prettierrc.json';
const GIT_IGNORE_FILE_PATH = './.gitignore';
const FILE_PATTERN = './**/**/*.tsx';

const ignorePaths = [
  ...generateGitIgnoreArray(),
];

function generateGitIgnoreArray() {
  try {
    const data: string = fs.readFileSync(GIT_IGNORE_FILE_PATH, 'utf8');
    const lines: string[] = data.split('\n');
    const items: string[] = lines
      .map((line) => line.trim())
      .filter((line) => line && !line.startsWith('#'));
    return items;
  } catch (err) {
    console.error('Error reading .gitignore file:', err);
    process.exit(1);
  }
}

function findVariableNames(filePath: string): void {
  const fileContent: string = fs.readFileSync(filePath, 'utf8');

  const regex: RegExp = new RegExp('\\w+ClassNames?', 'g');
  let match: RegExpExecArray | null;
  while ((match = regex.exec(fileContent))) {
    if (match?.[0] && !classNames.has(match[0])) {
      classNames.add(match[0]);
    }
  }
}

function findTypeScriptFiles(pattern: string): string[] {
  return glob.sync(pattern, {
    ignore: ignorePaths,
  });
}

const files: string[] = findTypeScriptFiles(FILE_PATTERN);

files.forEach((filePath) => {
  if (fs.statSync(filePath).isFile()) {
    findVariableNames(filePath);
  }
});

let prettierConfigFile;

try {
  prettierConfigFile = JSON.parse(fs.readFileSync(PRETTIER_CONFIG_JSON_FILE_PATH, 'utf8'));
} catch (err) {
  console.error(`Error reading file: ${PRETTIER_CONFIG_JSON_FILE_PATH}`, err);
  process.exit(1);
}

const classNamesArray = Array.from(classNames).sort();

console.log(`found ${classNamesArray.length} ClassNames`);

prettierConfigFile.tailwindAttributes = classNamesArray;

try {
  fs.writeFileSync(PRETTIER_CONFIG_JSON_FILE_PATH, JSON.stringify(prettierConfigFile, null, 2), 'utf8');
} catch (err) {
  console.error(`Error writing to ${PRETTIER_CONFIG_JSON_FILE_PATH}`, err);
  process.exit(1);
}

console.log('Attributes inserted successfully.');
process.exit(0);

I then edited my prettier command in package.json to run this first:

"prettier": "pnpm prettier:generate-tailwind-attributes && prettier --write \"**/*.{ts,tsx,md,json,js,jsx,yml,yaml,html}\"",
"prettier:generate-tailwind-attributes": "ts-node ./scripts/prettierTailwindAttributesGenerator"