CSS error with ShadowDom

1

I created a new project with both Vite and Webpack with the latest version beta 22.

Vite crashes with the following code:

import shared from ‘./_shared/shared.css’;

Aurelia
.register(StyleConfiguration.shadowDOM({
sharedStyles: [shared]
}))
Uncaught SyntaxError: The requested module ‘/src/_shared/shared.css’ does not provide an export named ‘default’

With the above code, Webpack does not crash. In the shared.css file, there are styles for classes and tags. But only the style for tags works, the classes do not.

2

I tried with the project created via npx and webpack.
The welcome-page has code:

<h1 class="title">${message}</h1>

And create a welcome-page.css with code:
h1{
color: orange;
}
.title{
background-color: #F4F4F4;
color: red !important;
}
The app displays incorrectly h1 is still orange instead of background color #F4F4F4 and text is red

3

I think I had the same problem, could you try making the following changes to the webpack.config.js file:

image
image602×490 13.4 KB

1 Like
4

Now I temporarily use Vite and import css directly into each html file.

5

I am going to address this in the docs, but I’ve found a solution that works around this. But you can do something like this and it fixes the issue too:

import sharedStyles from "./shared.css?inline";

// Convert the CSS string to CSSStyleSheet
const sheet = new CSSStyleSheet();
sheet.replaceSync(sharedStyles);

Aurelia
    .register(StyleConfiguration.shadowDOM({
        sharedStyles: [sheet]
     }))

Importing in the HTML also works, but definitely not ideal.