Compile media queries after evaluation

Making media query joining and searching faster

lib/extender/mediaFilter.js

@@ -1,8 +1,7 @@
 /**
  * Media Filter
  *
- * Find media nodes existing before the passed extend node
- * and matching the passed media query list node.
+ * Find medias matching the passed media queries
  */
 'use strict'
 
@@ -16,8 +15,8 @@ MediaFilter.stop = {}
 
 MediaFilter.prototype = new Visitor()
 
-MediaFilter.prototype.filter = function(ast, mediaQueryListNode, options) {
-	this.mediaQueryListNode = mediaQueryListNode
+MediaFilter.prototype.filter = function(ast, mediaQueries, options) {
+	this.mediaQueries = mediaQueries
 	this.mediaNodes = []
 
 	try {
@@ -39,14 +38,15 @@ MediaFilter.prototype.visitNode = _.noop
 
 MediaFilter.prototype.visitMedia = function(mediaNode) {
 	var mediaQueryListNode = mediaNode.children[0]
+	var mediaQueries = mediaQueryListNode.children
 	var ruleListNode = mediaNode.children[1]
 
-	if (mediaQueryListNode === this.mediaQueryListNode) {
+	if (mediaQueries === this.mediaQueries) {
 		this.mediaNodes.push(mediaNode)
 		throw MediaFilter.stop
 	}
 
-	if (Node.equal(mediaQueryListNode, this.mediaQueryListNode))
+	if (Node.equal(mediaQueries, this.mediaQueries))
 		this.mediaNodes.push(mediaNode)
 	else
 		this.visit(ruleListNode)

lib/extender/node/extend.js

@@ -13,9 +13,8 @@ Extender.prototype.visitExtend = function(extendNode) {
 		insideVoid: !!this.parentVoid
 	}
 
-	var parentMediaQueryList = this.parentMediaQueryList
-	if (parentMediaQueryList) {
-		var mediaNodes = new MediaFilter().filter(nodes, parentMediaQueryList, options)
+	if (this.parentMediaQueries) {
+		var mediaNodes = new MediaFilter().filter(nodes, this.parentMediaQueries, options)
 		nodes = []
 		mediaNodes.forEach(function(mediaNode) {
 			nodes = nodes.concat(mediaNode.children)

lib/extender/node/media.js

@@ -8,10 +8,10 @@ var Extender = require('../extender')
 Extender.prototype.visitMedia = function(mediaNode) {
 	var mediaQueryListNode = this.visit(mediaNode.children[0])
 
-	var parentMediaQueryList = this.parentMediaQueryList
-	this.parentMediaQueryList = mediaQueryListNode
+	var parentMediaQueries = this.parentMediaQueries
+	this.parentMediaQueries = mediaQueryListNode.children
 
 	this.visit(mediaNode.children[1])
 
-	this.parentMediaQueryList = parentMediaQueryList
+	this.parentMediaQueries = parentMediaQueries
 }

lib/extender/node/mediaQuery.js

@@ -1,8 +1,12 @@
 'use strict'
 
+var compiler = require('../../compiler')
+
 var Extender = require('../extender')
 
 Extender.prototype.visitMediaQuery = function(mediaQueryNode) {
-	if (this.parentMediaQuery)
-		mediaQueryNode.children = this.parentMediaQuery.children.concat(mediaQueryNode.children)
+	var mediaQuery = compiler.compile(mediaQueryNode)
+	var parentMediaQuery = this.parentMediaQuery
+	if (parentMediaQuery) parentMediaQuery += ' and '
+	return parentMediaQuery + mediaQuery
 }

lib/extender/node/mediaQueryList.js

@@ -5,24 +5,20 @@ var Node = require('../../node')
 var Extender = require('../extender')
 
 Extender.prototype.visitMediaQueryList = function(mediaQueryListNode) {
-	var parentMediaQueryList = this.parentMediaQueryList
+	if (this.parentMediaQueries) {
+		var parentMediaQueries = []
 
-	if (parentMediaQueryList) {
-		var length = parentMediaQueryList.children.length
-		var children = []
-
-		parentMediaQueryList.children.forEach(function(parentMediaQuery, i) {
+		this.parentMediaQueries.forEach(function(parentMediaQuery) {
 			this.parentMediaQuery = parentMediaQuery
 
-			var mediaQueryListClone = i === length - 1 ? mediaQueryListNode : Node.clone(mediaQueryListNode)
-			mediaQueryListClone.children.forEach(function(selectorNode) {
-				children.push(this.visit(selectorNode))
+			mediaQueryListNode.children.forEach(function(mediaQueryNode) {
+				parentMediaQueries.push(this.visit(mediaQueryNode))
 			}, this)
 		}, this)
 
-		mediaQueryListNode.children = children
+		mediaQueryListNode.children = parentMediaQueries
 	} else {
-		this.parentMediaQuery = null
+		this.parentMediaQuery = ''
 		this.visit(mediaQueryListNode.children)
 	}
 }