1 | var path = require('path');
|
---|
2 | var prettyBytes = require('pretty-bytes');
|
---|
3 | var parse5 = require('parse5');
|
---|
4 | var select = require('css-select');
|
---|
5 | var treeAdapter = require('parse5-htmlparser2-tree-adapter');
|
---|
6 | var css = require('css');
|
---|
7 | var chalk = require('chalk');
|
---|
8 |
|
---|
9 | function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
---|
10 |
|
---|
11 | function _interopNamespace(e) {
|
---|
12 | if (e && e.__esModule) return e;
|
---|
13 | var n = Object.create(null);
|
---|
14 | if (e) {
|
---|
15 | Object.keys(e).forEach(function (k) {
|
---|
16 | if (k !== 'default') {
|
---|
17 | var d = Object.getOwnPropertyDescriptor(e, k);
|
---|
18 | Object.defineProperty(n, k, d.get ? d : {
|
---|
19 | enumerable: true,
|
---|
20 | get: function () {
|
---|
21 | return e[k];
|
---|
22 | }
|
---|
23 | });
|
---|
24 | }
|
---|
25 | });
|
---|
26 | }
|
---|
27 | n['default'] = e;
|
---|
28 | return n;
|
---|
29 | }
|
---|
30 |
|
---|
31 | var path__default = /*#__PURE__*/_interopDefaultLegacy(path);
|
---|
32 | var prettyBytes__default = /*#__PURE__*/_interopDefaultLegacy(prettyBytes);
|
---|
33 | var parse5__default = /*#__PURE__*/_interopDefaultLegacy(parse5);
|
---|
34 | var select__default = /*#__PURE__*/_interopDefaultLegacy(select);
|
---|
35 | var treeAdapter__default = /*#__PURE__*/_interopDefaultLegacy(treeAdapter);
|
---|
36 | var css__default = /*#__PURE__*/_interopDefaultLegacy(css);
|
---|
37 | var chalk__default = /*#__PURE__*/_interopDefaultLegacy(chalk);
|
---|
38 |
|
---|
39 | /**
|
---|
40 | * Copyright 2018 Google LLC
|
---|
41 | *
|
---|
42 | * Licensed under the Apache License, Version 2.0 (the "License"); you may not
|
---|
43 | * use this file except in compliance with the License. You may obtain a copy of
|
---|
44 | * the License at
|
---|
45 | *
|
---|
46 | * http://www.apache.org/licenses/LICENSE-2.0
|
---|
47 | *
|
---|
48 | * Unless required by applicable law or agreed to in writing, software
|
---|
49 | * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
---|
50 | * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
---|
51 | * License for the specific language governing permissions and limitations under
|
---|
52 | * the License.
|
---|
53 | */
|
---|
54 |
|
---|
55 | const PARSE5_OPTS = {
|
---|
56 | treeAdapter: treeAdapter__default['default']
|
---|
57 | };
|
---|
58 | /**
|
---|
59 | * Parse HTML into a mutable, serializable DOM Document.
|
---|
60 | * The DOM implementation is an htmlparser2 DOM enhanced with basic DOM mutation methods.
|
---|
61 | * @param {String} html HTML to parse into a Document instance
|
---|
62 | */
|
---|
63 |
|
---|
64 | function createDocument(html) {
|
---|
65 | const document = parse5__default['default'].parse(html, PARSE5_OPTS);
|
---|
66 | defineProperties(document, DocumentExtensions); // Extend Element.prototype with DOM manipulation methods.
|
---|
67 |
|
---|
68 | const scratch = document.createElement('div'); // Get a reference to the base Node class - used by createTextNode()
|
---|
69 |
|
---|
70 | document.$$Node = scratch.constructor;
|
---|
71 | const elementProto = Object.getPrototypeOf(scratch);
|
---|
72 | defineProperties(elementProto, ElementExtensions);
|
---|
73 | elementProto.ownerDocument = document;
|
---|
74 | return document;
|
---|
75 | }
|
---|
76 | /**
|
---|
77 | * Serialize a Document to an HTML String
|
---|
78 | * @param {Document} document A Document, such as one created via `createDocument()`
|
---|
79 | */
|
---|
80 |
|
---|
81 | function serializeDocument(document) {
|
---|
82 | return parse5__default['default'].serialize(document, PARSE5_OPTS);
|
---|
83 | }
|
---|
84 | /**
|
---|
85 | * Methods and descriptors to mix into Element.prototype
|
---|
86 | */
|
---|
87 |
|
---|
88 | const ElementExtensions = {
|
---|
89 | /** @extends htmlparser2.Element.prototype */
|
---|
90 | nodeName: {
|
---|
91 | get() {
|
---|
92 | return this.tagName.toUpperCase();
|
---|
93 | }
|
---|
94 |
|
---|
95 | },
|
---|
96 | id: reflectedProperty('id'),
|
---|
97 | className: reflectedProperty('class'),
|
---|
98 |
|
---|
99 | insertBefore(child, referenceNode) {
|
---|
100 | if (!referenceNode) return this.appendChild(child);
|
---|
101 | treeAdapter__default['default'].insertBefore(this, child, referenceNode);
|
---|
102 | return child;
|
---|
103 | },
|
---|
104 |
|
---|
105 | appendChild(child) {
|
---|
106 | treeAdapter__default['default'].appendChild(this, child);
|
---|
107 | return child;
|
---|
108 | },
|
---|
109 |
|
---|
110 | removeChild(child) {
|
---|
111 | treeAdapter__default['default'].detachNode(child);
|
---|
112 | },
|
---|
113 |
|
---|
114 | remove() {
|
---|
115 | treeAdapter__default['default'].detachNode(this);
|
---|
116 | },
|
---|
117 |
|
---|
118 | textContent: {
|
---|
119 | get() {
|
---|
120 | return getText(this);
|
---|
121 | },
|
---|
122 |
|
---|
123 | set(text) {
|
---|
124 | this.children = [];
|
---|
125 | treeAdapter__default['default'].insertText(this, text);
|
---|
126 | }
|
---|
127 |
|
---|
128 | },
|
---|
129 |
|
---|
130 | setAttribute(name, value) {
|
---|
131 | if (this.attribs == null) this.attribs = {};
|
---|
132 | if (value == null) value = '';
|
---|
133 | this.attribs[name] = value;
|
---|
134 | },
|
---|
135 |
|
---|
136 | removeAttribute(name) {
|
---|
137 | if (this.attribs != null) {
|
---|
138 | delete this.attribs[name];
|
---|
139 | }
|
---|
140 | },
|
---|
141 |
|
---|
142 | getAttribute(name) {
|
---|
143 | return this.attribs != null && this.attribs[name];
|
---|
144 | },
|
---|
145 |
|
---|
146 | hasAttribute(name) {
|
---|
147 | return this.attribs != null && this.attribs[name] != null;
|
---|
148 | },
|
---|
149 |
|
---|
150 | getAttributeNode(name) {
|
---|
151 | const value = this.getAttribute(name);
|
---|
152 | if (value != null) return {
|
---|
153 | specified: true,
|
---|
154 | value
|
---|
155 | };
|
---|
156 | }
|
---|
157 |
|
---|
158 | };
|
---|
159 | /**
|
---|
160 | * Methods and descriptors to mix into the global document instance
|
---|
161 | * @private
|
---|
162 | */
|
---|
163 |
|
---|
164 | const DocumentExtensions = {
|
---|
165 | /** @extends htmlparser2.Document.prototype */
|
---|
166 | // document is just an Element in htmlparser2, giving it a nodeType of ELEMENT_NODE.
|
---|
167 | // TODO: verify if these are needed for css-select
|
---|
168 | nodeType: {
|
---|
169 | get() {
|
---|
170 | return 9;
|
---|
171 | }
|
---|
172 |
|
---|
173 | },
|
---|
174 | contentType: {
|
---|
175 | get() {
|
---|
176 | return 'text/html';
|
---|
177 | }
|
---|
178 |
|
---|
179 | },
|
---|
180 | nodeName: {
|
---|
181 | get() {
|
---|
182 | return '#document';
|
---|
183 | }
|
---|
184 |
|
---|
185 | },
|
---|
186 | documentElement: {
|
---|
187 | get() {
|
---|
188 | // Find the first <html> element within the document
|
---|
189 | return this.childNodes.filter(child => String(child.tagName).toLowerCase() === 'html');
|
---|
190 | }
|
---|
191 |
|
---|
192 | },
|
---|
193 | compatMode: {
|
---|
194 | get() {
|
---|
195 | const compatMode = {
|
---|
196 | 'no-quirks': 'CSS1Compat',
|
---|
197 | quirks: 'BackCompat',
|
---|
198 | 'limited-quirks': 'CSS1Compat'
|
---|
199 | };
|
---|
200 | return compatMode[treeAdapter__default['default'].getDocumentMode(this)];
|
---|
201 | }
|
---|
202 |
|
---|
203 | },
|
---|
204 | body: {
|
---|
205 | get() {
|
---|
206 | return this.querySelector('body');
|
---|
207 | }
|
---|
208 |
|
---|
209 | },
|
---|
210 |
|
---|
211 | createElement(name) {
|
---|
212 | return treeAdapter__default['default'].createElement(name, null, []);
|
---|
213 | },
|
---|
214 |
|
---|
215 | createTextNode(text) {
|
---|
216 | // there is no dedicated createTextNode equivalent exposed in htmlparser2's DOM
|
---|
217 | const Node = this.$$Node;
|
---|
218 | return new Node({
|
---|
219 | type: 'text',
|
---|
220 | data: text,
|
---|
221 | parent: null,
|
---|
222 | prev: null,
|
---|
223 | next: null
|
---|
224 | });
|
---|
225 | },
|
---|
226 |
|
---|
227 | querySelector(sel) {
|
---|
228 | return select__default['default'].selectOne(sel, this.documentElement);
|
---|
229 | },
|
---|
230 |
|
---|
231 | querySelectorAll(sel) {
|
---|
232 | if (sel === ':root') {
|
---|
233 | return this;
|
---|
234 | }
|
---|
235 |
|
---|
236 | return select__default['default'](sel, this.documentElement);
|
---|
237 | }
|
---|
238 |
|
---|
239 | };
|
---|
240 | /**
|
---|
241 | * Essentially `Object.defineProperties()`, except function values are assigned as value descriptors for convenience.
|
---|
242 | * @private
|
---|
243 | */
|
---|
244 |
|
---|
245 | function defineProperties(obj, properties) {
|
---|
246 | for (const i in properties) {
|
---|
247 | const value = properties[i];
|
---|
248 | Object.defineProperty(obj, i, typeof value === 'function' ? {
|
---|
249 | value
|
---|
250 | } : value);
|
---|
251 | }
|
---|
252 | }
|
---|
253 | /**
|
---|
254 | * Create a property descriptor defining a getter/setter pair alias for a named attribute.
|
---|
255 | * @private
|
---|
256 | */
|
---|
257 |
|
---|
258 |
|
---|
259 | function reflectedProperty(attributeName) {
|
---|
260 | return {
|
---|
261 | get() {
|
---|
262 | return this.getAttribute(attributeName);
|
---|
263 | },
|
---|
264 |
|
---|
265 | set(value) {
|
---|
266 | this.setAttribute(attributeName, value);
|
---|
267 | }
|
---|
268 |
|
---|
269 | };
|
---|
270 | }
|
---|
271 | /**
|
---|
272 | * Helper to get the text content of a node
|
---|
273 | * https://github.com/fb55/domutils/blob/master/src/stringify.ts#L21
|
---|
274 | * @private
|
---|
275 | */
|
---|
276 |
|
---|
277 |
|
---|
278 | function getText(node) {
|
---|
279 | if (Array.isArray(node)) return node.map(getText).join('');
|
---|
280 | if (treeAdapter__default['default'].isElementNode(node)) return node.name === 'br' ? '\n' : getText(node.children);
|
---|
281 | if (treeAdapter__default['default'].isTextNode(node)) return node.data;
|
---|
282 | return '';
|
---|
283 | }
|
---|
284 |
|
---|
285 | /**
|
---|
286 | * Copyright 2018 Google LLC
|
---|
287 | *
|
---|
288 | * Licensed under the Apache License, Version 2.0 (the "License"); you may not
|
---|
289 | * use this file except in compliance with the License. You may obtain a copy of
|
---|
290 | * the License at
|
---|
291 | *
|
---|
292 | * http://www.apache.org/licenses/LICENSE-2.0
|
---|
293 | *
|
---|
294 | * Unless required by applicable law or agreed to in writing, software
|
---|
295 | * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
---|
296 | * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
---|
297 | * License for the specific language governing permissions and limitations under
|
---|
298 | * the License.
|
---|
299 | */
|
---|
300 | /**
|
---|
301 | * Parse a textual CSS Stylesheet into a Stylesheet instance.
|
---|
302 | * Stylesheet is a mutable ReworkCSS AST with format similar to CSSOM.
|
---|
303 | * @see https://github.com/reworkcss/css
|
---|
304 | * @private
|
---|
305 | * @param {String} stylesheet
|
---|
306 | * @returns {css.Stylesheet} ast
|
---|
307 | */
|
---|
308 |
|
---|
309 | function parseStylesheet(stylesheet) {
|
---|
310 | return css__default['default'].parse(stylesheet);
|
---|
311 | }
|
---|
312 | /**
|
---|
313 | * Serialize a ReworkCSS Stylesheet to a String of CSS.
|
---|
314 | * @private
|
---|
315 | * @param {css.Stylesheet} ast A Stylesheet to serialize, such as one returned from `parseStylesheet()`
|
---|
316 | * @param {Object} options Options to pass to `css.stringify()`
|
---|
317 | * @param {Boolean} [options.compress] Compress CSS output (removes comments, whitespace, etc)
|
---|
318 | */
|
---|
319 |
|
---|
320 | function serializeStylesheet(ast, options) {
|
---|
321 | return css__default['default'].stringify(ast, options);
|
---|
322 | }
|
---|
323 | /**
|
---|
324 | * Converts a walkStyleRules() iterator to mark nodes with `.$$remove=true` instead of actually removing them.
|
---|
325 | * This means they can be removed in a second pass, allowing the first pass to be nondestructive (eg: to preserve mirrored sheets).
|
---|
326 | * @private
|
---|
327 | * @param {Function} iterator Invoked on each node in the tree. Return `false` to remove that node.
|
---|
328 | * @returns {(rule) => void} nonDestructiveIterator
|
---|
329 | */
|
---|
330 |
|
---|
331 | function markOnly(predicate) {
|
---|
332 | return rule => {
|
---|
333 | const sel = rule.selectors;
|
---|
334 |
|
---|
335 | if (predicate(rule) === false) {
|
---|
336 | rule.$$remove = true;
|
---|
337 | }
|
---|
338 |
|
---|
339 | rule.$$markedSelectors = rule.selectors;
|
---|
340 |
|
---|
341 | if (rule._other) {
|
---|
342 | rule._other.$$markedSelectors = rule._other.selectors;
|
---|
343 | }
|
---|
344 |
|
---|
345 | rule.selectors = sel;
|
---|
346 | };
|
---|
347 | }
|
---|
348 | /**
|
---|
349 | * Apply filtered selectors to a rule from a previous markOnly run.
|
---|
350 | * @private
|
---|
351 | * @param {css.Rule} rule The Rule to apply marked selectors to (if they exist).
|
---|
352 | */
|
---|
353 |
|
---|
354 | function applyMarkedSelectors(rule) {
|
---|
355 | if (rule.$$markedSelectors) {
|
---|
356 | rule.selectors = rule.$$markedSelectors;
|
---|
357 | }
|
---|
358 |
|
---|
359 | if (rule._other) {
|
---|
360 | applyMarkedSelectors(rule._other);
|
---|
361 | }
|
---|
362 | }
|
---|
363 | /**
|
---|
364 | * Recursively walk all rules in a stylesheet.
|
---|
365 | * @private
|
---|
366 | * @param {css.Rule} node A Stylesheet or Rule to descend into.
|
---|
367 | * @param {Function} iterator Invoked on each node in the tree. Return `false` to remove that node.
|
---|
368 | */
|
---|
369 |
|
---|
370 | function walkStyleRules(node, iterator) {
|
---|
371 | if (node.stylesheet) return walkStyleRules(node.stylesheet, iterator);
|
---|
372 | node.rules = node.rules.filter(rule => {
|
---|
373 | if (rule.rules) {
|
---|
374 | walkStyleRules(rule, iterator);
|
---|
375 | }
|
---|
376 |
|
---|
377 | rule._other = undefined;
|
---|
378 | rule.filterSelectors = filterSelectors;
|
---|
379 | return iterator(rule) !== false;
|
---|
380 | });
|
---|
381 | }
|
---|
382 | /**
|
---|
383 | * Recursively walk all rules in two identical stylesheets, filtering nodes into one or the other based on a predicate.
|
---|
384 | * @private
|
---|
385 | * @param {css.Rule} node A Stylesheet or Rule to descend into.
|
---|
386 | * @param {css.Rule} node2 A second tree identical to `node`
|
---|
387 | * @param {Function} iterator Invoked on each node in the tree. Return `false` to remove that node from the first tree, true to remove it from the second.
|
---|
388 | */
|
---|
389 |
|
---|
390 | function walkStyleRulesWithReverseMirror(node, node2, iterator) {
|
---|
391 | if (node2 === null) return walkStyleRules(node, iterator);
|
---|
392 | if (node.stylesheet) return walkStyleRulesWithReverseMirror(node.stylesheet, node2.stylesheet, iterator);
|
---|
393 | [node.rules, node2.rules] = splitFilter(node.rules, node2.rules, (rule, index, rules, rules2) => {
|
---|
394 | const rule2 = rules2[index];
|
---|
395 |
|
---|
396 | if (rule.rules) {
|
---|
397 | walkStyleRulesWithReverseMirror(rule, rule2, iterator);
|
---|
398 | }
|
---|
399 |
|
---|
400 | rule._other = rule2;
|
---|
401 | rule.filterSelectors = filterSelectors;
|
---|
402 | return iterator(rule) !== false;
|
---|
403 | });
|
---|
404 | } // Like [].filter(), but applies the opposite filtering result to a second copy of the Array without a second pass.
|
---|
405 | // This is just a quicker version of generating the compliment of the set returned from a filter operation.
|
---|
406 |
|
---|
407 | function splitFilter(a, b, predicate) {
|
---|
408 | const aOut = [];
|
---|
409 | const bOut = [];
|
---|
410 |
|
---|
411 | for (let index = 0; index < a.length; index++) {
|
---|
412 | if (predicate(a[index], index, a, b)) {
|
---|
413 | aOut.push(a[index]);
|
---|
414 | } else {
|
---|
415 | bOut.push(a[index]);
|
---|
416 | }
|
---|
417 | }
|
---|
418 |
|
---|
419 | return [aOut, bOut];
|
---|
420 | } // can be invoked on a style rule to subset its selectors (with reverse mirroring)
|
---|
421 |
|
---|
422 |
|
---|
423 | function filterSelectors(predicate) {
|
---|
424 | if (this._other) {
|
---|
425 | const [a, b] = splitFilter(this.selectors, this._other.selectors, predicate);
|
---|
426 | this.selectors = a;
|
---|
427 | this._other.selectors = b;
|
---|
428 | } else {
|
---|
429 | this.selectors = this.selectors.filter(predicate);
|
---|
430 | }
|
---|
431 | }
|
---|
432 |
|
---|
433 | const LOG_LEVELS = ['trace', 'debug', 'info', 'warn', 'error', 'silent'];
|
---|
434 | const defaultLogger = {
|
---|
435 | trace(msg) {
|
---|
436 | console.trace(msg);
|
---|
437 | },
|
---|
438 |
|
---|
439 | debug(msg) {
|
---|
440 | console.debug(msg);
|
---|
441 | },
|
---|
442 |
|
---|
443 | warn(msg) {
|
---|
444 | console.warn(chalk__default['default'].yellow(msg));
|
---|
445 | },
|
---|
446 |
|
---|
447 | error(msg) {
|
---|
448 | console.error(chalk__default['default'].bold.red(msg));
|
---|
449 | },
|
---|
450 |
|
---|
451 | info(msg) {
|
---|
452 | console.info(chalk__default['default'].bold.blue(msg));
|
---|
453 | },
|
---|
454 |
|
---|
455 | silent() {}
|
---|
456 |
|
---|
457 | };
|
---|
458 | function createLogger(logLevel) {
|
---|
459 | const logLevelIdx = LOG_LEVELS.indexOf(logLevel);
|
---|
460 | return LOG_LEVELS.reduce((logger, type, index) => {
|
---|
461 | if (index >= logLevelIdx) {
|
---|
462 | logger[type] = defaultLogger[type];
|
---|
463 | } else {
|
---|
464 | logger[type] = defaultLogger.silent;
|
---|
465 | }
|
---|
466 |
|
---|
467 | return logger;
|
---|
468 | }, {});
|
---|
469 | }
|
---|
470 |
|
---|
471 | /**
|
---|
472 | * Copyright 2018 Google LLC
|
---|
473 | *
|
---|
474 | * Licensed under the Apache License, Version 2.0 (the "License"); you may not
|
---|
475 | * use this file except in compliance with the License. You may obtain a copy of
|
---|
476 | * the License at
|
---|
477 | *
|
---|
478 | * http://www.apache.org/licenses/LICENSE-2.0
|
---|
479 | *
|
---|
480 | * Unless required by applicable law or agreed to in writing, software
|
---|
481 | * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
---|
482 | * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
---|
483 | * License for the specific language governing permissions and limitations under
|
---|
484 | * the License.
|
---|
485 | */
|
---|
486 | /**
|
---|
487 | * The mechanism to use for lazy-loading stylesheets.
|
---|
488 | * _[JS]_ indicates that a strategy requires JavaScript (falls back to `<noscript>`).
|
---|
489 | *
|
---|
490 | * - **null:** (default) Move stylesheet links to the end of the document and insert preload meta tags in their place.
|
---|
491 | * - **"body":** Move all external stylesheet links to the end of the document.
|
---|
492 | * - **"media":** Load stylesheets asynchronously by adding `media="not x"` and removing once loaded. _[JS]_
|
---|
493 | * - **"swap":** Convert stylesheet links to preloads that swap to `rel="stylesheet"` once loaded. _[JS]_
|
---|
494 | * - **"js":** Inject an asynchronous CSS loader similar to [LoadCSS](https://github.com/filamentgroup/loadCSS) and use it to load stylesheets. _[JS]_
|
---|
495 | * - **"js-lazy":** Like `"js"`, but the stylesheet is disabled until fully loaded.
|
---|
496 | * @typedef {(null|'body'|'media'|'swap'|'js'|'js-lazy')} PreloadStrategy
|
---|
497 | * @public
|
---|
498 | */
|
---|
499 |
|
---|
500 | /**
|
---|
501 | * Controls which keyframes rules are inlined.
|
---|
502 | * - **"critical":** _(default)_ inline keyframes rules that are used by the critical CSS.
|
---|
503 | * - **"all":** Inline all keyframes rules.
|
---|
504 | * - **"none":** Remove all keyframes rules.
|
---|
505 | * @typedef {('critical'|'all'|'none')} KeyframeStrategy
|
---|
506 | * @private
|
---|
507 | */
|
---|
508 |
|
---|
509 | /**
|
---|
510 | * Controls log level of the plugin. Specifies the level the logger should use. A logger will
|
---|
511 | * not produce output for any log level beneath the specified level. Available levels and order
|
---|
512 | * are:
|
---|
513 | *
|
---|
514 | * - **"info"** _(default)_
|
---|
515 | * - **"warn"**
|
---|
516 | * - **"error"**
|
---|
517 | * - **"trace"**
|
---|
518 | * - **"debug"**
|
---|
519 | * - **"silent"**
|
---|
520 | * @typedef {('info'|'warn'|'error'|'trace'|'debug'|'silent')} LogLevel
|
---|
521 | * @public
|
---|
522 | */
|
---|
523 |
|
---|
524 | /**
|
---|
525 | * Custom logger interface:
|
---|
526 | * @typedef Logger
|
---|
527 | * @property {(msg: string) => void} trace - Prints a trace message
|
---|
528 | * @property {(msg: string) => void} debug - Prints a debug message
|
---|
529 | * @property {(msg: string) => void} info - Prints an information message
|
---|
530 | * @property {(msg: string) => void} warn - Prints a warning message
|
---|
531 | * @property {(msg: string) => void} error - Prints an error message
|
---|
532 | * @public
|
---|
533 | */
|
---|
534 |
|
---|
535 | /**
|
---|
536 | * All optional. Pass them to `new Critters({ ... })`.
|
---|
537 | * @public
|
---|
538 | * @typedef Options
|
---|
539 | * @property {string} [path=''] Base path location of the CSS files _(default: `''`)_
|
---|
540 | * @property {string} [publicPath=''] Public path of the CSS resources. This prefix is removed from the href _(default: `''`)_
|
---|
541 | * @property {boolean} [external=true] Inline styles from external stylesheets _(default: `true`)_
|
---|
542 | * @property {number} [inlineThreshold=0] Inline external stylesheets smaller than a given size _(default: `0`)_
|
---|
543 | * @property {number} [minimumExternalSize=0] If the non-critical external stylesheet would be below this size, just inline it _(default: `0`)_
|
---|
544 | * @property {boolean} [pruneSource=false] Remove inlined rules from the external stylesheet _(default: `false`)_
|
---|
545 | * @property {boolean} [mergeStylesheets=true] Merged inlined stylesheets into a single <style> tag _(default: `true`)_
|
---|
546 | * @property {string[]} [additionalStylesheets=[]] Glob for matching other stylesheets to be used while looking for critical CSS
|
---|
547 | * @property {PreloadStrategy} [preload=null] Which preload strategy to use for stylesheets
|
---|
548 | * @property {Boolean} noscriptFallback Add `<noscript>` fallback to JS-based strategies
|
---|
549 | * @property {boolean} [inlineFonts=false] Inline critical font-face rules _(default: `false`)_
|
---|
550 | * @property {boolean} [preloadFonts=true] Preloads critical fonts _(default: `true`)_
|
---|
551 | * @property {boolean|undefined} [fonts] Shorthand for setting `inlineFonts`+`preloadFonts`
|
---|
552 | * - Values:
|
---|
553 | * - `true` to inline critical font-face rules and preload the fonts
|
---|
554 | * - `false` to don't inline any font-face rules and don't preload fonts
|
---|
555 | * @property {KeyframeStrategy} [keyframes='critical'] Controls which keyframes rules are inlined (default: 'critical')
|
---|
556 | * @property {Boolean} [compress=true] Compress resulting critical CSS (defaults to true)
|
---|
557 | * @property {LogLevel} [logLevel="info"] Controls the log level of the plugin (defaults to "info")
|
---|
558 | * @property {Logger} [logger] Provide a custom logger interface
|
---|
559 | */
|
---|
560 |
|
---|
561 | /**
|
---|
562 | * @typedef {{
|
---|
563 | * readFile(f: string): Promise<string>,
|
---|
564 | * readFile(f: string, callback: (err: any, data: string) => void): void,
|
---|
565 | * }} FileSystem
|
---|
566 | */
|
---|
567 |
|
---|
568 | /**
|
---|
569 | * Create an instance of Critters with custom options.
|
---|
570 | * The `.process()` method can be called repeatedly to re-use this instance and its cache.
|
---|
571 | * @param {Options} [options]
|
---|
572 | */
|
---|
573 |
|
---|
574 | class Critters {
|
---|
575 | /** @private */
|
---|
576 | constructor(options) {
|
---|
577 | this.options = Object.assign({
|
---|
578 | logLevel: 'info',
|
---|
579 | path: '',
|
---|
580 | publicPath: '',
|
---|
581 | reduceInlineStyles: true,
|
---|
582 | pruneSource: false,
|
---|
583 | additionalStylesheets: []
|
---|
584 | }, options || {});
|
---|
585 | /** @type {FileSystem | null} */
|
---|
586 |
|
---|
587 | this.fs = null;
|
---|
588 | this.urlFilter = this.options.filter;
|
---|
589 |
|
---|
590 | if (this.urlFilter instanceof RegExp) {
|
---|
591 | this.urlFilter = this.urlFilter.test.bind(this.urlFilter);
|
---|
592 | }
|
---|
593 |
|
---|
594 | this.logger = this.options.logger || createLogger(this.options.logLevel);
|
---|
595 | }
|
---|
596 | /**
|
---|
597 | * Process an HTML document to inline critical CSS from its stylesheets.
|
---|
598 | * @param {string} html String containing a full HTML document to be parsed.
|
---|
599 | * @returns {Promise<string>} A modified copy of the provided HTML with critical CSS inlined.
|
---|
600 | */
|
---|
601 |
|
---|
602 |
|
---|
603 | async process(html) {
|
---|
604 | const start = process.hrtime.bigint(); // Parse the generated HTML in a DOM we can mutate
|
---|
605 |
|
---|
606 | const document = createDocument(html);
|
---|
607 |
|
---|
608 | if (this.options.additionalStylesheets.length > 0) {
|
---|
609 | this.embedAdditionalStylesheet(document);
|
---|
610 | } // `external:false` skips processing of external sheets
|
---|
611 |
|
---|
612 |
|
---|
613 | if (this.options.external !== false) {
|
---|
614 | const externalSheets = [].slice.call(document.querySelectorAll('link[rel="stylesheet"]'));
|
---|
615 | await Promise.all(externalSheets.map(link => this.embedLinkedStylesheet(link, document)));
|
---|
616 | } // go through all the style tags in the document and reduce them to only critical CSS
|
---|
617 |
|
---|
618 |
|
---|
619 | const styles = this.getAffectedStyleTags(document);
|
---|
620 | await Promise.all(styles.map(style => this.processStyle(style, document)));
|
---|
621 |
|
---|
622 | if (this.options.mergeStylesheets !== false && styles.length !== 0) {
|
---|
623 | await this.mergeStylesheets(document);
|
---|
624 | } // serialize the document back to HTML and we're done
|
---|
625 |
|
---|
626 |
|
---|
627 | const output = serializeDocument(document);
|
---|
628 | const end = process.hrtime.bigint();
|
---|
629 | this.logger.info('Time ' + parseFloat(end - start) / 1000000.0);
|
---|
630 | return output;
|
---|
631 | }
|
---|
632 | /**
|
---|
633 | * Read the contents of a file from the specified filesystem or disk.
|
---|
634 | * Override this method to customize how stylesheets are loaded.
|
---|
635 | */
|
---|
636 |
|
---|
637 |
|
---|
638 | readFile(filename) {
|
---|
639 | const fs = this.fs;
|
---|
640 | return new Promise((resolve, reject) => {
|
---|
641 | const callback = (err, data) => {
|
---|
642 | if (err) reject(err);else resolve(data);
|
---|
643 | };
|
---|
644 |
|
---|
645 | if (fs && fs.readFile) {
|
---|
646 | const ret = fs.readFile(filename, callback);
|
---|
647 | if (ret && ret.then) resolve(ret);
|
---|
648 | } else {
|
---|
649 | Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('fs')); }).then(fs => {
|
---|
650 | fs.readFile(filename, 'utf-8', callback);
|
---|
651 | }).catch(callback);
|
---|
652 | }
|
---|
653 | });
|
---|
654 | }
|
---|
655 | /**
|
---|
656 | * Get the style tags that need processing
|
---|
657 | * @private
|
---|
658 | */
|
---|
659 |
|
---|
660 |
|
---|
661 | getAffectedStyleTags(document) {
|
---|
662 | const styles = [].slice.call(document.querySelectorAll('style')); // `inline:false` skips processing of inline stylesheets
|
---|
663 |
|
---|
664 | if (this.options.reduceInlineStyles === false) {
|
---|
665 | return styles.filter(style => style.$$external);
|
---|
666 | }
|
---|
667 |
|
---|
668 | return styles;
|
---|
669 | }
|
---|
670 | /** @private */
|
---|
671 |
|
---|
672 |
|
---|
673 | async mergeStylesheets(document) {
|
---|
674 | const styles = this.getAffectedStyleTags(document);
|
---|
675 |
|
---|
676 | if (styles.length === 0) {
|
---|
677 | this.logger.warn('Merging inline stylesheets into a single <style> tag skipped, no inline stylesheets to merge');
|
---|
678 | return;
|
---|
679 | }
|
---|
680 |
|
---|
681 | const first = styles[0];
|
---|
682 | let sheet = first.textContent;
|
---|
683 |
|
---|
684 | for (let i = 1; i < styles.length; i++) {
|
---|
685 | const node = styles[i];
|
---|
686 | sheet += node.textContent;
|
---|
687 | node.remove();
|
---|
688 | }
|
---|
689 |
|
---|
690 | first.textContent = sheet;
|
---|
691 | }
|
---|
692 | /**
|
---|
693 | * Given a stylesheet URL, returns the corresponding CSS asset.
|
---|
694 | * Overriding this method requires doing your own URL normalization, so it's generally better to override `readFile()`.
|
---|
695 | */
|
---|
696 |
|
---|
697 |
|
---|
698 | async getCssAsset(href) {
|
---|
699 | const outputPath = this.options.path;
|
---|
700 | const publicPath = this.options.publicPath; // CHECK - the output path
|
---|
701 | // path on disk (with output.publicPath removed)
|
---|
702 |
|
---|
703 | let normalizedPath = href.replace(/^\//, '');
|
---|
704 | const pathPrefix = (publicPath || '').replace(/(^\/|\/$)/g, '') + '/';
|
---|
705 |
|
---|
706 | if (normalizedPath.indexOf(pathPrefix) === 0) {
|
---|
707 | normalizedPath = normalizedPath.substring(pathPrefix.length).replace(/^\//, '');
|
---|
708 | }
|
---|
709 |
|
---|
710 | const filename = path__default['default'].resolve(outputPath, normalizedPath);
|
---|
711 | let sheet;
|
---|
712 |
|
---|
713 | try {
|
---|
714 | sheet = await this.readFile(filename);
|
---|
715 | } catch (e) {
|
---|
716 | this.logger.warn(`Unable to locate stylesheet: ${filename}`);
|
---|
717 | }
|
---|
718 |
|
---|
719 | return sheet;
|
---|
720 | }
|
---|
721 | /** @private */
|
---|
722 |
|
---|
723 |
|
---|
724 | checkInlineThreshold(link, style, sheet) {
|
---|
725 | if (this.options.inlineThreshold && sheet.length < this.options.inlineThreshold) {
|
---|
726 | const href = style.$$name;
|
---|
727 | style.$$reduce = false;
|
---|
728 | this.logger.info(`\u001b[32mInlined all of ${href} (${sheet.length} was below the threshold of ${this.options.inlineThreshold})\u001b[39m`);
|
---|
729 | link.remove();
|
---|
730 | return true;
|
---|
731 | }
|
---|
732 |
|
---|
733 | return false;
|
---|
734 | }
|
---|
735 | /**
|
---|
736 | * Inline the stylesheets from options.additionalStylesheets (assuming it passes `options.filter`)
|
---|
737 | * @private
|
---|
738 | */
|
---|
739 |
|
---|
740 |
|
---|
741 | async embedAdditionalStylesheet(document) {
|
---|
742 | const styleSheetsIncluded = [];
|
---|
743 | const sources = await Promise.all(this.options.additionalStylesheets.map(cssFile => {
|
---|
744 | if (styleSheetsIncluded.includes(cssFile)) {
|
---|
745 | return;
|
---|
746 | }
|
---|
747 |
|
---|
748 | styleSheetsIncluded.push(cssFile);
|
---|
749 | const style = document.createElement('style');
|
---|
750 | style.$$external = true;
|
---|
751 | return this.getCssAsset(cssFile, style).then(sheet => [sheet, style]);
|
---|
752 | }));
|
---|
753 | sources.forEach(([sheet, style]) => {
|
---|
754 | if (!sheet) return;
|
---|
755 | style.textContent = sheet;
|
---|
756 | document.head.appendChild(style);
|
---|
757 | });
|
---|
758 | }
|
---|
759 | /**
|
---|
760 | * Inline the target stylesheet referred to by a <link rel="stylesheet"> (assuming it passes `options.filter`)
|
---|
761 | * @private
|
---|
762 | */
|
---|
763 |
|
---|
764 |
|
---|
765 | async embedLinkedStylesheet(link, document) {
|
---|
766 | const href = link.getAttribute('href');
|
---|
767 | const media = link.getAttribute('media');
|
---|
768 | const preloadMode = this.options.preload; // skip filtered resources, or network resources if no filter is provided
|
---|
769 |
|
---|
770 | if (this.urlFilter ? this.urlFilter(href) : !(href || '').match(/\.css$/)) {
|
---|
771 | return Promise.resolve();
|
---|
772 | } // the reduced critical CSS gets injected into a new <style> tag
|
---|
773 |
|
---|
774 |
|
---|
775 | const style = document.createElement('style');
|
---|
776 | style.$$external = true;
|
---|
777 | const sheet = await this.getCssAsset(href, style);
|
---|
778 |
|
---|
779 | if (!sheet) {
|
---|
780 | return;
|
---|
781 | }
|
---|
782 |
|
---|
783 | style.textContent = sheet;
|
---|
784 | style.$$name = href;
|
---|
785 | style.$$links = [link];
|
---|
786 | link.parentNode.insertBefore(style, link);
|
---|
787 |
|
---|
788 | if (this.checkInlineThreshold(link, style, sheet)) {
|
---|
789 | return;
|
---|
790 | } // CSS loader is only injected for the first sheet, then this becomes an empty string
|
---|
791 |
|
---|
792 |
|
---|
793 | let cssLoaderPreamble = "function $loadcss(u,m,l){(l=document.createElement('link')).rel='stylesheet';l.href=u;document.head.appendChild(l)}";
|
---|
794 | const lazy = preloadMode === 'js-lazy';
|
---|
795 |
|
---|
796 | if (lazy) {
|
---|
797 | cssLoaderPreamble = cssLoaderPreamble.replace('l.href', "l.media='print';l.onload=function(){l.media=m};l.href");
|
---|
798 | } // Allow disabling any mutation of the stylesheet link:
|
---|
799 |
|
---|
800 |
|
---|
801 | if (preloadMode === false) return;
|
---|
802 | let noscriptFallback = false;
|
---|
803 |
|
---|
804 | if (preloadMode === 'body') {
|
---|
805 | document.body.appendChild(link);
|
---|
806 | } else {
|
---|
807 | link.setAttribute('rel', 'preload');
|
---|
808 | link.setAttribute('as', 'style');
|
---|
809 |
|
---|
810 | if (preloadMode === 'js' || preloadMode === 'js-lazy') {
|
---|
811 | const script = document.createElement('script');
|
---|
812 | const js = `${cssLoaderPreamble}$loadcss(${JSON.stringify(href)}${lazy ? ',' + JSON.stringify(media || 'all') : ''})`; // script.appendChild(document.createTextNode(js));
|
---|
813 |
|
---|
814 | script.textContent = js;
|
---|
815 | link.parentNode.insertBefore(script, link.nextSibling);
|
---|
816 | style.$$links.push(script);
|
---|
817 | cssLoaderPreamble = '';
|
---|
818 | noscriptFallback = true;
|
---|
819 | } else if (preloadMode === 'media') {
|
---|
820 | // @see https://github.com/filamentgroup/loadCSS/blob/af1106cfe0bf70147e22185afa7ead96c01dec48/src/loadCSS.js#L26
|
---|
821 | link.setAttribute('rel', 'stylesheet');
|
---|
822 | link.removeAttribute('as');
|
---|
823 | link.setAttribute('media', 'print');
|
---|
824 | link.setAttribute('onload', `this.media='${media || 'all'}'`);
|
---|
825 | noscriptFallback = true;
|
---|
826 | } else if (preloadMode === 'swap') {
|
---|
827 | link.setAttribute('onload', "this.rel='stylesheet'");
|
---|
828 | noscriptFallback = true;
|
---|
829 | } else {
|
---|
830 | const bodyLink = document.createElement('link');
|
---|
831 | bodyLink.setAttribute('rel', 'stylesheet');
|
---|
832 | if (media) bodyLink.setAttribute('media', media);
|
---|
833 | bodyLink.setAttribute('href', href);
|
---|
834 | document.body.appendChild(bodyLink);
|
---|
835 | style.$$links.push(bodyLink);
|
---|
836 | }
|
---|
837 | }
|
---|
838 |
|
---|
839 | if (this.options.noscriptFallback !== false && noscriptFallback) {
|
---|
840 | const noscript = document.createElement('noscript');
|
---|
841 | const noscriptLink = document.createElement('link');
|
---|
842 | noscriptLink.setAttribute('rel', 'stylesheet');
|
---|
843 | noscriptLink.setAttribute('href', href);
|
---|
844 | if (media) noscriptLink.setAttribute('media', media);
|
---|
845 | noscript.appendChild(noscriptLink);
|
---|
846 | link.parentNode.insertBefore(noscript, link.nextSibling);
|
---|
847 | style.$$links.push(noscript);
|
---|
848 | }
|
---|
849 | }
|
---|
850 | /**
|
---|
851 | * Prune the source CSS files
|
---|
852 | * @private
|
---|
853 | */
|
---|
854 |
|
---|
855 |
|
---|
856 | pruneSource(style, before, sheetInverse) {
|
---|
857 | // if external stylesheet would be below minimum size, just inline everything
|
---|
858 | const minSize = this.options.minimumExternalSize;
|
---|
859 | const name = style.$$name;
|
---|
860 |
|
---|
861 | if (minSize && sheetInverse.length < minSize) {
|
---|
862 | this.logger.info(`\u001b[32mInlined all of ${name} (non-critical external stylesheet would have been ${sheetInverse.length}b, which was below the threshold of ${minSize})\u001b[39m`);
|
---|
863 | style.textContent = before; // remove any associated external resources/loaders:
|
---|
864 |
|
---|
865 | if (style.$$links) {
|
---|
866 | for (const link of style.$$links) {
|
---|
867 | const parent = link.parentNode;
|
---|
868 | if (parent) parent.removeChild(link);
|
---|
869 | }
|
---|
870 | }
|
---|
871 |
|
---|
872 | return true;
|
---|
873 | }
|
---|
874 |
|
---|
875 | return false;
|
---|
876 | }
|
---|
877 | /**
|
---|
878 | * Parse the stylesheet within a <style> element, then reduce it to contain only rules used by the document.
|
---|
879 | * @private
|
---|
880 | */
|
---|
881 |
|
---|
882 |
|
---|
883 | async processStyle(style, document) {
|
---|
884 | if (style.$$reduce === false) return;
|
---|
885 | const name = style.$$name ? style.$$name.replace(/^\//, '') : 'inline CSS';
|
---|
886 | const options = this.options; // const document = style.ownerDocument;
|
---|
887 |
|
---|
888 | const head = document.querySelector('head');
|
---|
889 | let keyframesMode = options.keyframes || 'critical'; // we also accept a boolean value for options.keyframes
|
---|
890 |
|
---|
891 | if (keyframesMode === true) keyframesMode = 'all';
|
---|
892 | if (keyframesMode === false) keyframesMode = 'none';
|
---|
893 | let sheet = style.textContent; // store a reference to the previous serialized stylesheet for reporting stats
|
---|
894 |
|
---|
895 | const before = sheet; // Skip empty stylesheets
|
---|
896 |
|
---|
897 | if (!sheet) return;
|
---|
898 | const ast = parseStylesheet(sheet);
|
---|
899 | const astInverse = options.pruneSource ? parseStylesheet(sheet) : null; // a string to search for font names (very loose)
|
---|
900 |
|
---|
901 | let criticalFonts = '';
|
---|
902 | const failedSelectors = [];
|
---|
903 | const criticalKeyframeNames = []; // Walk all CSS rules, marking unused rules with `.$$remove=true` for removal in the second pass.
|
---|
904 | // This first pass is also used to collect font and keyframe usage used in the second pass.
|
---|
905 |
|
---|
906 | walkStyleRules(ast, markOnly(rule => {
|
---|
907 | if (rule.type === 'rule') {
|
---|
908 | // Filter the selector list down to only those match
|
---|
909 | rule.filterSelectors(sel => {
|
---|
910 | // Strip pseudo-elements and pseudo-classes, since we only care that their associated elements exist.
|
---|
911 | // This means any selector for a pseudo-element or having a pseudo-class will be inlined if the rest of the selector matches.
|
---|
912 | if (sel === ':root' || sel.match(/^::?(before|after)$/)) {
|
---|
913 | return true;
|
---|
914 | }
|
---|
915 |
|
---|
916 | sel = sel.replace(/(?<!\\)::?[a-z-]+(?![a-z-(])/gi, '').replace(/::?not\(\s*\)/g, '').trim();
|
---|
917 | if (!sel) return false;
|
---|
918 |
|
---|
919 | try {
|
---|
920 | return document.querySelector(sel) != null;
|
---|
921 | } catch (e) {
|
---|
922 | failedSelectors.push(sel + ' -> ' + e.message);
|
---|
923 | return false;
|
---|
924 | }
|
---|
925 | }); // If there are no matched selectors, remove the rule:
|
---|
926 |
|
---|
927 | if (rule.selectors.length === 0) {
|
---|
928 | return false;
|
---|
929 | }
|
---|
930 |
|
---|
931 | if (rule.declarations) {
|
---|
932 | for (let i = 0; i < rule.declarations.length; i++) {
|
---|
933 | const decl = rule.declarations[i]; // detect used fonts
|
---|
934 |
|
---|
935 | if (decl.property && decl.property.match(/\bfont(-family)?\b/i)) {
|
---|
936 | criticalFonts += ' ' + decl.value;
|
---|
937 | } // detect used keyframes
|
---|
938 |
|
---|
939 |
|
---|
940 | if (decl.property === 'animation' || decl.property === 'animation-name') {
|
---|
941 | // @todo: parse animation declarations and extract only the name. for now we'll do a lazy match.
|
---|
942 | const names = decl.value.split(/\s+/);
|
---|
943 |
|
---|
944 | for (let j = 0; j < names.length; j++) {
|
---|
945 | const name = names[j].trim();
|
---|
946 | if (name) criticalKeyframeNames.push(name);
|
---|
947 | }
|
---|
948 | }
|
---|
949 | }
|
---|
950 | }
|
---|
951 | } // keep font rules, they're handled in the second pass:
|
---|
952 |
|
---|
953 |
|
---|
954 | if (rule.type === 'font-face') return; // If there are no remaining rules, remove the whole rule:
|
---|
955 |
|
---|
956 | const rules = rule.rules && rule.rules.filter(rule => !rule.$$remove);
|
---|
957 | return !rules || rules.length !== 0;
|
---|
958 | }));
|
---|
959 |
|
---|
960 | if (failedSelectors.length !== 0) {
|
---|
961 | this.logger.warn(`${failedSelectors.length} rules skipped due to selector errors:\n ${failedSelectors.join('\n ')}`);
|
---|
962 | }
|
---|
963 |
|
---|
964 | const shouldPreloadFonts = options.fonts === true || options.preloadFonts === true;
|
---|
965 | const shouldInlineFonts = options.fonts !== false && options.inlineFonts === true;
|
---|
966 | const preloadedFonts = []; // Second pass, using data picked up from the first
|
---|
967 |
|
---|
968 | walkStyleRulesWithReverseMirror(ast, astInverse, rule => {
|
---|
969 | // remove any rules marked in the first pass
|
---|
970 | if (rule.$$remove === true) return false;
|
---|
971 | applyMarkedSelectors(rule); // prune @keyframes rules
|
---|
972 |
|
---|
973 | if (rule.type === 'keyframes') {
|
---|
974 | if (keyframesMode === 'none') return false;
|
---|
975 | if (keyframesMode === 'all') return true;
|
---|
976 | return criticalKeyframeNames.indexOf(rule.name) !== -1;
|
---|
977 | } // prune @font-face rules
|
---|
978 |
|
---|
979 |
|
---|
980 | if (rule.type === 'font-face') {
|
---|
981 | let family, src;
|
---|
982 |
|
---|
983 | for (let i = 0; i < rule.declarations.length; i++) {
|
---|
984 | const decl = rule.declarations[i];
|
---|
985 |
|
---|
986 | if (decl.property === 'src') {
|
---|
987 | // @todo parse this properly and generate multiple preloads with type="font/woff2" etc
|
---|
988 | src = (decl.value.match(/url\s*\(\s*(['"]?)(.+?)\1\s*\)/) || [])[2];
|
---|
989 | } else if (decl.property === 'font-family') {
|
---|
990 | family = decl.value;
|
---|
991 | }
|
---|
992 | }
|
---|
993 |
|
---|
994 | if (src && shouldPreloadFonts && preloadedFonts.indexOf(src) === -1) {
|
---|
995 | preloadedFonts.push(src);
|
---|
996 | const preload = document.createElement('link');
|
---|
997 | preload.setAttribute('rel', 'preload');
|
---|
998 | preload.setAttribute('as', 'font');
|
---|
999 | preload.setAttribute('crossorigin', 'anonymous');
|
---|
1000 | preload.setAttribute('href', src.trim());
|
---|
1001 | head.appendChild(preload);
|
---|
1002 | } // if we're missing info, if the font is unused, or if critical font inlining is disabled, remove the rule:
|
---|
1003 |
|
---|
1004 |
|
---|
1005 | if (!family || !src || criticalFonts.indexOf(family) === -1 || !shouldInlineFonts) {
|
---|
1006 | return false;
|
---|
1007 | }
|
---|
1008 | }
|
---|
1009 | });
|
---|
1010 | sheet = serializeStylesheet(ast, {
|
---|
1011 | compress: this.options.compress !== false
|
---|
1012 | }).trim(); // If all rules were removed, get rid of the style element entirely
|
---|
1013 |
|
---|
1014 | if (sheet.trim().length === 0) {
|
---|
1015 | if (style.parentNode) {
|
---|
1016 | style.remove();
|
---|
1017 | }
|
---|
1018 |
|
---|
1019 | return;
|
---|
1020 | }
|
---|
1021 |
|
---|
1022 | let afterText = '';
|
---|
1023 | let styleInlinedCompletely = false;
|
---|
1024 |
|
---|
1025 | if (options.pruneSource) {
|
---|
1026 | const sheetInverse = serializeStylesheet(astInverse, {
|
---|
1027 | compress: this.options.compress !== false
|
---|
1028 | });
|
---|
1029 | styleInlinedCompletely = this.pruneSource(style, before, sheetInverse);
|
---|
1030 |
|
---|
1031 | if (styleInlinedCompletely) {
|
---|
1032 | const percent = sheetInverse.length / before.length * 100;
|
---|
1033 | afterText = `, reducing non-inlined size ${percent | 0}% to ${prettyBytes__default['default'](sheetInverse.length)}`;
|
---|
1034 | }
|
---|
1035 | } // replace the inline stylesheet with its critical'd counterpart
|
---|
1036 |
|
---|
1037 |
|
---|
1038 | if (!styleInlinedCompletely) {
|
---|
1039 | style.textContent = sheet;
|
---|
1040 | } // output stats
|
---|
1041 |
|
---|
1042 |
|
---|
1043 | const percent = sheet.length / before.length * 100 | 0;
|
---|
1044 | this.logger.info('\u001b[32mInlined ' + prettyBytes__default['default'](sheet.length) + ' (' + percent + '% of original ' + prettyBytes__default['default'](before.length) + ') of ' + name + afterText + '.\u001b[39m');
|
---|
1045 | }
|
---|
1046 |
|
---|
1047 | }
|
---|
1048 |
|
---|
1049 | module.exports = Critters;
|
---|