Tailwind stylesheet location

[homerjam]

Hello,

It seems that this isn't quite correct/explicit enough. I've found that in a mono repo the setting is relative to the root .prettierrc file (not the one with the setting) - but maybe this is me misunderstanding :)

Thanks
James

[thecrypticace]

It is relative to the config file it's defined in (or supposed to be). If you have a project where this is somehow not the case can you please provide a reproduction?

I suspect that the .prettierrc file you're expecting to apply to your file isn't.

For an idea of how it's supposed to work, take the following structure:

my-project
├── .gitignore
├── .prettierrc
├── assets
│   └── app.css
├── package-lock.json
├── package.json
└── packages
    ├── a
    │   ├── .prettierrc
    │   ├── assets
    │   │   └── app.css
    │   ├── index.html
    │   └── package.json
    ├── b
    │   ├── .prettierrc
    │   ├── assets
    │   │   └── app.css
    │   ├── index.html
    │   └── package.json
    └── c
        ├── index.html
        └── package.json

And each .prettierrc file has exactly this content:

{
  "plugins": [
    "prettier-plugin-tailwindcss"
  ],
  "tailwindStylesheet": "./assets/app.css"
}

In this monorepo these HTML files map to these configs (closest at same level or above in the directory tree):

• ./packages/a/index.html -> ./packages/a/.prettierrc
• ./packages/b/index.html -> ./packages/b/.prettierrc
• ./packages/c/index.html -> ./.prettierrc

And, because the stylesheet paths are relative to the config they're defined in, the files map to these stylesheets:

• ./packages/a/index.html -> ./packages/a/assets/app.css
• ./packages/b/index.html -> ./packages/b/assets/app.css
• ./packages/c/index.html -> ./assets/app.css

[homerjam]

Thanks for your reply. The example structure you've given is the same structure I have but the root .prettierrc doesn't have the prettier-plugin-tailwindcss plugin — should it?

FWIW I'm using pnpm (workspaces)

[thecrypticace]

@homerjam cam you provide a reproduction?

[homerjam]

This fixed itself after a full reinstall/reload. Thanks for your help, apologies for the time wasting!

[homerjam]

Hmm this has come back again on a brand new project, repro here https://github.com/homerjam/prettier-tailwind-demo

[karianpour]

I have the same issue with .svelte files, and this is the same issue I get:

Error: ENOENT: no such file or directory, open '/mono_repo_root/src/routes/layout.css'
    at async open (node:internal/fs/promises:642:25)
    at async Module.readFile (node:internal/fs/promises:1251:14)
    at async oB (file:///mono_repo_root/my-app/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:3512:389)
    at async Object.parse (file:///mono_repo_root/my-app/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:3512:11171)
    at async parse5 (file:///mono_repo_root/my-app/node_modules/prettier/index.mjs:16420:11)
    at async coreFormat (file:///mono_repo_root/my-app/node_modules/prettier/index.mjs:16952:7)
    at async formatWithCursor (file:///mono_repo_root/my-app/node_modules/prettier/index.mjs:17172:14)
    at async Module.format2 (file:///mono_repo_root/my-app/node_modules/prettier/index.mjs:18730:25)
    at async SveltePlugin.formatDocument (/Users/karianpour/.vscode/extensions/svelte.svelte-vscode-109.12.1/node_modules/svelte-language-server/dist/src/plugins/svelte/SveltePlugin.js:165:31)
    at async PluginHost.tryExecutePlugin (/Users/karianpour/.vscode/extensions/svelte.svelte-vscode-109.12.1/node_modules/svelte-language-server/dist/src/plugins/PluginHost.js:438:20) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/mono_repo_root/src/routes/layout.css'
}

Then I tried to change the setting to make it work:

This will make Prettier to work for .svelte files, but it breaks the .ts files with this error:

Error: ENOENT: no such file or directory, open '/mono_repo_root/my-app/my-app/src/routes/layout.css'
	at async open (node:internal/fs/promises:642:25)
	at async Module.readFile (node:internal/fs/promises:1251:14)
	at async oB (file:///mono_repo_root/my-app/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:3512:389)
	at async Object.parse (file:///mono_repo_root/my-app/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:3512:11171)
	at async parse5 (file:///mono_repo_root/my-app/node_modules/prettier/index.mjs:16420:11)
	at async coreFormat (file:///mono_repo_root/my-app/node_modules/prettier/index.mjs:16952:7)
	at async formatWithCursor (file:///mono_repo_root/my-app/node_modules/prettier/index.mjs:17172:14)
	at async Module.format2 (file:///mono_repo_root/my-app/node_modules/prettier/index.mjs:18730:25)
	at async PrettierEditService.format (file:///Users/karianpour/.vscode/extensions/esbenp.prettier-vscode-12.3.0/dist/extension.js:3288:29)
	at async PrettierEditProvider.provideEdits (file:///Users/karianpour/.vscode/extensions/esbenp.prettier-vscode-12.3.0/dist/extension.js:3159:20)
	at async g3.provideDocumentFormattingEdits (file:///Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:144:149331)

I think the issue is in Svelte language server messing around with the path, and it started to happen recently.

Actually I found the issue there and made an issue, I hope some will make a PR for that.

Meanwhile you can add the following line to your already installed manguage server to make it work:
.../.vscode/extensions/svelte.svelte-vscode-109.12.1/node_modules/svelte-language-server/dist/src/plugins/svelte/SveltePlugin.js
you can find the file path in the svelte output panel

you will see the error after trying to format a svelte file, and you will see the SveltePlugin.js file, just add filepath: filePath, as shown below

        const formattedCode = await prettier.format(document.getText(), {
+           filepath: filePath,
            ...config,
            plugins: Array.from(new Set([...resolvedPlugins, ...(await getSveltePlugin(resolvedPlugins))])),
            parser: 'svelte'
        });

[karianpour]

Svelte-Language fixed the issue, in this PR the issue should be solved now.