1 | 'use strict';
|
---|
2 |
|
---|
3 | /**
|
---|
4 | * @typedef {import('../lib/types').XastElement} XastElement
|
---|
5 | */
|
---|
6 |
|
---|
7 | const { visitSkip, detachNodeFromParent } = require('../lib/xast.js');
|
---|
8 | const JSAPI = require('../lib/svgo/jsAPI.js');
|
---|
9 |
|
---|
10 | exports.name = 'mergeStyles';
|
---|
11 | exports.type = 'visitor';
|
---|
12 | exports.active = true;
|
---|
13 | exports.description = 'merge multiple style elements into one';
|
---|
14 |
|
---|
15 | /**
|
---|
16 | * Merge multiple style elements into one.
|
---|
17 | *
|
---|
18 | * @author strarsis <strarsis@gmail.com>
|
---|
19 | *
|
---|
20 | * @type {import('../lib/types').Plugin<void>}
|
---|
21 | */
|
---|
22 | exports.fn = () => {
|
---|
23 | /**
|
---|
24 | * @type {null | XastElement}
|
---|
25 | */
|
---|
26 | let firstStyleElement = null;
|
---|
27 | let collectedStyles = '';
|
---|
28 | let styleContentType = 'text';
|
---|
29 |
|
---|
30 | return {
|
---|
31 | element: {
|
---|
32 | enter: (node, parentNode) => {
|
---|
33 | // skip <foreignObject> content
|
---|
34 | if (node.name === 'foreignObject') {
|
---|
35 | return visitSkip;
|
---|
36 | }
|
---|
37 |
|
---|
38 | // collect style elements
|
---|
39 | if (node.name !== 'style') {
|
---|
40 | return;
|
---|
41 | }
|
---|
42 |
|
---|
43 | // skip <style> with invalid type attribute
|
---|
44 | if (
|
---|
45 | node.attributes.type != null &&
|
---|
46 | node.attributes.type !== '' &&
|
---|
47 | node.attributes.type !== 'text/css'
|
---|
48 | ) {
|
---|
49 | return;
|
---|
50 | }
|
---|
51 |
|
---|
52 | // extract style element content
|
---|
53 | let css = '';
|
---|
54 | for (const child of node.children) {
|
---|
55 | if (child.type === 'text') {
|
---|
56 | css += child.value;
|
---|
57 | }
|
---|
58 | if (child.type === 'cdata') {
|
---|
59 | styleContentType = 'cdata';
|
---|
60 | css += child.value;
|
---|
61 | }
|
---|
62 | }
|
---|
63 |
|
---|
64 | // remove empty style elements
|
---|
65 | if (css.trim().length === 0) {
|
---|
66 | detachNodeFromParent(node, parentNode);
|
---|
67 | return;
|
---|
68 | }
|
---|
69 |
|
---|
70 | // collect css and wrap with media query if present in attribute
|
---|
71 | if (node.attributes.media == null) {
|
---|
72 | collectedStyles += css;
|
---|
73 | } else {
|
---|
74 | collectedStyles += `@media ${node.attributes.media}{${css}}`;
|
---|
75 | delete node.attributes.media;
|
---|
76 | }
|
---|
77 |
|
---|
78 | // combine collected styles in the first style element
|
---|
79 | if (firstStyleElement == null) {
|
---|
80 | firstStyleElement = node;
|
---|
81 | } else {
|
---|
82 | detachNodeFromParent(node, parentNode);
|
---|
83 | firstStyleElement.children = [
|
---|
84 | new JSAPI(
|
---|
85 | { type: styleContentType, value: collectedStyles },
|
---|
86 | firstStyleElement
|
---|
87 | ),
|
---|
88 | ];
|
---|
89 | }
|
---|
90 | },
|
---|
91 | },
|
---|
92 | };
|
---|
93 | };
|
---|