Import Rule Example

Lorem ipsum dolor sit amet

Ut enim ad minim veniam,

Duis aute irure dolor.

For some context, see this blog post.

CSS Used

.highlight {
  color: red;
  text-decoration: underline;
}
	
.updated {
  @importRule '.highlight';
  background-color: yellow;
}
	
.updatedByOthers {
  @importRule '.updated';
  color: #3f5070; /* a nice dark blue */
}

Basic CSS post-processor

Written in javascript, with the help of jquery for concision.

1. Do a "Ajax" request to get the CSS stylesheets as plain text

function loadCSS() {
	var s = document.getElementsByTagName('link');
	for(var i= 0; i<s.length; i++) {
		if(s[i].rel=='stylesheet') {
			$.get(s[i].href, parseCSS);
		}
	}
}

2. Parse the css to find the @importRule directives and extract the name of the rule.

function parseCSS(css) {
	var reg = /@importrule\s+['"]?([^'";]*)/gi;
	while ((importedRule = reg.exec(css)) != null) {					
		applyCSS(importedRule[1], getSelector(css,importedRule.index));			
	}		
}

3. Extract the selector.

function getSelector(css, index) {
	while(index>=0 && css.charAt(index)!='{')
		index--;
	var end = index;
	while(index>=0 && css.charAt(index)!='}')
		index--;		
	return css.substring(index+1,end).replace(/\s+/g,''); 
}

4. Apply the imported rule and cache it so it can be applied recursively.

function applyCSS(importedRule, selector) {		
	if(importedRule.charAt(0)==".") {			
		$(selector).addClass(importedRule.substring(1));
		if(cache[importedRule]) {
			applyCSS(cache[importedRule],selector);
		}
		cache[selector] = importedRule;
	}
}
cache={};
$(document).ready(loadCSS);