Search module renders CSS after theme CSS

[orchardbot]

arechsteiner created: https://orchard.codeplex.com/workitem/19527

As described here, the CSS of the search module CSS gets rendered after the theme CSS files do, therefore taking precedence over the theme and making it hard to style the search box widget properly.

http://orchard.codeplex.com/discussions/435449

[orchardbot]

@bleroy commented:

Why don't you override the template that includes that stylesheet?

[orchardbot]

arechsteiner commented:

I've worked around this issue by using !important; in my style sheet, so I'm good for now.

Just reported the bug so it can be fixed for future generations of Orchard theme authors ;)

[orchardbot]

@Piedone commented:

I don't even know how this is possible. To include a stylesheet after the theme's from a module I had to go around the resource manager.

[orchardbot]

@sebastienros commented:

The solution is to override the template in your theme and not render the css. Then you can define the styles you want in your theme.

I think the solution is not to have the module force a css for widgets as this is what will happen and always be hard to override. Also, tags for instance have their default style defined in the theme. Maybe modules should not define styles for front-end results.

[orchardbot]

arechsteiner commented:

I think the solution is not to have the module force a css for widgets as this is what will happen and always be hard to override.

The long term solution for this is to simply always render the module css before the theme css. If this is done, then it is easy to override any module styles in the theme, if need be. As far as I can tell, this is how this was planned in the first place, and it makes sense. This module for some reason doesn't follow this standard. In my opinion this is simply a bug in the module.

Maybe modules should not define styles for front-end results.

It's necessary that modules render default css styles for their widgets, in case the theme doesn't include any styles for the widget in question. It's not possible for a theme author to include styles for all modules/widgets out there. It might be when we're talking about out of the box Orchard modules, but when you think about 3rd-party-modules, it's simply not an option. I can't style all modules and widgets that anybody has ever released or will ever release in my theme. Likewise a module author can't just go and add the required styles to all themes.

[orchardbot]

@sebastienros commented:

In my opinion this is simply a bug in the module.

Great, challenge of the day: Fix the module. By accepting the challenge you will see that there is no "bug" in the module, or should I say "the module can't be fixed" because there is nothing that can be fixed in the module.

The widget is executed at a time that the theme has already registered its CSS in the resource manager. The resource manager doesn't have the notion of positions, but dependencies, and if there is no dependencies then it's the order in which is was registered. So by this logic, if your theme is defining a dependency on the Search module, maybe it could work. But I am not even sure of that.

Maybe we could also introduce dynamic dependencies, which would let us define a dependency on another CSS without using resource manifest. Something like `Style.Include('Site.css').DependsOn('orchard-widget.css'). Or introduce positioning also in the Resource Manager, as a second level of ordering.

[orchardbot]

@Piedone commented:

"Dynamic dependencies" should work by using Script.Include("whatava").InlineDefinition = ...

[orchardbot]

arechsteiner commented:

Great, challenge of the day: Fix the module.

I'm afraid I don't know enough about MVC/Orchard to accept this challenge, but if you say the bug is not in the module, I trust you. But then: Where is the bug?

Or am I mistaking when I say that module css should by design always render before theme css for the very reason so theme authors can override widget styles?

If that is currently not the case, then I would suggest to introduce this into Orchard. If there is a mechanism to further override and customize the order of resources, all the better, but I would say standard should be 1) module css, 2) theme css.

[orchardbot]

@sebastienros commented:

@Piedone, can you provide a more complete example, or if you have an idea on how to extend the current implementation to make it easier I am also willing to integrate it.

[orchardbot]

@Piedone commented:

I'm not sure I'm following. What I mentioned is already there, you can assign a delegate to InlineDefinition and run e.g. SetDependencies() in it.

[orchardbot]

@sebastienros commented:

I will try but it's not really discoverable, maybe a shortcut would be nice, even as an extension method.

[orchardbot]

@Piedone commented:

I agree. Probably SetDependencies would be the most useful one.