Skip to content

Instantly share code, notes, and snippets.

@gabriellupu
Created January 21, 2015 12:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gabriellupu/a7e2312480ffd93b971b to your computer and use it in GitHub Desktop.
Save gabriellupu/a7e2312480ffd93b971b to your computer and use it in GitHub Desktop.
Nodejs - dublicate background data URI in CSS - identify and group
/**
* 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