Marc Mintel
5397309103
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 20s
Build & Deploy / 🧪 QA (push) Failing after 34s
Build & Deploy / 🏗️ Build (push) Has started running
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Smoke Test (push) Has been cancelled
Build & Deploy / ⚡ Lighthouse (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
93 lines
3.0 KiB
Plaintext
93 lines
3.0 KiB
Plaintext
import { color } from '../color/index.mjs';
|
|
import { colorRegex } from '../utils/color-regex.mjs';
|
|
import { floatRegex } from '../utils/float-regex.mjs';
|
|
import { sanitize } from '../utils/sanitize.mjs';
|
|
|
|
function test(v) {
|
|
var _a, _b;
|
|
return (isNaN(v) &&
|
|
typeof v === "string" &&
|
|
(((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) +
|
|
(((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) >
|
|
0);
|
|
}
|
|
const NUMBER_TOKEN = "number";
|
|
const COLOR_TOKEN = "color";
|
|
const VAR_TOKEN = "var";
|
|
const VAR_FUNCTION_TOKEN = "var(";
|
|
const SPLIT_TOKEN = "${}";
|
|
// this regex consists of the `singleCssVariableRegex|rgbHSLValueRegex|digitRegex`
|
|
const complexRegex = /var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu;
|
|
function analyseComplexValue(value) {
|
|
const originalValue = value.toString();
|
|
const values = [];
|
|
const indexes = {
|
|
color: [],
|
|
number: [],
|
|
var: [],
|
|
};
|
|
const types = [];
|
|
let i = 0;
|
|
const tokenised = originalValue.replace(complexRegex, (parsedValue) => {
|
|
if (color.test(parsedValue)) {
|
|
indexes.color.push(i);
|
|
types.push(COLOR_TOKEN);
|
|
values.push(color.parse(parsedValue));
|
|
}
|
|
else if (parsedValue.startsWith(VAR_FUNCTION_TOKEN)) {
|
|
indexes.var.push(i);
|
|
types.push(VAR_TOKEN);
|
|
values.push(parsedValue);
|
|
}
|
|
else {
|
|
indexes.number.push(i);
|
|
types.push(NUMBER_TOKEN);
|
|
values.push(parseFloat(parsedValue));
|
|
}
|
|
++i;
|
|
return SPLIT_TOKEN;
|
|
});
|
|
const split = tokenised.split(SPLIT_TOKEN);
|
|
return { values, split, indexes, types };
|
|
}
|
|
function parseComplexValue(v) {
|
|
return analyseComplexValue(v).values;
|
|
}
|
|
function createTransformer(source) {
|
|
const { split, types } = analyseComplexValue(source);
|
|
const numSections = split.length;
|
|
return (v) => {
|
|
let output = "";
|
|
for (let i = 0; i < numSections; i++) {
|
|
output += split[i];
|
|
if (v[i] !== undefined) {
|
|
const type = types[i];
|
|
if (type === NUMBER_TOKEN) {
|
|
output += sanitize(v[i]);
|
|
}
|
|
else if (type === COLOR_TOKEN) {
|
|
output += color.transform(v[i]);
|
|
}
|
|
else {
|
|
output += v[i];
|
|
}
|
|
}
|
|
}
|
|
return output;
|
|
};
|
|
}
|
|
const convertNumbersToZero = (v) => typeof v === "number" ? 0 : v;
|
|
function getAnimatableNone(v) {
|
|
const parsed = parseComplexValue(v);
|
|
const transformer = createTransformer(v);
|
|
return transformer(parsed.map(convertNumbersToZero));
|
|
}
|
|
const complex = {
|
|
test,
|
|
parse: parseComplexValue,
|
|
createTransformer,
|
|
getAnimatableNone,
|
|
};
|
|
|
|
export { analyseComplexValue, complex };
|