[6a3a178] | 1 | /**
|
---|
| 2 | * Copyright 2018 Google LLC
|
---|
| 3 | *
|
---|
| 4 | * Licensed under the Apache License, Version 2.0 (the "License"); you may not
|
---|
| 5 | * use this file except in compliance with the License. You may obtain a copy of
|
---|
| 6 | * the License at
|
---|
| 7 | *
|
---|
| 8 | * http://www.apache.org/licenses/LICENSE-2.0
|
---|
| 9 | *
|
---|
| 10 | * Unless required by applicable law or agreed to in writing, software
|
---|
| 11 | * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
---|
| 12 | * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
---|
| 13 | * License for the specific language governing permissions and limitations under
|
---|
| 14 | * the License.
|
---|
| 15 | */
|
---|
| 16 |
|
---|
[e29cc2e] | 17 | import { parse, stringify } from 'postcss';
|
---|
[6a3a178] | 18 |
|
---|
| 19 | /**
|
---|
| 20 | * Parse a textual CSS Stylesheet into a Stylesheet instance.
|
---|
[e29cc2e] | 21 | * Stylesheet is a mutable postcss AST with format similar to CSSOM.
|
---|
| 22 | * @see https://github.com/postcss/postcss/
|
---|
[6a3a178] | 23 | * @private
|
---|
| 24 | * @param {String} stylesheet
|
---|
| 25 | * @returns {css.Stylesheet} ast
|
---|
| 26 | */
|
---|
[e29cc2e] | 27 | export function parseStylesheet(stylesheet) {
|
---|
| 28 | return parse(stylesheet);
|
---|
[6a3a178] | 29 | }
|
---|
| 30 |
|
---|
| 31 | /**
|
---|
[e29cc2e] | 32 | * Serialize a postcss Stylesheet to a String of CSS.
|
---|
[6a3a178] | 33 | * @private
|
---|
| 34 | * @param {css.Stylesheet} ast A Stylesheet to serialize, such as one returned from `parseStylesheet()`
|
---|
[e29cc2e] | 35 | * @param {Object} options Options used by the stringify logic
|
---|
[6a3a178] | 36 | * @param {Boolean} [options.compress] Compress CSS output (removes comments, whitespace, etc)
|
---|
| 37 | */
|
---|
[e29cc2e] | 38 | export function serializeStylesheet(ast, options) {
|
---|
| 39 | let cssStr = '';
|
---|
| 40 |
|
---|
| 41 | stringify(ast, (result, node, type) => {
|
---|
| 42 | if (!options.compress) {
|
---|
| 43 | cssStr += result;
|
---|
| 44 | return;
|
---|
| 45 | }
|
---|
| 46 |
|
---|
| 47 | // Simple minification logic
|
---|
| 48 | if (node?.type === 'comment') return;
|
---|
| 49 |
|
---|
| 50 | if (node?.type === 'decl') {
|
---|
| 51 | const prefix = node.prop + node.raws.between;
|
---|
| 52 |
|
---|
| 53 | cssStr += result.replace(prefix, prefix.trim());
|
---|
| 54 | return;
|
---|
| 55 | }
|
---|
| 56 |
|
---|
| 57 | if (type === 'start') {
|
---|
| 58 | if (node.type === 'rule' && node.selectors) {
|
---|
| 59 | cssStr += node.selectors.join(',') + '{';
|
---|
| 60 | } else {
|
---|
| 61 | cssStr += result.replace(/\s\{$/, '{');
|
---|
| 62 | }
|
---|
| 63 | return;
|
---|
| 64 | }
|
---|
| 65 |
|
---|
| 66 | if (type === 'end' && result === '}' && node?.raws?.semicolon) {
|
---|
| 67 | cssStr = cssStr.slice(0, -1);
|
---|
| 68 | }
|
---|
| 69 |
|
---|
| 70 | cssStr += result.trim();
|
---|
| 71 | });
|
---|
| 72 |
|
---|
| 73 | return cssStr;
|
---|
[6a3a178] | 74 | }
|
---|
| 75 |
|
---|
| 76 | /**
|
---|
| 77 | * Converts a walkStyleRules() iterator to mark nodes with `.$$remove=true` instead of actually removing them.
|
---|
| 78 | * This means they can be removed in a second pass, allowing the first pass to be nondestructive (eg: to preserve mirrored sheets).
|
---|
| 79 | * @private
|
---|
| 80 | * @param {Function} iterator Invoked on each node in the tree. Return `false` to remove that node.
|
---|
| 81 | * @returns {(rule) => void} nonDestructiveIterator
|
---|
| 82 | */
|
---|
[e29cc2e] | 83 | export function markOnly(predicate) {
|
---|
| 84 | return (rule) => {
|
---|
[6a3a178] | 85 | const sel = rule.selectors;
|
---|
| 86 | if (predicate(rule) === false) {
|
---|
| 87 | rule.$$remove = true;
|
---|
| 88 | }
|
---|
| 89 | rule.$$markedSelectors = rule.selectors;
|
---|
| 90 | if (rule._other) {
|
---|
| 91 | rule._other.$$markedSelectors = rule._other.selectors;
|
---|
| 92 | }
|
---|
| 93 | rule.selectors = sel;
|
---|
| 94 | };
|
---|
| 95 | }
|
---|
| 96 |
|
---|
| 97 | /**
|
---|
| 98 | * Apply filtered selectors to a rule from a previous markOnly run.
|
---|
| 99 | * @private
|
---|
| 100 | * @param {css.Rule} rule The Rule to apply marked selectors to (if they exist).
|
---|
[e29cc2e] | 101 | */
|
---|
| 102 | export function applyMarkedSelectors(rule) {
|
---|
[6a3a178] | 103 | if (rule.$$markedSelectors) {
|
---|
| 104 | rule.selectors = rule.$$markedSelectors;
|
---|
| 105 | }
|
---|
| 106 | if (rule._other) {
|
---|
| 107 | applyMarkedSelectors(rule._other);
|
---|
| 108 | }
|
---|
| 109 | }
|
---|
| 110 |
|
---|
| 111 | /**
|
---|
| 112 | * Recursively walk all rules in a stylesheet.
|
---|
| 113 | * @private
|
---|
| 114 | * @param {css.Rule} node A Stylesheet or Rule to descend into.
|
---|
| 115 | * @param {Function} iterator Invoked on each node in the tree. Return `false` to remove that node.
|
---|
| 116 | */
|
---|
[e29cc2e] | 117 | export function walkStyleRules(node, iterator) {
|
---|
| 118 | node.nodes = node.nodes.filter((rule) => {
|
---|
| 119 | if (hasNestedRules(rule)) {
|
---|
[6a3a178] | 120 | walkStyleRules(rule, iterator);
|
---|
| 121 | }
|
---|
| 122 | rule._other = undefined;
|
---|
| 123 | rule.filterSelectors = filterSelectors;
|
---|
| 124 | return iterator(rule) !== false;
|
---|
| 125 | });
|
---|
| 126 | }
|
---|
| 127 |
|
---|
| 128 | /**
|
---|
| 129 | * Recursively walk all rules in two identical stylesheets, filtering nodes into one or the other based on a predicate.
|
---|
| 130 | * @private
|
---|
| 131 | * @param {css.Rule} node A Stylesheet or Rule to descend into.
|
---|
| 132 | * @param {css.Rule} node2 A second tree identical to `node`
|
---|
| 133 | * @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.
|
---|
| 134 | */
|
---|
[e29cc2e] | 135 | export function walkStyleRulesWithReverseMirror(node, node2, iterator) {
|
---|
[6a3a178] | 136 | if (node2 === null) return walkStyleRules(node, iterator);
|
---|
| 137 |
|
---|
[e29cc2e] | 138 | [node.nodes, node2.nodes] = splitFilter(
|
---|
| 139 | node.nodes,
|
---|
| 140 | node2.nodes,
|
---|
| 141 | (rule, index, rules, rules2) => {
|
---|
| 142 | const rule2 = rules2[index];
|
---|
| 143 | if (hasNestedRules(rule)) {
|
---|
| 144 | walkStyleRulesWithReverseMirror(rule, rule2, iterator);
|
---|
| 145 | }
|
---|
| 146 | rule._other = rule2;
|
---|
| 147 | rule.filterSelectors = filterSelectors;
|
---|
| 148 | return iterator(rule) !== false;
|
---|
[6a3a178] | 149 | }
|
---|
[e29cc2e] | 150 | );
|
---|
| 151 | }
|
---|
| 152 |
|
---|
| 153 | // Checks if a node has nested rules, like @media
|
---|
| 154 | // @keyframes are an exception since they are evaluated as a whole
|
---|
| 155 | function hasNestedRules(rule) {
|
---|
| 156 | return (
|
---|
| 157 | rule.nodes &&
|
---|
| 158 | rule.nodes.length &&
|
---|
| 159 | rule.nodes.some((n) => n.type === 'rule' || n.type === 'atrule') &&
|
---|
| 160 | rule.name !== 'keyframes'
|
---|
| 161 | );
|
---|
[6a3a178] | 162 | }
|
---|
| 163 |
|
---|
| 164 | // Like [].filter(), but applies the opposite filtering result to a second copy of the Array without a second pass.
|
---|
| 165 | // This is just a quicker version of generating the compliment of the set returned from a filter operation.
|
---|
[e29cc2e] | 166 | function splitFilter(a, b, predicate) {
|
---|
[6a3a178] | 167 | const aOut = [];
|
---|
| 168 | const bOut = [];
|
---|
| 169 | for (let index = 0; index < a.length; index++) {
|
---|
| 170 | if (predicate(a[index], index, a, b)) {
|
---|
| 171 | aOut.push(a[index]);
|
---|
| 172 | } else {
|
---|
| 173 | bOut.push(a[index]);
|
---|
| 174 | }
|
---|
| 175 | }
|
---|
| 176 | return [aOut, bOut];
|
---|
| 177 | }
|
---|
| 178 |
|
---|
| 179 | // can be invoked on a style rule to subset its selectors (with reverse mirroring)
|
---|
[e29cc2e] | 180 | function filterSelectors(predicate) {
|
---|
[6a3a178] | 181 | if (this._other) {
|
---|
[e29cc2e] | 182 | const [a, b] = splitFilter(
|
---|
| 183 | this.selectors,
|
---|
| 184 | this._other.selectors,
|
---|
| 185 | predicate
|
---|
| 186 | );
|
---|
[6a3a178] | 187 | this.selectors = a;
|
---|
| 188 | this._other.selectors = b;
|
---|
| 189 | } else {
|
---|
| 190 | this.selectors = this.selectors.filter(predicate);
|
---|
| 191 | }
|
---|
| 192 | }
|
---|