How to provide theme override for stylesheet conditionally included by a module

Question

I have a module that conditionally includes a stylesheets using #attached on a render array it outputs. (By conditionally I'm meaning that sometimes the module adds the attached css, sometimes not; I'm not referring to conditional stylesheets as in "is it IE9".)

The render array the module outputs includes the following:

$output['#attached'] = array(
  'css' => array(
    'tiles-styles.css' => array(
      'data' => drupal_get_path('module', 'mymodule') . '/css/tiles-styles.css',
      'type' => 'file',
    ),
  ),
);

In my theme, I have css under a css/ directory. I want to override both these, but only when they are required.

It seems that by adding

css[tiles-styles.css][data] = 'tiles-styles.css'

to my theme.info file I can get my file included, and it overrides the module-provided one. However, doing this also includes this stylesheet on every page load, which is unnecessary.

Is there a way to override the stylesheet but only if the stylesheet was included in the first place?

Answer 1

You can do this by implementing hook_css_alter as follows:

/**
 * Implements hook_css_alter().
 */
function mytheme_css_alter(&$css) {
  if (isset($css['tiles-styles.css'])) {
    $css['tiles-styles.css']['data'] = drupal_get_path('theme', 'mytheme')
                                       . '/css/tiles-styles.css';
  }
}