Disable @import tags for stylesheets while in development on Drupal.

Starting with Drupal 7, before enabling CSS aggregation, @import statements are used to mitigate the stylesheet limitations of IE 6-9.

In short:

  • A sheet may contain up to 4095 rules
  • A sheet may @import up to 31 sheets
  • @import nesting supports up to 4 levels deep

31 certainly sounds like a lot of stylesheets. But in modern, modular CMS's such as Drupal, the number of stylesheets can easily surpass this.

Inserting stylesheets is actually a bad idea [LINK], since they block the download of the remaining content. However, once aggregation is enabled, the number served to the client drops to about 3: [INSERT LINK FOR GROUPINGS], and switches to the preferred link syntax.

Recently I was testing some javascript plugins, and two of them were not working. After delving into the code, it was because they weren't setup to parse files loaded by @import's. Disabling this without hacking core is possible, and actually pretty uninvolved:

View Gist on GitHub

<?php

/**
 *  Implementation of hook_css_alter().
 */
function hook_css_alter(&$css) {
  // For each item, don't allow preprocessing to disable @import.
  foreach ($css as &$item) {
    if (file_exists($item['data'])) {
      $item['preprocess'] = FALSE;
    }
  }
}

Note: be sure to disable this once moving into production.