Skip to content

PostCSS: Fix Turbopack 'one-revision-behind' bug #17554

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 4, 2025

Conversation

philipp-spiess
Copy link
Member

@philipp-spiess philipp-spiess commented Apr 4, 2025

Closes #17508

This PR fixes another issue we found that caused dev builds with Next.js and Turbopack to resolve the CSS file that was saved one revision before the latest update.

When debugging this we noticed that the PostCSS entry is called twice for every one update when changing the input CSS file directly. That was caused by the input file itself being added as a dependency so you would first get the callback that a dependency has updated (at which point we look at the file system and figure out we need a full-rebuild because the input.css file has changed) and then another callback for when the input file has updated. The problem with the second callback was that the file-system was already scanned for updates and since this includes the mtimes for the input file, we seemingly thought that the input file did not change. However, the issue is that the first callback actually came with an outdated PostCSS input AST...

We found that this problem arises when you register the input CSS as a dependency of itself. This is not expected and we actually guard against this in the PostCSS client. However, we found that the input from argument is a relative path when using Next.js with Turbopack so that check was not working as expected.

Test plan

Added the change to the repro from #17508 and it seems to work fine now.

Screen.Recording.2025-04-04.at.12.48.19.mov

Also added a unit test to ensure we document that the input file path can be a relative path.

@philipp-spiess philipp-spiess force-pushed the fix/postcss-turbopack branch from c4b7d02 to 9ea4c49 Compare April 4, 2025 11:21
@philipp-spiess philipp-spiess marked this pull request as ready for review April 4, 2025 11:21
@philipp-spiess philipp-spiess requested a review from a team as a code owner April 4, 2025 11:21
@philipp-spiess philipp-spiess merged commit e085977 into main Apr 4, 2025
7 checks passed
@philipp-spiess philipp-spiess deleted the fix/postcss-turbopack branch April 4, 2025 12:58
@andymerskin
Copy link

andymerskin commented Apr 8, 2025

I'm not sure if this is directly related to this issue, but after updating to Tailwind v4.1.3 which includes this change, I'm still not seeing changes reflected on each hot reload (but sometimes it works!), forcing me to restart my dev server for simple className changes in any context. For some reason Tailwind isn't picking up on new utilities being used. I haven't fully pinned down the cases where it's happening, but it's difficult to reproduce reliably.

Most recently, I changed the ordering inside a clsx + tailwind-merge call (cn), to change a string className, and move a className prop value at the end:

// before
<div className={cn("bg-white", className, getMyClassnames(props))} />

// after
<div className={cn("bg-black", getMyClassnames(props), className)} />

No hot reload and no update after a hard refresh, but after restarting the dev server, my change looked correct. Note that getMyClassnames(...) is returning a string of Tailwind classes.

Environment:

  • turbo 2.0.4
  • vite 4.5.6
    • @vitejs/plugin-react-swc
    • @swc/plugin-styled-components
  • react 17.x
  • tailwind 4.1.3
  • typescript 4.9.3

Overall things are working fine. If upgrading Vite or Turbo is necessary to squash some of this behavior, happy to do it, but it may be quite a lift for us depending on how smoothly that goes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Tailwind CSS Not Updating Global Styles on Latest Version
3 participants