It seems that it cannot be used together with prettier-plugin-tailwindcss.

[u3u]

I tried to add it, but the before test snapshot failed and the class name did not have a line break.

According to the usage instructions of prettier-plugin-tailwindcss, it needs to be placed at the end of the plugins.

When I add the prettier-plugin-classnames or prettier-plugin-merge any plugin, the test will fail.

You can reproduce it by cloning this repository, switching to the feat/prettier-plugin-classnames branch, and running npx vitest run.

[ony3000]

After cloning the given repository and checking, I think my guidance on how the plugin works and how to use it was a bit lacking.

In the case of the prettier-plugin-tailwindcss plugin, I understand that logic exists internally to ensure compatibility with other plugins. And I also understand that if there are more than one plugins supporting the same parser, prettier will only use the last of those plugins. That may be the reason for the instructions in prettier-plugin-tailwindcss that it should be used as the last plugin.

Since prettier-plugin-merge didn't exist yet when that instruction was created, it might seem like prettier-plugin-tailwindcss would have to be the last one. Because prettier-plugin-merge formats and merges the plugins before it one by one sequentially, it is correct that prettier-plugin-merge comes last.

Since prettier-plugin-merge internally implements the logic of @prettier/sync similarly, only the plugin name should be written in the plugins array instead of the resolved path.

Incorrect code:

plugins: [
  require.resolve('prettier-plugin-foo'),
],

Correct code:

plugins: [
  'prettier-plugin-foo',
],

Also, since prettier-plugin-merge performs resolveConfig on the input files internally, you need to add overrides rule in index.ts instead of extendConfig in tw.ts. However, during the checking process, it seems that option overriding does not work.

Lastly, this is a paragraph added to the README today, but it is correct that setting printwidth: 120 does not cause line breaks in tw.tsx.

[u3u]

I remember that initially, when using the VSCode Prettier extension with pnpm, it was unable to read plugins. Therefore, it was necessary to use require.resolve to pass the plugin path. It may be supported now, but for maximum compatibility, I still choose to use require.resolve.

I tried to remove require.resolve, but it still doesn't seem to work. What should I do?

[ony3000]

I modified the code like this and did pnpm run build && pnpm run test:

• src/index.ts

   const typescript = getPackageInfoSync('typescript');
  
  +const tailwindFunctions = [
  +  'classed',
  +  'clsx',
  +  'cva',
  +  'cx',
  +  'tv',
  +  'tw',
  +  'twc',
  +  'twi',
  +  'twj',
  +  'twJoin',
  +  'twMerge',
  +];
  +
   export default defineConfig({

  +    'prettier-plugin-tailwindcss',
  +    'prettier-plugin-classnames',
  +    'prettier-plugin-merge',
     ],
  +
  +  customAttributes: ['class'],
  +
  +  customFunctions: tailwindFunctions,
  +
  +  tailwindAttributes: ['tw'],
  +
  +  tailwindFunctions,
   });

• test/index.test.ts

   it('tailwindcss classes should sorted', async () => {
  -  const result = await format('tw.tsx', '@u3u/prettier-config/tw');
  +  const result = await format('tw.tsx', '@u3u/prettier-config');
  
     expect(result).toMatchSnapshot();
   });

[BrandenXia]

I tried to add it, but the before test snapshot failed and the class name did not have a line break.

