Inline @import to Link

Configuration

The 'Inline @import to Link' filter is enabled by specifying:

Apache:

ModPagespeedEnableFilters inline_import_to_link

Nginx:

pagespeed EnableFilters inline_import_to_link;

in the configuration file.

Description

The "Inline @import to Link" filter converts a <style> tag consisting of only @import statements into the corresponding <link> tags. This conversion does not itself result in any significant optimization, rather its value lies in that it enables optimization of the linked-to CSS files by later filters, in particular the combine_css, rewrite_css, inline_css, and extend_cache filters.

Operation

This filter inspects the contents of all <style> tags and converts the tag if all the following conditions are met:

• Either the <style> tag has no type attribute or the type attribute has the value "text/css".
• The contents comprise one or more valid @import statements, and no other statements.
• None of the imported URLs are empty.
• The <style> tag has neither an href nor a rel attribute (which would make it invalid anyway).
• If the <style> tag has a media attribute and the @import statement specifies media after the URL, then the media types listed must be the same. They do not have to be in the same order, and blank media types are ignored.

If all these conditions are met, the <style> tag and its contents are replaced with a <link> tag for each @import, with:

• Attributes from the <style> tag copied to the <link> tag.
• An href attribute with value of the imported URL.
• A rel attribute with value of "stylesheet".
• If the <style> tag did not have a media attribute but the @import specified media after the URL, then a media attribute with value of the media specified after the URL.

For example, if the <style> tag looks like this:

<style type="text/css" media="screen">@import url(http://www.example.com/style.css);</style>

Then PageSpeed will convert it to:

<link type="text/css" media="screen" rel="stylesheet" href="http://www.example.com/style.css"/>

Example

You can see the filter in action at www.modpagespeed.com on this example.

Risks

This filter is considered minimal risk.