Created
January 21, 2015 12:33
-
-
Save gabriellupu/a7e2312480ffd93b971b to your computer and use it in GitHub Desktop.
Nodejs - dublicate background data URI in CSS - identify and group
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Match all ocurences of data uri backgrounds in css and group them if they are dupe | |
* If background property contains both data-uri and other background properties, they are sparated | |
*/ | |
process: function(content) { | |
function getMatches(string, regex, index) { | |
index = index || 1; // default to the first capturing group | |
var matches = []; | |
var match; | |
do { | |
match = regex.exec(string); | |
if (match) { | |
console.log('Match found!'); | |
matches.push({ | |
cssPath: match[1] | |
, url: match[3] | |
, extraParams: match[4] | |
}); | |
} | |
} while (match); | |
return matches; | |
} | |
function getStyle(rulesArr) { | |
return _.map(rulesArr, function(rule) { | |
return rule.cssPath + '{' + rule.style + ';}\n'; | |
}).join(''); | |
} | |
/* | |
https://regex101.com/r/cQ9gV5/1 - this is the place were I worked to obtain this insane regex: | |
It basically matches all the places where data-uris exists in CSS for backgrounds, and extracts data | |
needed for processing like it follows: | |
[0] => CSS rule path | |
[1] => anything that exists after background and : like background[-image]: | |
[2] => the full image url | |
[3] => any data after the url like: url(data:....) [-10px 20px no-repeat]; | |
*/ | |
var cssRegex = /\}((?:[^\{]?\n?)+)\{[^\}]+background(\S+)?\s?:\s?(url\(data:\S{2,10}\/\S{2,10};base64,[^=]+==\))(.*);/g; | |
var ruleOnlyRegex = /background(\S*)\s?:\s?(url\(data:\S{2,10}\/\S{2,10};base64,[^=]*==\))(.*)/g; | |
var matches = getMatches(content, cssRegex); | |
var cssRulesGroups = _.values(_.groupBy(matches, function(match) { | |
// return the full url | |
return match.url; | |
})); | |
// all the rules that should be added | |
var rules = []; | |
var totalGrouped = 0; | |
_.each(cssRulesGroups, function(sameUrlGroup) { | |
if (sameUrlGroup.length > 1) { | |
totalGrouped += sameUrlGroup.length; | |
} | |
_.each(sameUrlGroup, function(rule){ | |
if (rule.extraParams) { | |
rules.push({ | |
cssPath: rule.cssPath | |
, style: 'background:' + rule.extraParams | |
}); | |
} | |
}); | |
var aggregatedPaths = _.map(sameUrlGroup, function(rule) { | |
return rule.cssPath; | |
}).join(','); | |
rules.push({ | |
cssPath: aggregatedPaths | |
, style: 'background-image:' + sameUrlGroup[0].url | |
}); | |
}); | |
console.log('Grouped ' + totalGrouped + ' data-uri CSS rules !'); | |
var contentWithoutData = content.replace(ruleOnlyRegex, ''); | |
return getStyle(rules) + contentWithoutData; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment