mirror of
https://github.com/svg/svgo.git
synced 2025-07-29 20:21:14 +03:00
188
lib/css-tools.js
188
lib/css-tools.js
@ -1,10 +1,9 @@
|
||||
'use strict';
|
||||
|
||||
var csstree = require('css-tree'),
|
||||
List = csstree.List,
|
||||
stable = require('stable'),
|
||||
specificity = require('csso/lib/restructure/prepare/specificity');
|
||||
|
||||
var csstree = require('css-tree'),
|
||||
List = csstree.List,
|
||||
stable = require('stable'),
|
||||
specificity = require('csso/lib/restructure/prepare/specificity');
|
||||
|
||||
/**
|
||||
* Flatten a CSS AST to a selectors list.
|
||||
@ -13,39 +12,48 @@ var csstree = require('css-tree'),
|
||||
* @return {Array} selectors
|
||||
*/
|
||||
function flattenToSelectors(cssAst) {
|
||||
var selectors = [];
|
||||
var selectors = [];
|
||||
|
||||
csstree.walk(cssAst, {visit: 'Rule', enter: function(node) {
|
||||
if (node.type !== 'Rule') {
|
||||
return;
|
||||
}
|
||||
csstree.walk(cssAst, {
|
||||
visit: 'Rule',
|
||||
enter: function (node) {
|
||||
if (node.type !== 'Rule') {
|
||||
return;
|
||||
}
|
||||
|
||||
var atrule = this.atrule;
|
||||
var rule = node;
|
||||
var atrule = this.atrule;
|
||||
var rule = node;
|
||||
|
||||
node.prelude.children.each(function(selectorNode, selectorItem) {
|
||||
var selector = {
|
||||
item: selectorItem,
|
||||
atrule: atrule,
|
||||
rule: rule,
|
||||
pseudos: []
|
||||
};
|
||||
node.prelude.children.each(function (selectorNode, selectorItem) {
|
||||
var selector = {
|
||||
item: selectorItem,
|
||||
atrule: atrule,
|
||||
rule: rule,
|
||||
pseudos: [],
|
||||
};
|
||||
|
||||
selectorNode.children.each(function(selectorChildNode, selectorChildItem, selectorChildList) {
|
||||
if (selectorChildNode.type === 'PseudoClassSelector' ||
|
||||
selectorChildNode.type === 'PseudoElementSelector') {
|
||||
selector.pseudos.push({
|
||||
item: selectorChildItem,
|
||||
list: selectorChildList
|
||||
});
|
||||
}
|
||||
selectorNode.children.each(function (
|
||||
selectorChildNode,
|
||||
selectorChildItem,
|
||||
selectorChildList
|
||||
) {
|
||||
if (
|
||||
selectorChildNode.type === 'PseudoClassSelector' ||
|
||||
selectorChildNode.type === 'PseudoElementSelector'
|
||||
) {
|
||||
selector.pseudos.push({
|
||||
item: selectorChildItem,
|
||||
list: selectorChildList,
|
||||
});
|
||||
|
||||
selectors.push(selector);
|
||||
}
|
||||
});
|
||||
}});
|
||||
|
||||
return selectors;
|
||||
selectors.push(selector);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return selectors;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -56,21 +64,23 @@ function flattenToSelectors(cssAst) {
|
||||
* @return {Array} Filtered selectors that match the passed media queries
|
||||
*/
|
||||
function filterByMqs(selectors, useMqs) {
|
||||
return selectors.filter(function(selector) {
|
||||
if (selector.atrule === null) {
|
||||
return ~useMqs.indexOf('');
|
||||
}
|
||||
return selectors.filter(function (selector) {
|
||||
if (selector.atrule === null) {
|
||||
return ~useMqs.indexOf('');
|
||||
}
|
||||
|
||||
var mqName = selector.atrule.name;
|
||||
var mqStr = mqName;
|
||||
if (selector.atrule.expression &&
|
||||
selector.atrule.expression.children.first().type === 'MediaQueryList') {
|
||||
var mqExpr = csstree.generate(selector.atrule.expression);
|
||||
mqStr = [mqName, mqExpr].join(' ');
|
||||
}
|
||||
var mqName = selector.atrule.name;
|
||||
var mqStr = mqName;
|
||||
if (
|
||||
selector.atrule.expression &&
|
||||
selector.atrule.expression.children.first().type === 'MediaQueryList'
|
||||
) {
|
||||
var mqExpr = csstree.generate(selector.atrule.expression);
|
||||
mqStr = [mqName, mqExpr].join(' ');
|
||||
}
|
||||
|
||||
return ~useMqs.indexOf(mqStr);
|
||||
});
|
||||
return ~useMqs.indexOf(mqStr);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
@ -81,15 +91,17 @@ function filterByMqs(selectors, useMqs) {
|
||||
* @return {Array} Filtered selectors that match the passed pseudo-elements and/or -classes
|
||||
*/
|
||||
function filterByPseudos(selectors, usePseudos) {
|
||||
return selectors.filter(function(selector) {
|
||||
var pseudoSelectorsStr = csstree.generate({
|
||||
type: 'Selector',
|
||||
children: new List().fromArray(selector.pseudos.map(function(pseudo) {
|
||||
return pseudo.item.data;
|
||||
}))
|
||||
});
|
||||
return ~usePseudos.indexOf(pseudoSelectorsStr);
|
||||
return selectors.filter(function (selector) {
|
||||
var pseudoSelectorsStr = csstree.generate({
|
||||
type: 'Selector',
|
||||
children: new List().fromArray(
|
||||
selector.pseudos.map(function (pseudo) {
|
||||
return pseudo.item.data;
|
||||
})
|
||||
),
|
||||
});
|
||||
return ~usePseudos.indexOf(pseudoSelectorsStr);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
@ -99,14 +111,13 @@ function filterByPseudos(selectors, usePseudos) {
|
||||
* @return {Array} Selectors without pseudo-elements and/or -classes
|
||||
*/
|
||||
function cleanPseudos(selectors) {
|
||||
selectors.forEach(function(selector) {
|
||||
selector.pseudos.forEach(function(pseudo) {
|
||||
pseudo.list.remove(pseudo.item);
|
||||
});
|
||||
selectors.forEach(function (selector) {
|
||||
selector.pseudos.forEach(function (pseudo) {
|
||||
pseudo.list.remove(pseudo.item);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Compares two selector specificities.
|
||||
* extracted from https://github.com/keeganstreet/specificity/blob/master/specificity.js#L211
|
||||
@ -116,18 +127,17 @@ function cleanPseudos(selectors) {
|
||||
* @return {Number} Score of selector specificity A compared to selector specificity B
|
||||
*/
|
||||
function compareSpecificity(aSpecificity, bSpecificity) {
|
||||
for (var i = 0; i < 4; i += 1) {
|
||||
if (aSpecificity[i] < bSpecificity[i]) {
|
||||
return -1;
|
||||
} else if (aSpecificity[i] > bSpecificity[i]) {
|
||||
return 1;
|
||||
}
|
||||
for (var i = 0; i < 4; i += 1) {
|
||||
if (aSpecificity[i] < bSpecificity[i]) {
|
||||
return -1;
|
||||
} else if (aSpecificity[i] > bSpecificity[i]) {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
|
||||
return 0;
|
||||
return 0;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Compare two simple selectors.
|
||||
*
|
||||
@ -136,16 +146,15 @@ function compareSpecificity(aSpecificity, bSpecificity) {
|
||||
* @return {Number} Score of selector A compared to selector B
|
||||
*/
|
||||
function compareSimpleSelectorNode(aSimpleSelectorNode, bSimpleSelectorNode) {
|
||||
var aSpecificity = specificity(aSimpleSelectorNode),
|
||||
bSpecificity = specificity(bSimpleSelectorNode);
|
||||
return compareSpecificity(aSpecificity, bSpecificity);
|
||||
var aSpecificity = specificity(aSimpleSelectorNode),
|
||||
bSpecificity = specificity(bSimpleSelectorNode);
|
||||
return compareSpecificity(aSpecificity, bSpecificity);
|
||||
}
|
||||
|
||||
function _bySelectorSpecificity(selectorA, selectorB) {
|
||||
return compareSimpleSelectorNode(selectorA.item.data, selectorB.item.data);
|
||||
return compareSimpleSelectorNode(selectorA.item.data, selectorB.item.data);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Sort selectors stably by their specificity.
|
||||
*
|
||||
@ -153,10 +162,9 @@ function _bySelectorSpecificity(selectorA, selectorB) {
|
||||
* @return {Array} Stable sorted selectors
|
||||
*/
|
||||
function sortSelectors(selectors) {
|
||||
return stable(selectors, _bySelectorSpecificity);
|
||||
return stable(selectors, _bySelectorSpecificity);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Convert a css-tree AST style declaration to CSSStyleDeclaration property.
|
||||
*
|
||||
@ -164,17 +172,16 @@ function sortSelectors(selectors) {
|
||||
* @return {Object} CSSStyleDeclaration property
|
||||
*/
|
||||
function csstreeToStyleDeclaration(declaration) {
|
||||
var propertyName = declaration.property,
|
||||
propertyValue = csstree.generate(declaration.value),
|
||||
propertyPriority = (declaration.important ? 'important' : '');
|
||||
return {
|
||||
name: propertyName,
|
||||
value: propertyValue,
|
||||
priority: propertyPriority
|
||||
};
|
||||
var propertyName = declaration.property,
|
||||
propertyValue = csstree.generate(declaration.value),
|
||||
propertyPriority = declaration.important ? 'important' : '';
|
||||
return {
|
||||
name: propertyName,
|
||||
value: propertyValue,
|
||||
priority: propertyPriority,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Gets the CSS string of a style element
|
||||
*
|
||||
@ -182,7 +189,7 @@ function csstreeToStyleDeclaration(declaration) {
|
||||
* @return {String|Array} CSS string or empty array if no styles are set
|
||||
*/
|
||||
function getCssStr(elem) {
|
||||
return elem.content[0].text || elem.content[0].cdata || [];
|
||||
return elem.content[0].text || elem.content[0].cdata || [];
|
||||
}
|
||||
|
||||
/**
|
||||
@ -193,18 +200,17 @@ function getCssStr(elem) {
|
||||
* @return {Object} reference to field with CSS
|
||||
*/
|
||||
function setCssStr(elem, css) {
|
||||
// in case of cdata field
|
||||
if(elem.content[0].cdata) {
|
||||
elem.content[0].cdata = css;
|
||||
return elem.content[0].cdata;
|
||||
}
|
||||
// in case of cdata field
|
||||
if (elem.content[0].cdata) {
|
||||
elem.content[0].cdata = css;
|
||||
return elem.content[0].cdata;
|
||||
}
|
||||
|
||||
// in case of text field + if nothing was set yet
|
||||
elem.content[0].text = css;
|
||||
return elem.content[0].text;
|
||||
// in case of text field + if nothing was set yet
|
||||
elem.content[0].text = css;
|
||||
return elem.content[0].text;
|
||||
}
|
||||
|
||||
|
||||
module.exports.flattenToSelectors = flattenToSelectors;
|
||||
|
||||
module.exports.filterByMqs = filterByMqs;
|
||||
|
Reference in New Issue
Block a user