The order of CSS in a HTML page is important for overriding styles.
Its a common practice to define an overall style and have some different layouts which override some specific parts of it.
When using multiple nested Layout components or Components which extend each other, the @Import annotation does not help here, because it does not let you order the styles. The default order seems to go from most-specific to the outermost (most generic) component. So the most generic component's CSS is "stronger" than the most specific one.
Currently I see 4 workarounds:
- Place the @Import on different render methods. But that's limited by the amount of render methods (and some of those might be called very often, some might never be called).
- manually place the stylesheets in the template (not recommended because of possible iterations).
- Create a MarkupWriterFilter which manipulates the DOM
- Create a mixin or an uppermost Layout component which handles the CSS.
- Add some way to priorize/order the stylesheets. Maybe similar to the OrderedConfiguration?