Add support for dirDependencies for JIT support

[splitinfinities]

I can't quite currently find the right path to take to pass this back out from the postcss plugin's transform function. In order to helop enable JIT for Stencil components, we need to determine how to pass this around. I may be off base as well, I need to do more research.

[wagerfield]

@splitinfinities chiming in here because I too would like to see support for Tailwind's JIT compiler.

After some some digging, this is what I've learned:

1. The postCssResults.messages array in Stencil's PostCSS plugin returns messages of different type that was implemented in PostCSS following this issue thread.
2. The type: "dir-dependency" message has dir and glob properties that should be used by Stencil's dev server to watch and rebuild the CSS from a dir + glob alongside the type: "dependency" files.
3. Searching for dependencies in the Stencil core repo returns a lot of results but I believe it is the global-styles.ts file that holds the key since it appears to be the only file in Stencil's source that reads from the transformResults.dependencies—but I could be wrong!

In the code block of global-styles.ts that I linked to above you can see that compilerCtx.addWatchFile(dep) is being called for each of the transformResults.dependencies that are being prepared by Stencil's PostCSS plugin (and other plugins I presume).

What I believe needs to be done is a) add the dir-dependency message data to the transformResults and b) have Stencil watch and rebuild the CSS when any of those dir + glob dependency files change.

After some digging I discovered that the compilerCtx also has a compilerCtx.addWatchDir(dir, recursive) method that could be used by the global-styles.ts file. However it's not clear to me whether or not Stencil supports watching files using a glob—I don't believe it does. The problem with watching an entire dir recursively is that it's obviously not all that efficient and will trigger rebuilds if files change that don't match the globs in the TW config purge (renamed to content in TW v3).

For example a typical purge/content glob array in tailwind.config.js would look something like this:

module.exports = {
  purge: ["src/**/*.html", "src/**/*.tsx", "src/**/*.css"]
}

Since all of the globs are within the src directory, the dir values for each of the 3 dir-dependency messages from PostCSS have the same value path, so even if we did use the addWatchDir(dir, recursive) method, it'd run for every file change in the src dir—which might not be too bad—it's just not the most precise solution.

The solution is therefore to figure out how to watch for file changes using the dir + glob from each of PostCSS' dir-dependency messages—but again, I'm not sure if Stencil's compiler build context supports this—from what I can see I don't believe it does.

---

As the first step the dir-dependency message data needs to be added to transformResults —which I can see you have already added some pseudo code for. There are 3 approaches that could be taken here:

1. Update the transformResults.dependencies interface from string[] to an array of objects similar to PostCSS' messages eg.

type TransformResultsDependency = {
  type: "dependency"
  file: string
} | {
  type: "dev-dependency"
  dir: string
  glob: string
}

2. Add a new devDependencies property to the transformResults with the { dir: string, glob: string } objects from PostCSS' messages
3. Expand/resolve the dir-dependency globs into file paths and push them onto the transformResults.dependencies eg. const files = glob.sync(resolve(msg.dir, msg.glob)) (for each dir-dependency message)

...as for what Stencil then does with this new dir/glob data—I'm not sure of the exact implementation, but ultimately it needs to watch and rebuild the CSS from these dir/globs.

Hope that's helpful and I hope you're able to implement a solution soon because I'd love to have JIT support for TW!

[dtaalbers]

@splitinfinities can I help with something to speed things up? I'd love to have official support for the Tailwind's JIT engine!

[LuckeeDev]

I'm struggling to set up a Stencil + Tailwind project too! Is there any update on this?

[malarahfelipe]

There's a direct call on Tailwind's doc for this issue Do you guys have any updates on this one? @splitinfinities @manucorporat @adamdbradley

[glenntws]

Edit: The "dependency" and "dirDependency" support doesn't help with this problem. Stencil makes the correct calls to PostCss for every file, but the error lies in using a cached version of the CSS, that - if not changed by the user - already was parsed by tailwindcss etc. and results in bad second parsing when using new options.

My pull request #42 adds an option as a workaround, although you can read over there, that this solution probably has some unwanted side effects.