@salesforce-ux/eslint-plugin-slds 1.0.8-internal → 1.0.9-internal
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/config/rule-messages.d.ts +2 -0
- package/build/config/rule-messages.js +197 -0
- package/build/config/rule-messages.js.map +7 -0
- package/build/index.js +40 -2471
- package/build/index.js.map +4 -4
- package/build/rules/enforce-bem-usage.js +16 -232
- package/build/rules/enforce-bem-usage.js.map +4 -4
- package/build/rules/modal-close-button-issue.js +11 -183
- package/build/rules/modal-close-button-issue.js.map +4 -4
- package/build/rules/no-deprecated-classes-slds2.js +4 -176
- package/build/rules/no-deprecated-classes-slds2.js.map +4 -4
- package/build/rules/v9/enforce-bem-usage.js +1 -161
- package/build/rules/v9/enforce-bem-usage.js.map +4 -4
- package/build/rules/v9/enforce-component-hook-naming-convention.js +1 -161
- package/build/rules/v9/enforce-component-hook-naming-convention.js.map +4 -4
- package/build/rules/v9/enforce-sds-to-slds-hooks.js +1 -161
- package/build/rules/v9/enforce-sds-to-slds-hooks.js.map +4 -4
- package/build/rules/v9/lwc-token-to-slds-hook.js +4 -262
- package/build/rules/v9/lwc-token-to-slds-hook.js.map +4 -4
- package/build/rules/v9/no-deprecated-slds-classes.js +1 -161
- package/build/rules/v9/no-deprecated-slds-classes.js.map +4 -4
- package/build/rules/v9/no-deprecated-tokens-slds1.js +29 -168
- package/build/rules/v9/no-deprecated-tokens-slds1.js.map +4 -4
- package/build/rules/v9/no-hardcoded-values/handlers/boxShadowHandler.js +9 -289
- package/build/rules/v9/no-hardcoded-values/handlers/boxShadowHandler.js.map +4 -4
- package/build/rules/v9/no-hardcoded-values/handlers/colorHandler.js +13 -283
- package/build/rules/v9/no-hardcoded-values/handlers/colorHandler.js.map +4 -4
- package/build/rules/v9/no-hardcoded-values/handlers/densityHandler.js +12 -328
- package/build/rules/v9/no-hardcoded-values/handlers/densityHandler.js.map +4 -4
- package/build/rules/v9/no-hardcoded-values/handlers/fontHandler.js +13 -309
- package/build/rules/v9/no-hardcoded-values/handlers/fontHandler.js.map +4 -4
- package/build/rules/v9/no-hardcoded-values/handlers/index.js +8 -875
- package/build/rules/v9/no-hardcoded-values/handlers/index.js.map +4 -4
- package/build/rules/v9/no-hardcoded-values/no-hardcoded-values-slds1.js +3 -1208
- package/build/rules/v9/no-hardcoded-values/no-hardcoded-values-slds1.js.map +4 -4
- package/build/rules/v9/no-hardcoded-values/no-hardcoded-values-slds2.js +3 -1208
- package/build/rules/v9/no-hardcoded-values/no-hardcoded-values-slds2.js.map +4 -4
- package/build/rules/v9/no-hardcoded-values/noHardcodedValueRule.js +22 -993
- package/build/rules/v9/no-hardcoded-values/noHardcodedValueRule.js.map +4 -4
- package/build/rules/v9/no-slds-class-overrides.js +1 -161
- package/build/rules/v9/no-slds-class-overrides.js.map +4 -4
- package/build/rules/v9/no-slds-namespace-for-custom-hooks.js +3 -252
- package/build/rules/v9/no-slds-namespace-for-custom-hooks.js.map +4 -4
- package/build/rules/v9/no-slds-private-var.js +1 -161
- package/build/rules/v9/no-slds-private-var.js.map +4 -4
- package/build/rules/v9/no-slds-var-without-fallback.js +3 -255
- package/build/rules/v9/no-slds-var-without-fallback.js.map +4 -4
- package/build/rules/v9/no-sldshook-fallback-for-lwctoken.js +1 -161
- package/build/rules/v9/no-sldshook-fallback-for-lwctoken.js.map +4 -4
- package/build/rules/v9/no-unsupported-hooks-slds2.js +1 -161
- package/build/rules/v9/no-unsupported-hooks-slds2.js.map +4 -4
- package/build/rules/v9/reduce-annotations.js +1 -161
- package/build/rules/v9/reduce-annotations.js.map +4 -4
- package/build/{src/utils → utils}/boxShadowValueParser.d.ts +1 -1
- package/build/utils/boxShadowValueParser.js +63 -93
- package/build/utils/boxShadowValueParser.js.map +4 -4
- package/build/utils/color-lib-utils.js +2 -29
- package/build/utils/color-lib-utils.js.map +3 -3
- package/build/{src/utils → utils}/css-utils.d.ts +7 -0
- package/build/utils/css-utils.js +10 -71
- package/build/utils/css-utils.js.map +4 -4
- package/build/utils/hardcoded-shared-utils.js +17 -82
- package/build/utils/hardcoded-shared-utils.js.map +4 -4
- package/build/utils/property-matcher.js +2 -2
- package/build/utils/property-matcher.js.map +2 -2
- package/build/utils/styling-hook-utils.js +16 -39
- package/build/utils/styling-hook-utils.js.map +3 -3
- package/build/{src/utils → utils}/value-utils.d.ts +2 -2
- package/build/utils/value-utils.js +8 -8
- package/build/utils/value-utils.js.map +2 -2
- package/package.json +5 -10
- package/src/config/rule-messages.yml +0 -143
- /package/build/{src/index.d.ts → index.d.ts} +0 -0
- /package/build/{src/rules → rules}/enforce-bem-usage.d.ts +0 -0
- /package/build/{src/rules → rules}/modal-close-button-issue.d.ts +0 -0
- /package/build/{src/rules → rules}/no-deprecated-classes-slds2.d.ts +0 -0
- /package/build/{src/rules → rules}/v9/enforce-bem-usage.d.ts +0 -0
- /package/build/{src/rules → rules}/v9/enforce-component-hook-naming-convention.d.ts +0 -0
- /package/build/{src/rules → rules}/v9/enforce-sds-to-slds-hooks.d.ts +0 -0
- /package/build/{src/rules → rules}/v9/lwc-token-to-slds-hook.d.ts +0 -0
- /package/build/{src/rules → rules}/v9/no-deprecated-slds-classes.d.ts +0 -0
- /package/build/{src/rules → rules}/v9/no-deprecated-tokens-slds1.d.ts +0 -0
- /package/build/{src/rules → rules}/v9/no-hardcoded-values/handlers/boxShadowHandler.d.ts +0 -0
- /package/build/{src/rules → rules}/v9/no-hardcoded-values/handlers/colorHandler.d.ts +0 -0
- /package/build/{src/rules → rules}/v9/no-hardcoded-values/handlers/densityHandler.d.ts +0 -0
- /package/build/{src/rules → rules}/v9/no-hardcoded-values/handlers/fontHandler.d.ts +0 -0
- /package/build/{src/rules → rules}/v9/no-hardcoded-values/handlers/index.d.ts +0 -0
- /package/build/{src/rules → rules}/v9/no-hardcoded-values/no-hardcoded-values-slds1.d.ts +0 -0
- /package/build/{src/rules → rules}/v9/no-hardcoded-values/no-hardcoded-values-slds2.d.ts +0 -0
- /package/build/{src/rules → rules}/v9/no-hardcoded-values/noHardcodedValueRule.d.ts +0 -0
- /package/build/{src/rules → rules}/v9/no-hardcoded-values/ruleOptionsSchema.d.ts +0 -0
- /package/build/{src/rules → rules}/v9/no-slds-class-overrides.d.ts +0 -0
- /package/build/{src/rules → rules}/v9/no-slds-namespace-for-custom-hooks.d.ts +0 -0
- /package/build/{src/rules → rules}/v9/no-slds-private-var.d.ts +0 -0
- /package/build/{src/rules → rules}/v9/no-slds-var-without-fallback.d.ts +0 -0
- /package/build/{src/rules → rules}/v9/no-sldshook-fallback-for-lwctoken.d.ts +0 -0
- /package/build/{src/rules → rules}/v9/no-unsupported-hooks-slds2.d.ts +0 -0
- /package/build/{src/rules → rules}/v9/reduce-annotations.d.ts +0 -0
- /package/build/{src/types → types}/index.d.ts +0 -0
- /package/build/{src/utils → utils}/color-lib-utils.d.ts +0 -0
- /package/build/{src/utils → utils}/css-functions.d.ts +0 -0
- /package/build/{src/utils → utils}/custom-mapping-utils.d.ts +0 -0
- /package/build/{src/utils → utils}/hardcoded-shared-utils.d.ts +0 -0
- /package/build/{src/utils → utils}/node.d.ts +0 -0
- /package/build/{src/utils → utils}/property-matcher.d.ts +0 -0
- /package/build/{src/utils → utils}/rule-utils.d.ts +0 -0
- /package/build/{src/utils → utils}/styling-hook-utils.d.ts +0 -0
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
1
|
var __defProp = Object.defineProperty;
|
|
3
2
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
5
|
var __export = (target, all) => {
|
|
8
6
|
for (var name in all)
|
|
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
14
|
}
|
|
17
15
|
return to;
|
|
18
16
|
};
|
|
19
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
-
mod
|
|
26
|
-
));
|
|
27
17
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
18
|
|
|
29
19
|
// src/rules/v9/no-hardcoded-values/handlers/boxShadowHandler.ts
|
|
@@ -32,282 +22,12 @@ __export(boxShadowHandler_exports, {
|
|
|
32
22
|
handleBoxShadowDeclaration: () => handleBoxShadowDeclaration
|
|
33
23
|
});
|
|
34
24
|
module.exports = __toCommonJS(boxShadowHandler_exports);
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
var
|
|
38
|
-
|
|
39
|
-
// src/utils/color-lib-utils.ts
|
|
40
|
-
var import_chroma_js = __toESM(require("chroma-js"));
|
|
41
|
-
var import_css_tree = require("@eslint/css-tree");
|
|
42
|
-
|
|
43
|
-
// src/utils/css-functions.ts
|
|
44
|
-
var CSS_FUNCTIONS = [
|
|
45
|
-
"attr",
|
|
46
|
-
"calc",
|
|
47
|
-
"color-mix",
|
|
48
|
-
"conic-gradient",
|
|
49
|
-
"counter",
|
|
50
|
-
"cubic-bezier",
|
|
51
|
-
"linear-gradient",
|
|
52
|
-
"max",
|
|
53
|
-
"min",
|
|
54
|
-
"radial-gradient",
|
|
55
|
-
"repeating-conic-gradient",
|
|
56
|
-
"repeating-linear-gradient",
|
|
57
|
-
"repeating-radial-gradient",
|
|
58
|
-
"var"
|
|
59
|
-
];
|
|
60
|
-
var CSS_MATH_FUNCTIONS = ["calc", "min", "max"];
|
|
61
|
-
var RGB_COLOR_FUNCTIONS = ["rgb", "rgba", "hsl", "hsla"];
|
|
62
|
-
var cssFunctionsRegex = new RegExp(`(?:${CSS_FUNCTIONS.join("|")})`);
|
|
63
|
-
var cssFunctionsExactRegex = new RegExp(`^(?:${CSS_FUNCTIONS.join("|")})$`);
|
|
64
|
-
var cssMathFunctionsRegex = new RegExp(`^(?:${CSS_MATH_FUNCTIONS.join("|")})$`);
|
|
65
|
-
function isCssColorFunction(value) {
|
|
66
|
-
return RGB_COLOR_FUNCTIONS.includes(value);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
// src/utils/color-lib-utils.ts
|
|
70
|
-
var isValidColor = (val) => import_chroma_js.default.valid(val);
|
|
71
|
-
|
|
72
|
-
// src/utils/value-utils.ts
|
|
73
|
-
var ALLOWED_UNITS = ["px", "em", "rem", "%", "ch"];
|
|
74
|
-
function parseUnitValue(value) {
|
|
75
|
-
if (!value) return null;
|
|
76
|
-
const unitsPattern = ALLOWED_UNITS.join("|");
|
|
77
|
-
const regex = new RegExp(`^(-?\\d*\\.?\\d+)(${unitsPattern})?$`);
|
|
78
|
-
const match = value.match(regex);
|
|
79
|
-
if (!match) return null;
|
|
80
|
-
const number = parseFloat(match[1]);
|
|
81
|
-
const unit = match[2] ? match[2] : null;
|
|
82
|
-
if (isNaN(number)) return null;
|
|
83
|
-
return { number, unit };
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
// src/utils/boxShadowValueParser.ts
|
|
87
|
-
function isColorValue(node) {
|
|
88
|
-
if (!node) return false;
|
|
89
|
-
switch (node.type) {
|
|
90
|
-
case "Hash":
|
|
91
|
-
return true;
|
|
92
|
-
// #hex colors
|
|
93
|
-
case "Identifier":
|
|
94
|
-
return isValidColor(node.name);
|
|
95
|
-
case "Function":
|
|
96
|
-
return isCssColorFunction(node.name.toLowerCase());
|
|
97
|
-
default:
|
|
98
|
-
return false;
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
function isLengthValue(node) {
|
|
102
|
-
if (!node) return false;
|
|
103
|
-
switch (node.type) {
|
|
104
|
-
case "Dimension":
|
|
105
|
-
const dimensionStr = `${node.value}${node.unit}`;
|
|
106
|
-
return parseUnitValue(dimensionStr) !== null;
|
|
107
|
-
case "Number":
|
|
108
|
-
return Number(node.value) === 0;
|
|
109
|
-
default:
|
|
110
|
-
return false;
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
function isInsetKeyword(node) {
|
|
114
|
-
return node?.type === "Identifier" && node.name.toLowerCase() === "inset";
|
|
115
|
-
}
|
|
116
|
-
function extractShadowParts(valueText) {
|
|
117
|
-
const shadows = [];
|
|
118
|
-
let currentShadow = {
|
|
119
|
-
lengthParts: [],
|
|
120
|
-
colorParts: [],
|
|
121
|
-
inset: false
|
|
122
|
-
};
|
|
123
|
-
try {
|
|
124
|
-
const ast = (0, import_css_tree2.parse)(valueText, { context: "value" });
|
|
125
|
-
(0, import_css_tree2.walk)(ast, {
|
|
126
|
-
enter(node) {
|
|
127
|
-
if (node.type === "Function") {
|
|
128
|
-
return this.skip;
|
|
129
|
-
}
|
|
130
|
-
if (isInsetKeyword(node)) {
|
|
131
|
-
currentShadow.inset = true;
|
|
132
|
-
} else if (isLengthValue(node)) {
|
|
133
|
-
currentShadow.lengthParts.push((0, import_css_tree2.generate)(node));
|
|
134
|
-
} else if (isColorValue(node)) {
|
|
135
|
-
currentShadow.colorParts.push((0, import_css_tree2.generate)(node));
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
});
|
|
139
|
-
if (currentShadow.lengthParts.length > 0 || currentShadow.colorParts.length > 0 || currentShadow.inset) {
|
|
140
|
-
shadows.push(currentShadow);
|
|
141
|
-
}
|
|
142
|
-
} catch (error) {
|
|
143
|
-
return [];
|
|
144
|
-
}
|
|
145
|
-
return shadows;
|
|
146
|
-
}
|
|
147
|
-
function parseBoxShadowValue(value) {
|
|
148
|
-
const shadowStrings = value.split(",").map((s) => s.trim());
|
|
149
|
-
const allShadows = [];
|
|
150
|
-
for (const shadowString of shadowStrings) {
|
|
151
|
-
const shadows = extractShadowParts(shadowString);
|
|
152
|
-
const parsedShadows = shadows.map((shadow) => {
|
|
153
|
-
const shadowValue = {};
|
|
154
|
-
const lengthProps = ["offsetX", "offsetY", "blurRadius", "spreadRadius"];
|
|
155
|
-
lengthProps.forEach((prop, index) => {
|
|
156
|
-
if (shadow.lengthParts.length > index) {
|
|
157
|
-
shadowValue[prop] = shadow.lengthParts[index];
|
|
158
|
-
}
|
|
159
|
-
});
|
|
160
|
-
if (shadow.colorParts.length > 0) {
|
|
161
|
-
shadowValue.color = shadow.colorParts[0];
|
|
162
|
-
}
|
|
163
|
-
if (shadow.inset) {
|
|
164
|
-
shadowValue.inset = true;
|
|
165
|
-
}
|
|
166
|
-
return shadowValue;
|
|
167
|
-
});
|
|
168
|
-
allShadows.push(...parsedShadows);
|
|
169
|
-
}
|
|
170
|
-
return allShadows;
|
|
171
|
-
}
|
|
172
|
-
function normalizeLengthValue(value) {
|
|
173
|
-
if (!value) return "0px";
|
|
174
|
-
if (value === "0") return "0px";
|
|
175
|
-
return value;
|
|
176
|
-
}
|
|
177
|
-
function isBoxShadowMatch(parsedCssValue, parsedValueHook) {
|
|
178
|
-
if (parsedCssValue.length !== parsedValueHook.length) {
|
|
179
|
-
return false;
|
|
180
|
-
}
|
|
181
|
-
for (let i = 0; i < parsedCssValue.length; i++) {
|
|
182
|
-
const cssShadow = parsedCssValue[i];
|
|
183
|
-
const hookShadow = parsedValueHook[i];
|
|
184
|
-
if (cssShadow.color !== hookShadow.color || cssShadow.inset !== hookShadow.inset) {
|
|
185
|
-
return false;
|
|
186
|
-
}
|
|
187
|
-
const lengthProps = ["offsetX", "offsetY", "blurRadius", "spreadRadius"];
|
|
188
|
-
for (const prop of lengthProps) {
|
|
189
|
-
if (normalizeLengthValue(cssShadow[prop]) !== normalizeLengthValue(hookShadow[prop])) {
|
|
190
|
-
return false;
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
return true;
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
// src/utils/hardcoded-shared-utils.ts
|
|
198
|
-
var import_css_tree3 = require("@eslint/css-tree");
|
|
199
|
-
function handleShorthandAutoFix(declarationNode, context, valueText, replacements) {
|
|
200
|
-
if (!replacements || replacements.length === 0) {
|
|
201
|
-
return;
|
|
202
|
-
}
|
|
203
|
-
const sortedReplacements = replacements.sort((a, b) => b.start - a.start);
|
|
204
|
-
const reportNumericValue = context.options?.reportNumericValue || "always";
|
|
205
|
-
const fixCallback = (start, originalValue, replacement) => {
|
|
206
|
-
let newValue = valueText;
|
|
207
|
-
newValue = newValue.substring(0, start) + replacement + newValue.substring(start + originalValue.length);
|
|
208
|
-
if (newValue !== valueText) {
|
|
209
|
-
return (fixer) => {
|
|
210
|
-
return fixer.replaceText(declarationNode.value, newValue);
|
|
211
|
-
};
|
|
212
|
-
}
|
|
213
|
-
};
|
|
214
|
-
sortedReplacements.forEach(({ start, end, replacement, displayValue, hasHook, isNumeric }) => {
|
|
215
|
-
const originalValue = valueText.substring(start, end);
|
|
216
|
-
if (isNumeric) {
|
|
217
|
-
if (reportNumericValue === "never") {
|
|
218
|
-
return;
|
|
219
|
-
}
|
|
220
|
-
if (reportNumericValue === "hasReplacement" && !hasHook) {
|
|
221
|
-
return;
|
|
222
|
-
}
|
|
223
|
-
}
|
|
224
|
-
const valueColumnStart = declarationNode.value.loc.start.column + start;
|
|
225
|
-
const valueColumnEnd = valueColumnStart + originalValue.length;
|
|
226
|
-
const canAutoFix = originalValue !== replacement;
|
|
227
|
-
const { loc: { start: locStart, end: locEnd } } = declarationNode.value;
|
|
228
|
-
const reportNode = {
|
|
229
|
-
...declarationNode.value,
|
|
230
|
-
loc: {
|
|
231
|
-
...declarationNode.value.loc,
|
|
232
|
-
start: {
|
|
233
|
-
...locStart,
|
|
234
|
-
column: valueColumnStart
|
|
235
|
-
},
|
|
236
|
-
end: {
|
|
237
|
-
...locEnd,
|
|
238
|
-
column: valueColumnEnd
|
|
239
|
-
}
|
|
240
|
-
}
|
|
241
|
-
};
|
|
242
|
-
if (hasHook) {
|
|
243
|
-
const fix = canAutoFix ? fixCallback(start, originalValue, replacement) : void 0;
|
|
244
|
-
context.context.report({
|
|
245
|
-
node: reportNode,
|
|
246
|
-
messageId: "hardcodedValue",
|
|
247
|
-
data: {
|
|
248
|
-
oldValue: originalValue,
|
|
249
|
-
newValue: displayValue
|
|
250
|
-
},
|
|
251
|
-
fix
|
|
252
|
-
});
|
|
253
|
-
} else {
|
|
254
|
-
context.context.report({
|
|
255
|
-
node: reportNode,
|
|
256
|
-
messageId: "noReplacement",
|
|
257
|
-
data: {
|
|
258
|
-
oldValue: originalValue
|
|
259
|
-
}
|
|
260
|
-
});
|
|
261
|
-
}
|
|
262
|
-
});
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
// src/utils/css-utils.ts
|
|
266
|
-
function formatSuggestionHooks(hooks) {
|
|
267
|
-
if (hooks.length === 1) {
|
|
268
|
-
return `${hooks[0]}`;
|
|
269
|
-
}
|
|
270
|
-
return "\n" + hooks.map((hook, index) => `${index + 1}. ${hook}`).join("\n");
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
// src/utils/custom-mapping-utils.ts
|
|
274
|
-
function matchesPropertyPattern(cssProperty, pattern) {
|
|
275
|
-
const normalizedProperty = cssProperty.toLowerCase();
|
|
276
|
-
const normalizedPattern = pattern.toLowerCase();
|
|
277
|
-
if (normalizedProperty === normalizedPattern) {
|
|
278
|
-
return true;
|
|
279
|
-
}
|
|
280
|
-
if (normalizedPattern.endsWith("*")) {
|
|
281
|
-
const prefix = normalizedPattern.slice(0, -1);
|
|
282
|
-
return normalizedProperty.startsWith(prefix);
|
|
283
|
-
}
|
|
284
|
-
return false;
|
|
285
|
-
}
|
|
286
|
-
function getCustomMapping(cssProperty, value, customMapping) {
|
|
287
|
-
if (!customMapping) {
|
|
288
|
-
return null;
|
|
289
|
-
}
|
|
290
|
-
const normalizedValue = value.toLowerCase().trim();
|
|
291
|
-
for (const [hookName, config] of Object.entries(customMapping)) {
|
|
292
|
-
const propertyMatches = config.properties.some(
|
|
293
|
-
(pattern) => matchesPropertyPattern(cssProperty, pattern)
|
|
294
|
-
);
|
|
295
|
-
if (!propertyMatches) {
|
|
296
|
-
continue;
|
|
297
|
-
}
|
|
298
|
-
const valueMatches = config.values.some(
|
|
299
|
-
(configValue) => configValue.toLowerCase().trim() === normalizedValue
|
|
300
|
-
);
|
|
301
|
-
if (valueMatches) {
|
|
302
|
-
return hookName;
|
|
303
|
-
}
|
|
304
|
-
}
|
|
305
|
-
return null;
|
|
306
|
-
}
|
|
307
|
-
|
|
308
|
-
// src/rules/v9/no-hardcoded-values/handlers/boxShadowHandler.ts
|
|
25
|
+
var import_boxShadowValueParser = require("../../../../utils/boxShadowValueParser");
|
|
26
|
+
var import_css_utils = require("../../../../utils/css-utils");
|
|
27
|
+
var import_custom_mapping_utils = require("../../../../utils/custom-mapping-utils");
|
|
28
|
+
var import_hardcoded_shared_utils = require("../../../../utils/hardcoded-shared-utils");
|
|
309
29
|
function toBoxShadowValue(cssValue) {
|
|
310
|
-
const parsedCssValue = parseBoxShadowValue(cssValue).filter((shadow) => Object.keys(shadow).length > 0);
|
|
30
|
+
const parsedCssValue = (0, import_boxShadowValueParser.parseBoxShadowValue)(cssValue).filter((shadow) => Object.keys(shadow).length > 0);
|
|
311
31
|
if (parsedCssValue.length === 0) {
|
|
312
32
|
return null;
|
|
313
33
|
}
|
|
@@ -333,13 +53,13 @@ function reportBoxShadowViolation(node, context, valueText, hooks) {
|
|
|
333
53
|
);
|
|
334
54
|
if (replacement) {
|
|
335
55
|
const replacements = [replacement];
|
|
336
|
-
handleShorthandAutoFix(node, context, valueText, replacements);
|
|
56
|
+
(0, import_hardcoded_shared_utils.handleShorthandAutoFix)(node, context, valueText, replacements);
|
|
337
57
|
}
|
|
338
58
|
}
|
|
339
59
|
var handleBoxShadowDeclaration = (node, context) => {
|
|
340
60
|
const cssProperty = node.property.toLowerCase();
|
|
341
61
|
const valueText = context.sourceCode.getText(node.value);
|
|
342
|
-
const customHook = getCustomMapping(cssProperty, valueText, context.options?.customMapping);
|
|
62
|
+
const customHook = (0, import_custom_mapping_utils.getCustomMapping)(cssProperty, valueText, context.options?.customMapping);
|
|
343
63
|
if (customHook) {
|
|
344
64
|
reportBoxShadowViolation(node, context, valueText, [customHook]);
|
|
345
65
|
return;
|
|
@@ -351,7 +71,7 @@ var handleBoxShadowDeclaration = (node, context) => {
|
|
|
351
71
|
}
|
|
352
72
|
for (const [shadow, closestHooks] of shadowHooks) {
|
|
353
73
|
const parsedValueHook = toBoxShadowValue(shadow);
|
|
354
|
-
if (parsedValueHook && isBoxShadowMatch(parsedCssValue, parsedValueHook)) {
|
|
74
|
+
if (parsedValueHook && (0, import_boxShadowValueParser.isBoxShadowMatch)(parsedCssValue, parsedValueHook)) {
|
|
355
75
|
if (closestHooks.length > 0) {
|
|
356
76
|
reportBoxShadowViolation(node, context, valueText, closestHooks);
|
|
357
77
|
}
|
|
@@ -378,7 +98,7 @@ function createBoxShadowReplacement(originalValue, hooks, context, positionInfo)
|
|
|
378
98
|
start,
|
|
379
99
|
end,
|
|
380
100
|
replacement: originalValue,
|
|
381
|
-
displayValue: formatSuggestionHooks(hooks),
|
|
101
|
+
displayValue: (0, import_css_utils.formatSuggestionHooks)(hooks),
|
|
382
102
|
hasHook: true
|
|
383
103
|
};
|
|
384
104
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../../../src/rules/v9/no-hardcoded-values/handlers/boxShadowHandler.ts"
|
|
4
|
-
"sourcesContent": ["import type { HandlerContext, DeclarationHandler } from '../../../../types';\nimport type { ValueToStylingHooksMapping } from '@salesforce-ux/sds-metadata/next';\nimport { parseBoxShadowValue, isBoxShadowMatch, type BoxShadowValue } from '../../../../utils/boxShadowValueParser';\nimport { formatSuggestionHooks } from '../../../../utils/css-utils';\nimport { getCustomMapping } from '../../../../utils/custom-mapping-utils';\n\n// Import shared utilities for common logic\nimport { \n handleShorthandAutoFix, \n type ReplacementInfo,\n type PositionInfo\n} from '../../../../utils/hardcoded-shared-utils';\n\n/**\n * Convert CSS value to parsed box-shadow values, filtering out empty ones\n */\nfunction toBoxShadowValue(cssValue: string): BoxShadowValue[] | null {\n const parsedCssValue = parseBoxShadowValue(cssValue).filter((shadow) => Object.keys(shadow).length > 0);\n if (parsedCssValue.length === 0) {\n return null;\n }\n return parsedCssValue;\n}\n\n/**\n * Extract box-shadow hook entries from styling hooks mapping\n */\nfunction shadowValueToHookEntries(supportedStylinghooks: ValueToStylingHooksMapping): Array<[string, string[]]> {\n return Object.entries(supportedStylinghooks).filter(([key, value]) => {\n return value.some((hook) => hook.properties.includes('box-shadow'));\n }).map(([key, value]) => {\n return [key, value.map((hook) => hook.name)];\n });\n}\n\n/**\n * Report box-shadow violation with hooks and apply auto-fix\n */\nfunction reportBoxShadowViolation(\n node: any,\n context: HandlerContext,\n valueText: string,\n hooks: string[]\n): void {\n const positionInfo: PositionInfo = {\n start: { offset: 0, line: 1, column: 1 },\n end: { offset: valueText.length, line: 1, column: valueText.length + 1 }\n };\n \n const replacement = createBoxShadowReplacement(\n valueText,\n hooks,\n context,\n positionInfo\n );\n \n if (replacement) {\n const replacements: ReplacementInfo[] = [replacement];\n handleShorthandAutoFix(node, context, valueText, replacements);\n }\n}\n\n/**\n * Handle box-shadow declarations using CSS tree parsing\n */\nexport const handleBoxShadowDeclaration: DeclarationHandler = (node: any, context: HandlerContext) => {\n const cssProperty = node.property.toLowerCase();\n const valueText = context.sourceCode.getText(node.value);\n \n // Check custom mapping first\n const customHook = getCustomMapping(cssProperty, valueText, context.options?.customMapping);\n if (customHook) {\n reportBoxShadowViolation(node, context, valueText, [customHook]);\n return;\n }\n\n const shadowHooks = shadowValueToHookEntries(context.valueToStylinghook);\n const parsedCssValue = toBoxShadowValue(valueText);\n if (!parsedCssValue) {\n return;\n }\n\n // Look for matching hooks in metadata\n for (const [shadow, closestHooks] of shadowHooks) {\n const parsedValueHook = toBoxShadowValue(shadow);\n if (parsedValueHook && isBoxShadowMatch(parsedCssValue, parsedValueHook)) {\n if (closestHooks.length > 0) {\n reportBoxShadowViolation(node, context, valueText, closestHooks);\n }\n return;\n }\n }\n \n // If no hooks found, silently ignore - don't report any violations\n};\n\n\n/**\n * Create box-shadow replacement info for shorthand auto-fix\n * Only called when hooks are available (hooks.length > 0)\n * Returns replacement data or null if invalid position info\n */\nfunction createBoxShadowReplacement(\n originalValue: string,\n hooks: string[],\n context: HandlerContext,\n positionInfo: PositionInfo\n): ReplacementInfo | null {\n if (!positionInfo?.start) {\n return null;\n }\n\n // Use position information directly from CSS tree (already 0-based offsets)\n const start = positionInfo.start.offset;\n const end = positionInfo.end.offset;\n\n if (hooks.length === 1) {\n // Has a single hook replacement - should provide autofix\n return {\n start,\n end,\n replacement: `var(${hooks[0]}, ${originalValue})`,\n displayValue: hooks[0],\n hasHook: true\n };\n } else {\n // Multiple hooks - still has hooks, but no auto-fix\n return {\n start,\n end,\n replacement: originalValue,\n displayValue: formatSuggestionHooks(hooks),\n hasHook: true\n };\n }\n}\n", "import { parse, walk, generate } from '@eslint/css-tree';\nimport { isValidColor } from './color-lib-utils';\nimport { parseUnitValue, type ParsedUnitValue } from './value-utils';\nimport { isCssColorFunction } from './css-functions';\n\nexport interface BoxShadowValue {\n offsetX?: string;\n offsetY?: string;\n blurRadius?: string;\n spreadRadius?: string;\n color?: string;\n inset?: boolean;\n}\n\ninterface ShadowParts {\n lengthParts: string[];\n colorParts: string[];\n inset: boolean;\n}\n\n/**\n * Check if a CSS tree node represents a color value\n */\nfunction isColorValue(node: any): boolean {\n if (!node) return false;\n \n switch (node.type) {\n case 'Hash':\n return true; // #hex colors\n case 'Identifier':\n return isValidColor(node.name);\n case 'Function':\n return isCssColorFunction(node.name.toLowerCase());\n default:\n return false;\n }\n}\n\n/**\n * Check if a CSS tree node represents a length value\n */\nfunction isLengthValue(node: any): boolean {\n if (!node) return false;\n \n switch (node.type) {\n case 'Dimension':\n // Use existing unit parsing to validate the unit\n const dimensionStr = `${node.value}${node.unit}`;\n return parseUnitValue(dimensionStr) !== null;\n case 'Number':\n // Zero values without units are valid lengths\n return Number(node.value) === 0;\n default:\n return false;\n }\n}\n\n/**\n * Check if a CSS tree node represents the 'inset' keyword\n */\nfunction isInsetKeyword(node: any): boolean {\n return node?.type === 'Identifier' && node.name.toLowerCase() === 'inset';\n}\n\n/**\n * Extract shadow parts from CSS tree nodes\n */\nfunction extractShadowParts(valueText: string): ShadowParts[] {\n const shadows: ShadowParts[] = [];\n let currentShadow: ShadowParts = {\n lengthParts: [],\n colorParts: [],\n inset: false\n };\n\n try {\n const ast = parse(valueText, { context: 'value' as const });\n \n walk(ast, {\n enter(node: any) {\n // Skip nested function content for now\n if (node.type === 'Function') {\n return this.skip;\n }\n \n if (isInsetKeyword(node)) {\n currentShadow.inset = true;\n } else if (isLengthValue(node)) {\n currentShadow.lengthParts.push(generate(node));\n } else if (isColorValue(node)) {\n currentShadow.colorParts.push(generate(node));\n }\n }\n });\n \n // Add the current shadow if it has any content\n if (currentShadow.lengthParts.length > 0 || currentShadow.colorParts.length > 0 || currentShadow.inset) {\n shadows.push(currentShadow);\n }\n \n } catch (error) {\n return [];\n }\n\n return shadows;\n}\n\n/**\n * Parse box-shadow value into structured format\n * Simplified version for ESLint v9 compatibility\n */\nexport function parseBoxShadowValue(value: string): BoxShadowValue[] {\n // Handle multiple shadows separated by commas\n const shadowStrings = value.split(',').map(s => s.trim());\n const allShadows: BoxShadowValue[] = [];\n \n for (const shadowString of shadowStrings) {\n const shadows = extractShadowParts(shadowString);\n \n const parsedShadows = shadows.map((shadow) => {\n /**\n * Box-shadow syntax:\n * Two, three, or four <length> values:\n * - offset-x offset-y [blur-radius] [spread-radius]\n * Optionally: inset keyword and color value\n */\n const shadowValue: BoxShadowValue = {};\n \n // Map length parts to shadow properties\n const lengthProps = ['offsetX', 'offsetY', 'blurRadius', 'spreadRadius'] as const;\n lengthProps.forEach((prop, index) => {\n if (shadow.lengthParts.length > index) {\n shadowValue[prop] = shadow.lengthParts[index];\n }\n });\n \n // Add color if present\n if (shadow.colorParts.length > 0) {\n shadowValue.color = shadow.colorParts[0];\n }\n \n // Add inset flag if present\n if (shadow.inset) {\n shadowValue.inset = true;\n }\n \n return shadowValue;\n });\n \n allShadows.push(...parsedShadows);\n }\n \n return allShadows;\n}\n\n/**\n * Normalize length value for comparison\n */\nfunction normalizeLengthValue(value: string | undefined): string {\n if (!value) return '0px';\n if (value === '0') return '0px';\n return value;\n}\n\n/**\n * Check if two parsed box-shadow values match\n */\nexport function isBoxShadowMatch(parsedCssValue: BoxShadowValue[], parsedValueHook: BoxShadowValue[]): boolean {\n // If the number of shadows doesn't match, they're not equal\n if (parsedCssValue.length !== parsedValueHook.length) {\n return false;\n }\n\n // Compare each shadow in the array\n for (let i = 0; i < parsedCssValue.length; i++) {\n const cssShadow = parsedCssValue[i];\n const hookShadow = parsedValueHook[i];\n\n // Compare color and inset properties\n if (cssShadow.color !== hookShadow.color || cssShadow.inset !== hookShadow.inset) {\n return false;\n }\n\n // Compare length properties\n const lengthProps = ['offsetX', 'offsetY', 'blurRadius', 'spreadRadius'] as const;\n for (const prop of lengthProps) {\n if (normalizeLengthValue(cssShadow[prop]) !== normalizeLengthValue(hookShadow[prop])) {\n return false;\n }\n }\n }\n\n return true;\n}\n", "import { ValueToStylingHooksMapping, ValueToStylingHookEntry } from '@salesforce-ux/sds-metadata/next';\nimport chroma from 'chroma-js';\nimport { generate } from '@eslint/css-tree';\nimport { isCssColorFunction } from './css-functions';\n\n/**\n * Perceptual color difference threshold (Delta E, CIEDE2000 via chroma.deltaE).\n * Lower values are stricter matches. Used to decide which hooks are \"close enough\".\n */\nconst DELTAE_THRESHOLD = 10;\n\n/**\n * Convert any valid CSS color (named, hex, rgb(a), hsl(a), etc.) to hex.\n * Returns null if the value is not a valid color.\n */\nconst convertToHex = (color: string): string | null => {\n try {\n // Try converting the color using chroma-js, which handles both named and hex colors\n return chroma(color).hex();\n } catch (e) {\n // If chroma can't process the color, it's likely invalid\n return null;\n }\n};\n\nconst isHookPropertyMatch = (hook: ValueToStylingHookEntry, cssProperty: string): boolean => {\n return hook.properties.includes(cssProperty) || hook.properties.includes(\"*\");\n}\n\nfunction getOrderByCssProp(cssProperty: string): string[] {\n if(cssProperty === 'color' || cssProperty === 'fill') {\n return [\"surface\", \"theme\", \"feedback\", \"reference\"];\n } else if(cssProperty.match(/background/)){\n return [\"surface\", \"surface-inverse\", \"theme\", \"feedback\", \"reference\"];\n } else if(cssProperty.match(/border/) || cssProperty.match(/outline/) || cssProperty.match(/stroke/)) {\n return [\"borders\", \"borders-inverse\", \"feedback\", \"theme\", \"reference\"];\n }\n return [\"surface\", \"surface-inverse\", \"borders\", \"borders-inverse\", \"theme\", \"feedback\", \"reference\"];\n}\n\n\n/**\n * Given an input color and the metadata mapping of supported colors to hooks,\n * suggest up to 5 styling hook names ordered by:\n * 1) Category priority: semantic -> system -> palette\n * 2) Perceptual distance (Delta E)\n * Also prioritizes exact color matches (distance 0).\n */\nconst findClosestColorHook = (\n color: string,\n supportedColors:ValueToStylingHooksMapping,\n cssProperty: string\n): string[] => {\n const closestHooks: Array<{distance: number, group: string, name: string}> = [];\n Object.entries(supportedColors).forEach(([sldsValue, data]) => {\n if (sldsValue && isValidColor(sldsValue)) {\n const hooks = data as ValueToStylingHookEntry[]; // Get the hooks for the sldsValue\n\n hooks.forEach((hook) => {\n // Exact match shortcut to avoid floating rounding noise\n const distance = (sldsValue.toLowerCase() === color.toLowerCase())\n ? 0\n : chroma.deltaE(sldsValue, color);\n \n // Check if the hook has the same property or universal selector\n if (isHookPropertyMatch(hook, cssProperty) && distance <= DELTAE_THRESHOLD) {\n // Add to same property hooks if within threshold\n closestHooks.push({ distance, group: hook.group, name: hook.name });\n }\n });\n }\n });\n\n const hooksByGroupMap:Record<string, string[]> = closestHooks.sort((a, b) => a.distance - b.distance).reduce((acc, hook) => {\n if (!acc[hook.group]) {\n acc[hook.group] = [];\n }\n acc[hook.group].push(hook.name);\n return acc;\n }, {});\n\n return getOrderByCssProp(cssProperty)\n .map(group => hooksByGroupMap[group]||[])\n .flat().slice(0, 5);\n};\n\n/**\n * Check if a value is any valid CSS color string (delegates to chroma-js).\n */\nconst isValidColor = (val:string):boolean => chroma.valid(val);\n\n/**\n * Extract a color string from a CSS AST node produced by @eslint/css-tree.\n * Supports Hash (#rrggbb), Identifier (named colors), and color Function nodes.\n * Returns null if the extracted value is not a valid color.\n */\nconst extractColorValue = (node: any): string | null => {\n let colorValue: string | null = null;\n \n switch (node.type) {\n case 'Hash':\n colorValue = `#${node.value}`;\n break;\n case 'Identifier':\n colorValue = node.name;\n break;\n case 'Function':\n // Only extract color functions\n if (isCssColorFunction(node.name)) {\n colorValue = generate(node);\n }\n break;\n }\n \n return colorValue && isValidColor(colorValue) ? colorValue : null;\n};\n\nexport { findClosestColorHook, convertToHex, isValidColor, extractColorValue };\n", "//stylelint-sds/packages/stylelint-plugin-slds/src/utils/css-functions.ts\n/**\n * Complete list of CSS functions that should be preserved/recognized\n */\nconst CSS_FUNCTIONS = [\n 'attr',\n 'calc',\n 'color-mix',\n 'conic-gradient',\n 'counter',\n 'cubic-bezier',\n 'linear-gradient',\n 'max',\n 'min',\n 'radial-gradient',\n 'repeating-conic-gradient',\n 'repeating-linear-gradient',\n 'repeating-radial-gradient',\n 'var'\n ];\n \n \n const CSS_MATH_FUNCTIONS = ['calc', 'min', 'max'];\n \n \n const RGB_COLOR_FUNCTIONS = ['rgb', 'rgba', 'hsl', 'hsla'];\n \n /**\n * Regex for matching any CSS function (for general detection)\n * Matches function names within other text\n */\n const cssFunctionsRegex = new RegExp(`(?:${CSS_FUNCTIONS.join('|')})`);\n \n \n const cssFunctionsExactRegex = new RegExp(`^(?:${CSS_FUNCTIONS.join('|')})$`);\n \n \n const cssMathFunctionsRegex = new RegExp(`^(?:${CSS_MATH_FUNCTIONS.join('|')})$`);\n \n export function containsCssFunction(value: string): boolean {\n return cssFunctionsRegex.test(value);\n }\n \n /**\n * Check if a value is exactly a CSS function name\n */\n export function isCssFunction(value: string): boolean {\n return cssFunctionsExactRegex.test(value);\n }\n \n export function isCssMathFunction(value: string): boolean {\n return cssMathFunctionsRegex.test(value);\n }\n \n export function isCssColorFunction(value: string): boolean {\n return RGB_COLOR_FUNCTIONS.includes(value);\n }", "// Simplified value parsing\n\n/**\n * Checks if a value is a CSS global value.\n *\n * CSS global values are special keywords that can be used for any CSS property and have a universal meaning:\n * - initial: Resets the property to its initial value as defined by the CSS specification.\n * - inherit: Inherits the value from the parent element.\n * - unset: Acts as inherit if the property is inheritable, otherwise acts as initial.\n * - revert: Rolls back the property to the value established by the user-agent or user styles.\n * - revert-layer: Rolls back the property to the value established by the previous cascade layer.\n *\n * All CSS properties accept these global values, including but not limited to:\n * - color\n * - background\n * - font-size\n * - margin\n * - padding\n * - border\n * - display\n * - position\n * - z-index\n * - and many more\n *\n * These values are part of the CSS standard and are not considered violations, even if a rule would otherwise flag a value as invalid or non-design-token. They are always allowed for any property.\n *\n * @param value The CSS value to check.\n * @returns True if the value is a CSS global value, false otherwise.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/initial\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/inherit\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/unset\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/revert\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/revert-layer\n */\nexport function isGlobalValue(value: string): boolean {\n return value === 'initial' || value === 'inherit' || value === 'unset' || value === 'revert' || value === 'revert-layer';\n }\n\n// Configurable list of allowed CSS units\nexport const ALLOWED_UNITS = ['px', 'em', 'rem', '%', 'ch'];\n\nexport type ParsedUnitValue = {\n unit: 'px' | 'rem' | '%' | 'em' | 'ch' | null;\n number: number;\n} | null;\n\nexport function parseUnitValue(value: string): ParsedUnitValue {\n if (!value) return null;\n \n // Create regex pattern from allowed units\n const unitsPattern = ALLOWED_UNITS.join('|');\n const regex = new RegExp(`^(-?\\\\d*\\\\.?\\\\d+)(${unitsPattern})?$`);\n const match = value.match(regex);\n if (!match) return null;\n \n const number = parseFloat(match[1]);\n const unit = match[2] ? (match[2] as 'px' | 'rem' | '%' | 'em' | 'ch') : null; // Keep unitless values as null\n \n if (isNaN(number)) return null;\n \n return { number, unit };\n}\n\nexport function toAlternateUnitValue(numberVal: number, unitType: 'px' | 'rem' | '%' | 'em' | 'ch' | null): ParsedUnitValue {\n if (unitType === 'px') {\n let floatValue = parseFloat(`${numberVal / 16}`);\n if (!isNaN(floatValue)) {\n return {\n unit: 'rem',\n number: parseFloat(floatValue.toFixed(4))\n }\n }\n } else if (unitType === 'rem') {\n const intValue = parseInt(`${numberVal * 16}`);\n if (!isNaN(intValue)) {\n return {\n unit: 'px',\n number: intValue\n }\n }\n }\n // For other units (%, em, ch) and unitless values, no alternate unit conversion available\n // These units are context-dependent and don't have standard conversion ratios\n return null;\n}", "import { parse, walk } from '@eslint/css-tree';\nimport type { HandlerContext } from '../types';\nimport type { ParsedUnitValue } from './value-utils';\nimport { ALLOWED_UNITS } from './value-utils';\nimport { extractColorValue } from './color-lib-utils';\nimport { isCssFunction } from './css-functions';\n\n/**\n * Common replacement data structure used by both color and density handlers\n */\nexport interface ReplacementInfo {\n start: number;\n end: number;\n replacement: string; // Full CSS var: var(--hook, fallback)\n displayValue: string; // Just the hook: --hook\n hasHook: boolean;\n isNumeric?: boolean; // Whether this is a numeric (dimension) value\n}\n\n/**\n * Position information from CSS tree parsing\n */\nexport interface PositionInfo {\n start?: { offset: number; line: number; column: number };\n end?: { offset: number; line: number; column: number };\n}\n\n/**\n * Generic callback for processing values with position information\n */\nexport type ValueCallback<T> = (value: T, positionInfo?: PositionInfo) => void;\n\n/**\n * Known valid font-weight values\n */\nconst FONT_WEIGHTS = [\n 'normal',\n 'bold', \n 'bolder',\n 'lighter',\n '100',\n '200', \n '300',\n '400',\n '500',\n '600',\n '700',\n '800',\n '900'\n];\n\n/**\n * Check if a value is a known font-weight\n */\nexport function isKnownFontWeight(value: string | number): boolean {\n const stringValue = value.toString();\n return FONT_WEIGHTS.includes(stringValue.toLowerCase());\n}\n\n/**\n * Generic shorthand auto-fix handler\n * Handles the common logic for reconstructing shorthand values with replacements\n */\nexport function handleShorthandAutoFix(\n declarationNode: any,\n context: HandlerContext,\n valueText: string,\n replacements: ReplacementInfo[]\n) {\n if(!replacements || replacements.length === 0){\n return;\n }\n // Sort replacements by position for proper reconstruction\n const sortedReplacements = replacements.sort((a,b)=> b.start-a.start);\n\n // Get rule options\n const reportNumericValue = context.options?.reportNumericValue || 'always';\n\n const fixCallback = (start:number, originalValue:string, replacement:string) => {\n // Reconstruct the entire value with all replacements\n let newValue = valueText;\n\n newValue = newValue.substring(0, start) + replacement + newValue.substring(start+originalValue.length);\n\n if(newValue !== valueText){\n return (fixer:any)=>{\n return fixer.replaceText(declarationNode.value, newValue);\n }\n }\n }\n\n // Report each individual value\n sortedReplacements.forEach(({ start, end, replacement, displayValue, hasHook, isNumeric }) => {\n const originalValue = valueText.substring(start, end);\n \n // Check if we should skip reporting based on reportNumericValue option\n if (isNumeric) {\n if (reportNumericValue === 'never') {\n return; // Skip reporting numeric values\n }\n if (reportNumericValue === 'hasReplacement' && !hasHook) {\n return; // Skip reporting numeric values without replacements\n }\n }\n \n \n const valueColumnStart = declarationNode.value.loc.start.column + start;\n const valueColumnEnd = valueColumnStart + originalValue.length;\n const canAutoFix = originalValue !== replacement;\n \n // Create precise error location for this value\n const { loc: { start: locStart, end: locEnd } } = declarationNode.value;\n const reportNode = {\n ...declarationNode.value,\n loc: {\n ...declarationNode.value.loc,\n start: {\n ...locStart,\n column: valueColumnStart\n },\n end: {\n ...locEnd,\n column: valueColumnEnd\n }\n }\n };\n\n if (hasHook) {\n // Create auto-fix for the entire shorthand value\n const fix = canAutoFix ? fixCallback(start, originalValue, replacement) : undefined;\n\n context.context.report({\n node: reportNode,\n messageId: 'hardcodedValue',\n data: {\n oldValue: originalValue,\n newValue: displayValue\n },\n fix\n });\n } else {\n // No hook available\n context.context.report({\n node: reportNode,\n messageId: 'noReplacement',\n data: {\n oldValue: originalValue\n }\n });\n }\n });\n}\n\n/**\n * Generic CSS tree traversal with position tracking\n * Always provides position information since both handlers need it\n */\nexport function forEachValue<T>(\n valueText: string,\n extractValue: (node: any) => T | null,\n shouldSkipNode: (node: any) => boolean,\n callback: (value: T, positionInfo: PositionInfo) => void\n): void {\n if (!valueText || typeof valueText !== 'string') {\n return;\n }\n\n try {\n const ast = parse(valueText, { context: 'value' as const, positions: true });\n \n walk(ast, {\n enter(node: any) {\n // Skip nodes efficiently using this.skip\n if (shouldSkipNode(node)) {\n return this.skip;\n }\n \n const value = extractValue(node);\n if (value !== null) {\n const positionInfo: PositionInfo = {\n start: node.loc?.start,\n end: node.loc?.end\n };\n callback(value, positionInfo);\n }\n }\n });\n } catch (error) {\n // Silently handle parse errors\n return;\n }\n}\n\n/**\n * Check if color node should be skipped during traversal\n */\nfunction shouldSkipColorNode(node: any): boolean {\n return node.type === 'Function' && isCssFunction(node.name);\n}\n\n/**\n * Check if dimension node should be skipped during traversal\n * Skip all function nodes by default\n */\nfunction shouldSkipDimensionNode(node: any): boolean {\n return node.type === 'Function';\n}\n\n/**\n * Extract dimension value from CSS AST node\n * Returns structured data with number and unit to eliminate regex parsing\n */\nfunction extractDimensionValue(valueNode: any, cssProperty?: string): ParsedUnitValue | null {\n if (!valueNode) return null;\n \n switch (valueNode.type) {\n case 'Dimension':\n // Dimensions: 16px, 1rem -> extract value and unit directly from AST\n const numValue = Number(valueNode.value);\n if (numValue === 0) return null; // Skip zero values\n \n const unit = valueNode.unit.toLowerCase();\n if (!ALLOWED_UNITS.includes(unit)) return null; // Support only allowed units\n \n return {\n number: numValue,\n unit: unit as 'px' | 'rem' | '%' | 'em' | 'ch'\n };\n \n case 'Number':\n // Numbers: 400, 1.5 -> treat as unitless (font-weight, line-height, etc.)\n const numberValue = Number(valueNode.value);\n if (numberValue === 0) return null; // Skip zero values\n \n return {\n number: numberValue,\n unit: null\n };\n \n case 'Percentage':\n // Percentage values: 100%, 50% -> extract value and add % unit\n const percentValue = Number(valueNode.value);\n if (percentValue === 0) return null; // Skip zero values\n \n return {\n number: percentValue,\n unit: '%'\n };\n \n case 'Value':\n // Value wrapper - extract from first child\n return valueNode.children?.[0] ? extractDimensionValue(valueNode.children[0], cssProperty) : null;\n }\n \n return null;\n}\n\n/**\n * Specialized color value traversal\n * Handles color-specific extraction and skipping logic\n */\nexport function forEachColorValue(\n valueText: string,\n callback: (colorValue: string, positionInfo: PositionInfo) => void\n): void {\n forEachValue(valueText, extractColorValue, shouldSkipColorNode, callback);\n}\n\n/**\n * Specialized density value traversal\n * Handles dimension-specific extraction and skipping logic\n */\nexport function forEachDensityValue(\n valueText: string,\n cssProperty: string,\n callback: (parsedDimension: ParsedUnitValue, positionInfo: PositionInfo) => void\n): void {\n forEachValue(\n valueText, \n (node) => extractDimensionValue(node, cssProperty), \n shouldSkipDimensionNode, \n callback\n );\n}\n\n/**\n * Extract font-related values from CSS AST node\n * Handles font-size and font-weight values\n */\nfunction extractFontValue(node: any): ParsedUnitValue | null {\n if (!node) return null;\n \n switch (node.type) {\n case 'Dimension':\n // Font-size: 16px, 1rem, etc.\n const numValue = Number(node.value);\n if (numValue <= 0) return null; // Skip zero/negative values\n \n const unit = node.unit.toLowerCase();\n if (!ALLOWED_UNITS.includes(unit)) return null;\n \n return {\n number: numValue,\n unit: unit as 'px' | 'rem' | '%' | 'em' | 'ch'\n };\n \n case 'Number':\n // Font-weight: 400, 700, etc.\n const numberValue = Number(node.value);\n if (numberValue <= 0) {\n return null; // Skip zero/negative values\n }\n \n // Only accept known font-weight values for unitless numbers\n if (!isKnownFontWeight(numberValue)) {\n return null; // Skip values that aren't valid font-weights\n }\n \n return {\n number: numberValue,\n unit: null\n };\n \n case 'Identifier':\n // Font-weight keywords: normal, bold, etc.\n const namedValue = node.name.toLowerCase();\n \n // Only accept known font-weight keywords\n if (!isKnownFontWeight(namedValue)) {\n return null;\n }\n \n // Convert known keywords to numeric values\n if (namedValue === 'normal') {\n return { number: 400, unit: null };\n }\n \n // For other keywords (bolder, lighter), we can't determine exact numeric value\n // but we know they're valid font-weight values\n return { number: namedValue, unit: null };\n \n case 'Percentage':\n // Percentage values for font-size\n const percentValue = Number(node.value);\n if (percentValue === 0) return null; // Skip zero values\n \n return {\n number: percentValue,\n unit: '%'\n };\n \n case 'Value':\n // Value wrapper - extract from first child\n return node.children?.[0] ? extractFontValue(node.children[0]) : null;\n }\n \n return null;\n}\n\n/**\n * Check if font node should be skipped during traversal\n * Skip all function nodes by default\n */\nfunction shouldSkipFontNode(node: any): boolean {\n return node.type === 'Function';\n}\n\n/**\n * Specialized font value traversal\n * Handles font-specific extraction and skipping logic\n */\nexport function forEachFontValue(\n valueText: string,\n callback: (fontValue: ParsedUnitValue, positionInfo: PositionInfo) => void\n): void {\n forEachValue(valueText, extractFontValue, shouldSkipFontNode, callback);\n}\n", "import { \n forEachValue, \n type PositionInfo \n} from './hardcoded-shared-utils';\n\n/**\n * Check if a CSS property should be targeted for linting based on prefixes or explicit targets\n * @param property - The CSS property name to check\n * @param propertyTargets - Array of specific properties to target (empty means target all)\n * @returns true if the property should be targeted\n */\nexport function isTargetProperty(property: string, propertyTargets: string[] = []): boolean {\n if (typeof property !== 'string') return false;\n return property.startsWith('--sds-')\n || property.startsWith('--slds-')\n || property.startsWith('--lwc-')\n || propertyTargets.length === 0\n || propertyTargets.includes(property);\n}\n\n/**\n * CSS Variable information for SLDS variable detection\n */\nexport interface CssVariableInfo {\n name: string; // Variable name: --slds-g-color-surface-1\n hasFallback: boolean; // Whether var() already has a fallback\n}\n\n/**\n * Generic CSS variable extractor that can be customized for different use cases\n * @param node - AST node to extract from\n * @param filter - Function to validate and extract variable information\n * @returns Extracted variable info or null\n */\nfunction extractCssVariable<T>(\n node: any,\n filter: (variableName: string, childrenArray: any[]) => T | null\n): T | null {\n if (!node || node.type !== 'Function' || node.name !== 'var') {\n return null;\n }\n\n if (!node.children) {\n return null;\n }\n\n // Convert children to array and get the first child (variable name)\n const childrenArray = Array.from(node.children);\n if (childrenArray.length === 0) {\n return null;\n }\n \n const firstChild = childrenArray[0] as any;\n if (!firstChild || firstChild.type !== 'Identifier') {\n return null;\n }\n\n const variableName = firstChild.name;\n if (!variableName) {\n return null;\n }\n\n return filter(variableName, childrenArray);\n}\n\n/**\n * Specialized CSS variable traversal for SLDS variables\n * Finds var(--slds-*) functions and reports their fallback status\n */\nexport function forEachSldsVariable(\n valueText: string,\n callback: (variableInfo: CssVariableInfo, positionInfo: PositionInfo) => void\n): void {\n const extractor = (node: any) => extractCssVariable(node, (variableName, childrenArray) => {\n if (!variableName.startsWith('--slds-')) {\n return null;\n }\n\n // Check if there's a fallback (comma separator)\n const hasFallback = childrenArray.some((child: any) => \n child.type === 'Operator' && child.value === ','\n );\n\n return { name: variableName, hasFallback };\n });\n\n forEachValue(valueText, extractor, () => false, callback);\n}\n\n/**\n * Specialized CSS variable traversal for SLDS/SDS namespace detection\n * Finds var(--slds-*) or var(--sds-*) functions in CSS values\n * Note: hasFallback is set to false as it's unused for namespace validation\n */\nexport function forEachNamespacedVariable(\n valueText: string,\n callback: (variableInfo: CssVariableInfo, positionInfo: PositionInfo) => void\n): void {\n const extractor = (node: any) => extractCssVariable(node, (variableName) => {\n // Check for SLDS or SDS namespace\n if (variableName.startsWith('--slds-') || variableName.startsWith('--sds-')) {\n return { name: variableName, hasFallback: false }; // hasFallback unused, but required by interface\n }\n return null;\n });\n\n forEachValue(valueText, extractor, () => false, callback);\n}\n\n/**\n * Specialized CSS variable traversal for LWC variables\n * Finds var(--lwc-*) functions in CSS values and reports their fallback status\n */\nexport function forEachLwcVariable(\n valueText: string,\n callback: (variableInfo: CssVariableInfo, positionInfo: PositionInfo) => void\n): void {\n const extractor = (node: any) => extractCssVariable(node, (variableName, childrenArray) => {\n if (!variableName.startsWith('--lwc-')) {\n return null;\n }\n\n // Check if there's a fallback (comma separator)\n const hasFallback = childrenArray.some((child: any) => \n child.type === 'Operator' && child.value === ','\n );\n\n return { name: variableName, hasFallback };\n });\n\n forEachValue(valueText, extractor, () => false, callback);\n}\n\n/**\n * Format multiple hook suggestions for better readability\n * @param hooks - Array of hook names to format\n * @returns Formatted string with hooks\n */\nexport function formatSuggestionHooks(hooks: string[]): string {\n if (hooks.length === 1) {\n return `${hooks[0]}`;\n }\n\n // Loop through hooks and append each as a numbered list item with line breaks\n return '\\n' + hooks.map((hook, index) => `${index + 1}. ${hook}`).join('\\n');\n}", "import type { CustomHookMapping } from '../types';\n\n/**\n * Check if a CSS property matches a pattern (supports wildcards)\n * @param cssProperty - The CSS property to check (e.g., \"background-color\")\n * @param pattern - The pattern to match against (e.g., \"background*\" or \"color\")\n * @returns true if the property matches the pattern\n */\nfunction matchesPropertyPattern(cssProperty: string, pattern: string): boolean {\n const normalizedProperty = cssProperty.toLowerCase();\n const normalizedPattern = pattern.toLowerCase();\n\n // Exact match\n if (normalizedProperty === normalizedPattern) {\n return true;\n }\n\n // Wildcard match (e.g., \"background*\" matches \"background-color\", \"background-image\")\n if (normalizedPattern.endsWith('*')) {\n const prefix = normalizedPattern.slice(0, -1);\n return normalizedProperty.startsWith(prefix);\n }\n\n return false;\n}\n\n/**\n * Get custom hook mapping for a given CSS property and value\n * @param cssProperty - The CSS property (e.g., \"background-color\", \"color\")\n * @param value - The hardcoded value (e.g., \"#fff\", \"16px\")\n * @param customMapping - The custom mapping configuration from rule options\n * @returns The hook name if a mapping is found, null otherwise\n */\nexport function getCustomMapping(\n cssProperty: string,\n value: string,\n customMapping?: CustomHookMapping\n): string | null {\n if (!customMapping) {\n return null;\n }\n\n const normalizedValue = value.toLowerCase().trim();\n\n // Iterate through all hook mappings\n for (const [hookName, config] of Object.entries(customMapping)) {\n // Check if any property pattern matches\n const propertyMatches = config.properties.some((pattern) =>\n matchesPropertyPattern(cssProperty, pattern)\n );\n\n if (!propertyMatches) {\n continue;\n }\n\n // Check if the value matches any configured value\n const valueMatches = config.values.some(\n (configValue) => configValue.toLowerCase().trim() === normalizedValue\n );\n\n if (valueMatches) {\n return hookName;\n }\n }\n\n return null;\n}\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": [
|
|
3
|
+
"sources": ["../../../../../src/rules/v9/no-hardcoded-values/handlers/boxShadowHandler.ts"],
|
|
4
|
+
"sourcesContent": ["import type { HandlerContext, DeclarationHandler } from '../../../../types';\nimport type { ValueToStylingHooksMapping } from '@salesforce-ux/sds-metadata/next';\nimport { parseBoxShadowValue, isBoxShadowMatch, type BoxShadowValue } from '../../../../utils/boxShadowValueParser';\nimport { formatSuggestionHooks } from '../../../../utils/css-utils';\nimport { getCustomMapping } from '../../../../utils/custom-mapping-utils';\n\n// Import shared utilities for common logic\nimport { \n handleShorthandAutoFix, \n type ReplacementInfo,\n type PositionInfo\n} from '../../../../utils/hardcoded-shared-utils';\n\n/**\n * Convert CSS value to parsed box-shadow values, filtering out empty ones\n */\nfunction toBoxShadowValue(cssValue: string): BoxShadowValue[] | null {\n const parsedCssValue = parseBoxShadowValue(cssValue).filter((shadow) => Object.keys(shadow).length > 0);\n if (parsedCssValue.length === 0) {\n return null;\n }\n return parsedCssValue;\n}\n\n/**\n * Extract box-shadow hook entries from styling hooks mapping\n */\nfunction shadowValueToHookEntries(supportedStylinghooks: ValueToStylingHooksMapping): Array<[string, string[]]> {\n return Object.entries(supportedStylinghooks).filter(([key, value]) => {\n return value.some((hook) => hook.properties.includes('box-shadow'));\n }).map(([key, value]) => {\n return [key, value.map((hook) => hook.name)];\n });\n}\n\n/**\n * Report box-shadow violation with hooks and apply auto-fix\n */\nfunction reportBoxShadowViolation(\n node: any,\n context: HandlerContext,\n valueText: string,\n hooks: string[]\n): void {\n const positionInfo: PositionInfo = {\n start: { offset: 0, line: 1, column: 1 },\n end: { offset: valueText.length, line: 1, column: valueText.length + 1 }\n };\n \n const replacement = createBoxShadowReplacement(\n valueText,\n hooks,\n context,\n positionInfo\n );\n \n if (replacement) {\n const replacements: ReplacementInfo[] = [replacement];\n handleShorthandAutoFix(node, context, valueText, replacements);\n }\n}\n\n/**\n * Handle box-shadow declarations using CSS tree parsing\n */\nexport const handleBoxShadowDeclaration: DeclarationHandler = (node: any, context: HandlerContext) => {\n const cssProperty = node.property.toLowerCase();\n const valueText = context.sourceCode.getText(node.value);\n \n // Check custom mapping first\n const customHook = getCustomMapping(cssProperty, valueText, context.options?.customMapping);\n if (customHook) {\n reportBoxShadowViolation(node, context, valueText, [customHook]);\n return;\n }\n\n const shadowHooks = shadowValueToHookEntries(context.valueToStylinghook);\n const parsedCssValue = toBoxShadowValue(valueText);\n if (!parsedCssValue) {\n return;\n }\n\n // Look for matching hooks in metadata\n for (const [shadow, closestHooks] of shadowHooks) {\n const parsedValueHook = toBoxShadowValue(shadow);\n if (parsedValueHook && isBoxShadowMatch(parsedCssValue, parsedValueHook)) {\n if (closestHooks.length > 0) {\n reportBoxShadowViolation(node, context, valueText, closestHooks);\n }\n return;\n }\n }\n \n // If no hooks found, silently ignore - don't report any violations\n};\n\n\n/**\n * Create box-shadow replacement info for shorthand auto-fix\n * Only called when hooks are available (hooks.length > 0)\n * Returns replacement data or null if invalid position info\n */\nfunction createBoxShadowReplacement(\n originalValue: string,\n hooks: string[],\n context: HandlerContext,\n positionInfo: PositionInfo\n): ReplacementInfo | null {\n if (!positionInfo?.start) {\n return null;\n }\n\n // Use position information directly from CSS tree (already 0-based offsets)\n const start = positionInfo.start.offset;\n const end = positionInfo.end.offset;\n\n if (hooks.length === 1) {\n // Has a single hook replacement - should provide autofix\n return {\n start,\n end,\n replacement: `var(${hooks[0]}, ${originalValue})`,\n displayValue: hooks[0],\n hasHook: true\n };\n } else {\n // Multiple hooks - still has hooks, but no auto-fix\n return {\n start,\n end,\n replacement: originalValue,\n displayValue: formatSuggestionHooks(hooks),\n hasHook: true\n };\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,kCAA2E;AAC3E,uBAAsC;AACtC,kCAAiC;AAGjC,oCAIO;AAKP,SAAS,iBAAiB,UAA2C;AACnE,QAAM,qBAAiB,iDAAoB,QAAQ,EAAE,OAAO,CAAC,WAAW,OAAO,KAAK,MAAM,EAAE,SAAS,CAAC;AACtG,MAAI,eAAe,WAAW,GAAG;AAC/B,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAKA,SAAS,yBAAyB,uBAA8E;AAC9G,SAAO,OAAO,QAAQ,qBAAqB,EAAE,OAAO,CAAC,CAAC,KAAK,KAAK,MAAM;AACpE,WAAO,MAAM,KAAK,CAAC,SAAS,KAAK,WAAW,SAAS,YAAY,CAAC;AAAA,EACpE,CAAC,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AACvB,WAAO,CAAC,KAAK,MAAM,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC;AAAA,EAC7C,CAAC;AACH;AAKA,SAAS,yBACP,MACA,SACA,WACA,OACM;AACN,QAAM,eAA6B;AAAA,IACjC,OAAO,EAAE,QAAQ,GAAG,MAAM,GAAG,QAAQ,EAAE;AAAA,IACvC,KAAK,EAAE,QAAQ,UAAU,QAAQ,MAAM,GAAG,QAAQ,UAAU,SAAS,EAAE;AAAA,EACzE;AAEA,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,aAAa;AACf,UAAM,eAAkC,CAAC,WAAW;AACpD,8DAAuB,MAAM,SAAS,WAAW,YAAY;AAAA,EAC/D;AACF;AAKO,IAAM,6BAAiD,CAAC,MAAW,YAA4B;AACpG,QAAM,cAAc,KAAK,SAAS,YAAY;AAC9C,QAAM,YAAY,QAAQ,WAAW,QAAQ,KAAK,KAAK;AAGvD,QAAM,iBAAa,8CAAiB,aAAa,WAAW,QAAQ,SAAS,aAAa;AAC1F,MAAI,YAAY;AACd,6BAAyB,MAAM,SAAS,WAAW,CAAC,UAAU,CAAC;AAC/D;AAAA,EACF;AAEA,QAAM,cAAc,yBAAyB,QAAQ,kBAAkB;AACvE,QAAM,iBAAiB,iBAAiB,SAAS;AACjD,MAAI,CAAC,gBAAgB;AACnB;AAAA,EACF;AAGA,aAAW,CAAC,QAAQ,YAAY,KAAK,aAAa;AAChD,UAAM,kBAAkB,iBAAiB,MAAM;AAC/C,QAAI,uBAAmB,8CAAiB,gBAAgB,eAAe,GAAG;AACxE,UAAI,aAAa,SAAS,GAAG;AAC3B,iCAAyB,MAAM,SAAS,WAAW,YAAY;AAAA,MACjE;AACA;AAAA,IACF;AAAA,EACF;AAGF;AAQA,SAAS,2BACP,eACA,OACA,SACA,cACwB;AACxB,MAAI,CAAC,cAAc,OAAO;AACxB,WAAO;AAAA,EACT;AAGA,QAAM,QAAQ,aAAa,MAAM;AACjC,QAAM,MAAM,aAAa,IAAI;AAE7B,MAAI,MAAM,WAAW,GAAG;AAEtB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,aAAa,OAAO,MAAM,CAAC,CAAC,KAAK,aAAa;AAAA,MAC9C,cAAc,MAAM,CAAC;AAAA,MACrB,SAAS;AAAA,IACX;AAAA,EACF,OAAO;AAEL,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,kBAAc,wCAAsB,KAAK;AAAA,MACzC,SAAS;AAAA,IACX;AAAA,EACF;AACF;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|