PostCSS doesn't work with microbundle

[AdrianMrn]

What version of Tailwind CSS are you using?

3.0.13 (latest)

What build tool (or framework if it abstracts the build tool) are you using?

• postcss@8.4.5 (latest)
• microbundle@0.14.2 (latest)
• microbundle uses rollup@2.63.0 (latest)

What version of Node.js are you using?

16.13.2

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/AdrianMrn/microbundle-tailwindcss-watcher-test

Describe your issue

As per @RobinMalfait's request in this PR, we've run into an issue where, after the Tailwind watcher was removed, our stack (bundling with Microbundle) doesn't update the css automatically anymore.

Microbundle is a bundler that runs on Rollup but requires minimal configuration.

Reproduction steps:

1. Set up the (minimal) reproduction repo

git clone https://github.com/AdrianMrn/microbundle-tailwindcss-watcher-test
cd microbundle-tailwindcss-watcher-test
yarn install
yarn dev

2. Open /src/index.html in a browser & see that the included classes are built
3. Change the class of the div in index.html to e.g. bg-red-300
4. Refresh the page & see that the new class was not built

When locking tailwindcss to 3.0.8 (the last version to have TAILWIND_MODE=watch), this exact setup does work and new styles are built as expected.

[adamwathan]

Thanks for raising this! Super quick investigation makes me think rollup-plugin-postcss hasn't been updated to handle the PostCSS directory dependency API:

https://github.com/egoist/rollup-plugin-postcss/blob/a03c7bfc18b1d3275fd760d5c15030880891a9b9/src/postcss-loader.js#L144-L148

So the fix will be to make the necessary changes in that plugin. Not sure when we ourselves will get a chance to take a stab at it, but if anyone else is interested in trying to PR it to them here's some information about it:

https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#3-dependencies

[AdrianMrn]

@adamwathan Thanks for the quick reply. I just had a quick look how you handled this in Tailwind, and it looks like there's already a workaround for my specific issue:

tailwindcss/src/util/parseDependency.js

Lines 42 to 46 in 3e2a067

	// rollup-plugin-postcss does not support dir-dependency messages
	// but directories can be watched in the same way as files
	if (message.type === 'dir-dependency' && process.env.ROLLUP_WATCH === 'true') {
	message = { type: 'dependency', file: message.dir }
	}

Simply adding ROLLUP_WATCH=true to my env fixes my issue 😅

Not sure if you want to add this to the docs or whatever, so I'll leave this issue open for you to close.

EDIT: I think rollup-plugin-postcss is supposed to be reading this.meta.watchMode and do something with that, but I'm not sure what (see here).

[herrKlein]

Can confirm @AdrianMrn solution works! great, was banging my head against the wall :)

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

I took note to fix the issue upstream in the rollup-plugin-postcss, but in the meantime you can use the workaround that @AdrianMrn provided.