According to the usage instructions of [`prettier-plugin-tailwindcss`](https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins), it needs to be placed at the end of the plugins. When I [add](https://github.com/u3u/prettier-config/blob/09ab8f2d5bafb1fac23f48056a33bad4ff5c76eb/src/tw.ts#L21-L22) the `prettier-plugin-classnames` or `prettier-plugin-merge` any plugin, the test will fail.

You can reproduce it by cloning this repository, switching to the feat/prettier-plugin-classnames branch, and running npx vitest run.

I configure prettier like this and it seems to work:

  "plugins": [
    ...
    "prettier-plugin-tailwindcss",
    "prettier-plugin-classnames",
    "prettier-plugin-merge"
  ],

[u3u]

I tried again and removed require.resolve. I found that the configuration file @u3u/prettier-config/tw covered in the test did not take effect. It seems that prettier-plugin-merge only reads the user's .prettierrc file. I modified the content of the .prettierrc file to "@u3u/prettier-config/tw" and it worked.

However, I discovered a new problem: when using the prettier-vscode extension, automatic formatting hangs indefinitely when saving, and formatting does not work either.

Running the prettier command directly is no problem.

If using pnpm, the plugin internally automatically handles the plugin's usage with require.resolve. I suspect this is where the problem lies.

Running logs in prettier-vscode:

["INFO" - 1:11:30 PM] Extension Name: esbenp.prettier-vscode.
["INFO" - 1:11:30 PM] Extension Version: 10.1.0.
["INFO" - 1:11:30 PM] Using config file at '/Users/qwq/.prettierrc.js'
["INFO" - 1:11:37 PM] Formatting file:///Users/qwq/dev/u3u/prettier-config/test.tsx
["INFO" - 1:11:37 PM] Using config file at '/Users/qwq/dev/u3u/prettier-config/.prettierrc'
["INFO" - 1:11:37 PM] PrettierInstance:
{
  "modulePath": "/Users/qwq/dev/u3u/prettier-config/node_modules/prettier/index.cjs",
  "importResolver": {},
  "callMethodResolvers": {},
  "currentCallMethodId": 2,
  "version": "3.1.1"
}
["INFO" - 1:11:37 PM] Using ignore file (if present) at /Users/qwq/dev/u3u/prettier-config/.prettierignore
["INFO" - 1:11:38 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 1:11:38 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 1:11:38 PM] Prettier Options:
{
  "filepath": "/Users/qwq/dev/u3u/prettier-config/test.tsx",
  "parser": "typescript",
  "endOfLine": "lf",
  "printWidth": 120,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "importOrderTypeScriptVersion": "5.3.3",
  "iniSpaceAroundEquals": true,
  "jsonRecursiveSort": true,
  "plugins": [
    "/Users/qwq/dev/u3u/prettier-config/node_modules/.pnpm/@ianvs+prettier-plugin-sort-imports@4.1.1_prettier@3.1.1/node_modules/@ianvs/prettier-plugin-sort-imports/lib/src/index.js",
    "/Users/qwq/dev/u3u/prettier-config/node_modules/.pnpm/prettier-plugin-sort-json@3.1.0_prettier@3.1.1/node_modules/prettier-plugin-sort-json/dist/index.js",
    "/Users/qwq/dev/u3u/prettier-config/node_modules/.pnpm/prettier-plugin-packagejson@2.4.9_prettier@3.1.1/node_modules/prettier-plugin-packagejson/lib/index.js",
    "/Users/qwq/dev/u3u/prettier-config/node_modules/.pnpm/prettier-plugin-jsdoc@1.3.0_prettier@3.1.1/node_modules/prettier-plugin-jsdoc/dist/index.js",
    "/Users/qwq/dev/u3u/prettier-config/node_modules/.pnpm/prettier-plugin-nginx@1.0.3/node_modules/prettier-plugin-nginx/dist/index.js",
    "/Users/qwq/dev/u3u/prettier-config/node_modules/.pnpm/prettier-plugin-ini@1.1.0/node_modules/prettier-plugin-ini/dist/plugin.js",
    "/Users/qwq/dev/u3u/prettier-config/node_modules/.pnpm/prettier-plugin-sh@0.13.1_prettier@3.1.1/node_modules/prettier-plugin-sh/lib/index.cjs",
    "/Users/qwq/dev/u3u/prettier-config/node_modules/.pnpm/prettier-plugin-sql@0.18.0_prettier@3.1.1/node_modules/prettier-plugin-sql/lib/index.cjs",
    "/Users/qwq/dev/u3u/prettier-config/node_modules/.pnpm/@prettier+plugin-xml@3.2.2_prettier@3.1.1/node_modules/@prettier/plugin-xml/src/plugin.js",
    "/Users/qwq/dev/u3u/prettier-config/node_modules/.pnpm/@prettier+plugin-php@0.22.1_prettier@3.1.1/node_modules/@prettier/plugin-php/src/index.mjs",
    "/Users/qwq/dev/u3u/prettier-config/node_modules/.pnpm/@shufo+prettier-plugin-blade@1.13.4/node_modules/@shufo/prettier-plugin-blade/dist/index.cjs",
    "/Users/qwq/dev/u3u/prettier-config/node_modules/.pnpm/prettier-plugin-prisma@5.0.0_prettier@3.1.1/node_modules/prettier-plugin-prisma/lib/plugin.js",
    "/Users/qwq/dev/u3u/prettier-config/node_modules/.pnpm/prettier-plugin-astro@0.12.3/node_modules/prettier-plugin-astro/dist/index.js",
    "/Users/qwq/dev/u3u/prettier-config/node_modules/.pnpm/prettier-plugin-tailwindcss@0.5.11_@ianvs+prettier-plugin-sort-imports@4.1.1_prettier-plugin-_3odhp74mlrhmj3dtk5rwukzxca/node_modules/prettier-plugin-tailwindcss/dist/index.mjs",
    "/Users/qwq/dev/u3u/prettier-config/node_modules/.pnpm/prettier-plugin-classnames@0.3.2_@prettier+sync@0.3.0_prettier@3.1.1/node_modules/prettier-plugin-classnames/dist/index.js",
    "/Users/qwq/dev/u3u/prettier-config/node_modules/.pnpm/prettier-plugin-merge@0.4.0_prettier@3.1.1/node_modules/prettier-plugin-merge/dist/index.js"
  ],
  "customAttributes": [
    "class"
  ],
  "customFunctions": [
    "classed",
    "clsx",
    "cva",
    "cx",
    "tv",
    "tw",
    "twc",
    "twi",
    "twj",
    "twJoin",
    "twMerge"
  ],
  "tailwindAttributes": [
    "tw"
  ],
  "tailwindFunctions": [
    "classed",
    "clsx",
    "cva",
    "cx",
    "tv",
    "tw",
    "twc",
    "twi",
    "twj",
    "twJoin",
    "twMerge"
  ]
}
["INFO" - 1:11:38 PM] Formatting completed in 981ms.
["INFO" - 1:12:20 PM] Formatting file:///Users/qwq/dev/u3u/prettier-config/test.tsx

[u3u]

According to this PR, it indicates that when using pnpm, the path of the plugin must be passed.
prettier/prettier-vscode#2566
https://github.com/prettier/prettier-vscode/blob/main/src/ModuleLoader.ts

[ony3000]

I investigated some cases related to the prettier-vscode extension, and confirmed that vscode issue can be resolved in one of the following ways.

• Downgrade the version of prettier to 2.x, and downgrade other plugins to compatible versions.
• Fix prettier-plugin-merge.

I have confirmed that this is not a bug in this plugin, so I will close the issue.

[u3u]

Well, due to the nested ternary improvement in Prettier 3.1, I will no longer use version 2.x. Thank you for your investigation! I hope prettier-plugin-merge can make improvements!

[ony3000]

@u3u Hey, the next version of prettier-plugin-merge has been released, check it out.

[u3u]

Wow! Thank you for your excellent work!