Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 | 1x 1x 1x 1x 1x 1x 1x 7x 7x 7x 7x 7x 7x 7x 7x 7x 11x 11x 14x 7x 14x 14x 14x 14x 14x 725x 18x 18x 18x 18x 18x 18x 14x 14x 14x 14x 14x 14x 3x 11x 11x 7x 11x 7x 7x 7x 11x 11x 11x 11x 7x 6x 1x | const fs = require('fs-extra');
const glob = require('fast-glob');
const css = require('css');
const { readFileSync } = require('fs-extra');
const { filterObject } = require('../shared/utils/objects');
const { compileModularCSS } = require('./compile/modular-css');
const { propTypes } = require('./var-metadata');
/**
* Parses through generated modular CSS files and extracts vars
*/
const extractVarsFromSLDS = (props = {}) => {
const { callback, suppressOutput } = props;
const cssFolderExists = fs.existsSync('./.generated/css');
const varsAllowPattern = /^--slds-c/;
// if there's no css folder yet, generate it!
if (!cssFolderExists) {
compileModularCSS({ suppressOutput });
}
// logging
if (!suppressOutput) {
console.log('=> Clearing out Metadata');
}
fs.emptyDirSync('.generated/metadata');
// getting list of components and utilities to parse
const componentList = fs
.readdirSync('./.generated/css/components')
.map((name) => `./.generated/css/components/${name}/**/index.css`);
const utilityList = fs
.readdirSync('./.generated/css/utilities')
.map((name) => `./.generated/css/utilities/${name}/**/index.css`);
// parse through all variants of each component / util
componentList.concat(utilityList).map((fileGlob) => {
const cssFiles = glob.sync(fileGlob);
let varsData = {};
cssFiles.map((filename) => {
const cssContent = readFileSync(filename).toString();
const fileVars = extractVarsFromCSS(cssContent, {
allowPattern: varsAllowPattern,
});
if (Object.keys(fileVars).length > 0) {
varsData = Object.assign(fileVars, varsData);
}
});
if (Object.keys(varsData).length > 0) {
const fileParts = fileGlob.match(/generated\/css\/(.*?)\/(.*?)\//);
const itemType = fileParts[1];
const itemName = fileParts[2];
const outFile = `./.generated/metadata/${itemType}/${itemName}/styling-hooks.json`;
fs.ensureFile(outFile, () => {
fs.writeFileSync(outFile, JSON.stringify(varsData), 'utf8');
});
}
});
if (callback) callback();
};
/**
* Preprocess CSS to comment out container queries.
* This function comments out any container queries found in the CSS string
* to avoid syntax errors during parsing, as the current CSS parser does not
* support container queries.
*
* @param {string} css - The input CSS string.
* @return {string} - The preprocessed CSS string with container queries commented out.
*/
function preprocessCSS(css) {
return css.replace(/@container[^{]*\{[^}]*\}/g, '/* $& */');
}
/**
* Extracts CSS vars and their fallback values from a CSS string and
* returns it as an object
* @param {string} cssData
* @returns {object}
*/
const extractVarsFromCSS = (cssContent, options = {}) => {
const preprocessedCSS = preprocessCSS(cssContent);
const ast = css.parse(preprocessedCSS);
const rules = ast.stylesheet.rules.filter((rule) => rule.type === 'rule');
const { allowPattern } = options;
let list = {};
// retrieve the category names from the JSON config
const categories = Object.keys(propTypes);
rules.map((rule) => {
// Filter rule declarations to only those that contain at least one `var(...)` function
const filtered = rule.declarations.filter((dec) => {
Iif (!dec.value) return false;
// match on property values that contain at least one `var(...)` function
if (dec.value.match(/var\(/)) {
return true;
}
return false;
});
///
// is this a CSS variable
function isCssVarClause(value) {
// if it DOES contain `var(` it is a CSS variable clause
return !!value.includes('var(');
}
// is this a CSS variable reassignment
function isCssVarReassignment(value) {
// if it DOES NOT contain a comma it is a reassignment
return !value.includes(',');
}
// regex:
// var\( -> find something that starts with `var(`
// (?=\S*['-]*) -> positive lookahead, zero or more non-space characters and zero or more ' or - characters
// ([a-zA-Z'-]+) -> match group 1, one or more alpha characters
// \s*,\s* -> zero or more spaces, a comma, zero or more spaces
// (.+) -> match group 2, one or more of any character
// \) -> a closing parenthesis
const varRegex = /var\((?=\S*['-]*)([a-zA-Z'-]+)\s*[,]?\s*(.*)\)/;
// Sanitize a CSS property value
// - currently only removes extra content at the end of the value when closing parentheses aren't balanced
function sanitizeValue(value) {
let sanitizedValue = value;
let parens = 0;
let startParens = 0;
let endParens = 0;
// check each character of the value string to count opening & closing parentheses
for (let pos = 0; pos <= value.length; pos++) {
let char = value.charAt(pos);
switch (char) {
// increment parenthesis counter and startParens counter
case '(':
parens++;
startParens++;
break;
// decrement parenthesis counter and increment endParens counter
case ')':
parens--;
endParens++;
break;
}
// if we have unbalanced parentheses then sanitize
if (parens !== 0) {
// if we have too many closing parentheses then sanitize things at the end
if (endParens > startParens) {
// find the index of the last closing balanced parenthesis
const closingParens = value.matchAll(/\)/g);
// convert iterator object to an array
const closingParensArray = [];
for (const match of closingParens) {
closingParensArray.push(match);
}
// sort the array by ascending match index/position
closingParensArray.sort((a, b) => {
if (a.index < b.index) {
return -1;
}
if (a.index > b.index) {
return 1;
}
return 0;
});
// get the index of the balanced closing parenthesis we want to keep
const indexOfBalancedParen =
closingParensArray.length - (endParens - startParens) - 1; // -1 to make it a zero based index
const balancedClosingParenIndex =
closingParensArray[indexOfBalancedParen].index;
// remove the extra content at the end that has no opening parentheses to match
sanitizedValue = value.slice(0, balancedClosingParenIndex + 1); // +1 to avoid losing the parenthesis we want to keep
}
}
}
return sanitizedValue;
}
/**
* Recursively drill into a CSS value to find the fallback value
*
* @param {string} - CSS property's value
* @returns {object} - hookName, name of the hook; fallback, value of the fallback
*/
function findFallbackRecursively(value, recursionIndex = 0) {
// get the fallback value from the CSS variable clause
let regex = varRegex;
// do an initial match check
const initialMatches = value.match(regex);
let matches;
// we have a match
if (initialMatches) {
// sanitize the returned match value found to ensure we're digging into a properly formatted var(...) value
const sanitizedValue = sanitizeValue(initialMatches[0]);
matches = sanitizedValue.match(regex);
}
// if we found a match then begin the recursion
if (matches) {
let fallbackValue = matches[2];
// if we're not on the first iteration then add the valid hook to the list
if (recursionIndex > 0) {
addHookToList(matches[1], null);
}
// if we have another CSS variable clause then keep drilling in
if (isCssVarClause(fallbackValue)) {
return findFallbackRecursively(fallbackValue, recursionIndex++);
} else {
return matches[2].trim();
}
}
// if we have a reassignment
if (isCssVarReassignment(value)) {
return null;
}
return value;
}
///
// Add hook to the list to be shown
function addHookToList(hookName, fallbackValue) {
// do we have a category match? If so return it
const matchedCategory = categories.find((option) => {
if (hookName.includes(option)) {
return option;
}
});
// add the fallback value to the hook's object in the list of results
list[hookName] = { fallbackValue: fallbackValue };
// if a category was found add the metadata to the hook's object in the list of results
if (matchedCategory) {
list[hookName].category = propTypes[matchedCategory].type;
list[hookName].valueType =
propTypes[matchedCategory].valueTypes.join(', ');
}
}
if (filtered.length > 0) {
filtered.forEach((decl) => {
if (decl.value) {
// search for a `var(...)` value
let matches = decl.value.match(varRegex);
// if we found a match then extract the hook name, if no hook then return null
let hookName = matches ? matches[1] : null;
// recursively search for the fallback value
let fallback = findFallbackRecursively(decl.value);
// if we have a hook then generate an object to add to the list of results
if (hookName) {
addHookToList(hookName, fallback);
}
}
});
}
});
return allowPattern
? filterObject(list, (key) => RegExp(allowPattern).test(key))
: list;
};
module.exports = {
extractVarsFromCSS,
extractVarsFromSLDS,
};
|