123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245 |
- 'use strict';
- exports.type = 'full';
- exports.active = true;
- exports.params = {
- onlyMatchedOnce: true,
- removeMatchedSelectors: true,
- useMqs: ['', 'screen'],
- usePseudos: ['']
- };
- exports.description = 'inline styles (additional options)';
- var csstree = require('css-tree'),
- cssTools = require('../lib/css-tools');
- exports.fn = function(document, opts) {
-
- var styleEls = document.querySelectorAll('style');
-
- if (styleEls === null) {
- return document;
- }
- var styles = [],
- selectors = [];
- for (var styleEl of styleEls) {
- if (styleEl.isEmpty() || styleEl.closestElem('foreignObject')) {
-
- continue;
- }
- var cssStr = cssTools.getCssStr(styleEl);
-
- var cssAst = {};
- try {
- cssAst = csstree.parse(cssStr, {
- parseValue: false,
- parseCustomProperty: false
- });
- } catch (parseError) {
-
- continue;
- }
- styles.push({
- styleEl: styleEl,
- cssAst: cssAst
- });
- selectors = selectors.concat(cssTools.flattenToSelectors(cssAst));
- }
-
- var selectorsMq = cssTools.filterByMqs(selectors, opts.useMqs);
-
- var selectorsPseudo = cssTools.filterByPseudos(selectorsMq, opts.usePseudos);
-
- cssTools.cleanPseudos(selectorsPseudo);
-
- var sortedSelectors = cssTools.sortSelectors(selectorsPseudo).reverse();
- var selector,
- selectedEl;
-
- for (selector of sortedSelectors) {
- var selectorStr = csstree.generate(selector.item.data),
- selectedEls = null;
- try {
- selectedEls = document.querySelectorAll(selectorStr);
- } catch (selectError) {
- if (selectError.constructor === SyntaxError) {
-
- continue;
- }
- throw selectError;
- }
- if (selectedEls === null) {
-
- continue;
- }
- selector.selectedEls = selectedEls;
- }
-
- for (selector of sortedSelectors) {
- if(!selector.selectedEls) {
- continue;
- }
- if (opts.onlyMatchedOnce && selector.selectedEls !== null && selector.selectedEls.length > 1) {
-
- continue;
- }
-
- for (selectedEl of selector.selectedEls) {
- if (selector.rule === null) {
- continue;
- }
-
- csstree.walk(selector.rule, {visit: 'Declaration', enter: function(styleCsstreeDeclaration) {
-
-
-
-
- var styleDeclaration = cssTools.csstreeToStyleDeclaration(styleCsstreeDeclaration);
- if (selectedEl.style.getPropertyValue(styleDeclaration.name) !== null &&
- selectedEl.style.getPropertyPriority(styleDeclaration.name) >= styleDeclaration.priority) {
- return;
- }
- selectedEl.style.setProperty(styleDeclaration.name, styleDeclaration.value, styleDeclaration.priority);
- }});
- }
- if (opts.removeMatchedSelectors && selector.selectedEls !== null && selector.selectedEls.length > 0) {
-
- selector.rule.prelude.children.remove(selector.item);
- }
- }
- if (!opts.removeMatchedSelectors) {
- return document;
- }
-
- for (selector of sortedSelectors) {
- if(!selector.selectedEls) {
- continue;
- }
- if (opts.onlyMatchedOnce && selector.selectedEls !== null && selector.selectedEls.length > 1) {
-
- continue;
- }
- for (selectedEl of selector.selectedEls) {
-
- var firstSubSelector = selector.item.data.children.first();
- if(firstSubSelector.type === 'ClassSelector') {
- selectedEl.class.remove(firstSubSelector.name);
- }
-
- if(typeof selectedEl.class.item(0) === 'undefined') {
- selectedEl.removeAttr('class');
- }
-
- if(firstSubSelector.type === 'IdSelector') {
- selectedEl.removeAttr('id', firstSubSelector.name);
- }
- }
- }
-
- for (var style of styles) {
- csstree.walk(style.cssAst, {visit: 'Rule', enter: function(node, item, list) {
-
- if (node.type === 'Atrule' &&
-
- node.block !== null &&
- node.block.children.isEmpty()) {
- list.remove(item);
- return;
- }
-
- if (node.type === 'Rule' &&
- node.prelude.children.isEmpty()) {
- list.remove(item);
- }
- }});
- if (style.cssAst.children.isEmpty()) {
-
- var styleParentEl = style.styleEl.parentNode;
- styleParentEl.spliceContent(styleParentEl.content.indexOf(style.styleEl), 1);
- if (styleParentEl.elem === 'defs' &&
- styleParentEl.content.length === 0) {
-
- var defsParentEl = styleParentEl.parentNode;
- defsParentEl.spliceContent(defsParentEl.content.indexOf(styleParentEl), 1);
- }
- continue;
- }
-
- cssTools.setCssStr(style.styleEl, csstree.generate(style.cssAst));
- }
- return document;
- };
|