Inlining Imports

Inlining @imports

This page outlines the method used to split out your CSS files and then use the Ant Build Script to reimport them into a single file.

Splitting style.css

Running the ant command ant css-split from the build directory will split the monolithic mian.css file that you're familiar with into multiple css files. It then renames itself to main.css.orig and creates a new main.css that @imports the newly split files.

This is done via special marker comments (ex: /*==|== filename ====*/ would produce @import url(filename.css);), so if you're merging from a personal version of main.css, make sure to include these markers.

If everything went correctly you should see no difference in the behavior of your pages. The browser should follow the @import directives and load all your CSS.

Importing Rules

Browser rules for @imports are very strict. They must follow any @charset rules and come before anything else. Any @imports that follow other blocks in the .css file will be ignored by the browser. The build script isn't this strict, but if you want to maintain browser compatibility you should adhere to these rules.

w3.org @import rules

Building with Imports

Now whenever the build script is creating a publish directory for you it will attempt to bring in any @import directives it finds to create a single concatenated and minified css file. This makes it easier for you to add and remove blocks of functionality from your .css during development, while keeping the benefits of a single http GET when deployed.

• If you are adding your own @imports you should make the path relative to the .css you are adding the @import to.
• @import URLs that start with http: or https: won't be inlined, because it is assumed that these are meant to change independent of the file importing them.
• @import URLs that start with http: or https: need to come before any @imports that will be inlined, otherwise they will break (see the strict rules above).
• You can specify media types after an @import (ex: @import url('print.styles.css') print;). The build script will wrap these in an @media [type]{[file contents]} block.