@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,810 +14,21 @@ 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/index.ts
|
|
30
20
|
var handlers_exports = {};
|
|
31
21
|
__export(handlers_exports, {
|
|
32
|
-
handleBoxShadowDeclaration: () => handleBoxShadowDeclaration,
|
|
33
|
-
handleColorDeclaration: () => handleColorDeclaration,
|
|
34
|
-
handleDensityDeclaration: () => handleDensityDeclaration,
|
|
35
|
-
handleFontDeclaration: () => handleFontDeclaration
|
|
22
|
+
handleBoxShadowDeclaration: () => import_boxShadowHandler.handleBoxShadowDeclaration,
|
|
23
|
+
handleColorDeclaration: () => import_colorHandler.handleColorDeclaration,
|
|
24
|
+
handleDensityDeclaration: () => import_densityHandler.handleDensityDeclaration,
|
|
25
|
+
handleFontDeclaration: () => import_fontHandler.handleFontDeclaration
|
|
36
26
|
});
|
|
37
27
|
module.exports = __toCommonJS(handlers_exports);
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
var
|
|
41
|
-
var
|
|
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 isCssFunction(value) {
|
|
66
|
-
return cssFunctionsExactRegex.test(value);
|
|
67
|
-
}
|
|
68
|
-
function isCssColorFunction(value) {
|
|
69
|
-
return RGB_COLOR_FUNCTIONS.includes(value);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
// src/utils/color-lib-utils.ts
|
|
73
|
-
var LAB_THRESHOLD = 25;
|
|
74
|
-
var isHexCode = (color) => {
|
|
75
|
-
const hexPattern = /^#(?:[0-9a-fA-F]{3}){1,2}$/;
|
|
76
|
-
return hexPattern.test(color);
|
|
77
|
-
};
|
|
78
|
-
var convertToHex = (color) => {
|
|
79
|
-
try {
|
|
80
|
-
return (0, import_chroma_js.default)(color).hex();
|
|
81
|
-
} catch (e) {
|
|
82
|
-
return null;
|
|
83
|
-
}
|
|
84
|
-
};
|
|
85
|
-
var findClosestColorHook = (color, supportedColors, cssProperty) => {
|
|
86
|
-
const returnStylingHooks = [];
|
|
87
|
-
const closestHooksWithSameProperty = [];
|
|
88
|
-
const closestHooksWithoutSameProperty = [];
|
|
89
|
-
const closestHooksWithAllProperty = [];
|
|
90
|
-
const labColor = (0, import_chroma_js.default)(color).lab();
|
|
91
|
-
Object.entries(supportedColors).forEach(([sldsValue, data]) => {
|
|
92
|
-
if (sldsValue && isHexCode(sldsValue)) {
|
|
93
|
-
const hooks = data;
|
|
94
|
-
hooks.forEach((hook) => {
|
|
95
|
-
const labSupportedColor = (0, import_chroma_js.default)(sldsValue).lab();
|
|
96
|
-
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");
|
|
97
|
-
if (hook.properties.includes(cssProperty)) {
|
|
98
|
-
if (distance <= LAB_THRESHOLD) {
|
|
99
|
-
closestHooksWithSameProperty.push({ name: hook.name, distance });
|
|
100
|
-
}
|
|
101
|
-
} else if (hook.properties.includes("*")) {
|
|
102
|
-
if (distance <= LAB_THRESHOLD) {
|
|
103
|
-
closestHooksWithAllProperty.push({ name: hook.name, distance });
|
|
104
|
-
}
|
|
105
|
-
} else {
|
|
106
|
-
if (distance <= LAB_THRESHOLD) {
|
|
107
|
-
closestHooksWithoutSameProperty.push({ name: hook.name, distance });
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
});
|
|
111
|
-
}
|
|
112
|
-
});
|
|
113
|
-
const closesthookGroups = [
|
|
114
|
-
{ hooks: closestHooksWithSameProperty, distance: 0 },
|
|
115
|
-
{ hooks: closestHooksWithAllProperty, distance: 0 },
|
|
116
|
-
{ hooks: closestHooksWithSameProperty, distance: Infinity },
|
|
117
|
-
// For hooks with distance > 0
|
|
118
|
-
{ hooks: closestHooksWithAllProperty, distance: Infinity },
|
|
119
|
-
{ hooks: closestHooksWithoutSameProperty, distance: Infinity }
|
|
120
|
-
];
|
|
121
|
-
for (const group of closesthookGroups) {
|
|
122
|
-
const filteredHooks = group.hooks.filter(
|
|
123
|
-
(h) => group.distance === 0 ? h.distance === 0 : h.distance > 0
|
|
124
|
-
);
|
|
125
|
-
if (returnStylingHooks.length < 1 && filteredHooks.length > 0) {
|
|
126
|
-
filteredHooks.sort((a, b) => a.distance - b.distance);
|
|
127
|
-
returnStylingHooks.push(...filteredHooks.slice(0, 5).map((h) => h.name));
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
return Array.from(new Set(returnStylingHooks));
|
|
131
|
-
};
|
|
132
|
-
var isValidColor = (val) => import_chroma_js.default.valid(val);
|
|
133
|
-
var extractColorValue = (node) => {
|
|
134
|
-
let colorValue = null;
|
|
135
|
-
switch (node.type) {
|
|
136
|
-
case "Hash":
|
|
137
|
-
colorValue = `#${node.value}`;
|
|
138
|
-
break;
|
|
139
|
-
case "Identifier":
|
|
140
|
-
colorValue = node.name;
|
|
141
|
-
break;
|
|
142
|
-
case "Function":
|
|
143
|
-
if (isCssColorFunction(node.name)) {
|
|
144
|
-
colorValue = (0, import_css_tree.generate)(node);
|
|
145
|
-
}
|
|
146
|
-
break;
|
|
147
|
-
}
|
|
148
|
-
return colorValue && isValidColor(colorValue) ? colorValue : null;
|
|
149
|
-
};
|
|
150
|
-
|
|
151
|
-
// src/utils/property-matcher.ts
|
|
152
|
-
var DIRECTION_VALUES = "(?:top|right|bottom|left|inline|block|inline-start|inline-end|start|end|block-start|block-end)";
|
|
153
|
-
var CORNER_VALUES = "(?:top-left|top-right|bottom-right|bottom-left|start-start|start-end|end-start|end-end)";
|
|
154
|
-
var INSET_VALUES = "(?:inline|block|inline-start|inline-end|block-start|block-end)";
|
|
155
|
-
var BORDER_COLOR_REGEX = new RegExp(`^border(?:-${DIRECTION_VALUES})?-color$`);
|
|
156
|
-
var BORDER_WIDTH_REGEX = new RegExp(`^border(?:-${DIRECTION_VALUES})?-width$`);
|
|
157
|
-
var MARGIN_REGEX = new RegExp(`^margin(?:-${DIRECTION_VALUES})?$`);
|
|
158
|
-
var PADDING_REGEX = new RegExp(`^padding(?:-${DIRECTION_VALUES})?$`);
|
|
159
|
-
var BORDER_RADIUS_REGEX = new RegExp(`^border(?:-${CORNER_VALUES})?-radius$`);
|
|
160
|
-
var INSET_REGEX = new RegExp(`^inset(?:-${INSET_VALUES})?$`);
|
|
161
|
-
function isBorderColorProperty(cssProperty) {
|
|
162
|
-
return BORDER_COLOR_REGEX.test(cssProperty);
|
|
163
|
-
}
|
|
164
|
-
function isBorderWidthProperty(cssProperty) {
|
|
165
|
-
return BORDER_WIDTH_REGEX.test(cssProperty);
|
|
166
|
-
}
|
|
167
|
-
function isMarginProperty(cssProperty) {
|
|
168
|
-
return MARGIN_REGEX.test(cssProperty);
|
|
169
|
-
}
|
|
170
|
-
function isPaddingProperty(cssProperty) {
|
|
171
|
-
return PADDING_REGEX.test(cssProperty);
|
|
172
|
-
}
|
|
173
|
-
function isBorderRadius(cssProperty) {
|
|
174
|
-
return BORDER_RADIUS_REGEX.test(cssProperty);
|
|
175
|
-
}
|
|
176
|
-
function isDimensionProperty(cssProperty) {
|
|
177
|
-
return ["width", "height", "min-width", "max-width", "min-height", "max-height"].includes(cssProperty);
|
|
178
|
-
}
|
|
179
|
-
function isInsetProperty(cssProperty) {
|
|
180
|
-
return INSET_REGEX.test(cssProperty);
|
|
181
|
-
}
|
|
182
|
-
function resolvePropertyToMatch(cssProperty) {
|
|
183
|
-
const propertyToMatch = cssProperty.toLowerCase();
|
|
184
|
-
if (propertyToMatch === "outline" || propertyToMatch === "outline-width" || isBorderWidthProperty(propertyToMatch)) {
|
|
185
|
-
return "border-width";
|
|
186
|
-
} else if (isMarginProperty(propertyToMatch)) {
|
|
187
|
-
return "margin";
|
|
188
|
-
} else if (isPaddingProperty(propertyToMatch)) {
|
|
189
|
-
return "padding";
|
|
190
|
-
} else if (isBorderRadius(propertyToMatch)) {
|
|
191
|
-
return "border-radius";
|
|
192
|
-
} else if (isDimensionProperty(propertyToMatch)) {
|
|
193
|
-
return "width";
|
|
194
|
-
} else if (isInsetProperty(propertyToMatch)) {
|
|
195
|
-
return "top";
|
|
196
|
-
} else if (cssProperty === "background" || cssProperty === "background-color") {
|
|
197
|
-
return "background-color";
|
|
198
|
-
} else if (cssProperty === "outline" || cssProperty === "outline-color" || isBorderColorProperty(cssProperty)) {
|
|
199
|
-
return "border-color";
|
|
200
|
-
}
|
|
201
|
-
return propertyToMatch;
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
// src/utils/hardcoded-shared-utils.ts
|
|
205
|
-
var import_css_tree2 = require("@eslint/css-tree");
|
|
206
|
-
|
|
207
|
-
// src/utils/value-utils.ts
|
|
208
|
-
var ALLOWED_UNITS = ["px", "em", "rem", "%", "ch"];
|
|
209
|
-
function parseUnitValue(value) {
|
|
210
|
-
if (!value) return null;
|
|
211
|
-
const unitsPattern = ALLOWED_UNITS.join("|");
|
|
212
|
-
const regex = new RegExp(`^(-?\\d*\\.?\\d+)(${unitsPattern})?$`);
|
|
213
|
-
const match = value.match(regex);
|
|
214
|
-
if (!match) return null;
|
|
215
|
-
const number = parseFloat(match[1]);
|
|
216
|
-
const unit = match[2] ? match[2] : null;
|
|
217
|
-
if (isNaN(number)) return null;
|
|
218
|
-
return { number, unit };
|
|
219
|
-
}
|
|
220
|
-
function toAlternateUnitValue(numberVal, unitType) {
|
|
221
|
-
if (unitType === "px") {
|
|
222
|
-
let floatValue = parseFloat(`${numberVal / 16}`);
|
|
223
|
-
if (!isNaN(floatValue)) {
|
|
224
|
-
return {
|
|
225
|
-
unit: "rem",
|
|
226
|
-
number: parseFloat(floatValue.toFixed(4))
|
|
227
|
-
};
|
|
228
|
-
}
|
|
229
|
-
} else if (unitType === "rem") {
|
|
230
|
-
const intValue = parseInt(`${numberVal * 16}`);
|
|
231
|
-
if (!isNaN(intValue)) {
|
|
232
|
-
return {
|
|
233
|
-
unit: "px",
|
|
234
|
-
number: intValue
|
|
235
|
-
};
|
|
236
|
-
}
|
|
237
|
-
}
|
|
238
|
-
return null;
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
// src/utils/hardcoded-shared-utils.ts
|
|
242
|
-
var FONT_WEIGHTS = [
|
|
243
|
-
"normal",
|
|
244
|
-
"bold",
|
|
245
|
-
"bolder",
|
|
246
|
-
"lighter",
|
|
247
|
-
"100",
|
|
248
|
-
"200",
|
|
249
|
-
"300",
|
|
250
|
-
"400",
|
|
251
|
-
"500",
|
|
252
|
-
"600",
|
|
253
|
-
"700",
|
|
254
|
-
"800",
|
|
255
|
-
"900"
|
|
256
|
-
];
|
|
257
|
-
function isKnownFontWeight(value) {
|
|
258
|
-
const stringValue = value.toString();
|
|
259
|
-
return FONT_WEIGHTS.includes(stringValue.toLowerCase());
|
|
260
|
-
}
|
|
261
|
-
function handleShorthandAutoFix(declarationNode, context, valueText, replacements) {
|
|
262
|
-
const sortedReplacements = replacements.sort((a, b) => a.start - b.start);
|
|
263
|
-
const hasAnyHooks = sortedReplacements.some((r) => r.hasHook);
|
|
264
|
-
const canAutoFix = hasAnyHooks;
|
|
265
|
-
sortedReplacements.forEach(({ start, end, replacement, displayValue, hasHook }) => {
|
|
266
|
-
const originalValue = valueText.substring(start, end);
|
|
267
|
-
const valueStartColumn = declarationNode.value.loc.start.column;
|
|
268
|
-
const valueColumn = valueStartColumn + start;
|
|
269
|
-
const { loc: { start: locStart, end: locEnd } } = declarationNode.value;
|
|
270
|
-
const reportNode = {
|
|
271
|
-
...declarationNode.value,
|
|
272
|
-
loc: {
|
|
273
|
-
...declarationNode.value.loc,
|
|
274
|
-
start: {
|
|
275
|
-
...locStart,
|
|
276
|
-
column: valueColumn
|
|
277
|
-
},
|
|
278
|
-
end: {
|
|
279
|
-
...locEnd,
|
|
280
|
-
column: valueColumn + originalValue.length
|
|
281
|
-
}
|
|
282
|
-
}
|
|
283
|
-
};
|
|
284
|
-
if (hasHook) {
|
|
285
|
-
const fix = canAutoFix ? (fixer) => {
|
|
286
|
-
let newValue = valueText;
|
|
287
|
-
for (let i = sortedReplacements.length - 1; i >= 0; i--) {
|
|
288
|
-
const { start: rStart, end: rEnd, replacement: rReplacement } = sortedReplacements[i];
|
|
289
|
-
newValue = newValue.substring(0, rStart) + rReplacement + newValue.substring(rEnd);
|
|
290
|
-
}
|
|
291
|
-
return fixer.replaceText(declarationNode.value, newValue);
|
|
292
|
-
} : void 0;
|
|
293
|
-
context.context.report({
|
|
294
|
-
node: reportNode,
|
|
295
|
-
messageId: "hardcodedValue",
|
|
296
|
-
data: {
|
|
297
|
-
oldValue: originalValue,
|
|
298
|
-
newValue: displayValue
|
|
299
|
-
},
|
|
300
|
-
fix
|
|
301
|
-
});
|
|
302
|
-
} else {
|
|
303
|
-
context.context.report({
|
|
304
|
-
node: reportNode,
|
|
305
|
-
messageId: "noReplacement",
|
|
306
|
-
data: {
|
|
307
|
-
oldValue: originalValue
|
|
308
|
-
}
|
|
309
|
-
});
|
|
310
|
-
}
|
|
311
|
-
});
|
|
312
|
-
}
|
|
313
|
-
function forEachValue(valueText, extractValue, shouldSkipNode, callback) {
|
|
314
|
-
if (!valueText || typeof valueText !== "string") {
|
|
315
|
-
return;
|
|
316
|
-
}
|
|
317
|
-
try {
|
|
318
|
-
const ast = (0, import_css_tree2.parse)(valueText, { context: "value", positions: true });
|
|
319
|
-
(0, import_css_tree2.walk)(ast, {
|
|
320
|
-
enter(node) {
|
|
321
|
-
if (shouldSkipNode(node)) {
|
|
322
|
-
return this.skip;
|
|
323
|
-
}
|
|
324
|
-
const value = extractValue(node);
|
|
325
|
-
if (value !== null) {
|
|
326
|
-
const positionInfo = {
|
|
327
|
-
start: node.loc?.start,
|
|
328
|
-
end: node.loc?.end
|
|
329
|
-
};
|
|
330
|
-
callback(value, positionInfo);
|
|
331
|
-
}
|
|
332
|
-
}
|
|
333
|
-
});
|
|
334
|
-
} catch (error) {
|
|
335
|
-
return;
|
|
336
|
-
}
|
|
337
|
-
}
|
|
338
|
-
function shouldSkipColorNode(node) {
|
|
339
|
-
return node.type === "Function" && isCssFunction(node.name);
|
|
340
|
-
}
|
|
341
|
-
function shouldSkipDimensionNode(node) {
|
|
342
|
-
return node.type === "Function";
|
|
343
|
-
}
|
|
344
|
-
function extractDimensionValue(valueNode, cssProperty) {
|
|
345
|
-
if (!valueNode) return null;
|
|
346
|
-
switch (valueNode.type) {
|
|
347
|
-
case "Dimension":
|
|
348
|
-
const numValue = Number(valueNode.value);
|
|
349
|
-
if (numValue === 0) return null;
|
|
350
|
-
const unit = valueNode.unit.toLowerCase();
|
|
351
|
-
if (!ALLOWED_UNITS.includes(unit)) return null;
|
|
352
|
-
return {
|
|
353
|
-
number: numValue,
|
|
354
|
-
unit
|
|
355
|
-
};
|
|
356
|
-
case "Number":
|
|
357
|
-
const numberValue = Number(valueNode.value);
|
|
358
|
-
if (numberValue === 0) return null;
|
|
359
|
-
return {
|
|
360
|
-
number: numberValue,
|
|
361
|
-
unit: null
|
|
362
|
-
};
|
|
363
|
-
case "Percentage":
|
|
364
|
-
const percentValue = Number(valueNode.value);
|
|
365
|
-
if (percentValue === 0) return null;
|
|
366
|
-
return {
|
|
367
|
-
number: percentValue,
|
|
368
|
-
unit: "%"
|
|
369
|
-
};
|
|
370
|
-
case "Value":
|
|
371
|
-
return valueNode.children?.[0] ? extractDimensionValue(valueNode.children[0], cssProperty) : null;
|
|
372
|
-
}
|
|
373
|
-
return null;
|
|
374
|
-
}
|
|
375
|
-
function forEachColorValue(valueText, callback) {
|
|
376
|
-
forEachValue(valueText, extractColorValue, shouldSkipColorNode, callback);
|
|
377
|
-
}
|
|
378
|
-
function forEachDensityValue(valueText, cssProperty, callback) {
|
|
379
|
-
forEachValue(
|
|
380
|
-
valueText,
|
|
381
|
-
(node) => extractDimensionValue(node, cssProperty),
|
|
382
|
-
shouldSkipDimensionNode,
|
|
383
|
-
callback
|
|
384
|
-
);
|
|
385
|
-
}
|
|
386
|
-
function extractFontValue(node) {
|
|
387
|
-
if (!node) return null;
|
|
388
|
-
switch (node.type) {
|
|
389
|
-
case "Dimension":
|
|
390
|
-
const numValue = Number(node.value);
|
|
391
|
-
if (numValue <= 0) return null;
|
|
392
|
-
const unit = node.unit.toLowerCase();
|
|
393
|
-
if (!ALLOWED_UNITS.includes(unit)) return null;
|
|
394
|
-
return {
|
|
395
|
-
number: numValue,
|
|
396
|
-
unit
|
|
397
|
-
};
|
|
398
|
-
case "Number":
|
|
399
|
-
const numberValue = Number(node.value);
|
|
400
|
-
if (numberValue <= 0) {
|
|
401
|
-
return null;
|
|
402
|
-
}
|
|
403
|
-
if (!isKnownFontWeight(numberValue)) {
|
|
404
|
-
return null;
|
|
405
|
-
}
|
|
406
|
-
return {
|
|
407
|
-
number: numberValue,
|
|
408
|
-
unit: null
|
|
409
|
-
};
|
|
410
|
-
case "Identifier":
|
|
411
|
-
const namedValue = node.name.toLowerCase();
|
|
412
|
-
if (!isKnownFontWeight(namedValue)) {
|
|
413
|
-
return null;
|
|
414
|
-
}
|
|
415
|
-
if (namedValue === "normal") {
|
|
416
|
-
return { number: 400, unit: null };
|
|
417
|
-
}
|
|
418
|
-
return { number: namedValue, unit: null };
|
|
419
|
-
case "Percentage":
|
|
420
|
-
const percentValue = Number(node.value);
|
|
421
|
-
if (percentValue === 0) return null;
|
|
422
|
-
return {
|
|
423
|
-
number: percentValue,
|
|
424
|
-
unit: "%"
|
|
425
|
-
};
|
|
426
|
-
case "Value":
|
|
427
|
-
return node.children?.[0] ? extractFontValue(node.children[0]) : null;
|
|
428
|
-
}
|
|
429
|
-
return null;
|
|
430
|
-
}
|
|
431
|
-
function shouldSkipFontNode(node) {
|
|
432
|
-
return node.type === "Function";
|
|
433
|
-
}
|
|
434
|
-
function forEachFontValue(valueText, callback) {
|
|
435
|
-
forEachValue(valueText, extractFontValue, shouldSkipFontNode, callback);
|
|
436
|
-
}
|
|
437
|
-
|
|
438
|
-
// src/utils/css-utils.ts
|
|
439
|
-
function formatSuggestionHooks(hooks) {
|
|
440
|
-
if (hooks.length === 1) {
|
|
441
|
-
return `${hooks[0]}`;
|
|
442
|
-
}
|
|
443
|
-
return "\n" + hooks.map((hook, index) => `${index + 1}. ${hook}`).join("\n");
|
|
444
|
-
}
|
|
445
|
-
|
|
446
|
-
// src/rules/v9/no-hardcoded-values/handlers/colorHandler.ts
|
|
447
|
-
var handleColorDeclaration = (node, context) => {
|
|
448
|
-
const cssProperty = node.property.toLowerCase();
|
|
449
|
-
const valueText = context.sourceCode.getText(node.value);
|
|
450
|
-
const replacements = [];
|
|
451
|
-
forEachColorValue(valueText, (colorValue, positionInfo) => {
|
|
452
|
-
if (colorValue !== "transparent" && isValidColor(colorValue)) {
|
|
453
|
-
const replacement = createColorReplacement(colorValue, cssProperty, context, positionInfo, valueText);
|
|
454
|
-
if (replacement) {
|
|
455
|
-
replacements.push(replacement);
|
|
456
|
-
}
|
|
457
|
-
}
|
|
458
|
-
});
|
|
459
|
-
handleShorthandAutoFix(node, context, valueText, replacements);
|
|
460
|
-
};
|
|
461
|
-
function createColorReplacement(colorValue, cssProperty, context, positionInfo, originalValueText) {
|
|
462
|
-
if (!positionInfo?.start) {
|
|
463
|
-
return null;
|
|
464
|
-
}
|
|
465
|
-
const hexValue = convertToHex(colorValue);
|
|
466
|
-
if (!hexValue) {
|
|
467
|
-
return null;
|
|
468
|
-
}
|
|
469
|
-
const propToMatch = resolvePropertyToMatch(cssProperty);
|
|
470
|
-
const closestHooks = findClosestColorHook(hexValue, context.valueToStylinghook, propToMatch);
|
|
471
|
-
const start = positionInfo.start.offset;
|
|
472
|
-
const end = positionInfo.end.offset;
|
|
473
|
-
const originalValue = originalValueText ? originalValueText.substring(start, end) : colorValue;
|
|
474
|
-
if (closestHooks.length === 1) {
|
|
475
|
-
return {
|
|
476
|
-
start,
|
|
477
|
-
end,
|
|
478
|
-
replacement: `var(${closestHooks[0]}, ${colorValue})`,
|
|
479
|
-
displayValue: closestHooks[0],
|
|
480
|
-
hasHook: true
|
|
481
|
-
};
|
|
482
|
-
} else if (closestHooks.length > 1) {
|
|
483
|
-
return {
|
|
484
|
-
start,
|
|
485
|
-
end,
|
|
486
|
-
replacement: originalValue,
|
|
487
|
-
// Use original value to preserve spacing
|
|
488
|
-
displayValue: formatSuggestionHooks(closestHooks),
|
|
489
|
-
hasHook: true
|
|
490
|
-
};
|
|
491
|
-
} else {
|
|
492
|
-
return {
|
|
493
|
-
start,
|
|
494
|
-
end,
|
|
495
|
-
replacement: originalValue,
|
|
496
|
-
// Use original value to preserve spacing
|
|
497
|
-
displayValue: originalValue,
|
|
498
|
-
hasHook: false
|
|
499
|
-
};
|
|
500
|
-
}
|
|
501
|
-
}
|
|
502
|
-
|
|
503
|
-
// src/utils/styling-hook-utils.ts
|
|
504
|
-
function isValueMatch(valueToMatch, sldsValue) {
|
|
505
|
-
if (!valueToMatch || !sldsValue) {
|
|
506
|
-
return false;
|
|
507
|
-
}
|
|
508
|
-
return valueToMatch.unit == sldsValue.unit && valueToMatch.number === sldsValue.number;
|
|
509
|
-
}
|
|
510
|
-
function getStylingHooksForDensityValue(parsedValue, supportedStylinghooks, cssProperty) {
|
|
511
|
-
if (!parsedValue) return [];
|
|
512
|
-
const alternateValue = toAlternateUnitValue(parsedValue.number, parsedValue.unit);
|
|
513
|
-
const matchedHooks = [];
|
|
514
|
-
for (const [sldsValue, hooks] of Object.entries(supportedStylinghooks)) {
|
|
515
|
-
const parsedSldsValue = parseUnitValue(sldsValue);
|
|
516
|
-
if (isValueMatch(parsedValue, parsedSldsValue) || alternateValue && isValueMatch(alternateValue, parsedSldsValue)) {
|
|
517
|
-
hooks.filter((hook) => hook.properties.includes(cssProperty)).forEach((hook) => matchedHooks.push(hook.name));
|
|
518
|
-
}
|
|
519
|
-
}
|
|
520
|
-
return matchedHooks;
|
|
521
|
-
}
|
|
522
|
-
|
|
523
|
-
// src/rules/v9/no-hardcoded-values/handlers/densityHandler.ts
|
|
524
|
-
var handleDensityDeclaration = (node, context) => {
|
|
525
|
-
const cssProperty = node.property.toLowerCase();
|
|
526
|
-
const valueText = context.sourceCode.getText(node.value);
|
|
527
|
-
const replacements = [];
|
|
528
|
-
forEachDensityValue(valueText, cssProperty, (parsedDimension, positionInfo) => {
|
|
529
|
-
if (parsedDimension) {
|
|
530
|
-
const replacement = createDimensionReplacement(parsedDimension, cssProperty, context, positionInfo);
|
|
531
|
-
if (replacement) {
|
|
532
|
-
replacements.push(replacement);
|
|
533
|
-
}
|
|
534
|
-
}
|
|
535
|
-
});
|
|
536
|
-
handleShorthandAutoFix(node, context, valueText, replacements);
|
|
537
|
-
};
|
|
538
|
-
function createDimensionReplacement(parsedDimension, cssProperty, context, positionInfo) {
|
|
539
|
-
if (!parsedDimension || !positionInfo?.start) {
|
|
540
|
-
return null;
|
|
541
|
-
}
|
|
542
|
-
const rawValue = parsedDimension.unit ? `${parsedDimension.number}${parsedDimension.unit}` : parsedDimension.number.toString();
|
|
543
|
-
const propToMatch = resolvePropertyToMatch(cssProperty);
|
|
544
|
-
const closestHooks = getStylingHooksForDensityValue(parsedDimension, context.valueToStylinghook, propToMatch);
|
|
545
|
-
const start = positionInfo.start.offset;
|
|
546
|
-
const end = positionInfo.end.offset;
|
|
547
|
-
if (closestHooks.length === 1) {
|
|
548
|
-
return {
|
|
549
|
-
start,
|
|
550
|
-
end,
|
|
551
|
-
replacement: `var(${closestHooks[0]}, ${rawValue})`,
|
|
552
|
-
displayValue: closestHooks[0],
|
|
553
|
-
hasHook: true
|
|
554
|
-
};
|
|
555
|
-
} else if (closestHooks.length > 1) {
|
|
556
|
-
return {
|
|
557
|
-
start,
|
|
558
|
-
end,
|
|
559
|
-
replacement: rawValue,
|
|
560
|
-
displayValue: formatSuggestionHooks(closestHooks),
|
|
561
|
-
hasHook: true
|
|
562
|
-
};
|
|
563
|
-
} else {
|
|
564
|
-
return {
|
|
565
|
-
start,
|
|
566
|
-
end,
|
|
567
|
-
replacement: rawValue,
|
|
568
|
-
displayValue: rawValue,
|
|
569
|
-
hasHook: false
|
|
570
|
-
};
|
|
571
|
-
}
|
|
572
|
-
}
|
|
573
|
-
|
|
574
|
-
// src/rules/v9/no-hardcoded-values/handlers/fontHandler.ts
|
|
575
|
-
var handleFontDeclaration = (node, context) => {
|
|
576
|
-
const cssProperty = node.property.toLowerCase();
|
|
577
|
-
const valueText = context.sourceCode.getText(node.value);
|
|
578
|
-
const replacements = [];
|
|
579
|
-
forEachFontValue(valueText, (fontValue, positionInfo) => {
|
|
580
|
-
if (fontValue && isValidFontValue(fontValue, cssProperty)) {
|
|
581
|
-
const replacement = createFontReplacement(fontValue, cssProperty, context, positionInfo);
|
|
582
|
-
if (replacement) {
|
|
583
|
-
replacements.push(replacement);
|
|
584
|
-
}
|
|
585
|
-
}
|
|
586
|
-
});
|
|
587
|
-
handleShorthandAutoFix(node, context, valueText, replacements);
|
|
588
|
-
};
|
|
589
|
-
function isValidFontValue(fontValue, cssProperty) {
|
|
590
|
-
if (cssProperty === "font-size") {
|
|
591
|
-
return !!fontValue.unit;
|
|
592
|
-
} else if (cssProperty === "font-weight") {
|
|
593
|
-
return !fontValue.unit && isKnownFontWeight(fontValue.number);
|
|
594
|
-
} else if (cssProperty === "font") {
|
|
595
|
-
if (!fontValue.unit && isKnownFontWeight(fontValue.number)) {
|
|
596
|
-
return true;
|
|
597
|
-
} else if (fontValue.unit) {
|
|
598
|
-
return true;
|
|
599
|
-
} else {
|
|
600
|
-
return false;
|
|
601
|
-
}
|
|
602
|
-
}
|
|
603
|
-
return false;
|
|
604
|
-
}
|
|
605
|
-
function createFontReplacement(fontValue, cssProperty, context, positionInfo) {
|
|
606
|
-
if (!positionInfo?.start) {
|
|
607
|
-
return null;
|
|
608
|
-
}
|
|
609
|
-
const rawValue = fontValue.unit ? `${fontValue.number}${fontValue.unit}` : fontValue.number.toString();
|
|
610
|
-
const propToMatch = !fontValue.unit && isKnownFontWeight(fontValue.number) ? resolvePropertyToMatch("font-weight") : resolvePropertyToMatch("font-size");
|
|
611
|
-
const closestHooks = getStylingHooksForDensityValue(fontValue, context.valueToStylinghook, propToMatch);
|
|
612
|
-
const start = positionInfo.start.offset;
|
|
613
|
-
const end = positionInfo.end.offset;
|
|
614
|
-
if (closestHooks.length === 1) {
|
|
615
|
-
return {
|
|
616
|
-
start,
|
|
617
|
-
end,
|
|
618
|
-
replacement: `var(${closestHooks[0]}, ${rawValue})`,
|
|
619
|
-
displayValue: closestHooks[0],
|
|
620
|
-
hasHook: true
|
|
621
|
-
};
|
|
622
|
-
} else if (closestHooks.length > 1) {
|
|
623
|
-
return {
|
|
624
|
-
start,
|
|
625
|
-
end,
|
|
626
|
-
replacement: rawValue,
|
|
627
|
-
displayValue: formatSuggestionHooks(closestHooks),
|
|
628
|
-
hasHook: true
|
|
629
|
-
};
|
|
630
|
-
} else {
|
|
631
|
-
return {
|
|
632
|
-
start,
|
|
633
|
-
end,
|
|
634
|
-
replacement: rawValue,
|
|
635
|
-
displayValue: rawValue,
|
|
636
|
-
hasHook: false
|
|
637
|
-
};
|
|
638
|
-
}
|
|
639
|
-
}
|
|
640
|
-
|
|
641
|
-
// src/utils/boxShadowValueParser.ts
|
|
642
|
-
var import_css_tree3 = require("@eslint/css-tree");
|
|
643
|
-
function isColorValue(node) {
|
|
644
|
-
if (!node) return false;
|
|
645
|
-
switch (node.type) {
|
|
646
|
-
case "Hash":
|
|
647
|
-
return true;
|
|
648
|
-
// #hex colors
|
|
649
|
-
case "Identifier":
|
|
650
|
-
return isValidColor(node.name);
|
|
651
|
-
case "Function":
|
|
652
|
-
return isCssColorFunction(node.name.toLowerCase());
|
|
653
|
-
default:
|
|
654
|
-
return false;
|
|
655
|
-
}
|
|
656
|
-
}
|
|
657
|
-
function isLengthValue(node) {
|
|
658
|
-
if (!node) return false;
|
|
659
|
-
switch (node.type) {
|
|
660
|
-
case "Dimension":
|
|
661
|
-
const dimensionStr = `${node.value}${node.unit}`;
|
|
662
|
-
return parseUnitValue(dimensionStr) !== null;
|
|
663
|
-
case "Number":
|
|
664
|
-
return Number(node.value) === 0;
|
|
665
|
-
default:
|
|
666
|
-
return false;
|
|
667
|
-
}
|
|
668
|
-
}
|
|
669
|
-
function isInsetKeyword(node) {
|
|
670
|
-
return node?.type === "Identifier" && node.name.toLowerCase() === "inset";
|
|
671
|
-
}
|
|
672
|
-
function extractShadowParts(valueText) {
|
|
673
|
-
const shadows = [];
|
|
674
|
-
let currentShadow = {
|
|
675
|
-
lengthParts: [],
|
|
676
|
-
colorParts: [],
|
|
677
|
-
inset: false
|
|
678
|
-
};
|
|
679
|
-
try {
|
|
680
|
-
const ast = (0, import_css_tree3.parse)(valueText, { context: "value" });
|
|
681
|
-
(0, import_css_tree3.walk)(ast, {
|
|
682
|
-
enter(node) {
|
|
683
|
-
if (node.type === "Function") {
|
|
684
|
-
return this.skip;
|
|
685
|
-
}
|
|
686
|
-
if (isInsetKeyword(node)) {
|
|
687
|
-
currentShadow.inset = true;
|
|
688
|
-
} else if (isLengthValue(node)) {
|
|
689
|
-
currentShadow.lengthParts.push((0, import_css_tree3.generate)(node));
|
|
690
|
-
} else if (isColorValue(node)) {
|
|
691
|
-
currentShadow.colorParts.push((0, import_css_tree3.generate)(node));
|
|
692
|
-
}
|
|
693
|
-
}
|
|
694
|
-
});
|
|
695
|
-
if (currentShadow.lengthParts.length > 0 || currentShadow.colorParts.length > 0 || currentShadow.inset) {
|
|
696
|
-
shadows.push(currentShadow);
|
|
697
|
-
}
|
|
698
|
-
} catch (error) {
|
|
699
|
-
return [];
|
|
700
|
-
}
|
|
701
|
-
return shadows;
|
|
702
|
-
}
|
|
703
|
-
function parseBoxShadowValue(value) {
|
|
704
|
-
const shadowStrings = value.split(",").map((s) => s.trim());
|
|
705
|
-
const allShadows = [];
|
|
706
|
-
for (const shadowString of shadowStrings) {
|
|
707
|
-
const shadows = extractShadowParts(shadowString);
|
|
708
|
-
const parsedShadows = shadows.map((shadow) => {
|
|
709
|
-
const shadowValue = {};
|
|
710
|
-
const lengthProps = ["offsetX", "offsetY", "blurRadius", "spreadRadius"];
|
|
711
|
-
lengthProps.forEach((prop, index) => {
|
|
712
|
-
if (shadow.lengthParts.length > index) {
|
|
713
|
-
shadowValue[prop] = shadow.lengthParts[index];
|
|
714
|
-
}
|
|
715
|
-
});
|
|
716
|
-
if (shadow.colorParts.length > 0) {
|
|
717
|
-
shadowValue.color = shadow.colorParts[0];
|
|
718
|
-
}
|
|
719
|
-
if (shadow.inset) {
|
|
720
|
-
shadowValue.inset = true;
|
|
721
|
-
}
|
|
722
|
-
return shadowValue;
|
|
723
|
-
});
|
|
724
|
-
allShadows.push(...parsedShadows);
|
|
725
|
-
}
|
|
726
|
-
return allShadows;
|
|
727
|
-
}
|
|
728
|
-
function normalizeLengthValue(value) {
|
|
729
|
-
if (!value) return "0px";
|
|
730
|
-
if (value === "0") return "0px";
|
|
731
|
-
return value;
|
|
732
|
-
}
|
|
733
|
-
function isBoxShadowMatch(parsedCssValue, parsedValueHook) {
|
|
734
|
-
if (parsedCssValue.length !== parsedValueHook.length) {
|
|
735
|
-
return false;
|
|
736
|
-
}
|
|
737
|
-
for (let i = 0; i < parsedCssValue.length; i++) {
|
|
738
|
-
const cssShadow = parsedCssValue[i];
|
|
739
|
-
const hookShadow = parsedValueHook[i];
|
|
740
|
-
if (cssShadow.color !== hookShadow.color || cssShadow.inset !== hookShadow.inset) {
|
|
741
|
-
return false;
|
|
742
|
-
}
|
|
743
|
-
const lengthProps = ["offsetX", "offsetY", "blurRadius", "spreadRadius"];
|
|
744
|
-
for (const prop of lengthProps) {
|
|
745
|
-
if (normalizeLengthValue(cssShadow[prop]) !== normalizeLengthValue(hookShadow[prop])) {
|
|
746
|
-
return false;
|
|
747
|
-
}
|
|
748
|
-
}
|
|
749
|
-
}
|
|
750
|
-
return true;
|
|
751
|
-
}
|
|
752
|
-
|
|
753
|
-
// src/rules/v9/no-hardcoded-values/handlers/boxShadowHandler.ts
|
|
754
|
-
function toBoxShadowValue(cssValue) {
|
|
755
|
-
const parsedCssValue = parseBoxShadowValue(cssValue).filter((shadow) => Object.keys(shadow).length > 0);
|
|
756
|
-
if (parsedCssValue.length === 0) {
|
|
757
|
-
return null;
|
|
758
|
-
}
|
|
759
|
-
return parsedCssValue;
|
|
760
|
-
}
|
|
761
|
-
function shadowValueToHookEntries(supportedStylinghooks) {
|
|
762
|
-
return Object.entries(supportedStylinghooks).filter(([key, value]) => {
|
|
763
|
-
return value.some((hook) => hook.properties.includes("box-shadow"));
|
|
764
|
-
}).map(([key, value]) => {
|
|
765
|
-
return [key, value.map((hook) => hook.name)];
|
|
766
|
-
});
|
|
767
|
-
}
|
|
768
|
-
var handleBoxShadowDeclaration = (node, context) => {
|
|
769
|
-
const cssProperty = node.property.toLowerCase();
|
|
770
|
-
const valueText = context.sourceCode.getText(node.value);
|
|
771
|
-
const shadowHooks = shadowValueToHookEntries(context.valueToStylinghook);
|
|
772
|
-
const parsedCssValue = toBoxShadowValue(valueText);
|
|
773
|
-
if (!parsedCssValue) {
|
|
774
|
-
return;
|
|
775
|
-
}
|
|
776
|
-
for (const [shadow, closestHooks] of shadowHooks) {
|
|
777
|
-
const parsedValueHook = toBoxShadowValue(shadow);
|
|
778
|
-
if (parsedValueHook && isBoxShadowMatch(parsedCssValue, parsedValueHook)) {
|
|
779
|
-
if (closestHooks.length > 0) {
|
|
780
|
-
const positionInfo = {
|
|
781
|
-
start: { offset: 0, line: 1, column: 1 },
|
|
782
|
-
end: { offset: valueText.length, line: 1, column: valueText.length + 1 }
|
|
783
|
-
};
|
|
784
|
-
const replacement = createBoxShadowReplacement(
|
|
785
|
-
valueText,
|
|
786
|
-
closestHooks,
|
|
787
|
-
context,
|
|
788
|
-
positionInfo
|
|
789
|
-
);
|
|
790
|
-
if (replacement) {
|
|
791
|
-
const replacements = [replacement];
|
|
792
|
-
handleShorthandAutoFix(node, context, valueText, replacements);
|
|
793
|
-
}
|
|
794
|
-
}
|
|
795
|
-
return;
|
|
796
|
-
}
|
|
797
|
-
}
|
|
798
|
-
};
|
|
799
|
-
function createBoxShadowReplacement(originalValue, hooks, context, positionInfo) {
|
|
800
|
-
if (!positionInfo?.start) {
|
|
801
|
-
return null;
|
|
802
|
-
}
|
|
803
|
-
const start = positionInfo.start.offset;
|
|
804
|
-
const end = positionInfo.end.offset;
|
|
805
|
-
if (hooks.length === 1) {
|
|
806
|
-
return {
|
|
807
|
-
start,
|
|
808
|
-
end,
|
|
809
|
-
replacement: `var(${hooks[0]}, ${originalValue})`,
|
|
810
|
-
displayValue: hooks[0],
|
|
811
|
-
hasHook: true
|
|
812
|
-
};
|
|
813
|
-
} else {
|
|
814
|
-
return {
|
|
815
|
-
start,
|
|
816
|
-
end,
|
|
817
|
-
replacement: originalValue,
|
|
818
|
-
displayValue: formatSuggestionHooks(hooks),
|
|
819
|
-
hasHook: true
|
|
820
|
-
};
|
|
821
|
-
}
|
|
822
|
-
}
|
|
28
|
+
var import_colorHandler = require("./colorHandler");
|
|
29
|
+
var import_densityHandler = require("./densityHandler");
|
|
30
|
+
var import_fontHandler = require("./fontHandler");
|
|
31
|
+
var import_boxShadowHandler = require("./boxShadowHandler");
|
|
823
32
|
// Annotate the CommonJS export names for ESM import in node:
|
|
824
33
|
0 && (module.exports = {
|
|
825
34
|
handleBoxShadowDeclaration,
|