JIT not working with Parcel V2

[HappyTiptoe]

What version of @tailwindcss/jit are you using?

v0.1.5

What version of Node.js are you using?

v15.11.0

What browser are you using?

Firefox, but I don't think that matters

What operating system are you using?

Fedora 33 (Linux)

Reproduction repository

https://github.com/ebxn/jit-repro
https://www.youtube.com/watch?v=dQw4w9WgXcQ

Here's my postcss.config.js:

// unconventional, but it's done like this due to in-house 
// auto-gen tooling
const autoprefixer = require('autoprefixer')
const tailwindcss = require('@tailwindcss/jit')

const plugins = [autoprefixer, tailwindcss]

module.exports = { plugins }

It will generate any classes currently present in the HTML files on an initial run of parcel serve, but won't generate any new ones when added to the HTML

Setting TAILWIND_MODE=watch has no effect either.

[mischnic]

This is not (mainly) caused by the fact that Parcel doesn't watch files outside of the project root, because setting TAILWIND_TOUCH_DIR="$PWD/twjit-cache does't work either.

TAILWIND_DISABLE_TOUCH=true outright crashes because { type: 'dependency', file } has historically been for files, not directories (though Parcel doesn't support context-dependency yet anyway)

[adamwathan]

TAILWIND_DISABLE_TOUCH is an experimental option that is known to currently only work with webpack, we don't expect that to work with Parcel currently. This is mentioned in the release notes where that feature was added and is why it is not documented.

Do you have any recommendations on where we could create a temporary file that Parcel can watch without worrying about people accidentally committing it to their git history?

[mischnic]

Do you have any recommendations on where we could create a temporary file that Parcel can watch without worrying about people accidentally committing it to their git history?

I suppose node_modules/.cache/${pkgname} is a popular location, for example @babel/register stores its cache there as well.

https://github.com/babel/babel/blob/86c44ba62e6787abbc9fcb712dcde3483d0d20b0/packages/babel-register/src/cache.js#L7-L8

(But as I've said, there is still some other problem preventing that from working. I'm not sure yet if that's easy to fix)

[adamwathan]

I've tried to distill things down to an absolute minimal reproduction and in my testing Parcel 2 doesn't seem to respect PostCSS dependency messages which I think is the root of the problem:

https://github.com/adamwathan/parcel-2-postcss-dependency-bug

Will try dig in to Parcel source and see if there's a fix we can PR.

Edit: I've updated the reproduction repo to the Parcel nightly build which works a bit better, but still doesn't work properly. Changes to dependencies are acknowledged at first, but as soon as a dependency is saved without the contents changing, any future changes are ignored.

[devongovett]

I think there are two issues here:

1. Tailwind writes files outside the project root, in the user's home directory. Parcel does not currently watch outside the project root. As @mischnic suggested, perhaps you could write to a dir inside node_modules which is usually ignored in git. A bunch of tools take that approach. I've managed to work around this issue by setting the TAILWIND_TOUCH_DIR environment variable, but it would be better if it was automatic.
2. The JIT plugin is non-deterministic which breaks caching. Since it only touches a file without changing it, Parcel has no way of knowing that it should rebuild. It's like if a user hit save in their editor without changing the file - there's generally no need to rebuild in that case. It's possible to work around this with the --no-cache flag but this is not great. I would suggest writing the current timestamp to the file instead if you need to force a rebuild. Or, if possible, some kind of hash based on the classes extracted from the templates would be even better. That way we'd actually only rebuild when necessary as opposed to any time a template changes, even if no tailwind classes were added/removed.

[devongovett]

@adamwathan I'm happy to send a PR for these changes. Let me know if they make sense to you.

(I'm using Tailwind on the new landing page I'm working on for Parcel 2, and really enjoying it btw. 😍)

[codypl]

Is this issue fixed in the last Tailwind 2.2.0 release ?

[adamwathan]

Parcel has recently added support for the necessary APIs, can see the PR here:

parcel-bundler/parcel#6299

So in theory things should work in the nightly build, but I think the nightly builds are a bit unstable in general at the moment in our testing.

If it's not working for you I'd recommend just using our CLI tool to compile your CSS separately, and import the compiled CSS into Parcel, example here:

https://tailwindcss.com/docs/just-in-time-mode#it-just-doesn-t-seem-to-work-properly

It should all be working nicely by the time Parcel 2 is properly released, but I don't expect Parcel 1 will be updated to support the PostCSS APIs necessary for things to integrate properly.

Going to close as this is actually resolved in the sense that the fix has been merged into Parcel, just need to wait for a stable release 👍🏻