@salesforce-ux/eslint-plugin-slds
Version:
ESLint plugin provides custom linting rules specifically built for Salesforce Lightning Design System 2 (SLDS 2 beta)
335 lines (324 loc) • 10.9 kB
JavaScript
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/rules/v9/no-hardcoded-values/handlers/boxShadowHandler.ts
var boxShadowHandler_exports = {};
__export(boxShadowHandler_exports, {
handleBoxShadowDeclaration: () => handleBoxShadowDeclaration
});
module.exports = __toCommonJS(boxShadowHandler_exports);
// src/utils/boxShadowValueParser.ts
var import_css_tree2 = require("@eslint/css-tree");
// src/utils/color-lib-utils.ts
var import_chroma_js = __toESM(require("chroma-js"));
var import_css_tree = require("@eslint/css-tree");
// src/utils/css-functions.ts
var CSS_FUNCTIONS = [
"attr",
"calc",
"color-mix",
"conic-gradient",
"counter",
"cubic-bezier",
"linear-gradient",
"max",
"min",
"radial-gradient",
"repeating-conic-gradient",
"repeating-linear-gradient",
"repeating-radial-gradient",
"var"
];
var CSS_MATH_FUNCTIONS = ["calc", "min", "max"];
var RGB_COLOR_FUNCTIONS = ["rgb", "rgba", "hsl", "hsla"];
var cssFunctionsRegex = new RegExp(`(?:${CSS_FUNCTIONS.join("|")})`);
var cssFunctionsExactRegex = new RegExp(`^(?:${CSS_FUNCTIONS.join("|")})$`);
var cssMathFunctionsRegex = new RegExp(`^(?:${CSS_MATH_FUNCTIONS.join("|")})$`);
function isCssColorFunction(value) {
return RGB_COLOR_FUNCTIONS.includes(value);
}
// src/utils/color-lib-utils.ts
var isValidColor = (val) => import_chroma_js.default.valid(val);
// src/utils/value-utils.ts
var ALLOWED_UNITS = ["px", "em", "rem", "%", "ch"];
function parseUnitValue(value) {
if (!value) return null;
const unitsPattern = ALLOWED_UNITS.join("|");
const regex = new RegExp(`^(-?\\d*\\.?\\d+)(${unitsPattern})?$`);
const match = value.match(regex);
if (!match) return null;
const number = parseFloat(match[1]);
const unit = match[2] ? match[2] : null;
if (isNaN(number)) return null;
return { number, unit };
}
// src/utils/boxShadowValueParser.ts
function isColorValue(node) {
if (!node) return false;
switch (node.type) {
case "Hash":
return true;
// #hex colors
case "Identifier":
return isValidColor(node.name);
case "Function":
return isCssColorFunction(node.name.toLowerCase());
default:
return false;
}
}
function isLengthValue(node) {
if (!node) return false;
switch (node.type) {
case "Dimension":
const dimensionStr = `${node.value}${node.unit}`;
return parseUnitValue(dimensionStr) !== null;
case "Number":
return Number(node.value) === 0;
default:
return false;
}
}
function isInsetKeyword(node) {
return node?.type === "Identifier" && node.name.toLowerCase() === "inset";
}
function extractShadowParts(valueText) {
const shadows = [];
let currentShadow = {
lengthParts: [],
colorParts: [],
inset: false
};
try {
const ast = (0, import_css_tree2.parse)(valueText, { context: "value" });
(0, import_css_tree2.walk)(ast, {
enter(node) {
if (node.type === "Function") {
return this.skip;
}
if (isInsetKeyword(node)) {
currentShadow.inset = true;
} else if (isLengthValue(node)) {
currentShadow.lengthParts.push((0, import_css_tree2.generate)(node));
} else if (isColorValue(node)) {
currentShadow.colorParts.push((0, import_css_tree2.generate)(node));
}
}
});
if (currentShadow.lengthParts.length > 0 || currentShadow.colorParts.length > 0 || currentShadow.inset) {
shadows.push(currentShadow);
}
} catch (error) {
return [];
}
return shadows;
}
function parseBoxShadowValue(value) {
const shadowStrings = value.split(",").map((s) => s.trim());
const allShadows = [];
for (const shadowString of shadowStrings) {
const shadows = extractShadowParts(shadowString);
const parsedShadows = shadows.map((shadow) => {
const shadowValue = {};
const lengthProps = ["offsetX", "offsetY", "blurRadius", "spreadRadius"];
lengthProps.forEach((prop, index) => {
if (shadow.lengthParts.length > index) {
shadowValue[prop] = shadow.lengthParts[index];
}
});
if (shadow.colorParts.length > 0) {
shadowValue.color = shadow.colorParts[0];
}
if (shadow.inset) {
shadowValue.inset = true;
}
return shadowValue;
});
allShadows.push(...parsedShadows);
}
return allShadows;
}
function normalizeLengthValue(value) {
if (!value) return "0px";
if (value === "0") return "0px";
return value;
}
function isBoxShadowMatch(parsedCssValue, parsedValueHook) {
if (parsedCssValue.length !== parsedValueHook.length) {
return false;
}
for (let i = 0; i < parsedCssValue.length; i++) {
const cssShadow = parsedCssValue[i];
const hookShadow = parsedValueHook[i];
if (cssShadow.color !== hookShadow.color || cssShadow.inset !== hookShadow.inset) {
return false;
}
const lengthProps = ["offsetX", "offsetY", "blurRadius", "spreadRadius"];
for (const prop of lengthProps) {
if (normalizeLengthValue(cssShadow[prop]) !== normalizeLengthValue(hookShadow[prop])) {
return false;
}
}
}
return true;
}
// src/utils/hardcoded-shared-utils.ts
var import_css_tree3 = require("@eslint/css-tree");
function handleShorthandAutoFix(declarationNode, context, valueText, replacements) {
const sortedReplacements = replacements.sort((a, b) => a.start - b.start);
const hasAnyHooks = sortedReplacements.some((r) => r.hasHook);
const canAutoFix = hasAnyHooks;
sortedReplacements.forEach(({ start, end, replacement, displayValue, hasHook }) => {
const originalValue = valueText.substring(start, end);
const valueStartColumn = declarationNode.value.loc.start.column;
const valueColumn = valueStartColumn + start;
const { loc: { start: locStart, end: locEnd } } = declarationNode.value;
const reportNode = {
...declarationNode.value,
loc: {
...declarationNode.value.loc,
start: {
...locStart,
column: valueColumn
},
end: {
...locEnd,
column: valueColumn + originalValue.length
}
}
};
if (hasHook) {
const fix = canAutoFix ? (fixer) => {
let newValue = valueText;
for (let i = sortedReplacements.length - 1; i >= 0; i--) {
const { start: rStart, end: rEnd, replacement: rReplacement } = sortedReplacements[i];
newValue = newValue.substring(0, rStart) + rReplacement + newValue.substring(rEnd);
}
return fixer.replaceText(declarationNode.value, newValue);
} : void 0;
context.context.report({
node: reportNode,
messageId: "hardcodedValue",
data: {
oldValue: originalValue,
newValue: displayValue
},
fix
});
} else {
context.context.report({
node: reportNode,
messageId: "noReplacement",
data: {
oldValue: originalValue
}
});
}
});
}
// src/utils/css-utils.ts
function formatSuggestionHooks(hooks) {
if (hooks.length === 1) {
return `${hooks[0]}`;
}
return "\n" + hooks.map((hook, index) => `${index + 1}. ${hook}`).join("\n");
}
// src/rules/v9/no-hardcoded-values/handlers/boxShadowHandler.ts
function toBoxShadowValue(cssValue) {
const parsedCssValue = parseBoxShadowValue(cssValue).filter((shadow) => Object.keys(shadow).length > 0);
if (parsedCssValue.length === 0) {
return null;
}
return parsedCssValue;
}
function shadowValueToHookEntries(supportedStylinghooks) {
return Object.entries(supportedStylinghooks).filter(([key, value]) => {
return value.some((hook) => hook.properties.includes("box-shadow"));
}).map(([key, value]) => {
return [key, value.map((hook) => hook.name)];
});
}
var handleBoxShadowDeclaration = (node, context) => {
const cssProperty = node.property.toLowerCase();
const valueText = context.sourceCode.getText(node.value);
const shadowHooks = shadowValueToHookEntries(context.valueToStylinghook);
const parsedCssValue = toBoxShadowValue(valueText);
if (!parsedCssValue) {
return;
}
for (const [shadow, closestHooks] of shadowHooks) {
const parsedValueHook = toBoxShadowValue(shadow);
if (parsedValueHook && isBoxShadowMatch(parsedCssValue, parsedValueHook)) {
if (closestHooks.length > 0) {
const positionInfo = {
start: { offset: 0, line: 1, column: 1 },
end: { offset: valueText.length, line: 1, column: valueText.length + 1 }
};
const replacement = createBoxShadowReplacement(
valueText,
closestHooks,
context,
positionInfo
);
if (replacement) {
const replacements = [replacement];
handleShorthandAutoFix(node, context, valueText, replacements);
}
}
return;
}
}
};
function createBoxShadowReplacement(originalValue, hooks, context, positionInfo) {
if (!positionInfo?.start) {
return null;
}
const start = positionInfo.start.offset;
const end = positionInfo.end.offset;
if (hooks.length === 1) {
return {
start,
end,
replacement: `var(${hooks[0]}, ${originalValue})`,
displayValue: hooks[0],
hasHook: true
};
} else {
return {
start,
end,
replacement: originalValue,
displayValue: formatSuggestionHooks(hooks),
hasHook: true
};
}
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
handleBoxShadowDeclaration
});
//# sourceMappingURL=boxShadowHandler.js.map