Does not work with <style> @import url("..."); </style>

This is a great tool. However, it would be even better if it supported @import’s of stylesheets.

I realize that including stylesheets this way is not optimal, but it does get around IE’s limitation of 31 stylesheets, and is useful when in development - particularly with CMS’s that include a lot of stylesheets.

When I downloaded this tool to try it out I was working on a Drupal project, which happens to do this until you turn on CSS aggregation. But at that point it also changes the name of the CSS files and caches them.

I took a look at modifying browser-sync-client.js but it seems like it’s really only setup for altering <link> elements and ran short on time.

Thanks!

[skh-]

I have been using a similar one as mentioned by @gijsroge. Only difference is disabling @import based on the CSS aggregation setting (rather than the environment variable which isn’t part of core).

/**
 * Implements hook_css_alter().
 *
 * Disables @import CSS tags for compatibility with BrowserSync.
 */
function HOOK_css_alter(&$css) {

  // Aggregation must be disabled.
  if (!variable_get('preprocess_css')) {

    // Disable @import on each css file.
    foreach ($css as &$item) {

      // Compatibility with disabling stylesheets in theme.info (263967).
      if (file_exists($item['data'])) {
        $item['preprocess'] = FALSE;
      }
    }
  }
}

[taivu]

similar to @skh-'s temp fix , but for Drupal 8:

/**
 * Implements hook_css_alter().
 *
 * Disables @import CSS tags for compatibility with BrowserSync CSS injection while developing.
 */
function YOURTHEMENAME_css_alter(&$css) {

  // get value from settings/local.settings
  $is_css_preprocess = \Drupal::config('system.performance')->get('css')['preprocess'];

  // Aggregation must be disabled.
  if (!$is_css_preprocess) {

    // Disable @import on each css file.
    foreach ($css as &$item) {

      // Compatibility with disabling stylesheets in theme.info (263967).
      if (file_exists($item['data'])) {
        $item['preprocess'] = FALSE;
      }
    }
  }
}