| [9af201e] | 1 | 'use strict';
|
|---|
| 2 | const valueParser = require('postcss-value-parser');
|
|---|
| 3 | const { getArguments } = require('cssnano-utils');
|
|---|
| 4 | const isColorStop = require('./isColorStop.js');
|
|---|
| 5 |
|
|---|
| 6 | const angles = {
|
|---|
| 7 | top: '0deg',
|
|---|
| 8 | right: '90deg',
|
|---|
| 9 | bottom: '180deg',
|
|---|
| 10 | left: '270deg',
|
|---|
| 11 | };
|
|---|
| 12 |
|
|---|
| 13 | /**
|
|---|
| 14 | * @param {valueParser.Dimension} a
|
|---|
| 15 | * @param {valueParser.Dimension} b
|
|---|
| 16 | * @return {boolean}
|
|---|
| 17 | */
|
|---|
| 18 | function isLessThan(a, b) {
|
|---|
| 19 | return (
|
|---|
| 20 | a.unit.toLowerCase() === b.unit.toLowerCase() &&
|
|---|
| 21 | parseFloat(a.number) >= parseFloat(b.number)
|
|---|
| 22 | );
|
|---|
| 23 | }
|
|---|
| 24 | /**
|
|---|
| 25 | * @param {import('postcss').Declaration} decl
|
|---|
| 26 | * @return {void}
|
|---|
| 27 | */
|
|---|
| 28 | function optimise(decl) {
|
|---|
| 29 | const value = decl.value;
|
|---|
| 30 |
|
|---|
| 31 | if (!value) {
|
|---|
| 32 | return;
|
|---|
| 33 | }
|
|---|
| 34 |
|
|---|
| 35 | const normalizedValue = value.toLowerCase();
|
|---|
| 36 |
|
|---|
| 37 | if (normalizedValue.includes('var(') || normalizedValue.includes('env(')) {
|
|---|
| 38 | return;
|
|---|
| 39 | }
|
|---|
| 40 |
|
|---|
| 41 | if (!normalizedValue.includes('gradient')) {
|
|---|
| 42 | return;
|
|---|
| 43 | }
|
|---|
| 44 |
|
|---|
| 45 | decl.value = valueParser(value)
|
|---|
| 46 | .walk((node) => {
|
|---|
| 47 | if (node.type !== 'function' || !node.nodes.length) {
|
|---|
| 48 | return false;
|
|---|
| 49 | }
|
|---|
| 50 |
|
|---|
| 51 | const lowerCasedValue = node.value.toLowerCase();
|
|---|
| 52 |
|
|---|
| 53 | if (
|
|---|
| 54 | lowerCasedValue === 'linear-gradient' ||
|
|---|
| 55 | lowerCasedValue === 'repeating-linear-gradient' ||
|
|---|
| 56 | lowerCasedValue === '-webkit-linear-gradient' ||
|
|---|
| 57 | lowerCasedValue === '-webkit-repeating-linear-gradient'
|
|---|
| 58 | ) {
|
|---|
| 59 | let args = getArguments(node);
|
|---|
| 60 |
|
|---|
| 61 | if (
|
|---|
| 62 | node.nodes[0].value.toLowerCase() === 'to' &&
|
|---|
| 63 | args[0].length === 3
|
|---|
| 64 | ) {
|
|---|
| 65 | node.nodes = node.nodes.slice(2);
|
|---|
| 66 | node.nodes[0].value =
|
|---|
| 67 | angles[
|
|---|
| 68 | /** @type {'top'|'right'|'bottom'|'left'}*/ (
|
|---|
| 69 | node.nodes[0].value.toLowerCase()
|
|---|
| 70 | )
|
|---|
| 71 | ];
|
|---|
| 72 | }
|
|---|
| 73 |
|
|---|
| 74 | /** @type {valueParser.Dimension | false} */
|
|---|
| 75 | let lastStop;
|
|---|
| 76 |
|
|---|
| 77 | args.forEach((arg, index) => {
|
|---|
| 78 | if (arg.length !== 3) {
|
|---|
| 79 | return;
|
|---|
| 80 | }
|
|---|
| 81 |
|
|---|
| 82 | let isFinalStop = index === args.length - 1;
|
|---|
| 83 | let thisStop = valueParser.unit(arg[2].value);
|
|---|
| 84 |
|
|---|
| 85 | if (lastStop === undefined) {
|
|---|
| 86 | lastStop = thisStop;
|
|---|
| 87 |
|
|---|
| 88 | if (
|
|---|
| 89 | !isFinalStop &&
|
|---|
| 90 | lastStop &&
|
|---|
| 91 | lastStop.number === '0' &&
|
|---|
| 92 | lastStop.unit.toLowerCase() !== 'deg'
|
|---|
| 93 | ) {
|
|---|
| 94 | arg[1].value = arg[2].value = '';
|
|---|
| 95 | }
|
|---|
| 96 |
|
|---|
| 97 | return;
|
|---|
| 98 | }
|
|---|
| 99 |
|
|---|
| 100 | if (lastStop && thisStop && isLessThan(lastStop, thisStop)) {
|
|---|
| 101 | arg[2].value = '0';
|
|---|
| 102 | }
|
|---|
| 103 |
|
|---|
| 104 | lastStop = thisStop;
|
|---|
| 105 |
|
|---|
| 106 | if (isFinalStop && arg[2].value === '100%') {
|
|---|
| 107 | arg[1].value = arg[2].value = '';
|
|---|
| 108 | }
|
|---|
| 109 | });
|
|---|
| 110 |
|
|---|
| 111 | return false;
|
|---|
| 112 | }
|
|---|
| 113 |
|
|---|
| 114 | if (
|
|---|
| 115 | lowerCasedValue === 'radial-gradient' ||
|
|---|
| 116 | lowerCasedValue === 'repeating-radial-gradient'
|
|---|
| 117 | ) {
|
|---|
| 118 | let args = getArguments(node);
|
|---|
| 119 | /** @type {valueParser.Dimension | false} */
|
|---|
| 120 | let lastStop;
|
|---|
| 121 |
|
|---|
| 122 | const hasAt = args[0].find((n) => n.value.toLowerCase() === 'at');
|
|---|
| 123 |
|
|---|
| 124 | args.forEach((arg, index) => {
|
|---|
| 125 | if (!arg[2] || (!index && hasAt)) {
|
|---|
| 126 | return;
|
|---|
| 127 | }
|
|---|
| 128 |
|
|---|
| 129 | let thisStop = valueParser.unit(arg[2].value);
|
|---|
| 130 |
|
|---|
| 131 | if (!lastStop) {
|
|---|
| 132 | lastStop = thisStop;
|
|---|
| 133 |
|
|---|
| 134 | return;
|
|---|
| 135 | }
|
|---|
| 136 |
|
|---|
| 137 | if (lastStop && thisStop && isLessThan(lastStop, thisStop)) {
|
|---|
| 138 | arg[2].value = '0';
|
|---|
| 139 | }
|
|---|
| 140 |
|
|---|
| 141 | lastStop = thisStop;
|
|---|
| 142 | });
|
|---|
| 143 |
|
|---|
| 144 | return false;
|
|---|
| 145 | }
|
|---|
| 146 |
|
|---|
| 147 | if (
|
|---|
| 148 | lowerCasedValue === '-webkit-radial-gradient' ||
|
|---|
| 149 | lowerCasedValue === '-webkit-repeating-radial-gradient'
|
|---|
| 150 | ) {
|
|---|
| 151 | let args = getArguments(node);
|
|---|
| 152 | /** @type {valueParser.Dimension | false} */
|
|---|
| 153 | let lastStop;
|
|---|
| 154 |
|
|---|
| 155 | args.forEach((arg) => {
|
|---|
| 156 | let color;
|
|---|
| 157 | let stop;
|
|---|
| 158 |
|
|---|
| 159 | if (arg[2] !== undefined) {
|
|---|
| 160 | if (arg[0].type === 'function') {
|
|---|
| 161 | color = `${arg[0].value}(${valueParser.stringify(arg[0].nodes)})`;
|
|---|
| 162 | } else {
|
|---|
| 163 | color = arg[0].value;
|
|---|
| 164 | }
|
|---|
| 165 |
|
|---|
| 166 | if (arg[2].type === 'function') {
|
|---|
| 167 | stop = `${arg[2].value}(${valueParser.stringify(arg[2].nodes)})`;
|
|---|
| 168 | } else {
|
|---|
| 169 | stop = arg[2].value;
|
|---|
| 170 | }
|
|---|
| 171 | } else {
|
|---|
| 172 | if (arg[0].type === 'function') {
|
|---|
| 173 | color = `${arg[0].value}(${valueParser.stringify(arg[0].nodes)})`;
|
|---|
| 174 | }
|
|---|
| 175 |
|
|---|
| 176 | color = arg[0].value;
|
|---|
| 177 | }
|
|---|
| 178 |
|
|---|
| 179 | color = color.toLowerCase();
|
|---|
| 180 |
|
|---|
| 181 | const colorStop =
|
|---|
| 182 | stop !== undefined
|
|---|
| 183 | ? isColorStop(color, stop.toLowerCase())
|
|---|
| 184 | : isColorStop(color);
|
|---|
| 185 |
|
|---|
| 186 | if (!colorStop || !arg[2]) {
|
|---|
| 187 | return;
|
|---|
| 188 | }
|
|---|
| 189 |
|
|---|
| 190 | let thisStop = valueParser.unit(arg[2].value);
|
|---|
| 191 |
|
|---|
| 192 | if (!lastStop) {
|
|---|
| 193 | lastStop = thisStop;
|
|---|
| 194 |
|
|---|
| 195 | return;
|
|---|
| 196 | }
|
|---|
| 197 |
|
|---|
| 198 | if (lastStop && thisStop && isLessThan(lastStop, thisStop)) {
|
|---|
| 199 | arg[2].value = '0';
|
|---|
| 200 | }
|
|---|
| 201 |
|
|---|
| 202 | lastStop = thisStop;
|
|---|
| 203 | });
|
|---|
| 204 |
|
|---|
| 205 | return false;
|
|---|
| 206 | }
|
|---|
| 207 | })
|
|---|
| 208 | .toString();
|
|---|
| 209 | }
|
|---|
| 210 | /**
|
|---|
| 211 | * @type {import('postcss').PluginCreator<void>}
|
|---|
| 212 | * @return {import('postcss').Plugin}
|
|---|
| 213 | */
|
|---|
| 214 | function pluginCreator() {
|
|---|
| 215 | return {
|
|---|
| 216 | postcssPlugin: 'postcss-minify-gradients',
|
|---|
| 217 | OnceExit(css) {
|
|---|
| 218 | css.walkDecls(optimise);
|
|---|
| 219 | },
|
|---|
| 220 | };
|
|---|
| 221 | }
|
|---|
| 222 |
|
|---|
| 223 | pluginCreator.postcss = true;
|
|---|
| 224 | module.exports = pluginCreator;
|
|---|