Some themes "support" modules in the sense that they supply CSS that overrides modules' CSS. However, this CSS will always be added to the optimized CSS file unless the themer comments out individual stylesheets in the theme's .info file.

What if we added conditional stylesheets for modules? For example, if a theme supports Views, it should only add its views.css when the module actually exists.

This could be done by using the following syntax in .info (Warning: Not vetted for feasibility!):

stylesheets[all][] = theme.css
stylesheets[print][] = print.css

stylesheets[all][views][] = views.css
stylesheets[print][views][] = views.css

The pattern would be:

[media][] // Add stylesheet for all "media"
[media][module][] // Add stylesheet for all "media" only when "module" is enabled.

Since the theme registry is cleared when a module is enabled, this shouldn't introduce any "did you clear the cache"-style problems.

Comments

Todd Nienkerk’s picture

Sorry -- the example syntax above should read:

stylesheets[all][] = theme.css
stylesheets[print][] = print.css

stylesheets[all][views][] = views.css
stylesheets[print][views][] = views-print.css
Todd Nienkerk’s picture

Todd Nienkerk’s picture

Alternatively, we could take a cue from Conditional Stylesheets and handle it this way:

stylesheets-module[views][all][] = views.css
stylesheets-module[views][print][] = views-print.css
mortendk’s picture

+1
could help us to keep some sanity in the css files

Jacine’s picture

Status: Active » Closed (duplicate)

Hey guys, this is a duplicate. We tried like hell to get it into D7 and failed. The patch needs to be rerolled for D8, but it was working and RTBC for D7. Would love to see your feedback there. ;)

#575298: Provide non-PHP way to reliably override CSS

Todd Nienkerk’s picture

@Jacine: I'm not sure this is a duplicate. What I'm suggesting is adding stylesheets based on whether a module is enabled -- not overriding the stylesheets provided by a module. The issue you linked to appears to replace CSS files rather than adding another CSS file based on the presence of a module. (Please correct me if I'm wrong on this.)

The use case is this: A theme can "support" a module by modifying the styling of its output. In the example of the Flag module, a theme that "supports" Flag would slightly modify its output -- changing the throbber, turning the link text into something that looks like a button, etc. -- but not completely replace the Flag module's CSS. In other words, I want to keep the module's flag.css file and add my own flag-mytheme.css file on top of it, but only when if the Flag module exists.

Completely replacing the Flag module's CSS -- i.e., copying most of the module's CSS file -- when only a few tweaks are necessary is overkill and places a huge burden on the theme maintainer to sync her CSS with the module's each time the module changes.

Jacine’s picture

Status: Closed (duplicate) » Active

Oh, I see. Yeah, that's different from the issue I linked. Carry on. ;)

Todd Nienkerk’s picture

Since this overlaps with some existing issues, I created a single issue to coordinate efforts: #1214006: Unified solution to override/remove/amend and conditional stylesheets in a theme's .info file.

sun’s picture

Title: Themes need stylesheet conditionality » Allow themes to load need stylesheet conditionality

We briefly discussed this in #575298-16: Provide non-PHP way to reliably override CSS and following comments.

Per-module doesn't make sense to me, since a module can have X different CSS files loaded in different locations, and your intention is to additionally load a file from your theme when a particular one of those is loaded.

So this rather maps to the stylesheets-additional[] that has been suggested.

sun’s picture

Title: Allow themes to load need stylesheet conditionality » Allow themes to load an additional CSS file when a certain one is loaded

err, my original intention was to also improve the issue title, but got sidetracked. Sorry. ;)

Todd Nienkerk’s picture

Title: Allow themes to load an additional CSS file when a certain one is loaded » Allow themes to load stylesheets conditionally if a certain module exists

@sun: My intention is not necessarily to load an additional stylesheet if a certain stylesheet has already been added. While I can understand the need for specificity when overriding CSS files, the idea here is to add stylesheets when functionality (in the form of modules) is detected on the site. If the Flag module is enabled, the theme will automatically add its own CSS to enhance was the Flag module already provides. If Flag is disabled, the theme will not add that CSS.

I agree that what I'm suggesting could be accomplished using the detection of specific CSS files rather than the module that supplied it, but I feel that approach requires more maintenance on the part of the themer, who would need to update the .info file if the module changed the name of its stylesheets, split them into multiple files, or merged them into fewer files. If this doesn't happen very often -- and if it's not too difficult to figure out which CSS file triggers the addition of another stylesheet -- then I think the stylesheets-additional[] property would be fine.

sun’s picture

@Todd Nienkerk: While I understand your idea, that doesn't make sense. Just because module Foo is enabled doesn't mean that it's actually doing something on one or all pages. Thus, you'd potentially be loading lots of CSS for modules on all pages that don't even do anything on a page.

This can be compared to loading all JS and CSS files of the entire jQuery UI library, just because something is enabled.

In other words: you quickly end up with having your site visitors load 1 MB of JavaScript and a similarly sized amount of CSS for... well, um, nothing.

Todd Nienkerk’s picture

Title: Allow themes to load stylesheets conditionally if a certain module exists » Allow themes to load stylesheets conditionally if a certain CSS file exists

@sun: Ah, I see. The issue of a module not necessarily being used on a page hadn't occurred to me. In that case, it makes sense to test for the presence of a module using its CSS file(s) rather than module_exists().

lauriii’s picture

Component: theme system » asset library system
Issue summary: View changes
Status: Active » Closed (won't fix)

I think with all the work we've done for the libraries this should be achievable pretty easily by using library-extend or override. You can also add new library and attach it for a render array inside a preprocess function, so that it will be loaded conditionally only when that specific render array is being printed.