@salesforce-ux/eslint-plugin-slds 1.0.7 → 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/README.md +62 -0
- 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 -2332
- package/build/index.js.map +4 -4
- package/build/rules/enforce-bem-usage.js +18 -234
- 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 +6 -178
- package/build/rules/no-deprecated-classes-slds2.js.map +4 -4
- package/build/rules/v9/enforce-bem-usage.js +3 -163
- package/build/rules/v9/enforce-bem-usage.js.map +4 -4
- package/build/rules/v9/enforce-component-hook-naming-convention.js +3 -163
- package/build/rules/v9/enforce-component-hook-naming-convention.js.map +4 -4
- package/build/rules/v9/enforce-sds-to-slds-hooks.js +3 -163
- package/build/rules/v9/enforce-sds-to-slds-hooks.js.map +4 -4
- package/build/rules/v9/lwc-token-to-slds-hook.js +6 -264
- package/build/rules/v9/lwc-token-to-slds-hook.js.map +4 -4
- package/build/rules/v9/no-deprecated-slds-classes.js +3 -163
- package/build/rules/v9/no-deprecated-slds-classes.js.map +4 -4
- package/build/rules/v9/no-deprecated-tokens-slds1.js +30 -169
- package/build/rules/v9/no-deprecated-tokens-slds1.js.map +4 -4
- package/build/rules/v9/no-hardcoded-values/handlers/boxShadowHandler.js +29 -253
- package/build/rules/v9/no-hardcoded-values/handlers/boxShadowHandler.js.map +4 -4
- package/build/rules/v9/no-hardcoded-values/handlers/colorHandler.js +31 -289
- package/build/rules/v9/no-hardcoded-values/handlers/colorHandler.js.map +4 -4
- package/build/rules/v9/no-hardcoded-values/handlers/densityHandler.js +23 -286
- package/build/rules/v9/no-hardcoded-values/handlers/densityHandler.js.map +4 -4
- package/build/rules/v9/no-hardcoded-values/handlers/fontHandler.js +24 -316
- package/build/rules/v9/no-hardcoded-values/handlers/fontHandler.js.map +4 -4
- package/build/rules/v9/no-hardcoded-values/handlers/index.js +8 -799
- 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 +5 -1090
- 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 +5 -1090
- package/build/rules/v9/no-hardcoded-values/no-hardcoded-values-slds2.js.map +4 -4
- package/build/rules/v9/no-hardcoded-values/noHardcodedValueRule.js +31 -882
- package/build/rules/v9/no-hardcoded-values/noHardcodedValueRule.js.map +4 -4
- package/build/rules/v9/no-hardcoded-values/ruleOptionsSchema.d.ts +40 -0
- package/build/rules/v9/no-hardcoded-values/ruleOptionsSchema.js +63 -0
- package/build/rules/v9/no-hardcoded-values/ruleOptionsSchema.js.map +7 -0
- package/build/rules/v9/no-slds-class-overrides.js +3 -163
- package/build/rules/v9/no-slds-class-overrides.js.map +4 -4
- package/build/rules/v9/no-slds-namespace-for-custom-hooks.js +5 -254
- 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 +5 -257
- package/build/rules/v9/no-slds-var-without-fallback.js.map +4 -4
- package/build/rules/v9/no-sldshook-fallback-for-lwctoken.js +3 -163
- package/build/rules/v9/no-sldshook-fallback-for-lwctoken.js.map +4 -4
- package/build/rules/v9/no-unsupported-hooks-slds2.js +3 -163
- 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/types/index.d.ts +57 -0
- package/build/types/index.js.map +1 -1
- 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.d.ts +25 -0
- package/build/utils/color-lib-utils.js +28 -79
- 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/custom-mapping-utils.d.ts +9 -0
- package/build/utils/custom-mapping-utils.js +62 -0
- package/build/utils/custom-mapping-utils.js.map +7 -0
- package/build/{src/utils → utils}/hardcoded-shared-utils.d.ts +1 -0
- package/build/utils/hardcoded-shared-utils.js +46 -98
- package/build/utils/hardcoded-shared-utils.js.map +4 -4
- package/build/{src/utils → utils}/property-matcher.d.ts +3 -1
- package/build/utils/property-matcher.js +22 -8
- 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 +6 -11
- package/build/src/types/index.d.ts +0 -26
- package/build/src/utils/color-lib-utils.d.ts +0 -18
- 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-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/utils → utils}/css-functions.d.ts +0 -0
- /package/build/{src/utils → utils}/node.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/colorHandler.ts
|
|
@@ -32,316 +22,68 @@ __export(colorHandler_exports, {
|
|
|
32
22
|
handleColorDeclaration: () => handleColorDeclaration
|
|
33
23
|
});
|
|
34
24
|
module.exports = __toCommonJS(colorHandler_exports);
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
var
|
|
38
|
-
var
|
|
39
|
-
|
|
40
|
-
// src/utils/css-functions.ts
|
|
41
|
-
var CSS_FUNCTIONS = [
|
|
42
|
-
"attr",
|
|
43
|
-
"calc",
|
|
44
|
-
"color-mix",
|
|
45
|
-
"conic-gradient",
|
|
46
|
-
"counter",
|
|
47
|
-
"cubic-bezier",
|
|
48
|
-
"linear-gradient",
|
|
49
|
-
"max",
|
|
50
|
-
"min",
|
|
51
|
-
"radial-gradient",
|
|
52
|
-
"repeating-conic-gradient",
|
|
53
|
-
"repeating-linear-gradient",
|
|
54
|
-
"repeating-radial-gradient",
|
|
55
|
-
"var"
|
|
56
|
-
];
|
|
57
|
-
var CSS_MATH_FUNCTIONS = ["calc", "min", "max"];
|
|
58
|
-
var RGB_COLOR_FUNCTIONS = ["rgb", "rgba", "hsl", "hsla"];
|
|
59
|
-
var cssFunctionsRegex = new RegExp(`(?:${CSS_FUNCTIONS.join("|")})`);
|
|
60
|
-
var cssFunctionsExactRegex = new RegExp(`^(?:${CSS_FUNCTIONS.join("|")})$`);
|
|
61
|
-
var cssMathFunctionsRegex = new RegExp(`^(?:${CSS_MATH_FUNCTIONS.join("|")})$`);
|
|
62
|
-
function isCssFunction(value) {
|
|
63
|
-
return cssFunctionsExactRegex.test(value);
|
|
64
|
-
}
|
|
65
|
-
function isCssColorFunction(value) {
|
|
66
|
-
return RGB_COLOR_FUNCTIONS.includes(value);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
// src/utils/color-lib-utils.ts
|
|
70
|
-
var LAB_THRESHOLD = 25;
|
|
71
|
-
var isHexCode = (color) => {
|
|
72
|
-
const hexPattern = /^#(?:[0-9a-fA-F]{3}){1,2}$/;
|
|
73
|
-
return hexPattern.test(color);
|
|
74
|
-
};
|
|
75
|
-
var convertToHex = (color) => {
|
|
76
|
-
try {
|
|
77
|
-
return (0, import_chroma_js.default)(color).hex();
|
|
78
|
-
} catch (e) {
|
|
79
|
-
return null;
|
|
80
|
-
}
|
|
81
|
-
};
|
|
82
|
-
var findClosestColorHook = (color, supportedColors, cssProperty) => {
|
|
83
|
-
const returnStylingHooks = [];
|
|
84
|
-
const closestHooksWithSameProperty = [];
|
|
85
|
-
const closestHooksWithoutSameProperty = [];
|
|
86
|
-
const closestHooksWithAllProperty = [];
|
|
87
|
-
const labColor = (0, import_chroma_js.default)(color).lab();
|
|
88
|
-
Object.entries(supportedColors).forEach(([sldsValue, data]) => {
|
|
89
|
-
if (sldsValue && isHexCode(sldsValue)) {
|
|
90
|
-
const hooks = data;
|
|
91
|
-
hooks.forEach((hook) => {
|
|
92
|
-
const labSupportedColor = (0, import_chroma_js.default)(sldsValue).lab();
|
|
93
|
-
const distance = JSON.stringify(labColor) === JSON.stringify(labSupportedColor) ? 0 : import_chroma_js.default.distance(import_chroma_js.default.lab(...labColor), import_chroma_js.default.lab(...labSupportedColor), "lab");
|
|
94
|
-
if (hook.properties.includes(cssProperty)) {
|
|
95
|
-
if (distance <= LAB_THRESHOLD) {
|
|
96
|
-
closestHooksWithSameProperty.push({ name: hook.name, distance });
|
|
97
|
-
}
|
|
98
|
-
} else if (hook.properties.includes("*")) {
|
|
99
|
-
if (distance <= LAB_THRESHOLD) {
|
|
100
|
-
closestHooksWithAllProperty.push({ name: hook.name, distance });
|
|
101
|
-
}
|
|
102
|
-
} else {
|
|
103
|
-
if (distance <= LAB_THRESHOLD) {
|
|
104
|
-
closestHooksWithoutSameProperty.push({ name: hook.name, distance });
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
});
|
|
108
|
-
}
|
|
109
|
-
});
|
|
110
|
-
const closesthookGroups = [
|
|
111
|
-
{ hooks: closestHooksWithSameProperty, distance: 0 },
|
|
112
|
-
{ hooks: closestHooksWithAllProperty, distance: 0 },
|
|
113
|
-
{ hooks: closestHooksWithSameProperty, distance: Infinity },
|
|
114
|
-
// For hooks with distance > 0
|
|
115
|
-
{ hooks: closestHooksWithAllProperty, distance: Infinity },
|
|
116
|
-
{ hooks: closestHooksWithoutSameProperty, distance: Infinity }
|
|
117
|
-
];
|
|
118
|
-
for (const group of closesthookGroups) {
|
|
119
|
-
const filteredHooks = group.hooks.filter(
|
|
120
|
-
(h) => group.distance === 0 ? h.distance === 0 : h.distance > 0
|
|
121
|
-
);
|
|
122
|
-
if (returnStylingHooks.length < 1 && filteredHooks.length > 0) {
|
|
123
|
-
filteredHooks.sort((a, b) => a.distance - b.distance);
|
|
124
|
-
returnStylingHooks.push(...filteredHooks.slice(0, 5).map((h) => h.name));
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
return Array.from(new Set(returnStylingHooks));
|
|
128
|
-
};
|
|
129
|
-
var isValidColor = (val) => import_chroma_js.default.valid(val);
|
|
130
|
-
var extractColorValue = (node) => {
|
|
131
|
-
let colorValue = null;
|
|
132
|
-
switch (node.type) {
|
|
133
|
-
case "Hash":
|
|
134
|
-
colorValue = `#${node.value}`;
|
|
135
|
-
break;
|
|
136
|
-
case "Identifier":
|
|
137
|
-
colorValue = node.name;
|
|
138
|
-
break;
|
|
139
|
-
case "Function":
|
|
140
|
-
if (isCssColorFunction(node.name)) {
|
|
141
|
-
colorValue = (0, import_css_tree.generate)(node);
|
|
142
|
-
}
|
|
143
|
-
break;
|
|
144
|
-
}
|
|
145
|
-
return colorValue && isValidColor(colorValue) ? colorValue : null;
|
|
146
|
-
};
|
|
147
|
-
|
|
148
|
-
// src/utils/property-matcher.ts
|
|
149
|
-
var DIRECTION_VALUES = "(?:top|right|bottom|left|inline|block|inline-start|inline-end|start|end|block-start|block-end)";
|
|
150
|
-
var CORNER_VALUES = "(?:top-left|top-right|bottom-right|bottom-left|start-start|start-end|end-start|end-end)";
|
|
151
|
-
var INSET_VALUES = "(?:inline|block|inline-start|inline-end|block-start|block-end)";
|
|
152
|
-
var BORDER_COLOR_REGEX = new RegExp(`^border(?:-${DIRECTION_VALUES})?-color$`);
|
|
153
|
-
var BORDER_WIDTH_REGEX = new RegExp(`^border(?:-${DIRECTION_VALUES})?-width$`);
|
|
154
|
-
var MARGIN_REGEX = new RegExp(`^margin(?:-${DIRECTION_VALUES})?$`);
|
|
155
|
-
var PADDING_REGEX = new RegExp(`^padding(?:-${DIRECTION_VALUES})?$`);
|
|
156
|
-
var BORDER_RADIUS_REGEX = new RegExp(`^border(?:-${CORNER_VALUES})?-radius$`);
|
|
157
|
-
var INSET_REGEX = new RegExp(`^inset(?:-${INSET_VALUES})?$`);
|
|
158
|
-
function isBorderColorProperty(cssProperty) {
|
|
159
|
-
return BORDER_COLOR_REGEX.test(cssProperty);
|
|
160
|
-
}
|
|
161
|
-
function isBorderWidthProperty(cssProperty) {
|
|
162
|
-
return BORDER_WIDTH_REGEX.test(cssProperty);
|
|
163
|
-
}
|
|
164
|
-
function isMarginProperty(cssProperty) {
|
|
165
|
-
return MARGIN_REGEX.test(cssProperty);
|
|
166
|
-
}
|
|
167
|
-
function isPaddingProperty(cssProperty) {
|
|
168
|
-
return PADDING_REGEX.test(cssProperty);
|
|
169
|
-
}
|
|
170
|
-
function isBorderRadius(cssProperty) {
|
|
171
|
-
return BORDER_RADIUS_REGEX.test(cssProperty);
|
|
172
|
-
}
|
|
173
|
-
function isDimensionProperty(cssProperty) {
|
|
174
|
-
return ["width", "height", "min-width", "max-width", "min-height", "max-height"].includes(cssProperty);
|
|
175
|
-
}
|
|
176
|
-
function isInsetProperty(cssProperty) {
|
|
177
|
-
return INSET_REGEX.test(cssProperty);
|
|
178
|
-
}
|
|
179
|
-
function resolvePropertyToMatch(cssProperty) {
|
|
180
|
-
const propertyToMatch = cssProperty.toLowerCase();
|
|
181
|
-
if (propertyToMatch === "outline" || propertyToMatch === "outline-width" || isBorderWidthProperty(propertyToMatch)) {
|
|
182
|
-
return "border-width";
|
|
183
|
-
} else if (isMarginProperty(propertyToMatch)) {
|
|
184
|
-
return "margin";
|
|
185
|
-
} else if (isPaddingProperty(propertyToMatch)) {
|
|
186
|
-
return "padding";
|
|
187
|
-
} else if (isBorderRadius(propertyToMatch)) {
|
|
188
|
-
return "border-radius";
|
|
189
|
-
} else if (isDimensionProperty(propertyToMatch)) {
|
|
190
|
-
return "width";
|
|
191
|
-
} else if (isInsetProperty(propertyToMatch)) {
|
|
192
|
-
return "top";
|
|
193
|
-
} else if (cssProperty === "background" || cssProperty === "background-color") {
|
|
194
|
-
return "background-color";
|
|
195
|
-
} else if (cssProperty === "outline" || cssProperty === "outline-color" || isBorderColorProperty(cssProperty)) {
|
|
196
|
-
return "border-color";
|
|
197
|
-
}
|
|
198
|
-
return propertyToMatch;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
// src/utils/hardcoded-shared-utils.ts
|
|
202
|
-
var import_css_tree2 = require("@eslint/css-tree");
|
|
203
|
-
function handleShorthandAutoFix(declarationNode, context, valueText, replacements) {
|
|
204
|
-
const sortedReplacements = replacements.sort((a, b) => a.start - b.start);
|
|
205
|
-
const hasAnyHooks = sortedReplacements.some((r) => r.hasHook);
|
|
206
|
-
const canAutoFix = hasAnyHooks;
|
|
207
|
-
sortedReplacements.forEach(({ start, end, replacement, displayValue, hasHook }) => {
|
|
208
|
-
const originalValue = valueText.substring(start, end);
|
|
209
|
-
const valueStartColumn = declarationNode.value.loc.start.column;
|
|
210
|
-
const valueColumn = valueStartColumn + start;
|
|
211
|
-
const { loc: { start: locStart, end: locEnd } } = declarationNode.value;
|
|
212
|
-
const reportNode = {
|
|
213
|
-
...declarationNode.value,
|
|
214
|
-
loc: {
|
|
215
|
-
...declarationNode.value.loc,
|
|
216
|
-
start: {
|
|
217
|
-
...locStart,
|
|
218
|
-
column: valueColumn
|
|
219
|
-
},
|
|
220
|
-
end: {
|
|
221
|
-
...locEnd,
|
|
222
|
-
column: valueColumn + originalValue.length
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
};
|
|
226
|
-
if (hasHook) {
|
|
227
|
-
const fix = canAutoFix ? (fixer) => {
|
|
228
|
-
let newValue = valueText;
|
|
229
|
-
for (let i = sortedReplacements.length - 1; i >= 0; i--) {
|
|
230
|
-
const { start: rStart, end: rEnd, replacement: rReplacement } = sortedReplacements[i];
|
|
231
|
-
newValue = newValue.substring(0, rStart) + rReplacement + newValue.substring(rEnd);
|
|
232
|
-
}
|
|
233
|
-
return fixer.replaceText(declarationNode.value, newValue);
|
|
234
|
-
} : void 0;
|
|
235
|
-
context.context.report({
|
|
236
|
-
node: reportNode,
|
|
237
|
-
messageId: "hardcodedValue",
|
|
238
|
-
data: {
|
|
239
|
-
oldValue: originalValue,
|
|
240
|
-
newValue: displayValue
|
|
241
|
-
},
|
|
242
|
-
fix
|
|
243
|
-
});
|
|
244
|
-
} else {
|
|
245
|
-
context.context.report({
|
|
246
|
-
node: reportNode,
|
|
247
|
-
messageId: "noReplacement",
|
|
248
|
-
data: {
|
|
249
|
-
oldValue: originalValue
|
|
250
|
-
}
|
|
251
|
-
});
|
|
252
|
-
}
|
|
253
|
-
});
|
|
254
|
-
}
|
|
255
|
-
function forEachValue(valueText, extractValue, shouldSkipNode, callback) {
|
|
256
|
-
if (!valueText || typeof valueText !== "string") {
|
|
257
|
-
return;
|
|
258
|
-
}
|
|
259
|
-
try {
|
|
260
|
-
const ast = (0, import_css_tree2.parse)(valueText, { context: "value", positions: true });
|
|
261
|
-
(0, import_css_tree2.walk)(ast, {
|
|
262
|
-
enter(node) {
|
|
263
|
-
if (shouldSkipNode(node)) {
|
|
264
|
-
return this.skip;
|
|
265
|
-
}
|
|
266
|
-
const value = extractValue(node);
|
|
267
|
-
if (value !== null) {
|
|
268
|
-
const positionInfo = {
|
|
269
|
-
start: node.loc?.start,
|
|
270
|
-
end: node.loc?.end
|
|
271
|
-
};
|
|
272
|
-
callback(value, positionInfo);
|
|
273
|
-
}
|
|
274
|
-
}
|
|
275
|
-
});
|
|
276
|
-
} catch (error) {
|
|
277
|
-
return;
|
|
278
|
-
}
|
|
279
|
-
}
|
|
280
|
-
function shouldSkipColorNode(node) {
|
|
281
|
-
return node.type === "Function" && isCssFunction(node.name);
|
|
282
|
-
}
|
|
283
|
-
function forEachColorValue(valueText, callback) {
|
|
284
|
-
forEachValue(valueText, extractColorValue, shouldSkipColorNode, callback);
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
// src/utils/css-utils.ts
|
|
288
|
-
function formatSuggestionHooks(hooks) {
|
|
289
|
-
if (hooks.length === 1) {
|
|
290
|
-
return `${hooks[0]}`;
|
|
291
|
-
}
|
|
292
|
-
return "\n" + hooks.map((hook, index) => `${index + 1}. ${hook}`).join("\n");
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
// src/rules/v9/no-hardcoded-values/handlers/colorHandler.ts
|
|
25
|
+
var import_color_lib_utils = require("../../../../utils/color-lib-utils");
|
|
26
|
+
var import_property_matcher = require("../../../../utils/property-matcher");
|
|
27
|
+
var import_css_utils = require("../../../../utils/css-utils");
|
|
28
|
+
var import_custom_mapping_utils = require("../../../../utils/custom-mapping-utils");
|
|
29
|
+
var import_hardcoded_shared_utils = require("../../../../utils/hardcoded-shared-utils");
|
|
296
30
|
var handleColorDeclaration = (node, context) => {
|
|
297
31
|
const cssProperty = node.property.toLowerCase();
|
|
298
32
|
const valueText = context.sourceCode.getText(node.value);
|
|
299
33
|
const replacements = [];
|
|
300
|
-
forEachColorValue(valueText, (colorValue, positionInfo) => {
|
|
301
|
-
if (colorValue !== "transparent" && isValidColor(colorValue)) {
|
|
34
|
+
(0, import_hardcoded_shared_utils.forEachColorValue)(valueText, (colorValue, positionInfo) => {
|
|
35
|
+
if (colorValue !== "transparent" && (0, import_color_lib_utils.isValidColor)(colorValue)) {
|
|
302
36
|
const replacement = createColorReplacement(colorValue, cssProperty, context, positionInfo, valueText);
|
|
303
37
|
if (replacement) {
|
|
304
38
|
replacements.push(replacement);
|
|
305
39
|
}
|
|
306
40
|
}
|
|
307
41
|
});
|
|
308
|
-
handleShorthandAutoFix(node, context, valueText, replacements);
|
|
42
|
+
(0, import_hardcoded_shared_utils.handleShorthandAutoFix)(node, context, valueText, replacements);
|
|
309
43
|
};
|
|
310
44
|
function createColorReplacement(colorValue, cssProperty, context, positionInfo, originalValueText) {
|
|
311
45
|
if (!positionInfo?.start) {
|
|
312
46
|
return null;
|
|
313
47
|
}
|
|
314
|
-
const hexValue = convertToHex(colorValue);
|
|
48
|
+
const hexValue = (0, import_color_lib_utils.convertToHex)(colorValue);
|
|
315
49
|
if (!hexValue) {
|
|
316
50
|
return null;
|
|
317
51
|
}
|
|
318
|
-
const propToMatch = resolvePropertyToMatch(cssProperty);
|
|
319
|
-
const closestHooks = findClosestColorHook(hexValue, context.valueToStylinghook, propToMatch);
|
|
320
52
|
const start = positionInfo.start.offset;
|
|
321
53
|
const end = positionInfo.end.offset;
|
|
322
54
|
const originalValue = originalValueText ? originalValueText.substring(start, end) : colorValue;
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
55
|
+
const customHook = (0, import_custom_mapping_utils.getCustomMapping)(cssProperty, colorValue, context.options?.customMapping);
|
|
56
|
+
let closestHooks = [];
|
|
57
|
+
if (customHook) {
|
|
58
|
+
closestHooks = [customHook];
|
|
59
|
+
} else {
|
|
60
|
+
const propToMatch = (0, import_property_matcher.resolveColorPropertyToMatch)(cssProperty);
|
|
61
|
+
closestHooks = (0, import_color_lib_utils.findClosestColorHook)(hexValue, context.valueToStylinghook, propToMatch);
|
|
62
|
+
}
|
|
63
|
+
let replacement = originalValue;
|
|
64
|
+
let paletteHook = null;
|
|
65
|
+
if (context.options?.preferPaletteHook && closestHooks.length > 1) {
|
|
66
|
+
paletteHook = closestHooks.filter((hook) => hook.includes("-palette-"))[0];
|
|
67
|
+
}
|
|
68
|
+
if (paletteHook) {
|
|
69
|
+
replacement = `var(${paletteHook}, ${colorValue})`;
|
|
70
|
+
} else if (closestHooks.length === 1) {
|
|
71
|
+
replacement = `var(${closestHooks[0]}, ${colorValue})`;
|
|
72
|
+
}
|
|
73
|
+
if (closestHooks.length > 0) {
|
|
332
74
|
return {
|
|
333
75
|
start,
|
|
334
76
|
end,
|
|
335
|
-
replacement
|
|
77
|
+
replacement,
|
|
336
78
|
// Use original value to preserve spacing
|
|
337
|
-
displayValue: formatSuggestionHooks(closestHooks),
|
|
79
|
+
displayValue: (0, import_css_utils.formatSuggestionHooks)(closestHooks),
|
|
338
80
|
hasHook: true
|
|
339
81
|
};
|
|
340
82
|
} else {
|
|
341
83
|
return {
|
|
342
84
|
start,
|
|
343
85
|
end,
|
|
344
|
-
replacement
|
|
86
|
+
replacement,
|
|
345
87
|
// Use original value to preserve spacing
|
|
346
88
|
displayValue: originalValue,
|
|
347
89
|
hasHook: false
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../../../src/rules/v9/no-hardcoded-values/handlers/colorHandler.ts"
|
|
4
|
-
"sourcesContent": ["import { findClosestColorHook, convertToHex, isValidColor } from '../../../../utils/color-lib-utils';\nimport { resolvePropertyToMatch } from '../../../../utils/property-matcher';\nimport { formatSuggestionHooks } from '../../../../utils/css-utils';\nimport type { HandlerContext, DeclarationHandler } from '../../../../types';\n\n// Import shared utilities for common logic\nimport { \n handleShorthandAutoFix, \n forEachColorValue,\n type ReplacementInfo,\n type PositionInfo\n} from '../../../../utils/hardcoded-shared-utils';\n\n/**\n * Handle color declarations using CSS tree parsing\n * Supports shorthand properties like background, border, etc. \n * Uses css-tree for reliable AST-based parsing + chroma-js validation\n */\nexport const handleColorDeclaration: DeclarationHandler = (node: any, context: HandlerContext) => {\n const cssProperty = node.property.toLowerCase();\n const valueText = context.sourceCode.getText(node.value);\n const replacements: ReplacementInfo[] = [];\n \n forEachColorValue(valueText, (colorValue, positionInfo) => {\n if (colorValue !== 'transparent' && isValidColor(colorValue)) {\n const replacement = createColorReplacement(colorValue, cssProperty, context, positionInfo, valueText);\n if (replacement) {\n replacements.push(replacement);\n }\n }\n });\n \n // Apply shorthand auto-fix once all values are processed\n handleShorthandAutoFix(node, context, valueText, replacements);\n};\n\n\n\n\n\n/**\n * Create color replacement info for shorthand auto-fix\n * Returns replacement data or null if no valid replacement\n */\nfunction createColorReplacement(\n colorValue: string,\n cssProperty: string,\n context: HandlerContext,\n positionInfo: PositionInfo,\n originalValueText?: string\n): ReplacementInfo | null {\n if (!positionInfo?.start) {\n return null;\n }\n\n const hexValue = convertToHex(colorValue);\n if (!hexValue) {\n return null;\n }\n\n const propToMatch = resolvePropertyToMatch(cssProperty);\n const closestHooks = findClosestColorHook(hexValue, context.valueToStylinghook, propToMatch);\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 // Extract the original value from the CSS text to preserve spacing\n const originalValue = originalValueText ? originalValueText.substring(start, end) : colorValue;\n\n if (closestHooks.length === 1) {\n // Has a single hook replacement - should provide autofix\n return {\n start,\n end,\n replacement: `var(${closestHooks[0]}, ${colorValue})`,\n displayValue: closestHooks[0],\n hasHook: true\n };\n } else if (closestHooks.length > 1) {\n // Multiple hooks - format them for better readability\n return {\n start,\n end,\n replacement: originalValue, // Use original value to preserve spacing\n displayValue: formatSuggestionHooks(closestHooks),\n hasHook: true\n };\n } else {\n // No hooks - keep original value\n return {\n start,\n end,\n replacement: originalValue, // Use original value to preserve spacing\n displayValue: originalValue,\n hasHook: false\n };\n }\n}\n\n\n\n\n\n", "//stylelint-sds/packages/stylelint-plugin-slds/src/utils/color-lib-utils.ts\nimport { ValueToStylingHooksMapping, ValueToStylingHookEntry } from '@salesforce-ux/sds-metadata';\nimport chroma from 'chroma-js';\nimport { generate } from '@eslint/css-tree';\nimport { isCssColorFunction } from './css-functions';\n\nconst LAB_THRESHOLD = 25; // Adjust this to set how strict the matching should be\n\nconst isHardCodedColor = (color: string): boolean => {\n const colorRegex =\n /\\b(rgb|rgba)\\((\\s*\\d{1,3}\\s*,\\s*){2,3}\\s*(0|1|0?\\.\\d+)\\s*\\)|#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})\\b|[a-zA-Z]+/g;\n return colorRegex.test(color);\n};\n\nconst isHexCode = (color: string): boolean => {\n const hexPattern = /^#(?:[0-9a-fA-F]{3}){1,2}$/; // Pattern for #RGB or #RRGGBB\n return hexPattern.test(color);\n};\n\n// Convert a named color or hex code into a hex format using chroma-js\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\n// Find the closest color hook using LAB distance\nconst findClosestColorHook = (\n color: string,\n supportedColors:ValueToStylingHooksMapping,\n cssProperty: string\n): string[] => {\n const returnStylingHooks: string[] = [];\n const closestHooksWithSameProperty: { name: string; distance: number }[] = [];\n const closestHooksWithoutSameProperty: { name: string; distance: number }[] =\n [];\n const closestHooksWithAllProperty: { name: string; distance: number }[] =\n [];\n const labColor = chroma(color).lab();\n\n Object.entries(supportedColors).forEach(([sldsValue, data]) => {\n if (sldsValue && isHexCode(sldsValue)) {\n const hooks = data as ValueToStylingHookEntry[]; // Get the hooks for the sldsValue\n\n hooks.forEach((hook) => {\n const labSupportedColor = chroma(sldsValue).lab();\n const distance = (JSON.stringify(labColor) === JSON.stringify(labSupportedColor)) ? 0\n : chroma.distance(chroma.lab(...labColor), chroma.lab(...labSupportedColor), \"lab\");\n // Check if the hook has the same property\n if (hook.properties.includes(cssProperty)) {\n // Add to same property hooks if within threshold\n if (distance <= LAB_THRESHOLD) {\n closestHooksWithSameProperty.push({ name: hook.name, distance });\n }\n } \n // Check for the universal selector\n else if ( hook.properties.includes(\"*\") ){\n // Add to same property hooks if within threshold\n if (distance <= LAB_THRESHOLD) {\n closestHooksWithAllProperty.push({ name: hook.name, distance });\n }\n }\n else {\n // Add to different property hooks if within threshold\n if (distance <= LAB_THRESHOLD) {\n closestHooksWithoutSameProperty.push({ name: hook.name, distance });\n }\n }\n });\n }\n });\n\n// Group hooks by their priority\nconst closesthookGroups = [\n { hooks: closestHooksWithSameProperty, distance: 0 },\n { hooks: closestHooksWithAllProperty, distance: 0 },\n { hooks: closestHooksWithSameProperty, distance: Infinity }, // For hooks with distance > 0\n { hooks: closestHooksWithAllProperty, distance: Infinity },\n { hooks: closestHooksWithoutSameProperty, distance: Infinity },\n];\n\nfor (const group of closesthookGroups) {\n // Filter hooks based on the distance condition\n const filteredHooks = group.hooks.filter(h => \n group.distance === 0 ? h.distance === 0 : h.distance > 0\n );\n\n if (returnStylingHooks.length < 1 && filteredHooks.length > 0) {\n filteredHooks.sort((a, b) => a.distance - b.distance);\n returnStylingHooks.push(...filteredHooks.slice(0, 5).map((h) => h.name));\n }\n}\n\n\n return Array.from(new Set(returnStylingHooks));\n};\n\n/**\n * This method is usefull to identify all possible css color values.\n * - names colors\n * - 6,8 digit hex\n * - rgb and rgba\n * - hsl and hsla\n */\nconst isValidColor = (val:string):boolean => chroma.valid(val);\n\n/**\n * Extract color value from CSS AST node\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, isHexCode, isHardCodedColor, 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 }", "///stylelint-sds/packages/stylelint-plugin-slds/src/utils/property-matcher.ts\n/**\n * Check if any of the hook properties match the provided cssProperty using wildcard matching.\n * @param hookProperties - Array of property patterns (can contain wildcards like `*`)\n * @param cssProperty - The CSS property to be checked\n * @returns true if a match is found, otherwise false\n */\nexport function matchesCssProperty(\n hookProperties: string[],\n cssProperty: string\n): boolean {\n return hookProperties.some((propertyPattern: string) => {\n const regexPattern = new RegExp(\n '^' + propertyPattern.replace(/\\*/g, '.*') + '$'\n );\n return regexPattern.test(cssProperty);\n });\n}\n\n// Directions & Corners\nconst DIRECTION_VALUES = '(?:top|right|bottom|left|inline|block|inline-start|inline-end|start|end|block-start|block-end)';\nconst CORNER_VALUES = '(?:top-left|top-right|bottom-right|bottom-left|start-start|start-end|end-start|end-end)';\nconst INSET_VALUES = '(?:inline|block|inline-start|inline-end|block-start|block-end)';\n\n\n// Pre-compiled regex patterns for better performance\nconst BORDER_COLOR_REGEX = new RegExp(`^border(?:-${DIRECTION_VALUES})?-color$`);\nconst BORDER_WIDTH_REGEX = new RegExp(`^border(?:-${DIRECTION_VALUES})?-width$`);\nconst MARGIN_REGEX = new RegExp(`^margin(?:-${DIRECTION_VALUES})?$`);\nconst PADDING_REGEX = new RegExp(`^padding(?:-${DIRECTION_VALUES})?$`);\nconst BORDER_RADIUS_REGEX = new RegExp(`^border(?:-${CORNER_VALUES})?-radius$`);\nconst INSET_REGEX = new RegExp(`^inset(?:-${INSET_VALUES})?$`);\n\nexport function isBorderColorProperty(cssProperty: string): boolean {\n return BORDER_COLOR_REGEX.test(cssProperty);\n}\n\nexport function isBorderWidthProperty(cssProperty: string): boolean {\n return BORDER_WIDTH_REGEX.test(cssProperty);\n}\n\nexport function isMarginProperty(cssProperty: string): boolean {\n return MARGIN_REGEX.test(cssProperty);\n}\n\nexport function isPaddingProperty(cssProperty: string): boolean {\n return PADDING_REGEX.test(cssProperty);\n}\n\nexport function isBorderRadius(cssProperty: string): boolean {\n return BORDER_RADIUS_REGEX.test(cssProperty);\n}\n\nexport function isDimensionProperty(cssProperty: string): boolean {\n return ['width', 'height', 'min-width', 'max-width', 'min-height', 'max-height'].includes(cssProperty);\n}\n\nexport function isInsetProperty(cssProperty: string): boolean {\n return INSET_REGEX.test(cssProperty);\n}\n\nexport const fontProperties = [\n 'font',\n 'font-size', \n 'font-weight'\n];\n\nexport const colorProperties = [\n 'color',\n 'fill',\n 'background',\n 'background-color',\n 'stroke',\n 'border',\n 'border*',\n 'border*-color',\n 'outline',\n 'outline-color',\n];\n\nexport const densificationProperties = [\n 'border*',\n 'margin*',\n 'padding*',\n 'width',\n 'height',\n 'min-width',\n 'max-width',\n 'min-height',\n 'max-height',\n 'inset',\n 'top',\n 'right',\n 'left',\n 'bottom',\n 'outline',\n 'outline-width',\n 'line-height'\n]; \n\n/**\n * Convert property patterns to CSS AST selector patterns\n * Handles wildcards (*) and creates proper ESLint CSS selector syntax\n */\nexport function toSelector(properties: string[]): string {\n const selectorParts = properties.map(prop => {\n if (prop.includes('*')) {\n // Convert wildcards to regex patterns for CSS AST selectors\n // Anchor to start of string to prevent matching CSS custom properties\n const regexPattern = prop.replace(/\\*/g, '.*');\n return `Declaration[property=/^${regexPattern}$/]`;\n } else {\n // Exact property match\n return `Declaration[property='${prop}']`;\n }\n });\n \n return selectorParts.join(', ');\n}\n\nexport function resolvePropertyToMatch(cssProperty:string){\n const propertyToMatch = cssProperty.toLowerCase();\n if(propertyToMatch === 'outline' || propertyToMatch === 'outline-width' || isBorderWidthProperty(propertyToMatch)){\n return 'border-width';\n } else if(isMarginProperty(propertyToMatch)){\n return 'margin';\n } else if(isPaddingProperty(propertyToMatch)){\n return 'padding';\n } else if(isBorderRadius(propertyToMatch)){\n return 'border-radius';\n } else if(isDimensionProperty(propertyToMatch)){\n // Stylinghooks includes only width as property to match, for all other dimensions we need to match width\n return 'width';\n } else if(isInsetProperty(propertyToMatch)){\n // Stylinghooks includes only top/left/right/bottom as property to match, for all other insets we need to match top\n return 'top';\n } else if(cssProperty === 'background' || cssProperty === 'background-color'){\n return 'background-color';\n } else if(cssProperty === 'outline' || cssProperty === 'outline-color' || isBorderColorProperty(cssProperty)){\n return 'border-color';\n }\n return propertyToMatch;\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}\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 // Sort replacements by position for proper reconstruction\n const sortedReplacements = replacements.sort((a, b) => a.start - b.start);\n \n // Check if we can apply auto-fix (at least one value has a hook)\n const hasAnyHooks = sortedReplacements.some(r => r.hasHook);\n const canAutoFix = hasAnyHooks;\n\n // Report each individual value\n sortedReplacements.forEach(({ start, end, replacement, displayValue, hasHook }) => {\n const originalValue = valueText.substring(start, end);\n const valueStartColumn = declarationNode.value.loc.start.column;\n const valueColumn = valueStartColumn + start;\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: valueColumn\n },\n end: {\n ...locEnd,\n column: valueColumn + originalValue.length\n }\n }\n };\n\n if (hasHook) {\n // Create auto-fix for the entire shorthand value\n const fix = canAutoFix ? (fixer: any) => {\n // Reconstruct the entire value with all replacements\n let newValue = valueText;\n \n // Apply replacements from right to left to maintain string positions\n for (let i = sortedReplacements.length - 1; i >= 0; i--) {\n const { start: rStart, end: rEnd, replacement: rReplacement } = sortedReplacements[i];\n newValue = newValue.substring(0, rStart) + rReplacement + newValue.substring(rEnd);\n }\n \n return fixer.replaceText(declarationNode.value, newValue);\n } : 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}"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": [
|
|
3
|
+
"sources": ["../../../../../src/rules/v9/no-hardcoded-values/handlers/colorHandler.ts"],
|
|
4
|
+
"sourcesContent": ["import { findClosestColorHook, convertToHex, isValidColor } from '../../../../utils/color-lib-utils';\nimport { resolveColorPropertyToMatch } from '../../../../utils/property-matcher';\nimport { formatSuggestionHooks } from '../../../../utils/css-utils';\nimport { getCustomMapping } from '../../../../utils/custom-mapping-utils';\nimport type { HandlerContext, DeclarationHandler } from '../../../../types';\n\n// Import shared utilities for common logic\nimport { \n handleShorthandAutoFix, \n forEachColorValue,\n type ReplacementInfo,\n type PositionInfo\n} from '../../../../utils/hardcoded-shared-utils';\n\n\n/**\n * Handle color declarations using CSS tree parsing\n * Supports shorthand properties like background, border, etc. \n * Uses css-tree for reliable AST-based parsing + chroma-js validation\n */\nexport const handleColorDeclaration: DeclarationHandler = (node: any, context: HandlerContext) => {\n const cssProperty = node.property.toLowerCase();\n const valueText = context.sourceCode.getText(node.value);\n const replacements: ReplacementInfo[] = [];\n \n forEachColorValue(valueText, (colorValue, positionInfo) => {\n if (colorValue !== 'transparent' && isValidColor(colorValue)) {\n const replacement = createColorReplacement(colorValue, cssProperty, context, positionInfo, valueText);\n if (replacement) {\n replacements.push(replacement);\n }\n }\n });\n \n // Apply shorthand auto-fix once all values are processed\n handleShorthandAutoFix(node, context, valueText, replacements);\n};\n\n\n/**\n * Create color replacement info for shorthand auto-fix\n * Returns replacement data or null if no valid replacement\n */\nfunction createColorReplacement(\n colorValue: string,\n cssProperty: string,\n context: HandlerContext,\n positionInfo: PositionInfo,\n originalValueText?: string\n): ReplacementInfo | null {\n if (!positionInfo?.start) {\n return null;\n }\n\n const hexValue = convertToHex(colorValue);\n if (!hexValue) {\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 // Extract the original value from the CSS text to preserve spacing\n const originalValue = originalValueText ? originalValueText.substring(start, end) : colorValue;\n\n // Check custom mapping first\n const customHook = getCustomMapping(cssProperty, colorValue, context.options?.customMapping);\n let closestHooks: string[] = [];\n \n if (customHook) {\n // Use custom mapping if available\n closestHooks = [customHook];\n } else {\n // Otherwise, find closest hooks from metadata\n const propToMatch = resolveColorPropertyToMatch(cssProperty);\n closestHooks = findClosestColorHook(hexValue, context.valueToStylinghook, propToMatch);\n }\n\n let replacement = originalValue;\n let paletteHook = null;\n // Apply preferPaletteHook filter if enabled\n if (context.options?.preferPaletteHook && closestHooks.length > 1) {\n paletteHook = closestHooks.filter(hook => hook.includes('-palette-'))[0];\n }\n if(paletteHook){\n replacement = `var(${paletteHook}, ${colorValue})`;\n } else if(closestHooks.length === 1){\n replacement = `var(${closestHooks[0]}, ${colorValue})`;\n }\n\n if (closestHooks.length > 0) {\n // Multiple hooks - format them for better readability\n return {\n start,\n end,\n replacement, // Use original value to preserve spacing\n displayValue: formatSuggestionHooks(closestHooks),\n hasHook: true \n };\n } else {\n // No hooks - keep original value\n return {\n start,\n end,\n replacement, // Use original value to preserve spacing\n displayValue: originalValue,\n hasHook: false\n };\n }\n}\n\n\n\n\n\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAiE;AACjE,8BAA4C;AAC5C,uBAAsC;AACtC,kCAAiC;AAIjC,oCAKO;AAQA,IAAM,yBAA6C,CAAC,MAAW,YAA4B;AAChG,QAAM,cAAc,KAAK,SAAS,YAAY;AAC9C,QAAM,YAAY,QAAQ,WAAW,QAAQ,KAAK,KAAK;AACvD,QAAM,eAAkC,CAAC;AAEzC,uDAAkB,WAAW,CAAC,YAAY,iBAAiB;AACzD,QAAI,eAAe,qBAAiB,qCAAa,UAAU,GAAG;AAC5D,YAAM,cAAc,uBAAuB,YAAY,aAAa,SAAS,cAAc,SAAS;AACpG,UAAI,aAAa;AACf,qBAAa,KAAK,WAAW;AAAA,MAC/B;AAAA,IACF;AAAA,EACF,CAAC;AAGD,4DAAuB,MAAM,SAAS,WAAW,YAAY;AAC/D;AAOA,SAAS,uBACP,YACA,aACA,SACA,cACA,mBACwB;AACxB,MAAI,CAAC,cAAc,OAAO;AACxB,WAAO;AAAA,EACT;AAEA,QAAM,eAAW,qCAAa,UAAU;AACxC,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAGA,QAAM,QAAQ,aAAa,MAAM;AACjC,QAAM,MAAM,aAAa,IAAI;AAG7B,QAAM,gBAAgB,oBAAoB,kBAAkB,UAAU,OAAO,GAAG,IAAI;AAGpF,QAAM,iBAAa,8CAAiB,aAAa,YAAY,QAAQ,SAAS,aAAa;AAC3F,MAAI,eAAyB,CAAC;AAE9B,MAAI,YAAY;AAEd,mBAAe,CAAC,UAAU;AAAA,EAC5B,OAAO;AAEL,UAAM,kBAAc,qDAA4B,WAAW;AAC3D,uBAAe,6CAAqB,UAAU,QAAQ,oBAAoB,WAAW;AAAA,EACvF;AAEA,MAAI,cAAc;AAClB,MAAI,cAAc;AAElB,MAAI,QAAQ,SAAS,qBAAqB,aAAa,SAAS,GAAG;AACjE,kBAAc,aAAa,OAAO,UAAQ,KAAK,SAAS,WAAW,CAAC,EAAE,CAAC;AAAA,EACzE;AACA,MAAG,aAAY;AACb,kBAAc,OAAO,WAAW,KAAK,UAAU;AAAA,EACjD,WAAU,aAAa,WAAW,GAAE;AAClC,kBAAc,OAAO,aAAa,CAAC,CAAC,KAAK,UAAU;AAAA,EACrD;AAEA,MAAI,aAAa,SAAS,GAAG;AAE3B,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MACA,kBAAc,wCAAsB,YAAY;AAAA,MAChD,SAAS;AAAA,IACX;AAAA,EACF,OAAO;AAEL,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MACA,cAAc;AAAA,MACd,SAAS;AAAA,IACX;AAAA,EACF;AACF;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|