StyleConfiguration.shadowDom shared styles not working with Parcel projects

[pesaarel]

🐛 Bug Report

HTML elements not styled with shadowDOM shared styles when project uses parcel.

🤔 Expected Behavior

HTML elements in every view are styled with shared styles even when project uses shadowDOM and Parcel.

😯 Current Behavior

1. Created aurelia project with 'npx makes aurelia' with parcel, typescript and shadowDOM.
2. Installed bootstrap with npm i bootstrap
3. Added link to bootstrap 5.2.x css at index.html
4. imported css at main.ts and added bootstrap to sharedStyles of StyleConfiguration.shadowDOM().
5. Added some elements with bootstrap style classes to index.html and my-app.html

-> Elements at index.html are styled of course, but elements at my-app.html aren't.
No errors in developer console

However shared styles seem to work when project is created with otherwise same configuration but select Webpack instead of Parcel.

💁 Possible Solution

🔦 Context

I wan't to use Parcel and I'm unable to style elements with shared styles.
Workaround is to import all needed css files to views (or use Webpack instead of Parcel).

💻 Code Sample

Repo with Parcel:
https://github.com/pesaarel/dummy-aurelia2-app-parcel.git
Result:

Repo with Webpack:
https://github.com/pesaarel/dummy-aurelia2-app-webpack.git
Result:

🌍 Your Environment

Software	Version(s)
Aurelia	v2.0-beta
Language
Browser	Vivaldi
Bundler	Parcel
Operating System	Windows
NPM/Node/Yarn

[brandonseydel]

@pesaarel Thanks for the report. I will look into this.

[Lichtjaeger]

I have the same problem.
Has anyone found a solution yet?

[Lichtjaeger]

It looks like it breaks with parcel V2.8.0. Where import shared from './styles/main.css' doesn't return the CSS string anymore but an empty object.

I've downgraded to parcel V2.7.0. That solved the problem for now.

[pesaarel]

Okay, good to know! I'll try that when I have time.