Now another question that is also related to the S...

# compose-web

[MrPowerGamerBR]

Now another question that is also related to the Style DSL: How do you organize your Stylesheets?

Having everything in a single stylesheet makes everything look/feel messy, in SASS what I like doing is using @import statements to split the stylesheets in different files (so I could split stuff in files like layout.scss, animations.scss , so on and so forth), but I'm not sure how I could do something similar in Compose Web.

Inline Styles is maybe the proper way to keep everything organized (keep the style in the Composable component, yay!) but then you aren't able to use pseudo classes like hover , no keyframes, etc.

Another alternative that I've found is having multiple stylesheets objects and using Style(StylesheetObjectHere) , but then multiple <style> tags are created (but maybe that isn't a huuuuge issue?). Using extension functions to split up isn't a solution because then you can't reference the style in the classes function.

[Akif Abasov [JB]]

There’s issue to implement @import. Inline styles isn’t good solution because of browser performance.
There will be another convenient solution, but work in progress. Until it’s done - i recommend you to have global stylesheet + stylesheets per component with global stylesheet as a parent(there’s option in stylesheet constructor), so you don’t need to instantiate it separately as Style(ChildStyleSheet)