Hashing Dynamic CSS

[tsotimus]

Currently we are unable to hash css that gets injected at runtime.

Some common libraries that use this way of getting CSS into the DOM are styled-components, MUI and emotion.

Possible solutions to this issue could be:

• Using the AST in Vite during build time to track down this CSS and hash all of it.
• Use LinkeDOM a JSDOM alternative, to actually load the JS and CSS and then look for the CSS syntax in the DOM. This will be more accurate, however more heavy - especially when we have to account for lazy loading.
• Using strict-dynamic inside the CSP

Any other ideas are welcome!

In the mean time an interesting blog post that argues unsafe-inline for CSS is okay under specific conditions

[sbernard31]

Maybe this could also help to make possible to avoid unsafe-inline with vuetify ? see : vuetifyjs/vuetify#15973