[Prettier Plugin] Supporting regex ?

[anhdd-kuro]

I'm using shopify liquid template, here is my example

{% render 'snippet', class: 'block mt-top bg-black' %}

with this option

 "tailwindCSS.experimental.classRegex": [
    "[cC]lass\\s*[:=]\\s*['\"]([^'\"]+)"
  ],

my vscode is triggering intellisense well, but does not trigger class sorting like class="mt-top block bg-black"
what can I do to trigger sorting in this case ?

[agusterodin]

Looking at this as well! There are situations in our codebase where a component is postfixed with "className" or "classNames" and isn't getting picked up by Prettier (despite being picked up by Intellisense via wildcard match).

The select component library we are using (customClassNames prop)

Or our React ARIA powered date range picker component (inputClassName prop)

Technically yes I can manually add these to the Prettier configuration

"tailwindAttributes": [ "className", "customClassNames", "inputClassName" ]

but as soon as new situations arise I have to manually add them to the configuration file which is not ideal! :(

[CombeeMike]

Looking for the same thing. Any info why this discussion was closed?

[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"