cssdrupaldrupal-7drupal-modulesopen-atrium

Drupal is adding phantom stylesheet references to my head


I have Drupal 7 Open Atrium 2 site hosted on Pantheon. While doing some performance profiling, I looked into the Inspector, in the Networks tab, and saw that I had a 404, as well as a loading of a CSS file that was taking a long time. This css file was essentially a link to the domain. I don't understand where or why Drupal is adding these "phantom" stylesheet links to the domain.

It seems like, there is an array of stylesheets somewhere, and Drupal is grabbing the final blank item in the array and adding it as a stylesheet link. In one case, it is giving a relative link "/" + "" + random characters for css caching. In the other case, it is appending the blank item in the array to the site domain mysite.pantheon.com + "" + random characters.

UPDATE: [ I checked the $css variable through my html.tpl.php file (print_r($css)), and discovered I do have one of the phantom listings in there:

[http://mysite.gotpantheon.com/] => Array
    (
        [type] => external
        [group] => 100
        [every_page] => 1
        [weight] => 999.009
        [media] => all
        [preprocess] => 1
        [data] => http://mysite.gotpantheon.com/
        [browsers] => Array
            (
                [IE] => 1
                [!IE] => 1
            )

    )

How can I check where this css item is being added? It's odd that this css "file" is listed with an absolute url, while all the others are relative urls (ie. module/example/style.css)

]

Here are the two phantom links in my html head:

Showing up right after my final css file declared in my themes .info file. (note that it is outside of the "style" tag.)

<style>
    ...
    ...
    @import url("http://my-site.gotpantheon.com/sites/all/themes/oak_intranet/css/oak_intranet.css?n5w7ml");
</style>
<link type="text/css" rel="stylesheet" href="?n5w7ml" media="all" />

Showing up randomly after an IE stylesheet that came as part of the install.

<!--[if lte IE 8]>
<link type="text/css" rel="stylesheet" href="http://mysite.gotpantheon.com/profiles/openatrium/modules/panopoly/panopoly_core/css/panopoly-fonts-ie-open-sans-bold-italic.css?n5w7ml" media="all" />
<![endif]-->
<link type="text/css" rel="stylesheet" href="http://mysite.gotpantheon.com/" media="all" />

For a while, I was stuck on the ?n5w7ml characters appearing, and there is a good answer for why that is happening here: Weird characters at the end of src/href attributes in head tag

MORE INFO:

Here is where the IE styles get added in panopoly_core.module. I thought maybe there would be something in here that is registering an extra css file (a blank or something) and just appending it to the base url. Not seeing it though.

/**
 * Implemenets hook_page_build().
 */
function panopoly_core_page_build(&$page) {
  // This fixes a bug that causes @font-face declarations to break in IE6-8.
  // @see http://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-...
  $path = drupal_get_path('module', 'panopoly_core');
  drupal_add_css($path . '/css/panopoly-fonts-ie-open-sans.css', array('group' => CSS_THEME, 'every_page' => TRUE, 'browsers' => array('IE' => 'lte IE 8', '!IE' => FALSE), 'preprocess' => FALSE));
  drupal_add_css($path . '/css/panopoly-fonts-ie-open-sans-bold.css', array('group' => CSS_THEME, 'every_page' => TRUE, 'browsers' => array('IE' => 'lte IE 8', '!IE' => FALSE), 'preprocess' => FALSE));
  drupal_add_css($path . '/css/panopoly-fonts-ie-open-sans-italic.css', array('group' => CSS_THEME, 'every_page' => TRUE, 'browsers' => array('IE' => 'lte IE 8', '!IE' => FALSE), 'preprocess' => FALSE));
  drupal_add_css($path . '/css/panopoly-fonts-ie-open-sans-bold-italic.css', array('group' => CSS_THEME, 'every_page' => TRUE, 'browsers' => array('IE' => 'lte IE 8', '!IE' => FALSE), 'preprocess' => FALSE));
}

UPDATE:

So, I noted that in my css array, there were only two stylesheets that were external, one being my phantom domain stylesheet instance. I took my site to my localhost and searched for the term "external" in all the core files. Though there were many listed, I am lucky that the first one was the colorizer.module. There is a drupal_add_css on line 54. I added a 'test' => 'test' item to the array there and reloaded my site. My phantom css file in the print($css) array now has that test item. Also, it is the only one. For some reason, either colorizer's css file is not being added and a blank is added instead?

[http://mysite.loc:8888/] => Array
    (
        [type] => external
        [group] => 100
        [every_page] => 1
        [weight] => 999.008
        [test] => test
        [media] => all
        [preprocess] => 1
        [data] => http://mysite.loc:8888/
        [browsers] => Array
            (
                [IE] => 1
                [!IE] => 1
            )

    )

Solution

  • First Phantom: The Colorizer module was adding css files, even if there were none to create. Patch was committed on this issue post: https://drupal.org/node/2272845

    Second Phantom: I read on here (https://www.drupal.org/node/171209) that external css files don't go into the [my-theme].info file. Checked and sure enough I had an external link like so:

    ; CSS - General
    stylesheets[all][]   = css/screen.css
    stylesheets[all][]   = css/oak_intranet.css
    stylesheets[all][]   = http://fonts.googleapis.com/css?family=Lato
    

    That last external link was displaying in my rendered html like so:

    <link type="text/css" rel="stylesheet" href="&amp;n8223b" media="all" />
    

    I just had to delete it, save the file, and clear my cache.