source: frontend/node_modules/postcss-reduce-transforms/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: 6.0 KB
Line 
1'use strict';
2const valueParser = require('postcss-value-parser');
3
4/**
5 * @param {(number|string)[]} list
6 * @param {valueParser.Node} node
7 * @param {number} index
8 * @return {(number|string)[]}
9 */
10function getValues(list, node, index) {
11 if (index % 2 === 0) {
12 /** @type {number|string} */
13 let value = NaN;
14
15 if (
16 node.type === 'function' &&
17 (node.value === 'var' || node.value === 'env') &&
18 node.nodes.length === 1
19 ) {
20 value = valueParser.stringify(node.nodes);
21 } else if (node.type === 'word') {
22 value = parseFloat(node.value);
23 }
24
25 return [...list, value];
26 }
27
28 return list;
29}
30
31/**
32 * @param {valueParser.FunctionNode} node
33 * @param {(number|string)[]} values
34 * @return {void}
35 */
36function matrix3d(node, values) {
37 if (values.length !== 16) {
38 return;
39 }
40
41 // matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) => matrix(a, b, c, d, tx, ty)
42 if (
43 values[15] &&
44 values[2] === 0 &&
45 values[3] === 0 &&
46 values[6] === 0 &&
47 values[7] === 0 &&
48 values[8] === 0 &&
49 values[9] === 0 &&
50 values[10] === 1 &&
51 values[11] === 0 &&
52 values[14] === 0 &&
53 values[15] === 1
54 ) {
55 const { nodes } = node;
56
57 node.value = 'matrix';
58 node.nodes = [
59 nodes[0], // a
60 nodes[1], // ,
61 nodes[2], // b
62 nodes[3], // ,
63 nodes[8], // c
64 nodes[9], // ,
65 nodes[10], // d
66 nodes[11], // ,
67 nodes[24], // tx
68 nodes[25], // ,
69 nodes[26], // ty
70 ];
71 }
72}
73
74const rotate3dMappings = new Map([
75 [[1, 0, 0].toString(), 'rotateX'], // rotate3d(1, 0, 0, a) => rotateX(a)
76 [[0, 1, 0].toString(), 'rotateY'], // rotate3d(0, 1, 0, a) => rotateY(a)
77 [[0, 0, 1].toString(), 'rotate'], // rotate3d(0, 0, 1, a) => rotate(a)
78]);
79
80/**
81 * @param {valueParser.FunctionNode} node
82 * @param {(number|string)[]} values
83 * @return {void}
84 */
85function rotate3d(node, values) {
86 if (values.length !== 4) {
87 return;
88 }
89
90 const { nodes } = node;
91 const match = rotate3dMappings.get(values.slice(0, 3).toString());
92
93 if (match) {
94 node.value = match;
95 node.nodes = [nodes[6]];
96 }
97}
98
99/**
100 * @param {valueParser.FunctionNode} node
101 * @param {(number|string)[]} values
102 * @return {void}
103 */
104function rotateZ(node, values) {
105 if (values.length !== 1) {
106 return;
107 }
108
109 // rotateZ(rz) => rotate(rz)
110 node.value = 'rotate';
111}
112
113/**
114 * @param {valueParser.FunctionNode} node
115 * @param {(number|string)[]} values
116 * @return {void}
117 */
118function scale(node, values) {
119 if (values.length !== 2) {
120 return;
121 }
122
123 const { nodes } = node;
124 const [first, second] = values;
125
126 // scale(sx, sy) => scale(sx)
127 if (first === second) {
128 node.nodes = [nodes[0]];
129
130 return;
131 }
132
133 // scale(sx, 1) => scaleX(sx)
134 if (second === 1) {
135 node.value = 'scaleX';
136 node.nodes = [nodes[0]];
137
138 return;
139 }
140
141 // scale(1, sy) => scaleY(sy)
142 if (first === 1) {
143 node.value = 'scaleY';
144 node.nodes = [nodes[2]];
145
146 return;
147 }
148}
149
150/**
151 * @param {valueParser.FunctionNode} node
152 * @param {(number|string)[]} values
153 * @return {void}
154 */
155function scale3d(node, values) {
156 if (values.length !== 3) {
157 return;
158 }
159
160 const { nodes } = node;
161 const [first, second, third] = values;
162
163 // scale3d(sx, 1, 1) => scaleX(sx)
164 if (second === 1 && third === 1) {
165 node.value = 'scaleX';
166 node.nodes = [nodes[0]];
167
168 return;
169 }
170
171 // scale3d(1, sy, 1) => scaleY(sy)
172 if (first === 1 && third === 1) {
173 node.value = 'scaleY';
174 node.nodes = [nodes[2]];
175
176 return;
177 }
178
179 // scale3d(1, 1, sz) => scaleZ(sz)
180 if (first === 1 && second === 1) {
181 node.value = 'scaleZ';
182 node.nodes = [nodes[4]];
183
184 return;
185 }
186}
187
188/**
189 * @param {valueParser.FunctionNode} node
190 * @param {(number|string)[]} values
191 * @return {void}
192 */
193function translate(node, values) {
194 if (values.length !== 2) {
195 return;
196 }
197
198 const { nodes } = node;
199
200 // translate(tx, 0) => translate(tx)
201 if (values[1] === 0) {
202 node.nodes = [nodes[0]];
203
204 return;
205 }
206
207 // translate(0, ty) => translateY(ty)
208 if (values[0] === 0) {
209 node.value = 'translateY';
210 node.nodes = [nodes[2]];
211
212 return;
213 }
214}
215
216/**
217 * @param {valueParser.FunctionNode} node
218 * @param {(number|string)[]} values
219 * @return {void}
220 */
221function translate3d(node, values) {
222 if (values.length !== 3) {
223 return;
224 }
225
226 const { nodes } = node;
227
228 // translate3d(0, 0, tz) => translateZ(tz)
229 if (values[0] === 0 && values[1] === 0) {
230 node.value = 'translateZ';
231 node.nodes = [nodes[4]];
232 }
233}
234
235const reducers = new Map([
236 ['matrix3d', matrix3d],
237 ['rotate3d', rotate3d],
238 ['rotateZ', rotateZ],
239 ['scale', scale],
240 ['scale3d', scale3d],
241 ['translate', translate],
242 ['translate3d', translate3d],
243]);
244/**
245 * @param {string} name
246 * @return {string}
247 */
248function normalizeReducerName(name) {
249 const lowerCasedName = name.toLowerCase();
250
251 if (lowerCasedName === 'rotatez') {
252 return 'rotateZ';
253 }
254
255 return lowerCasedName;
256}
257
258/**
259 * @param {valueParser.Node} node
260 * @return {false}
261 */
262function reduce(node) {
263 if (node.type === 'function') {
264 const normalizedReducerName = normalizeReducerName(node.value);
265 const reducer = reducers.get(normalizedReducerName);
266 if (reducer !== undefined) {
267 reducer(node, node.nodes.reduce(getValues, []));
268 }
269 }
270 return false;
271}
272
273/**
274 * @type {import('postcss').PluginCreator<void>}
275 * @return {import('postcss').Plugin}
276 */
277function pluginCreator() {
278 return {
279 postcssPlugin: 'postcss-reduce-transforms',
280 prepare() {
281 const cache = new Map();
282 return {
283 OnceExit(css) {
284 css.walkDecls(/transform$/i, (decl) => {
285 const value = decl.value;
286
287 if (!value) {
288 return;
289 }
290
291 if (cache.has(value)) {
292 decl.value = cache.get(value);
293
294 return;
295 }
296
297 const result = valueParser(value).walk(reduce).toString();
298
299 decl.value = result;
300 cache.set(value, result);
301 });
302 },
303 };
304 },
305 };
306}
307
308pluginCreator.postcss = true;
309module.exports = pluginCreator;
Note: See TracBrowser for help on using the repository browser.