Parcel stops watching after "Build failed"

[jiv-e]

🐛 bug report

I'm using Tailwind with PostCSS and using Parcel building building and watching. In certain case the watching of files hangs.

🎛 Configuration (.babelrc, package.json, cli command)

See: https://github.com/jiv-e/parcel-tailwind-glob-watch-issue

🤔 Expected Behavior

Updating the stories/my-story/my-component.css file should trigger a watch rebuild.

😯 Current Behavior

$ parcel watch main.css --no-hmr --no-source-maps --dist-dir public

I also use posts-import-ext-glob plugin like this:

@import-glob "stories/**/*.css";

I'm using Tailwinds @apply directive. If I refer to a class that is not a defined Tailwind class like this:

Inside stories/my-story/my-component.css

.theme1 .my-class {
  @apply bg-reed;
}

... I see an error message in the console.

🚨 Build failed.

@parcel/transformer-postcss: .../my-component.css:6:3: The `bg-reed` class does not exist. If `bg-reed` is a custom 
class, make sure it is defined within a `@layer` directive.

  CssSyntaxError: .../stories/components/Accordion/Themes/theme1.css:6:3: The `bg-reed` class does not exist. If `bg-reed` is a custom class, make sure it is defined within a `@layer` directive.
      at Input.error (.../node_modules/postcss/lib/input.js:148:16)
      at AtRule.error (.../node_modules/postcss/lib/node.js:60:32)
      at processApply (.../node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:380:29)
      at .../node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:532:9
      at .../node_modules/tailwindcss/lib/processTailwindFeatures.js:57:50
      at async plugins (.../node_modules/tailwindcss/lib/plugin.js:38:17)
      at async LazyResult.runAsync (.../node_modules/postcss/lib/lazy-result.js:396:11)
      at async Object.transform (.../node_modules/@parcel/transformer-postcss/lib/PostCSSTransformer.js:287:9)
      at async Transformation.runTransformer (.../node_modules/@parcel/core/lib/Transformation.js:653:5)
      at async Transformation.runPipeline (.../node_modules/@parcel/core/lib/Transformation.js:402:36)

This is ok and expected, but changing the file again doesn't cause watch rebuild. The error somehow stops the watching of the globbed files. Editing the main.css causes a watch rebuild normally.

💁 Possible Solution

🔦 Context

I try to create a single CSS file from multiple CSS files inside a folder structure by globbing.

💻 Code Sample

https://github.com/jiv-e/parcel-tailwind-glob-watch-issue

🌍 Your Environment

Software	Version(s)
Parcel	2.8.3
Node	16.13.0
npm/Yarn	npm
Operating System	MacOS

[mischnic]

Usually, Postcss gives back a list of dependencies to watch for changes

parcel/packages/transformers/postcss/src/PostCSSTransformer.js

Lines 217 to 219 in ce58970

	for (let msg of messages) {
	if (msg.type === 'dependency') {
	asset.invalidateOnFileChange(msg.file);

but if the preceding call thrown an exception, then that never happens

parcel/packages/transformers/postcss/src/PostCSSTransformer.js

Lines 208 to 211 in ce58970

	let {messages, root} = await postcss(plugins).process(
	program,
	config.hydrated,
	);

This is similar to #7374 and this comment

---

@ai Have you heard of this problem before and is there any way to still get the dependencies if an exception was thrown?

[Artemis21]

This also happens with Sass. Thanks for the workaround with editing the main file.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.