source: frontend/node_modules/postcss-minify-gradients/src/index.js

Last change on this file was 9af201e, checked in by MBK <marija.karapandzova@…>, 12 days ago

Fix frontend appearance

  • Property mode set to 100644
File size: 5.2 KB
Line 
1'use strict';
2const valueParser = require('postcss-value-parser');
3const { getArguments } = require('cssnano-utils');
4const isColorStop = require('./isColorStop.js');
5
6const 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 */
18function 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 */
28function 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 */
214function pluginCreator() {
215 return {
216 postcssPlugin: 'postcss-minify-gradients',
217 OnceExit(css) {
218 css.walkDecls(optimise);
219 },
220 };
221}
222
223pluginCreator.postcss = true;
224module.exports = pluginCreator;
Note: See TracBrowser for help on using the repository browser.