Fix class sorting in embedded code blocks when cwd differs from project dir#452
Open
benface wants to merge 1 commit intotailwindlabs:mainfrom
Open
Fix class sorting in embedded code blocks when cwd differs from project dir#452benface wants to merge 1 commit intotailwindlabs:mainfrom
benface wants to merge 1 commit intotailwindlabs:mainfrom
Conversation
…ct dir When Prettier formats embedded code blocks (e.g. tsx inside markdown), it sets a synthetic filepath like 'dummy.tsx'. The config resolution falls back to process.cwd() which may not be the project directory (e.g. in the VS Code extension host), causing the tailwindStylesheet to resolve to the wrong path and class sorting to silently fail. This stores the last successfully resolved config directory and uses it as a fallback instead of process.cwd().
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Tailwind class sorting silently fails in embedded code blocks (e.g.
```tsxinside markdown) whenprocess.cwd()does not point to the project directory. This commonly happens in the VS Code Prettier extension, where the extension host process has a different working directory than the project.Symptoms
```tsx/```jsxcode blocks inside markdown are not sorted when formatting via VS Code```htmlcode blocks are sorted (because Prettier does not set a synthetic filepath for html embeds)npx prettier --write)Root cause
When Prettier formats an embedded
tsxcode block inside markdown, it callstextToDocwith{ parser: "typescript", filepath: "dummy.tsx" }. This synthetic relative filepath causesresolvePrettierConfigDirto:inputDir = path.dirname("dummy.tsx")→"."prettier.resolveConfigFile("dummy.tsx")which resolves relative toprocess.cwd()process.cwd()tailwindStylesheet(a relative path like"packages/react/styles/tailwind.css") against the wrong base directoryFor
htmlcode blocks, Prettier does not set a syntheticfilepath, sooptions.filepathis inherited from the parent markdown file — which is an absolute path that resolves correctly.Reproduction
Solution
Store the last successfully resolved config directory in a module-level variable and use it as a fallback when config resolution fails for embedded code blocks, instead of falling back to
process.cwd().This is safe because within a single
prettier.format()call, the parent file (e.g. the markdown file) is always parsed first — resolving the config correctly — before any embedded code blocks are formatted. The stored config directory is then available for the embedded parsers.Changes
3-line change in
src/config.ts:lastResolvedConfigDirvariablelastResolvedConfigDir ?? process.cwd()instead ofprocess.cwd()in both fallback pathsThis preserves the existing behavior when cwd is correct, and fixes the embedded code block case when it is not.