parcel
parcel copied to clipboard
Parcel stops watching after "Build failed"
🐛 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 |
Usually, Postcss gives back a list of dependencies to watch for changes https://github.com/parcel-bundler/parcel/blob/ce58970eb70cc8c8dcf9cd6e6506761021e0cc7e/packages/transformers/postcss/src/PostCSSTransformer.js#L217-L219
but if the preceding call thrown an exception, then that never happens https://github.com/parcel-bundler/parcel/blob/ce58970eb70cc8c8dcf9cd6e6506761021e0cc7e/packages/transformers/postcss/src/PostCSSTransformer.js#L208-L211
This is similar to https://github.com/parcel-bundler/parcel/issues/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?
This also happens with Sass. Thanks for the workaround with editing the main file.