1 | 'use strict';
|
2 |
|
3 | exports.type = 'full';
|
4 |
|
5 | exports.active = true;
|
6 |
|
7 | exports.params = {
|
8 | onlyMatchedOnce: true,
|
9 | removeMatchedSelectors: true,
|
10 | useMqs: ['', 'screen'],
|
11 | usePseudos: ['']
|
12 | };
|
13 |
|
14 | exports.description = 'inline styles (additional options)';
|
15 |
|
16 |
|
17 | var csstree = require('css-tree'),
|
18 | cssTools = require('../lib/css-tools');
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 | exports.fn = function(document, opts) {
|
45 |
|
46 |
|
47 | var styleEls = document.querySelectorAll('style');
|
48 |
|
49 |
|
50 | if (styleEls === null) {
|
51 | return document;
|
52 | }
|
53 |
|
54 | var styles = [],
|
55 | selectors = [];
|
56 |
|
57 | for (var styleEl of styleEls) {
|
58 | if (styleEl.isEmpty() || styleEl.closestElem('foreignObject')) {
|
59 |
|
60 | continue;
|
61 | }
|
62 |
|
63 | var cssStr = cssTools.getCssStr(styleEl);
|
64 |
|
65 |
|
66 | var cssAst = {};
|
67 | try {
|
68 | cssAst = csstree.parse(cssStr, {
|
69 | parseValue: false,
|
70 | parseCustomProperty: false
|
71 | });
|
72 | } catch (parseError) {
|
73 |
|
74 | continue;
|
75 | }
|
76 |
|
77 | styles.push({
|
78 | styleEl: styleEl,
|
79 | cssAst: cssAst
|
80 | });
|
81 |
|
82 | selectors = selectors.concat(cssTools.flattenToSelectors(cssAst));
|
83 | }
|
84 |
|
85 |
|
86 |
|
87 | var selectorsMq = cssTools.filterByMqs(selectors, opts.useMqs);
|
88 |
|
89 |
|
90 |
|
91 | var selectorsPseudo = cssTools.filterByPseudos(selectorsMq, opts.usePseudos);
|
92 |
|
93 |
|
94 | cssTools.cleanPseudos(selectorsPseudo);
|
95 |
|
96 |
|
97 |
|
98 | var sortedSelectors = cssTools.sortSelectors(selectorsPseudo).reverse();
|
99 |
|
100 |
|
101 | var selector,
|
102 | selectedEl;
|
103 |
|
104 |
|
105 | for (selector of sortedSelectors) {
|
106 | var selectorStr = csstree.generate(selector.item.data),
|
107 | selectedEls = null;
|
108 |
|
109 | try {
|
110 | selectedEls = document.querySelectorAll(selectorStr);
|
111 | } catch (selectError) {
|
112 | if (selectError.constructor === SyntaxError) {
|
113 |
|
114 | continue;
|
115 | }
|
116 | throw selectError;
|
117 | }
|
118 |
|
119 | if (selectedEls === null) {
|
120 |
|
121 | continue;
|
122 | }
|
123 |
|
124 | selector.selectedEls = selectedEls;
|
125 | }
|
126 |
|
127 |
|
128 |
|
129 | for (selector of sortedSelectors) {
|
130 | if(!selector.selectedEls) {
|
131 | continue;
|
132 | }
|
133 |
|
134 | if (opts.onlyMatchedOnce && selector.selectedEls !== null && selector.selectedEls.length > 1) {
|
135 |
|
136 | continue;
|
137 | }
|
138 |
|
139 |
|
140 | for (selectedEl of selector.selectedEls) {
|
141 | if (selector.rule === null) {
|
142 | continue;
|
143 | }
|
144 |
|
145 |
|
146 | csstree.walk(selector.rule, {visit: 'Declaration', enter: function(styleCsstreeDeclaration) {
|
147 |
|
148 |
|
149 |
|
150 |
|
151 |
|
152 | var styleDeclaration = cssTools.csstreeToStyleDeclaration(styleCsstreeDeclaration);
|
153 | if (selectedEl.style.getPropertyValue(styleDeclaration.name) !== null &&
|
154 | selectedEl.style.getPropertyPriority(styleDeclaration.name) >= styleDeclaration.priority) {
|
155 | return;
|
156 | }
|
157 | selectedEl.style.setProperty(styleDeclaration.name, styleDeclaration.value, styleDeclaration.priority);
|
158 | }});
|
159 | }
|
160 |
|
161 | if (opts.removeMatchedSelectors && selector.selectedEls !== null && selector.selectedEls.length > 0) {
|
162 |
|
163 | selector.rule.prelude.children.remove(selector.item);
|
164 | }
|
165 | }
|
166 |
|
167 |
|
168 | if (!opts.removeMatchedSelectors) {
|
169 | return document;
|
170 | }
|
171 |
|
172 |
|
173 |
|
174 | for (selector of sortedSelectors) {
|
175 | if(!selector.selectedEls) {
|
176 | continue;
|
177 | }
|
178 |
|
179 | if (opts.onlyMatchedOnce && selector.selectedEls !== null && selector.selectedEls.length > 1) {
|
180 |
|
181 | continue;
|
182 | }
|
183 |
|
184 | for (selectedEl of selector.selectedEls) {
|
185 |
|
186 | var firstSubSelector = selector.item.data.children.first();
|
187 | if(firstSubSelector.type === 'ClassSelector') {
|
188 | selectedEl.class.remove(firstSubSelector.name);
|
189 | }
|
190 |
|
191 | if(typeof selectedEl.class.item(0) === 'undefined') {
|
192 | selectedEl.removeAttr('class');
|
193 | }
|
194 |
|
195 |
|
196 | if(firstSubSelector.type === 'IdSelector') {
|
197 | selectedEl.removeAttr('id', firstSubSelector.name);
|
198 | }
|
199 | }
|
200 | }
|
201 |
|
202 |
|
203 |
|
204 | for (var style of styles) {
|
205 | csstree.walk(style.cssAst, {visit: 'Rule', enter: function(node, item, list) {
|
206 |
|
207 | if (node.type === 'Atrule' &&
|
208 |
|
209 | node.block !== null &&
|
210 | node.block.children.isEmpty()) {
|
211 | list.remove(item);
|
212 | return;
|
213 | }
|
214 |
|
215 |
|
216 | if (node.type === 'Rule' &&
|
217 | node.prelude.children.isEmpty()) {
|
218 | list.remove(item);
|
219 | }
|
220 | }});
|
221 |
|
222 |
|
223 | if (style.cssAst.children.isEmpty()) {
|
224 |
|
225 | var styleParentEl = style.styleEl.parentNode;
|
226 | styleParentEl.spliceContent(styleParentEl.content.indexOf(style.styleEl), 1);
|
227 |
|
228 | if (styleParentEl.elem === 'defs' &&
|
229 | styleParentEl.content.length === 0) {
|
230 |
|
231 | var defsParentEl = styleParentEl.parentNode;
|
232 | defsParentEl.spliceContent(defsParentEl.content.indexOf(styleParentEl), 1);
|
233 | }
|
234 |
|
235 | continue;
|
236 | }
|
237 |
|
238 |
|
239 |
|
240 | cssTools.setCssStr(style.styleEl, csstree.generate(style.cssAst));
|
241 | }
|
242 |
|
243 |
|
244 | return document;
|
245 | };
|