@salesforce-ux/eslint-plugin-slds 0.5.2 → 1.0.0-internal-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.js +2309 -50
- package/build/index.js.map +4 -4
- package/build/rules/enforce-bem-usage.js +325 -85
- package/build/rules/enforce-bem-usage.js.map +4 -4
- package/build/rules/modal-close-button-issue.js +324 -179
- package/build/rules/modal-close-button-issue.js.map +4 -4
- package/build/rules/no-deprecated-classes-slds2.js +247 -53
- package/build/rules/no-deprecated-classes-slds2.js.map +4 -4
- package/build/rules/v9/enforce-bem-usage.js +236 -0
- package/build/rules/v9/enforce-bem-usage.js.map +7 -0
- package/build/rules/v9/enforce-component-hook-naming-convention.js +262 -0
- package/build/rules/v9/enforce-component-hook-naming-convention.js.map +7 -0
- package/build/rules/v9/enforce-sds-to-slds-hooks.js +260 -0
- package/build/rules/v9/enforce-sds-to-slds-hooks.js.map +7 -0
- package/build/rules/v9/lwc-token-to-slds-hook.js +330 -0
- package/build/rules/v9/lwc-token-to-slds-hook.js.map +7 -0
- package/build/rules/v9/no-deprecated-slds-classes.js +227 -0
- package/build/rules/v9/no-deprecated-slds-classes.js.map +7 -0
- package/build/rules/v9/no-deprecated-tokens-slds1.js +270 -0
- package/build/rules/v9/no-deprecated-tokens-slds1.js.map +7 -0
- package/build/rules/v9/no-hardcoded-values/handlers/boxShadowHandler.js +339 -0
- package/build/rules/v9/no-hardcoded-values/handlers/boxShadowHandler.js.map +7 -0
- package/build/rules/v9/no-hardcoded-values/handlers/colorHandler.js +348 -0
- package/build/rules/v9/no-hardcoded-values/handlers/colorHandler.js.map +7 -0
- package/build/rules/v9/no-hardcoded-values/handlers/densityHandler.js +344 -0
- package/build/rules/v9/no-hardcoded-values/handlers/densityHandler.js.map +7 -0
- package/build/rules/v9/no-hardcoded-values/handlers/fontHandler.js +388 -0
- package/build/rules/v9/no-hardcoded-values/handlers/fontHandler.js.map +7 -0
- package/build/rules/v9/no-hardcoded-values/handlers/index.js +834 -0
- package/build/rules/v9/no-hardcoded-values/handlers/index.js.map +7 -0
- package/build/rules/v9/no-hardcoded-values/no-hardcoded-values-slds1.js +1112 -0
- package/build/rules/v9/no-hardcoded-values/no-hardcoded-values-slds1.js.map +7 -0
- package/build/rules/v9/no-hardcoded-values/no-hardcoded-values-slds2.js +1112 -0
- package/build/rules/v9/no-hardcoded-values/no-hardcoded-values-slds2.js.map +7 -0
- package/build/rules/v9/no-hardcoded-values/noHardcodedValueRule.js +945 -0
- package/build/rules/v9/no-hardcoded-values/noHardcodedValueRule.js.map +7 -0
- package/build/rules/v9/no-slds-class-overrides.js +233 -0
- package/build/rules/v9/no-slds-class-overrides.js.map +7 -0
- package/build/rules/v9/no-slds-namespace-for-custom-hooks.js +250 -0
- package/build/rules/v9/no-slds-namespace-for-custom-hooks.js.map +7 -0
- package/build/rules/v9/no-slds-private-var.js +230 -0
- package/build/rules/v9/no-slds-private-var.js.map +7 -0
- package/build/rules/v9/no-slds-var-without-fallback.js +253 -0
- package/build/rules/v9/no-slds-var-without-fallback.js.map +7 -0
- package/build/rules/v9/no-sldshook-fallback-for-lwctoken.js +253 -0
- package/build/rules/v9/no-sldshook-fallback-for-lwctoken.js.map +7 -0
- package/build/rules/v9/no-unsupported-hooks-slds2.js +243 -0
- package/build/rules/v9/no-unsupported-hooks-slds2.js.map +7 -0
- package/build/rules/v9/reduce-annotations.js +234 -0
- package/build/rules/v9/reduce-annotations.js.map +7 -0
- package/build/src/rules/enforce-bem-usage.d.ts +17 -0
- package/build/{rules → src/rules}/modal-close-button-issue.d.ts +2 -1
- package/build/{rules → src/rules}/no-deprecated-classes-slds2.d.ts +2 -1
- package/build/src/rules/v9/enforce-bem-usage.d.ts +3 -0
- package/build/src/rules/v9/enforce-component-hook-naming-convention.d.ts +3 -0
- package/build/src/rules/v9/enforce-sds-to-slds-hooks.d.ts +3 -0
- package/build/src/rules/v9/lwc-token-to-slds-hook.d.ts +3 -0
- package/build/src/rules/v9/no-deprecated-slds-classes.d.ts +3 -0
- package/build/src/rules/v9/no-deprecated-tokens-slds1.d.ts +3 -0
- package/build/src/rules/v9/no-hardcoded-values/handlers/boxShadowHandler.d.ts +5 -0
- package/build/src/rules/v9/no-hardcoded-values/handlers/colorHandler.d.ts +7 -0
- package/build/src/rules/v9/no-hardcoded-values/handlers/densityHandler.d.ts +7 -0
- package/build/src/rules/v9/no-hardcoded-values/handlers/fontHandler.d.ts +6 -0
- package/build/src/rules/v9/no-hardcoded-values/handlers/index.d.ts +8 -0
- package/build/src/rules/v9/no-hardcoded-values/no-hardcoded-values-slds1.d.ts +3 -0
- package/build/src/rules/v9/no-hardcoded-values/no-hardcoded-values-slds2.d.ts +3 -0
- package/build/src/rules/v9/no-hardcoded-values/noHardcodedValueRule.d.ts +9 -0
- package/build/src/rules/v9/no-slds-class-overrides.d.ts +8 -0
- package/build/src/rules/v9/no-slds-namespace-for-custom-hooks.d.ts +3 -0
- package/build/src/rules/v9/no-slds-private-var.d.ts +3 -0
- package/build/src/rules/v9/no-slds-var-without-fallback.d.ts +3 -0
- package/build/src/rules/v9/no-sldshook-fallback-for-lwctoken.d.ts +3 -0
- package/build/src/rules/v9/no-unsupported-hooks-slds2.d.ts +3 -0
- package/build/src/rules/v9/reduce-annotations.d.ts +3 -0
- package/build/src/types/index.d.ts +26 -0
- package/build/src/utils/boxShadowValueParser.d.ts +17 -0
- package/build/src/utils/color-lib-utils.d.ts +18 -0
- package/build/src/utils/css-functions.d.ts +7 -0
- package/build/src/utils/css-utils.d.ts +7 -0
- package/build/src/utils/hardcoded-shared-utils.d.ts +60 -0
- package/build/src/utils/property-matcher.d.ts +23 -0
- package/build/src/utils/styling-hook-utils.d.ts +7 -0
- package/build/src/utils/value-utils.d.ts +40 -0
- package/build/types/index.js +18 -0
- package/build/types/index.js.map +7 -0
- package/build/types/yaml.d.js +1 -0
- package/build/types/yaml.d.js.map +7 -0
- package/build/utils/boxShadowValueParser.js +197 -0
- package/build/utils/boxShadowValueParser.js.map +7 -0
- package/build/utils/color-lib-utils.js +160 -0
- package/build/utils/color-lib-utils.js.map +7 -0
- package/build/utils/css-functions.js +68 -0
- package/build/utils/css-functions.js.map +7 -0
- package/build/utils/css-utils.js +33 -0
- package/build/utils/css-utils.js.map +7 -0
- package/build/utils/hardcoded-shared-utils.js +300 -0
- package/build/utils/hardcoded-shared-utils.js.map +7 -0
- package/build/utils/node.js +158 -0
- package/build/{rules/utils → utils}/node.js.map +2 -2
- package/build/utils/property-matcher.js +159 -0
- package/build/utils/property-matcher.js.map +7 -0
- package/build/utils/styling-hook-utils.js +80 -0
- package/build/utils/styling-hook-utils.js.map +7 -0
- package/build/utils/value-utils.js +65 -0
- package/build/utils/value-utils.js.map +7 -0
- package/package.json +9 -4
- package/src/config/rule-messages.yml +143 -0
- package/build/rules/enforce-bem-usage.d.ts +0 -28
- package/build/rules/utils/node.js +0 -197
- package/build/rules/utils/rule.d.ts +0 -7
- package/build/rules/utils/rule.js +0 -10
- package/build/rules/utils/rule.js.map +0 -7
- /package/build/{index.d.ts → src/index.d.ts} +0 -0
- /package/build/{rules → src}/utils/node.d.ts +0 -0
package/build/index.js
CHANGED
|
@@ -1,58 +1,2317 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __esm = (fn, res) => function __init() {
|
|
8
|
+
return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
|
|
9
|
+
};
|
|
10
|
+
var __commonJS = (cb, mod) => function __require() {
|
|
11
|
+
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
12
|
+
};
|
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(from))
|
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return to;
|
|
20
|
+
};
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
27
|
+
mod
|
|
28
|
+
));
|
|
29
|
+
|
|
30
|
+
// src/utils/node.ts
|
|
31
|
+
function findAttr(node, key) {
|
|
32
|
+
return node.attributes.find(
|
|
33
|
+
(attr) => attr.key && attr.key.value.toLowerCase() === key.toLowerCase()
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
function isAttributesEmpty(node) {
|
|
37
|
+
return !node.attributes || node.attributes.length <= 0;
|
|
38
|
+
}
|
|
39
|
+
var import_parser, lineBreakPattern, lineEndingPattern;
|
|
40
|
+
var init_node = __esm({
|
|
41
|
+
"src/utils/node.ts"() {
|
|
42
|
+
import_parser = require("@html-eslint/parser");
|
|
43
|
+
lineBreakPattern = /\r\n|[\r\n\u2028\u2029]/u;
|
|
44
|
+
lineEndingPattern = new RegExp(lineBreakPattern.source, "gu");
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
// yaml-file:/Users/ritesh.kumar2/Documents/projects/stylelint-sds/packages/eslint-plugin-slds/src/config/rule-messages.yml
|
|
49
|
+
var require_rule_messages = __commonJS({
|
|
50
|
+
"yaml-file:/Users/ritesh.kumar2/Documents/projects/stylelint-sds/packages/eslint-plugin-slds/src/config/rule-messages.yml"(exports2, module2) {
|
|
51
|
+
module2.exports = {
|
|
52
|
+
"no-slds-class-overrides": {
|
|
53
|
+
"description": "Create new custom CSS classes instead of overriding SLDS selectors",
|
|
54
|
+
"url": "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#no-slds-class-overrides",
|
|
55
|
+
"type": "problem",
|
|
56
|
+
"messages": {
|
|
57
|
+
"sldsClassOverride": "Overriding .{{className}} isn't supported. To differentiate SLDS and custom classes, create a CSS class in your namespace. Examples: myapp-input, myapp-button."
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
"no-deprecated-slds-classes": {
|
|
61
|
+
"description": "Please replace the deprecated classes with a modern equivalent",
|
|
62
|
+
"url": "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#no-deprecated-slds-classes",
|
|
63
|
+
"type": "problem",
|
|
64
|
+
"messages": {
|
|
65
|
+
"deprecatedClass": "The class {{className}} is deprecated and not available in SLDS2. Please update to a supported class."
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
"no-deprecated-tokens-slds1": {
|
|
69
|
+
"description": "Update outdated design tokens to SLDS 2 styling hooks with similar values. For more information, see Styling Hooks on lightningdesignsystem.com.",
|
|
70
|
+
"url": "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#no-deprecated-tokens-slds1",
|
|
71
|
+
"type": "problem",
|
|
72
|
+
"messages": {
|
|
73
|
+
"deprecatedToken": "Consider removing {{oldValue}} or replacing it with {{newValue}}. Set the fallback to {{oldValue}}. For more info, see Styling Hooks on lightningdesignsystem.com.",
|
|
74
|
+
"noReplacement": "Update outdated design tokens to SLDS 2 styling hooks with similar values. For more information, see Styling Hooks on lightningdesignsystem.com."
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
"enforce-sds-to-slds-hooks": {
|
|
78
|
+
"description": "Convert your existing --sds styling hooks to --slds styling hooks. See lightningdesignsystem.com for more info.",
|
|
79
|
+
"url": "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#enforce-sds-to-slds-hooks",
|
|
80
|
+
"type": "problem",
|
|
81
|
+
"messages": {
|
|
82
|
+
"replaceSdsWithSlds": "Replace {{oldValue}} with {{suggestedMatch}} styling hook."
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
"enforce-bem-usage": {
|
|
86
|
+
"description": "Replace BEM double-dash syntax in class names with single underscore syntax",
|
|
87
|
+
"url": "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#enforce-bem-usage",
|
|
88
|
+
"type": "problem",
|
|
89
|
+
"messages": {
|
|
90
|
+
"bemDoubleDash": "{{actual}} has been retired. Update it to the new name {{newValue}}.",
|
|
91
|
+
"fixBemNaming": "Update to correct BEM naming convention"
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
"modal-close-button-issue": {
|
|
95
|
+
"description": "Update component attributes or CSS classes for the modal close button to comply with the modal component blueprint",
|
|
96
|
+
"url": "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#modal-close-button-issue",
|
|
97
|
+
"type": "problem",
|
|
98
|
+
"messages": {
|
|
99
|
+
"modalCloseButtonIssue": "Update component attributes or CSS classes for the modal close button to comply with the modal component blueprint.",
|
|
100
|
+
"removeClass": "Remove the slds-button_icon-inverse class from the modal close button in components that use the SLDS modal blueprint.",
|
|
101
|
+
"changeVariant": "Change the variant attribute value from bare-inverse to bare in <lightning-button-icon> or <lightning-icon>.",
|
|
102
|
+
"removeVariant": "Remove the variant attribute from the <lightning-icon> component inside the <button> element.",
|
|
103
|
+
"ensureButtonClasses": "Add or move slds-button and slds-button_icon to the class attribute of the <button> element or <lightning-button-icon> component.",
|
|
104
|
+
"ensureSizeAttribute": "To size icons properly, set the size attribute \u200Cto large in the <lightning-icon> and <lightning-button-icon> components."
|
|
105
|
+
}
|
|
106
|
+
},
|
|
107
|
+
"no-deprecated-classes-slds2": {
|
|
108
|
+
"description": "Replace classes that aren't available with SLDS 2 classes",
|
|
109
|
+
"url": "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#no-deprecated-classes-slds2",
|
|
110
|
+
"type": "problem",
|
|
111
|
+
"messages": {
|
|
112
|
+
"deprecatedClass": "The class {{className}} isn't available in SLDS 2. Update it to a class supported in SLDS 2. See lightningdesignsystem.com for more information.",
|
|
113
|
+
"updateToModernClass": "Replace deprecated class with modern equivalent",
|
|
114
|
+
"checkDocumentation": "See lightningdesignsystem.com for SLDS 2 class alternatives"
|
|
115
|
+
}
|
|
116
|
+
},
|
|
117
|
+
"lwc-token-to-slds-hook": {
|
|
118
|
+
"description": "Replace the deprecated --lwc tokens with the latest --slds tokens. See lightningdesignsystem.com for more info.",
|
|
119
|
+
"url": "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#lwc-token-to-slds-hook",
|
|
120
|
+
"type": "problem",
|
|
121
|
+
"messages": {
|
|
122
|
+
"errorWithReplacement": "The '{{oldValue}}' design token is deprecated. Replace it with '{{newValue}}'. For more info, see Global Styling Hooks on lightningdesignsystem.com.",
|
|
123
|
+
"errorWithStyleHooks": "The '{{oldValue}}' design token is deprecated. Replace it with the SLDS 2 '{{newValue}}' styling hook and set the fallback to '{{oldValue}}'. For more info, see Global Styling Hooks on lightningdesignsystem.com.",
|
|
124
|
+
"errorWithNoRecommendation": "The '{{oldValue}}' design token is deprecated. For more info, see the New Global Styling Hook Guidance on lightningdesignsystem.com."
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
"no-sldshook-fallback-for-lwctoken": {
|
|
128
|
+
"description": "Avoid using --slds styling hooks as fallback values for --lwc tokens.",
|
|
129
|
+
"url": "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#no-sldshook-fallback-for-lwctoken",
|
|
130
|
+
"type": "problem",
|
|
131
|
+
"messages": {
|
|
132
|
+
"unsupportedFallback": "Remove the {{sldsToken}} styling hook that is used as a fallback value for {{lwcToken}}."
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
"no-unsupported-hooks-slds2": {
|
|
136
|
+
"description": "Identifies styling hooks that aren't present in SLDS 2. They must be replaced with styling hooks that have a similar effect, or they must be removed.",
|
|
137
|
+
"url": "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#no-unsupported-hooks-slds2",
|
|
138
|
+
"type": "problem",
|
|
139
|
+
"messages": {
|
|
140
|
+
"deprecated": "The {{token}} styling hook isn't present in SLDS 2 and there's no equivalent replacement. Remove it or replace it with a styling hook with a similar effect."
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
"no-slds-var-without-fallback": {
|
|
144
|
+
"description": "Add fallback values to SLDS styling hooks. The fallback values are used in Salesforce environments where styling hooks are unavailable.",
|
|
145
|
+
"url": "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#no-slds-var-without-fallback",
|
|
146
|
+
"type": "problem",
|
|
147
|
+
"messages": {
|
|
148
|
+
"varWithoutFallback": "Your code uses the {{cssVar}} styling hook without a fallback value. Styling hooks are unavailable in some Salesforce environments. To render your component correctly in all environments, add this fallback value: var({{cssVar}}, {{recommendation}}). To make this fallback value brand-aware, use a branded design token instead of a static value. See Design Tokens on v1.lightningdesignsystem.com."
|
|
149
|
+
}
|
|
150
|
+
},
|
|
151
|
+
"no-slds-namespace-for-custom-hooks": {
|
|
152
|
+
"description": "To differentiate custom styling hooks from SLDS styling hooks, create custom styling hooks in your namespace.",
|
|
153
|
+
"url": "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#no-slds-namespace-for-custom-hooks",
|
|
154
|
+
"type": "problem",
|
|
155
|
+
"messages": {
|
|
156
|
+
"customHookNamespace": "Using the --slds namespace for {{token}} isn't supported. Create the custom styling hook in your namespace. Example: --myapp-{{tokenWithoutNamespace}}"
|
|
157
|
+
}
|
|
158
|
+
},
|
|
159
|
+
"no-slds-private-var": {
|
|
160
|
+
"description": "Some SLDS styling hooks are private and reserved only for internal Salesforce use. Private SLDS styling hooks have prefixes --_slds- and --slds-s-. For more information, look up private CSS in lightningdesignsystem.com.",
|
|
161
|
+
"url": "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#no-slds-private-var",
|
|
162
|
+
"type": "problem",
|
|
163
|
+
"messages": {
|
|
164
|
+
"privateVar": "This styling hook is reserved for internal Salesforce use. Remove the --_slds- or \u2013slds-s private variable within selector {{prop}}. For more information, look up private CSS in lightningdesignsystem.com."
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
"enforce-component-hook-naming-convention": {
|
|
168
|
+
"description": "Replace component styling hooks that use a deprecated naming convention.",
|
|
169
|
+
"url": "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#enforce-component-hook-naming-convention",
|
|
170
|
+
"type": "problem",
|
|
171
|
+
"messages": {
|
|
172
|
+
"replace": "Replace the deprecated {{oldValue}} component styling hook with {{suggestedMatch}}."
|
|
173
|
+
}
|
|
174
|
+
},
|
|
175
|
+
"no-hardcoded-values-slds1": {
|
|
176
|
+
"description": "Replace static values with SLDS 1 design tokens. For more information, look up design tokens on lightningdesignsystem.com.",
|
|
177
|
+
"url": "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#no-hardcoded-value",
|
|
178
|
+
"type": "suggestion",
|
|
179
|
+
"messages": {
|
|
180
|
+
"hardcodedValue": "Replace the {{oldValue}} static value with an SLDS 1 styling hook: {{newValue}}.",
|
|
181
|
+
"noReplacement": "There's no replacement styling hook for the {{oldValue}} static value. Remove the static value."
|
|
182
|
+
}
|
|
183
|
+
},
|
|
184
|
+
"no-hardcoded-values-slds2": {
|
|
185
|
+
"description": "Replace static values with SLDS 2 styling hooks. For more information, look up design tokens on lightningdesignsystem.com.",
|
|
186
|
+
"url": "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#no-hardcoded-value",
|
|
187
|
+
"type": "suggestion",
|
|
188
|
+
"messages": {
|
|
189
|
+
"hardcodedValue": "Consider replacing the {{oldValue}} static value with an SLDS 2 styling hook that has a similar value: {{newValue}}.",
|
|
190
|
+
"noReplacement": "There's no replacement styling hook for the {{oldValue}} static value. Remove the static value."
|
|
191
|
+
}
|
|
192
|
+
},
|
|
193
|
+
"reduce-annotations": {
|
|
194
|
+
"description": "Remove your annotations and update your code.",
|
|
195
|
+
"url": "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#reduce-annotations",
|
|
196
|
+
"type": "problem",
|
|
197
|
+
"messages": {
|
|
198
|
+
"removeAnnotation": "Remove this annotation and update the code to SLDS best practices. For help, file an issue at https://github.com/salesforce-ux/slds-linter/"
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
};
|
|
202
|
+
}
|
|
203
|
+
});
|
|
204
|
+
|
|
205
|
+
// src/rules/v9/enforce-bem-usage.ts
|
|
206
|
+
var import_next, import_rule_messages, type, description, url, messages, bemMapping, enforce_bem_usage_default;
|
|
207
|
+
var init_enforce_bem_usage = __esm({
|
|
208
|
+
"src/rules/v9/enforce-bem-usage.ts"() {
|
|
209
|
+
import_next = __toESM(require("@salesforce-ux/sds-metadata/next"));
|
|
210
|
+
import_rule_messages = __toESM(require_rule_messages());
|
|
211
|
+
({ type, description, url, messages } = import_rule_messages.default["enforce-bem-usage"]);
|
|
212
|
+
bemMapping = import_next.default.bemNaming;
|
|
213
|
+
enforce_bem_usage_default = {
|
|
214
|
+
meta: {
|
|
215
|
+
type,
|
|
216
|
+
docs: {
|
|
217
|
+
description,
|
|
218
|
+
recommended: true,
|
|
219
|
+
url
|
|
220
|
+
},
|
|
221
|
+
fixable: "code",
|
|
222
|
+
messages
|
|
223
|
+
},
|
|
224
|
+
create(context) {
|
|
225
|
+
return {
|
|
226
|
+
// Check all class selectors for BEM usage
|
|
227
|
+
"SelectorList Selector ClassSelector"(node) {
|
|
228
|
+
const cssClassSelector = context.sourceCode.getText(node);
|
|
229
|
+
const className = cssClassSelector.substring(1);
|
|
230
|
+
if (className && className in bemMapping) {
|
|
231
|
+
const newValue = bemMapping[className];
|
|
232
|
+
if (typeof newValue === "string") {
|
|
233
|
+
context.report({
|
|
234
|
+
node,
|
|
235
|
+
messageId: "bemDoubleDash",
|
|
236
|
+
data: {
|
|
237
|
+
actual: className,
|
|
238
|
+
newValue
|
|
239
|
+
},
|
|
240
|
+
fix(fixer) {
|
|
241
|
+
return fixer.replaceText(node, `.${newValue}`);
|
|
242
|
+
}
|
|
243
|
+
});
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
};
|
|
248
|
+
}
|
|
249
|
+
};
|
|
250
|
+
}
|
|
251
|
+
});
|
|
252
|
+
|
|
253
|
+
// src/rules/enforce-bem-usage.ts
|
|
254
|
+
var require_enforce_bem_usage = __commonJS({
|
|
255
|
+
"src/rules/enforce-bem-usage.ts"(exports2, module2) {
|
|
256
|
+
init_node();
|
|
257
|
+
var import_next14 = __toESM(require("@salesforce-ux/sds-metadata/next"));
|
|
258
|
+
var import_rule_messages16 = __toESM(require_rule_messages());
|
|
259
|
+
init_enforce_bem_usage();
|
|
260
|
+
var bemMapping2 = import_next14.default.bemNaming;
|
|
261
|
+
var deprecatedClasses2 = import_next14.default.deprecatedClasses;
|
|
262
|
+
var ruleConfig14 = import_rule_messages16.default["enforce-bem-usage"];
|
|
263
|
+
var { type: type15, description: description15, url: url15, messages: messages15 } = ruleConfig14;
|
|
264
|
+
var isDeprecatedClass = (className) => {
|
|
265
|
+
return deprecatedClasses2.includes(className) || deprecatedClasses2.includes(bemMapping2[className]);
|
|
266
|
+
};
|
|
267
|
+
var enforceBemUsageHtml = {
|
|
268
|
+
create(context) {
|
|
269
|
+
function check(node) {
|
|
270
|
+
if (isAttributesEmpty(node)) {
|
|
271
|
+
return;
|
|
272
|
+
}
|
|
273
|
+
const classAttr = findAttr(node, "class");
|
|
274
|
+
if (classAttr && classAttr.value) {
|
|
275
|
+
const classNames = classAttr.value.value.split(/\s+/);
|
|
276
|
+
classNames.forEach((className) => {
|
|
277
|
+
if (className && className in bemMapping2 && !isDeprecatedClass(className)) {
|
|
278
|
+
const classNameStart = classAttr.value.value.indexOf(className) + 7;
|
|
279
|
+
const classNameEnd = classNameStart + className.length;
|
|
280
|
+
const startLoc = {
|
|
281
|
+
line: classAttr.loc.start.line,
|
|
282
|
+
column: classAttr.loc.start.column + classNameStart
|
|
283
|
+
};
|
|
284
|
+
const endLoc = {
|
|
285
|
+
line: classAttr.loc.start.line,
|
|
286
|
+
column: classAttr.loc.start.column + classNameEnd
|
|
287
|
+
};
|
|
288
|
+
const newValue = bemMapping2[className];
|
|
289
|
+
context.report({
|
|
290
|
+
node,
|
|
291
|
+
loc: { start: startLoc, end: endLoc },
|
|
292
|
+
messageId: "bemDoubleDash",
|
|
293
|
+
data: {
|
|
294
|
+
actual: className,
|
|
295
|
+
newValue
|
|
296
|
+
},
|
|
297
|
+
fix(fixer) {
|
|
298
|
+
if (newValue) {
|
|
299
|
+
const newClassValue = classAttr.value.value.replace(
|
|
300
|
+
className,
|
|
301
|
+
newValue
|
|
302
|
+
);
|
|
303
|
+
return fixer.replaceTextRange(
|
|
304
|
+
[classAttr.value.range[0], classAttr.value.range[1]],
|
|
305
|
+
`${newClassValue}`
|
|
306
|
+
);
|
|
307
|
+
}
|
|
308
|
+
return null;
|
|
309
|
+
}
|
|
310
|
+
});
|
|
311
|
+
}
|
|
312
|
+
});
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
return {
|
|
316
|
+
Tag: check
|
|
317
|
+
};
|
|
318
|
+
}
|
|
319
|
+
};
|
|
320
|
+
var enforceBemUsage2 = {
|
|
321
|
+
meta: {
|
|
322
|
+
type: type15,
|
|
323
|
+
docs: {
|
|
324
|
+
recommended: true,
|
|
325
|
+
description: description15,
|
|
326
|
+
url: url15
|
|
327
|
+
},
|
|
328
|
+
fixable: "code",
|
|
329
|
+
messages: messages15
|
|
330
|
+
},
|
|
331
|
+
create(context) {
|
|
332
|
+
const filename = context.filename || context.getFilename();
|
|
333
|
+
if (filename.endsWith(".css") || filename.endsWith(".scss")) {
|
|
334
|
+
try {
|
|
335
|
+
return enforce_bem_usage_default.create(context);
|
|
336
|
+
} catch (error) {
|
|
337
|
+
return {};
|
|
338
|
+
}
|
|
339
|
+
} else {
|
|
340
|
+
return enforceBemUsageHtml.create(context);
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
};
|
|
344
|
+
module2.exports = enforceBemUsage2;
|
|
345
|
+
}
|
|
346
|
+
});
|
|
347
|
+
|
|
348
|
+
// src/rules/no-deprecated-classes-slds2.ts
|
|
349
|
+
var require_no_deprecated_classes_slds2 = __commonJS({
|
|
350
|
+
"src/rules/no-deprecated-classes-slds2.ts"(exports2, module2) {
|
|
351
|
+
init_node();
|
|
352
|
+
var import_next14 = __toESM(require("@salesforce-ux/sds-metadata/next"));
|
|
353
|
+
var import_rule_messages16 = __toESM(require_rule_messages());
|
|
354
|
+
var deprecatedClasses2 = import_next14.default.deprecatedClasses;
|
|
355
|
+
var ruleConfig14 = import_rule_messages16.default["no-deprecated-classes-slds2"];
|
|
356
|
+
module2.exports = {
|
|
357
|
+
meta: {
|
|
358
|
+
type: ruleConfig14.type,
|
|
359
|
+
docs: {
|
|
360
|
+
category: "Best Practices",
|
|
361
|
+
recommended: true,
|
|
362
|
+
description: ruleConfig14.description,
|
|
363
|
+
url: ruleConfig14.url
|
|
364
|
+
},
|
|
365
|
+
schema: [],
|
|
366
|
+
messages: ruleConfig14.messages
|
|
367
|
+
},
|
|
368
|
+
create(context) {
|
|
369
|
+
function check(node) {
|
|
370
|
+
if (isAttributesEmpty(node)) {
|
|
371
|
+
return;
|
|
372
|
+
}
|
|
373
|
+
const classAttr = findAttr(node, "class");
|
|
374
|
+
if (classAttr && classAttr.value) {
|
|
375
|
+
const classNames = classAttr.value.value.split(/\s+/);
|
|
376
|
+
classNames.forEach((className) => {
|
|
377
|
+
if (className && deprecatedClasses2.includes(className)) {
|
|
378
|
+
const classNameStart = classAttr.value.value.indexOf(className) + 7;
|
|
379
|
+
const classNameEnd = classNameStart + className.length;
|
|
380
|
+
const startLoc = {
|
|
381
|
+
line: classAttr.loc.start.line,
|
|
382
|
+
column: classAttr.loc.start.column + classNameStart
|
|
383
|
+
};
|
|
384
|
+
const endLoc = {
|
|
385
|
+
line: classAttr.loc.start.line,
|
|
386
|
+
column: classAttr.loc.start.column + classNameEnd
|
|
387
|
+
};
|
|
388
|
+
context.report({
|
|
389
|
+
node,
|
|
390
|
+
loc: { start: startLoc, end: endLoc },
|
|
391
|
+
messageId: "deprecatedClass",
|
|
392
|
+
data: {
|
|
393
|
+
className
|
|
394
|
+
}
|
|
395
|
+
});
|
|
396
|
+
}
|
|
397
|
+
});
|
|
398
|
+
}
|
|
399
|
+
}
|
|
400
|
+
return {
|
|
401
|
+
Tag: check
|
|
402
|
+
};
|
|
403
|
+
}
|
|
404
|
+
};
|
|
405
|
+
}
|
|
406
|
+
});
|
|
407
|
+
|
|
408
|
+
// src/rules/modal-close-button-issue.ts
|
|
409
|
+
var require_modal_close_button_issue = __commonJS({
|
|
410
|
+
"src/rules/modal-close-button-issue.ts"(exports2, module2) {
|
|
411
|
+
init_node();
|
|
412
|
+
var import_rule_messages16 = __toESM(require_rule_messages());
|
|
413
|
+
var ruleConfig14 = import_rule_messages16.default["modal-close-button-issue"];
|
|
414
|
+
module2.exports = {
|
|
415
|
+
meta: {
|
|
416
|
+
type: ruleConfig14.type,
|
|
417
|
+
docs: {
|
|
418
|
+
category: "Best Practices",
|
|
419
|
+
recommended: true,
|
|
420
|
+
description: ruleConfig14.description,
|
|
421
|
+
url: ruleConfig14.url
|
|
422
|
+
},
|
|
423
|
+
fixable: "code",
|
|
424
|
+
schema: [],
|
|
425
|
+
messages: ruleConfig14.messages
|
|
426
|
+
},
|
|
427
|
+
create(context) {
|
|
428
|
+
function check(node) {
|
|
429
|
+
if (isAttributesEmpty(node)) {
|
|
430
|
+
return;
|
|
431
|
+
}
|
|
432
|
+
const tagName = node.name;
|
|
433
|
+
if (tagName === "button") {
|
|
434
|
+
const classAttr = findAttr(node, "class");
|
|
435
|
+
if (classAttr && classAttr.value) {
|
|
436
|
+
const classList = classAttr.value.value.split(/\s+/);
|
|
437
|
+
if (!classList.includes("slds-modal__close")) {
|
|
438
|
+
return;
|
|
439
|
+
}
|
|
440
|
+
if (classList.includes("slds-button_icon-inverse") || classList.includes("slds-button--icon-inverse")) {
|
|
441
|
+
const newClassList = classList.filter((cls) => cls !== "slds-button_icon-inverse" && cls !== "slds-button--icon-inverse").join(" ");
|
|
442
|
+
context.report({
|
|
443
|
+
node,
|
|
444
|
+
loc: classAttr.loc,
|
|
445
|
+
messageId: "removeClass",
|
|
446
|
+
fix(fixer) {
|
|
447
|
+
return fixer.replaceText(
|
|
448
|
+
classAttr,
|
|
449
|
+
// Replace the full attribute
|
|
450
|
+
`class="${newClassList}"`
|
|
451
|
+
// Updated class list
|
|
452
|
+
);
|
|
453
|
+
}
|
|
454
|
+
});
|
|
455
|
+
}
|
|
456
|
+
}
|
|
457
|
+
}
|
|
458
|
+
if (tagName === "lightning-button-icon" || tagName === "lightning:buttonIcon") {
|
|
459
|
+
let validateClassAttr = function(attribute, attrName) {
|
|
460
|
+
if (attribute && attribute.value) {
|
|
461
|
+
const classList = attribute.value.value.split(/\s+/);
|
|
462
|
+
if (!classAttr?.value?.value?.includes("slds-modal__close")) {
|
|
463
|
+
return;
|
|
464
|
+
}
|
|
465
|
+
if (classList.includes("slds-button_icon-inverse") || classList.includes("slds-button--icon-inverse")) {
|
|
466
|
+
const newClassList = classList.filter((cls) => cls !== "slds-button_icon-inverse" && cls !== "slds-button--icon-inverse").join(" ");
|
|
467
|
+
context.report({
|
|
468
|
+
node,
|
|
469
|
+
loc: attribute.loc,
|
|
470
|
+
messageId: "removeClass",
|
|
471
|
+
fix(fixer) {
|
|
472
|
+
return fixer.replaceText(
|
|
473
|
+
attribute,
|
|
474
|
+
// Replace the full attribute
|
|
475
|
+
`${attrName}="${newClassList}"`
|
|
476
|
+
// Correctly modifies the respective attribute
|
|
477
|
+
);
|
|
478
|
+
}
|
|
479
|
+
});
|
|
480
|
+
}
|
|
481
|
+
if (!classList.includes("slds-button") || !classList.includes("slds-button_icon")) {
|
|
482
|
+
let newClassList;
|
|
483
|
+
if (attrName === "icon-class") {
|
|
484
|
+
newClassList = [
|
|
485
|
+
...classList.filter((cls) => cls !== "slds-button_icon-inverse")
|
|
486
|
+
].join(" ");
|
|
487
|
+
} else {
|
|
488
|
+
newClassList = [
|
|
489
|
+
"slds-button",
|
|
490
|
+
"slds-button_icon",
|
|
491
|
+
...classList.filter((cls) => cls !== "slds-button_icon-inverse")
|
|
492
|
+
].join(" ");
|
|
493
|
+
}
|
|
494
|
+
context.report({
|
|
495
|
+
node: attribute,
|
|
496
|
+
loc: attribute.value.loc,
|
|
497
|
+
messageId: "ensureButtonClasses",
|
|
498
|
+
fix(fixer) {
|
|
499
|
+
return fixer.replaceText(attribute.value, `${newClassList}`);
|
|
500
|
+
}
|
|
501
|
+
});
|
|
502
|
+
}
|
|
503
|
+
if (variantAttr && variantAttr.value && variantAttr.value.value === "bare-inverse") {
|
|
504
|
+
context.report({
|
|
505
|
+
node: variantAttr,
|
|
506
|
+
messageId: "changeVariant",
|
|
507
|
+
loc: variantAttr.value.loc,
|
|
508
|
+
fix(fixer) {
|
|
509
|
+
return fixer.replaceText(variantAttr.value, `bare`);
|
|
510
|
+
}
|
|
511
|
+
});
|
|
512
|
+
}
|
|
513
|
+
}
|
|
514
|
+
};
|
|
515
|
+
const variantAttr = findAttr(node, "variant");
|
|
516
|
+
const sizeAttr = findAttr(node, "size");
|
|
517
|
+
const classAttr = findAttr(node, "class");
|
|
518
|
+
const iconClassAttr = findAttr(node, "icon-class");
|
|
519
|
+
validateClassAttr(classAttr, "class");
|
|
520
|
+
validateClassAttr(iconClassAttr, "icon-class");
|
|
521
|
+
}
|
|
522
|
+
if ((tagName === "lightning-icon" || tagName === "lightning:icon") && node.parent?.name === "button") {
|
|
523
|
+
const parentClassAttr = findAttr(node.parent, "class");
|
|
524
|
+
if (parentClassAttr && parentClassAttr.value) {
|
|
525
|
+
const parentClassList = parentClassAttr.value.value.split(/\s+/);
|
|
526
|
+
if (!parentClassList.includes("slds-modal__close")) {
|
|
527
|
+
return;
|
|
528
|
+
}
|
|
529
|
+
const variantAttr = findAttr(node, "variant");
|
|
530
|
+
const sizeAttr = findAttr(node, "size");
|
|
531
|
+
if (variantAttr && variantAttr.value && variantAttr.value.value === "bare-inverse") {
|
|
532
|
+
context.report({
|
|
533
|
+
node: variantAttr,
|
|
534
|
+
messageId: "changeVariant",
|
|
535
|
+
loc: variantAttr.value.loc,
|
|
536
|
+
fix(fixer) {
|
|
537
|
+
return fixer.replaceText(variantAttr.value, `bare`);
|
|
538
|
+
}
|
|
539
|
+
});
|
|
540
|
+
}
|
|
541
|
+
}
|
|
542
|
+
}
|
|
543
|
+
}
|
|
544
|
+
return {
|
|
545
|
+
Tag: check
|
|
546
|
+
};
|
|
547
|
+
}
|
|
548
|
+
};
|
|
549
|
+
}
|
|
550
|
+
});
|
|
551
|
+
|
|
552
|
+
// src/index.ts
|
|
553
|
+
var import_enforce_bem_usage = __toESM(require_enforce_bem_usage());
|
|
554
|
+
var import_no_deprecated_classes_slds2 = __toESM(require_no_deprecated_classes_slds2());
|
|
555
|
+
var import_modal_close_button_issue = __toESM(require_modal_close_button_issue());
|
|
556
|
+
|
|
557
|
+
// src/rules/v9/no-slds-class-overrides.ts
|
|
558
|
+
var import_next2 = __toESM(require("@salesforce-ux/sds-metadata/next"));
|
|
559
|
+
var import_rule_messages2 = __toESM(require_rule_messages());
|
|
560
|
+
var ruleConfig = import_rule_messages2.default["no-slds-class-overrides"];
|
|
561
|
+
var sldsClasses = import_next2.default.sldsPlusClasses;
|
|
562
|
+
var sldsClassesSet = new Set(sldsClasses);
|
|
563
|
+
var no_slds_class_overrides_default = {
|
|
564
|
+
meta: {
|
|
565
|
+
type: ruleConfig.type,
|
|
566
|
+
docs: {
|
|
567
|
+
description: ruleConfig.description,
|
|
568
|
+
recommended: true,
|
|
569
|
+
//useful for plugin recommended configs
|
|
570
|
+
url: ruleConfig.url
|
|
571
|
+
},
|
|
572
|
+
fixable: null,
|
|
573
|
+
hasSuggestions: false,
|
|
574
|
+
schema: [],
|
|
575
|
+
messages: ruleConfig.messages
|
|
576
|
+
},
|
|
577
|
+
create(context) {
|
|
578
|
+
return {
|
|
579
|
+
// For no-slds-class-overrides: Only flags classes at selector end
|
|
580
|
+
"SelectorList Selector"(node) {
|
|
581
|
+
const classSelectorNode = node.children.filter((child) => child.type === "ClassSelector").at(-1);
|
|
582
|
+
if (classSelectorNode) {
|
|
583
|
+
const className = classSelectorNode.name;
|
|
584
|
+
if (className && className.startsWith("slds-") && sldsClassesSet.has(className)) {
|
|
585
|
+
context.report({
|
|
586
|
+
node: classSelectorNode,
|
|
587
|
+
messageId: "sldsClassOverride",
|
|
588
|
+
data: { className }
|
|
589
|
+
});
|
|
590
|
+
}
|
|
591
|
+
}
|
|
592
|
+
}
|
|
593
|
+
};
|
|
594
|
+
}
|
|
595
|
+
};
|
|
596
|
+
|
|
597
|
+
// src/rules/v9/no-deprecated-slds-classes.ts
|
|
598
|
+
var import_next3 = __toESM(require("@salesforce-ux/sds-metadata/next"));
|
|
599
|
+
var import_rule_messages3 = __toESM(require_rule_messages());
|
|
600
|
+
var { type: type2, description: description2, url: url2, messages: messages2 } = import_rule_messages3.default["no-deprecated-slds-classes"];
|
|
601
|
+
var deprecatedClasses = import_next3.default.deprecatedClasses;
|
|
602
|
+
var deprecatedClassesSet = new Set(deprecatedClasses);
|
|
603
|
+
var no_deprecated_slds_classes_default = {
|
|
604
|
+
meta: {
|
|
605
|
+
type: type2,
|
|
606
|
+
docs: {
|
|
607
|
+
description: description2,
|
|
608
|
+
recommended: true,
|
|
609
|
+
url: url2
|
|
15
610
|
},
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
611
|
+
messages: messages2
|
|
612
|
+
},
|
|
613
|
+
create(context) {
|
|
614
|
+
return {
|
|
615
|
+
// For no-deprecated-slds-classes: Check all class selectors for deprecated classes
|
|
616
|
+
"SelectorList Selector ClassSelector"(node) {
|
|
617
|
+
const cssClassSelector = context.sourceCode.getText(node);
|
|
618
|
+
const className = cssClassSelector.substring(1);
|
|
619
|
+
if (className && deprecatedClassesSet.has(className)) {
|
|
620
|
+
context.report({
|
|
621
|
+
node,
|
|
622
|
+
messageId: "deprecatedClass",
|
|
623
|
+
data: { className }
|
|
624
|
+
});
|
|
625
|
+
}
|
|
626
|
+
}
|
|
627
|
+
};
|
|
628
|
+
}
|
|
629
|
+
};
|
|
630
|
+
|
|
631
|
+
// src/rules/v9/no-deprecated-tokens-slds1.ts
|
|
632
|
+
var import_next4 = __toESM(require("@salesforce-ux/sds-metadata/next"));
|
|
633
|
+
var import_rule_messages4 = __toESM(require_rule_messages());
|
|
634
|
+
var ruleConfig2 = import_rule_messages4.default["no-deprecated-tokens-slds1"];
|
|
635
|
+
var { type: type3, description: description3, url: url3, messages: messages3 } = ruleConfig2;
|
|
636
|
+
var tokenMapping = import_next4.default.auraToLwcTokensMapping;
|
|
637
|
+
var no_deprecated_tokens_slds1_default = {
|
|
638
|
+
meta: {
|
|
639
|
+
type: type3,
|
|
640
|
+
docs: {
|
|
641
|
+
description: description3,
|
|
642
|
+
recommended: true,
|
|
643
|
+
url: url3
|
|
644
|
+
},
|
|
645
|
+
fixable: "code",
|
|
646
|
+
messages: messages3
|
|
647
|
+
},
|
|
648
|
+
create(context) {
|
|
649
|
+
function shouldIgnoreDetection6(token) {
|
|
650
|
+
return !(token in tokenMapping) || !tokenMapping[token].startsWith("--lwc-");
|
|
651
|
+
}
|
|
652
|
+
function generateReplacement(tokenName, originalFunctionCall) {
|
|
653
|
+
if (shouldIgnoreDetection6(tokenName)) {
|
|
654
|
+
return null;
|
|
655
|
+
}
|
|
656
|
+
const recommendation = tokenMapping[tokenName];
|
|
657
|
+
return `var(${recommendation}, ${originalFunctionCall})`;
|
|
21
658
|
}
|
|
659
|
+
function handleTokenFunction(node, functionName) {
|
|
660
|
+
const tokenName = context.sourceCode.getText(node);
|
|
661
|
+
if (shouldIgnoreDetection6(tokenName)) {
|
|
662
|
+
return;
|
|
663
|
+
}
|
|
664
|
+
const originalFunctionCall = `${functionName}(${tokenName})`;
|
|
665
|
+
const replacement = generateReplacement(tokenName, originalFunctionCall);
|
|
666
|
+
if (replacement) {
|
|
667
|
+
context.report({
|
|
668
|
+
node,
|
|
669
|
+
messageId: "deprecatedToken",
|
|
670
|
+
data: {
|
|
671
|
+
oldValue: originalFunctionCall,
|
|
672
|
+
newValue: replacement
|
|
673
|
+
},
|
|
674
|
+
fix(fixer) {
|
|
675
|
+
const sourceCode = context.sourceCode.getText();
|
|
676
|
+
const tokenFunctionCall = `${functionName}(${tokenName})`;
|
|
677
|
+
const nodeOffset = node.loc.start.offset;
|
|
678
|
+
const searchStart = Math.max(0, nodeOffset - functionName.length - 1);
|
|
679
|
+
const searchEnd = nodeOffset + tokenName.length + 1;
|
|
680
|
+
const searchArea = sourceCode.substring(searchStart, searchEnd);
|
|
681
|
+
const functionCallIndex = searchArea.indexOf(tokenFunctionCall);
|
|
682
|
+
if (functionCallIndex !== -1) {
|
|
683
|
+
const actualStart = searchStart + functionCallIndex;
|
|
684
|
+
const actualEnd = actualStart + tokenFunctionCall.length;
|
|
685
|
+
return fixer.replaceTextRange([actualStart, actualEnd], replacement);
|
|
686
|
+
}
|
|
687
|
+
return null;
|
|
688
|
+
}
|
|
689
|
+
});
|
|
690
|
+
} else {
|
|
691
|
+
context.report({
|
|
692
|
+
node,
|
|
693
|
+
messageId: "noReplacement"
|
|
694
|
+
});
|
|
695
|
+
}
|
|
696
|
+
}
|
|
697
|
+
return {
|
|
698
|
+
"Function[name='token'] Identifier"(node) {
|
|
699
|
+
handleTokenFunction(node, "token");
|
|
700
|
+
},
|
|
701
|
+
"Function[name='t'] Identifier"(node) {
|
|
702
|
+
handleTokenFunction(node, "t");
|
|
703
|
+
}
|
|
704
|
+
};
|
|
705
|
+
}
|
|
22
706
|
};
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
707
|
+
|
|
708
|
+
// src/rules/v9/lwc-token-to-slds-hook.ts
|
|
709
|
+
var import_next5 = __toESM(require("@salesforce-ux/sds-metadata/next"));
|
|
710
|
+
var import_rule_messages5 = __toESM(require_rule_messages());
|
|
711
|
+
var ruleConfig3 = import_rule_messages5.default["lwc-token-to-slds-hook"];
|
|
712
|
+
var { type: type4, description: description4, url: url4, messages: messages4 } = ruleConfig3;
|
|
713
|
+
var lwcToSlds = import_next5.default.lwcToSlds;
|
|
714
|
+
function shouldIgnoreDetection(lwcToken) {
|
|
715
|
+
return !lwcToken.startsWith("--lwc-") || !(lwcToken in lwcToSlds) || lwcToSlds[lwcToken].continueToUse;
|
|
716
|
+
}
|
|
717
|
+
function categorizeReplacement(recommendation) {
|
|
718
|
+
if (!recommendation || recommendation === "--") {
|
|
719
|
+
return "empty" /* EMPTY */;
|
|
720
|
+
}
|
|
721
|
+
if (Array.isArray(recommendation)) {
|
|
722
|
+
return "array" /* ARRAY */;
|
|
723
|
+
}
|
|
724
|
+
if (typeof recommendation === "string" && recommendation.startsWith("--slds-")) {
|
|
725
|
+
return "slds_token" /* SLDS_TOKEN */;
|
|
726
|
+
}
|
|
727
|
+
return "raw_value" /* RAW_VALUE */;
|
|
728
|
+
}
|
|
729
|
+
function getRecommendation(lwcToken) {
|
|
730
|
+
const oldValue = lwcToken;
|
|
731
|
+
const recommendation = lwcToSlds[oldValue]?.replacement || "";
|
|
732
|
+
const replacementCategory = categorizeReplacement(recommendation);
|
|
733
|
+
const hasRecommendation = oldValue in lwcToSlds && replacementCategory !== "empty" /* EMPTY */;
|
|
734
|
+
return { hasRecommendation, recommendation, replacementCategory };
|
|
735
|
+
}
|
|
736
|
+
function getReportMessage(cssVar, replacementCategory, recommendation) {
|
|
737
|
+
if (!recommendation) {
|
|
738
|
+
return {
|
|
739
|
+
messageId: "errorWithNoRecommendation",
|
|
740
|
+
data: { oldValue: cssVar }
|
|
741
|
+
};
|
|
742
|
+
} else if (replacementCategory === "array" /* ARRAY */) {
|
|
743
|
+
return {
|
|
744
|
+
messageId: "errorWithStyleHooks",
|
|
745
|
+
data: { oldValue: cssVar, newValue: recommendation.join(" or ") }
|
|
746
|
+
};
|
|
747
|
+
} else if (replacementCategory === "slds_token" /* SLDS_TOKEN */) {
|
|
748
|
+
return {
|
|
749
|
+
messageId: "errorWithStyleHooks",
|
|
750
|
+
data: { oldValue: cssVar, newValue: recommendation }
|
|
751
|
+
};
|
|
752
|
+
} else {
|
|
753
|
+
return {
|
|
754
|
+
messageId: "errorWithReplacement",
|
|
755
|
+
data: { oldValue: cssVar, newValue: recommendation }
|
|
756
|
+
};
|
|
757
|
+
}
|
|
758
|
+
}
|
|
759
|
+
var lwc_token_to_slds_hook_default = {
|
|
760
|
+
meta: {
|
|
761
|
+
type: type4,
|
|
762
|
+
docs: {
|
|
763
|
+
description: description4,
|
|
764
|
+
recommended: true,
|
|
765
|
+
url: url4
|
|
766
|
+
},
|
|
767
|
+
fixable: "code",
|
|
768
|
+
messages: messages4
|
|
769
|
+
},
|
|
770
|
+
create(context) {
|
|
771
|
+
function reportAndFix(node, oldValue, suggestedMatch, messageId, data) {
|
|
772
|
+
let fixFunction = null;
|
|
773
|
+
if (suggestedMatch) {
|
|
774
|
+
fixFunction = (fixer) => {
|
|
775
|
+
if (node.type === "Declaration") {
|
|
776
|
+
const sourceCode = context.sourceCode;
|
|
777
|
+
const fullText = sourceCode.getText();
|
|
778
|
+
const nodeOffset = node.loc.start.offset;
|
|
779
|
+
const propertyStart = nodeOffset;
|
|
780
|
+
const propertyEnd = propertyStart + oldValue.length;
|
|
781
|
+
const textAtPosition = fullText.substring(propertyStart, propertyEnd);
|
|
782
|
+
if (textAtPosition === oldValue) {
|
|
783
|
+
return fixer.replaceTextRange([propertyStart, propertyEnd], suggestedMatch);
|
|
784
|
+
}
|
|
785
|
+
} else {
|
|
786
|
+
const sourceCode = context.sourceCode;
|
|
787
|
+
const fullText = sourceCode.getText();
|
|
788
|
+
const varFunctionCall = `var(${oldValue})`;
|
|
789
|
+
const nodeOffset = node.loc.start.offset;
|
|
790
|
+
const searchStart = Math.max(0, nodeOffset - 4);
|
|
791
|
+
const searchEnd = nodeOffset + oldValue.length + 1;
|
|
792
|
+
const searchArea = fullText.substring(searchStart, searchEnd);
|
|
793
|
+
const functionCallIndex = searchArea.indexOf(varFunctionCall);
|
|
794
|
+
if (functionCallIndex !== -1) {
|
|
795
|
+
const actualStart = searchStart + functionCallIndex;
|
|
796
|
+
const actualEnd = actualStart + varFunctionCall.length;
|
|
797
|
+
return fixer.replaceTextRange([actualStart, actualEnd], suggestedMatch);
|
|
798
|
+
}
|
|
799
|
+
}
|
|
800
|
+
return null;
|
|
801
|
+
};
|
|
802
|
+
}
|
|
803
|
+
context.report({
|
|
804
|
+
node,
|
|
805
|
+
messageId,
|
|
806
|
+
data,
|
|
807
|
+
fix: fixFunction
|
|
808
|
+
});
|
|
809
|
+
}
|
|
810
|
+
return {
|
|
811
|
+
// CSS custom property declarations: --lwc-* properties
|
|
812
|
+
"Declaration[property=/^--lwc-/]"(node) {
|
|
813
|
+
const property = node.property;
|
|
814
|
+
if (shouldIgnoreDetection(property)) {
|
|
815
|
+
return;
|
|
816
|
+
}
|
|
817
|
+
const { hasRecommendation, recommendation, replacementCategory } = getRecommendation(property);
|
|
818
|
+
const { messageId, data } = getReportMessage(property, replacementCategory, recommendation);
|
|
819
|
+
const suggestedMatch = hasRecommendation && replacementCategory === "slds_token" /* SLDS_TOKEN */ ? recommendation : null;
|
|
820
|
+
reportAndFix(node, property, suggestedMatch, messageId, data);
|
|
821
|
+
},
|
|
822
|
+
// LWC tokens inside var() functions: var(--lwc-*)
|
|
823
|
+
"Function[name='var'] Identifier[name=/^--lwc-/]"(node) {
|
|
824
|
+
const tokenName = node.name;
|
|
825
|
+
if (shouldIgnoreDetection(tokenName)) {
|
|
826
|
+
return;
|
|
827
|
+
}
|
|
828
|
+
const { hasRecommendation, recommendation, replacementCategory } = getRecommendation(tokenName);
|
|
829
|
+
const { messageId, data } = getReportMessage(tokenName, replacementCategory, recommendation);
|
|
830
|
+
let suggestedMatch = null;
|
|
831
|
+
if (hasRecommendation) {
|
|
832
|
+
if (replacementCategory === "slds_token" /* SLDS_TOKEN */) {
|
|
833
|
+
const originalVarCall = `var(${tokenName})`;
|
|
834
|
+
suggestedMatch = `var(${recommendation}, ${originalVarCall})`;
|
|
835
|
+
} else if (replacementCategory === "raw_value" /* RAW_VALUE */) {
|
|
836
|
+
suggestedMatch = recommendation;
|
|
837
|
+
}
|
|
838
|
+
}
|
|
839
|
+
reportAndFix(node, tokenName, suggestedMatch, messageId, data);
|
|
840
|
+
}
|
|
841
|
+
};
|
|
842
|
+
}
|
|
843
|
+
};
|
|
844
|
+
|
|
845
|
+
// src/rules/v9/enforce-sds-to-slds-hooks.ts
|
|
846
|
+
var import_next6 = __toESM(require("@salesforce-ux/sds-metadata/next"));
|
|
847
|
+
var import_rule_messages6 = __toESM(require_rule_messages());
|
|
848
|
+
var ruleConfig4 = import_rule_messages6.default["enforce-sds-to-slds-hooks"];
|
|
849
|
+
var { type: type5, description: description5, url: url5, messages: messages5 } = ruleConfig4;
|
|
850
|
+
var sldsPlusStylingHooks = import_next6.default.sldsPlusStylingHooks;
|
|
851
|
+
var allSldsHooks = [...sldsPlusStylingHooks.global, ...sldsPlusStylingHooks.component];
|
|
852
|
+
var toSldsToken = (sdsToken) => sdsToken.replace("--sds-", "--slds-");
|
|
853
|
+
function shouldIgnoreDetection2(sdsToken) {
|
|
854
|
+
return !sdsToken.startsWith("--sds-") || !allSldsHooks.includes(toSldsToken(sdsToken));
|
|
855
|
+
}
|
|
856
|
+
var enforce_sds_to_slds_hooks_default = {
|
|
857
|
+
meta: {
|
|
858
|
+
type: type5,
|
|
859
|
+
docs: {
|
|
860
|
+
description: description5,
|
|
861
|
+
recommended: true,
|
|
862
|
+
url: url5
|
|
863
|
+
},
|
|
864
|
+
fixable: "code",
|
|
865
|
+
messages: messages5
|
|
866
|
+
},
|
|
867
|
+
create(context) {
|
|
868
|
+
function reportAndFix(node, oldValue, suggestedMatch) {
|
|
869
|
+
context.report({
|
|
870
|
+
node,
|
|
871
|
+
messageId: "replaceSdsWithSlds",
|
|
872
|
+
data: { oldValue, suggestedMatch },
|
|
873
|
+
fix(fixer) {
|
|
874
|
+
if (node.type === "Declaration") {
|
|
875
|
+
const sourceCode = context.sourceCode;
|
|
876
|
+
const fullText = sourceCode.getText();
|
|
877
|
+
const nodeOffset = node.loc.start.offset;
|
|
878
|
+
const propertyStart = nodeOffset;
|
|
879
|
+
const propertyEnd = propertyStart + oldValue.length;
|
|
880
|
+
const textAtPosition = fullText.substring(propertyStart, propertyEnd);
|
|
881
|
+
if (textAtPosition === oldValue) {
|
|
882
|
+
return fixer.replaceTextRange([propertyStart, propertyEnd], suggestedMatch);
|
|
883
|
+
}
|
|
884
|
+
}
|
|
885
|
+
return fixer.replaceText(node, suggestedMatch);
|
|
886
|
+
}
|
|
887
|
+
});
|
|
888
|
+
}
|
|
889
|
+
return {
|
|
890
|
+
// CSS custom property declarations: --sds-* properties
|
|
891
|
+
"Declaration[property=/^--sds-/]"(node) {
|
|
892
|
+
const property = node.property;
|
|
893
|
+
if (shouldIgnoreDetection2(property)) {
|
|
894
|
+
return;
|
|
895
|
+
}
|
|
896
|
+
const suggestedMatch = toSldsToken(property);
|
|
897
|
+
reportAndFix(node, property, suggestedMatch);
|
|
898
|
+
},
|
|
899
|
+
// SDS tokens inside var() functions: var(--sds-*)
|
|
900
|
+
"Function[name='var'] Identifier[name=/^--sds-/]"(node) {
|
|
901
|
+
const tokenName = node.name;
|
|
902
|
+
if (shouldIgnoreDetection2(tokenName)) {
|
|
903
|
+
return;
|
|
904
|
+
}
|
|
905
|
+
const suggestedMatch = toSldsToken(tokenName);
|
|
906
|
+
reportAndFix(node, tokenName, suggestedMatch);
|
|
907
|
+
}
|
|
908
|
+
};
|
|
909
|
+
}
|
|
910
|
+
};
|
|
911
|
+
|
|
912
|
+
// src/rules/v9/no-sldshook-fallback-for-lwctoken.ts
|
|
913
|
+
var import_next7 = __toESM(require("@salesforce-ux/sds-metadata/next"));
|
|
914
|
+
var import_rule_messages7 = __toESM(require_rule_messages());
|
|
915
|
+
var ruleConfig5 = import_rule_messages7.default["no-sldshook-fallback-for-lwctoken"];
|
|
916
|
+
var { type: type6, description: description6, url: url6, messages: messages6 } = ruleConfig5;
|
|
917
|
+
var sldsPlusStylingHooks2 = import_next7.default.sldsPlusStylingHooks;
|
|
918
|
+
var allSldsHooks2 = [...sldsPlusStylingHooks2.global, ...sldsPlusStylingHooks2.component];
|
|
919
|
+
var allSldsHooksSet = new Set(allSldsHooks2);
|
|
920
|
+
function hasUnsupportedFallback(lwcToken, sldsToken) {
|
|
921
|
+
const normalizedSldsToken = sldsToken.replace("--sds-", "--slds-");
|
|
922
|
+
return lwcToken.startsWith("--lwc-") && normalizedSldsToken.startsWith("--slds-") && allSldsHooksSet.has(normalizedSldsToken);
|
|
923
|
+
}
|
|
924
|
+
var no_sldshook_fallback_for_lwctoken_default = {
|
|
925
|
+
meta: {
|
|
926
|
+
type: type6,
|
|
927
|
+
docs: {
|
|
928
|
+
description: description6,
|
|
929
|
+
recommended: true,
|
|
930
|
+
url: url6
|
|
931
|
+
},
|
|
932
|
+
messages: messages6
|
|
933
|
+
},
|
|
934
|
+
create(context) {
|
|
935
|
+
return {
|
|
936
|
+
// Handle LWC tokens inside var() functions: var(--lwc-*, ...)
|
|
937
|
+
"Function[name='var'] Identifier[name=/^--lwc-/]"(node) {
|
|
938
|
+
const lwcToken = node.name;
|
|
939
|
+
const varFunctionNode = context.sourceCode.getAncestors(node).at(-1);
|
|
940
|
+
if (!varFunctionNode) return;
|
|
941
|
+
const varFunctionChildren = varFunctionNode.children;
|
|
942
|
+
if (!varFunctionChildren) return;
|
|
943
|
+
let foundComma = false;
|
|
944
|
+
let fallbackRawNode = null;
|
|
945
|
+
for (const child of varFunctionChildren) {
|
|
946
|
+
if (child.type === "Operator" && child.value === ",") {
|
|
947
|
+
foundComma = true;
|
|
948
|
+
continue;
|
|
949
|
+
}
|
|
950
|
+
if (foundComma && child.type === "Raw") {
|
|
951
|
+
fallbackRawNode = child;
|
|
952
|
+
break;
|
|
953
|
+
}
|
|
954
|
+
}
|
|
955
|
+
if (!fallbackRawNode) return;
|
|
956
|
+
const fallbackValue = fallbackRawNode.value.trim();
|
|
957
|
+
const varMatch = fallbackValue.match(/var\(([^,)]+)/);
|
|
958
|
+
if (!varMatch) return;
|
|
959
|
+
const sldsToken = varMatch[1];
|
|
960
|
+
if (hasUnsupportedFallback(lwcToken, sldsToken)) {
|
|
961
|
+
context.report({
|
|
962
|
+
node,
|
|
963
|
+
messageId: "unsupportedFallback",
|
|
964
|
+
data: { lwcToken, sldsToken }
|
|
965
|
+
});
|
|
966
|
+
}
|
|
967
|
+
}
|
|
968
|
+
};
|
|
969
|
+
}
|
|
970
|
+
};
|
|
971
|
+
|
|
972
|
+
// src/rules/v9/no-unsupported-hooks-slds2.ts
|
|
973
|
+
var import_next8 = __toESM(require("@salesforce-ux/sds-metadata/next"));
|
|
974
|
+
var import_rule_messages8 = __toESM(require_rule_messages());
|
|
975
|
+
var ruleConfig6 = import_rule_messages8.default["no-unsupported-hooks-slds2"];
|
|
976
|
+
var { type: type7, description: description7, url: url7, messages: messages7 } = ruleConfig6;
|
|
977
|
+
var deprecatedHooks = new Set(import_next8.default.deprecatedStylingHooks);
|
|
978
|
+
function shouldIgnoreDetection3(sldsHook) {
|
|
979
|
+
return !deprecatedHooks.has(sldsHook);
|
|
980
|
+
}
|
|
981
|
+
var no_unsupported_hooks_slds2_default = {
|
|
982
|
+
meta: {
|
|
983
|
+
type: type7,
|
|
984
|
+
docs: {
|
|
985
|
+
description: description7,
|
|
986
|
+
recommended: true,
|
|
987
|
+
url: url7
|
|
988
|
+
},
|
|
989
|
+
messages: messages7
|
|
990
|
+
},
|
|
991
|
+
create(context) {
|
|
992
|
+
function reportDeprecatedHook(node, token) {
|
|
993
|
+
context.report({
|
|
994
|
+
node,
|
|
995
|
+
messageId: "deprecated",
|
|
996
|
+
data: { token }
|
|
997
|
+
});
|
|
998
|
+
}
|
|
999
|
+
return {
|
|
1000
|
+
// Handle CSS custom property declarations (left-side usage): --slds-* properties
|
|
1001
|
+
// Example: .THIS { --slds-g-link-color: #f73650; }
|
|
1002
|
+
"Declaration[property=/^--s(lds|ds)-/]"(node) {
|
|
1003
|
+
const property = node.property;
|
|
1004
|
+
if (shouldIgnoreDetection3(property)) {
|
|
1005
|
+
return;
|
|
1006
|
+
}
|
|
1007
|
+
reportDeprecatedHook(node, property);
|
|
1008
|
+
},
|
|
1009
|
+
// Handle SLDS/SDS hooks inside var() functions (right-side usage): var(--slds-*)
|
|
1010
|
+
// Example: .THIS .demo { border-top: 1px solid var(--slds-g-color-border-brand-1); }
|
|
1011
|
+
"Function[name='var'] Identifier[name=/^--s(lds|ds)-/]"(node) {
|
|
1012
|
+
const tokenName = node.name;
|
|
1013
|
+
if (shouldIgnoreDetection3(tokenName)) {
|
|
1014
|
+
return;
|
|
1015
|
+
}
|
|
1016
|
+
reportDeprecatedHook(node, tokenName);
|
|
1017
|
+
}
|
|
1018
|
+
};
|
|
1019
|
+
}
|
|
1020
|
+
};
|
|
1021
|
+
|
|
1022
|
+
// src/rules/v9/no-slds-var-without-fallback.ts
|
|
1023
|
+
var import_next9 = __toESM(require("@salesforce-ux/sds-metadata/next"));
|
|
1024
|
+
var import_rule_messages9 = __toESM(require_rule_messages());
|
|
1025
|
+
var ruleConfig7 = import_rule_messages9.default["no-slds-var-without-fallback"];
|
|
1026
|
+
var { type: type8, description: description8, url: url8, messages: messages8 } = ruleConfig7;
|
|
1027
|
+
var sldsVariables = import_next9.default.slds1ExcludedVars || {};
|
|
1028
|
+
function isSldsCssVariable(cssVar) {
|
|
1029
|
+
return cssVar.startsWith("--slds-");
|
|
1030
|
+
}
|
|
1031
|
+
function hasFallbackValue(varFunctionNode) {
|
|
1032
|
+
if (!varFunctionNode || !varFunctionNode.children) return false;
|
|
1033
|
+
return varFunctionNode.children.some(
|
|
1034
|
+
(child) => child.type === "Operator" && child.value === ","
|
|
1035
|
+
);
|
|
1036
|
+
}
|
|
1037
|
+
var no_slds_var_without_fallback_default = {
|
|
1038
|
+
meta: {
|
|
1039
|
+
type: type8,
|
|
1040
|
+
docs: {
|
|
1041
|
+
description: description8,
|
|
1042
|
+
recommended: true,
|
|
1043
|
+
url: url8
|
|
1044
|
+
},
|
|
1045
|
+
fixable: "code",
|
|
1046
|
+
messages: messages8
|
|
1047
|
+
},
|
|
1048
|
+
create(context) {
|
|
1049
|
+
function reportAndFix(node, cssVar, fallbackValue) {
|
|
1050
|
+
context.report({
|
|
1051
|
+
node,
|
|
1052
|
+
messageId: "varWithoutFallback",
|
|
1053
|
+
data: { cssVar, recommendation: fallbackValue },
|
|
1054
|
+
fix(fixer) {
|
|
1055
|
+
const varFunctionNode = context.sourceCode.getAncestors(node).at(-1);
|
|
1056
|
+
const varWithFallback = `var(${cssVar}, ${fallbackValue})`;
|
|
1057
|
+
return fixer.replaceText(varFunctionNode, varWithFallback);
|
|
1058
|
+
}
|
|
1059
|
+
});
|
|
1060
|
+
}
|
|
1061
|
+
return {
|
|
1062
|
+
// Handle SLDS tokens inside var() functions: var(--slds-*)
|
|
1063
|
+
"Function[name='var'] Identifier[name=/^--slds-/]"(node) {
|
|
1064
|
+
const cssVar = node.name;
|
|
1065
|
+
if (!isSldsCssVariable(cssVar)) {
|
|
1066
|
+
return;
|
|
1067
|
+
}
|
|
1068
|
+
const varFunctionNode = context.sourceCode.getAncestors(node).at(-1);
|
|
1069
|
+
if (hasFallbackValue(varFunctionNode)) {
|
|
1070
|
+
return;
|
|
1071
|
+
}
|
|
1072
|
+
const fallbackValue = sldsVariables[cssVar];
|
|
1073
|
+
if (!fallbackValue) {
|
|
1074
|
+
return;
|
|
1075
|
+
}
|
|
1076
|
+
reportAndFix(node, cssVar, fallbackValue);
|
|
1077
|
+
}
|
|
1078
|
+
};
|
|
1079
|
+
}
|
|
1080
|
+
};
|
|
1081
|
+
|
|
1082
|
+
// src/rules/v9/no-slds-namespace-for-custom-hooks.ts
|
|
1083
|
+
var import_next10 = __toESM(require("@salesforce-ux/sds-metadata/next"));
|
|
1084
|
+
var import_rule_messages10 = __toESM(require_rule_messages());
|
|
1085
|
+
var ruleConfig8 = import_rule_messages10.default["no-slds-namespace-for-custom-hooks"];
|
|
1086
|
+
var { type: type9, description: description9, url: url9, messages: messages9 } = ruleConfig8;
|
|
1087
|
+
var sldsPlusStylingHooks3 = import_next10.default.sldsPlusStylingHooks;
|
|
1088
|
+
var allSldsHooks3 = [...sldsPlusStylingHooks3.global, ...sldsPlusStylingHooks3.component];
|
|
1089
|
+
var toSldsToken2 = (sdsToken) => sdsToken.replace("--sds-", "--slds-");
|
|
1090
|
+
function shouldIgnoreDetection4(sdsToken) {
|
|
1091
|
+
if (sdsToken.startsWith("--sds-") || sdsToken.startsWith("--slds-")) {
|
|
1092
|
+
return allSldsHooks3.includes(toSldsToken2(sdsToken));
|
|
1093
|
+
}
|
|
1094
|
+
return true;
|
|
1095
|
+
}
|
|
1096
|
+
var no_slds_namespace_for_custom_hooks_default = {
|
|
1097
|
+
meta: {
|
|
1098
|
+
type: type9,
|
|
1099
|
+
docs: {
|
|
1100
|
+
description: description9,
|
|
1101
|
+
recommended: true,
|
|
1102
|
+
url: url9
|
|
1103
|
+
},
|
|
1104
|
+
messages: messages9
|
|
1105
|
+
},
|
|
1106
|
+
create(context) {
|
|
1107
|
+
function reportViolation(node, token) {
|
|
1108
|
+
const tokenWithoutNamespace = token.replace("--slds-", "").replace("--sds-", "");
|
|
1109
|
+
context.report({
|
|
1110
|
+
node,
|
|
1111
|
+
messageId: "customHookNamespace",
|
|
1112
|
+
data: {
|
|
1113
|
+
token,
|
|
1114
|
+
tokenWithoutNamespace
|
|
1115
|
+
}
|
|
1116
|
+
});
|
|
1117
|
+
}
|
|
1118
|
+
return {
|
|
1119
|
+
// CSS custom property declarations: --slds-* and --sds-* properties
|
|
1120
|
+
"Declaration[property=/^--s(lds|ds)-/]"(node) {
|
|
1121
|
+
const property = node.property;
|
|
1122
|
+
if (shouldIgnoreDetection4(property)) {
|
|
1123
|
+
return;
|
|
1124
|
+
}
|
|
1125
|
+
reportViolation(node, property);
|
|
1126
|
+
},
|
|
1127
|
+
// SLDS/SDS tokens inside var() functions: var(--slds-*) or var(--sds-*)
|
|
1128
|
+
"Function[name='var'] Identifier[name=/^--s(lds|ds)-/]"(node) {
|
|
1129
|
+
const tokenName = node.name;
|
|
1130
|
+
if (shouldIgnoreDetection4(tokenName)) {
|
|
1131
|
+
return;
|
|
1132
|
+
}
|
|
1133
|
+
reportViolation(node, tokenName);
|
|
1134
|
+
}
|
|
1135
|
+
};
|
|
1136
|
+
}
|
|
1137
|
+
};
|
|
1138
|
+
|
|
1139
|
+
// src/rules/v9/enforce-component-hook-naming-convention.ts
|
|
1140
|
+
var import_next11 = __toESM(require("@salesforce-ux/sds-metadata/next"));
|
|
1141
|
+
var import_rule_messages11 = __toESM(require_rule_messages());
|
|
1142
|
+
var ruleConfig9 = import_rule_messages11.default["enforce-component-hook-naming-convention"];
|
|
1143
|
+
var { type: type10, description: description10, url: url10, messages: messages10 } = ruleConfig9;
|
|
1144
|
+
var slds1DeprecatedComponentHooks = import_next11.default.slds1DeprecatedComponentHooks;
|
|
1145
|
+
function shouldIgnoreDetection5(hook) {
|
|
1146
|
+
return !hook.startsWith("--slds-c-") || !(hook in slds1DeprecatedComponentHooks);
|
|
1147
|
+
}
|
|
1148
|
+
var enforce_component_hook_naming_convention_default = {
|
|
1149
|
+
meta: {
|
|
1150
|
+
type: type10,
|
|
1151
|
+
docs: {
|
|
1152
|
+
description: description10,
|
|
1153
|
+
recommended: true,
|
|
1154
|
+
url: url10
|
|
1155
|
+
},
|
|
1156
|
+
fixable: "code",
|
|
1157
|
+
messages: messages10
|
|
1158
|
+
},
|
|
1159
|
+
create(context) {
|
|
1160
|
+
return {
|
|
1161
|
+
/*
|
|
1162
|
+
* Handle component hooks in CSS declarations
|
|
1163
|
+
* Limitation: For example:
|
|
1164
|
+
* .testClass{
|
|
1165
|
+
* --slds-c-accordion-section-color-background: var(--slds-c-accordion-section-color-border);
|
|
1166
|
+
* }
|
|
1167
|
+
* var in value is not detected, because eslint treats above statement as custom property assignment
|
|
1168
|
+
* and value treated as raw string, not parsed into function nodes
|
|
1169
|
+
*/
|
|
1170
|
+
"Declaration[property=/^--slds-c-/], Function[name='var'] Identifier[name=/^--slds-c-/]"(node) {
|
|
1171
|
+
let hookName;
|
|
1172
|
+
let reportNode = node;
|
|
1173
|
+
if (node.type === "Declaration") {
|
|
1174
|
+
hookName = node.property;
|
|
1175
|
+
} else if (node.type === "Identifier") {
|
|
1176
|
+
hookName = node.name;
|
|
1177
|
+
} else {
|
|
1178
|
+
return;
|
|
1179
|
+
}
|
|
1180
|
+
if (shouldIgnoreDetection5(hookName)) {
|
|
1181
|
+
return;
|
|
1182
|
+
}
|
|
1183
|
+
const suggestedMatch = slds1DeprecatedComponentHooks[hookName];
|
|
1184
|
+
context.report({
|
|
1185
|
+
node: reportNode,
|
|
1186
|
+
messageId: "replace",
|
|
1187
|
+
data: {
|
|
1188
|
+
oldValue: hookName,
|
|
1189
|
+
suggestedMatch
|
|
1190
|
+
},
|
|
1191
|
+
fix(fixer) {
|
|
1192
|
+
if (node.type === "Declaration") {
|
|
1193
|
+
const originalText = context.sourceCode.getText(node);
|
|
1194
|
+
const colonIndex = originalText.indexOf(":");
|
|
1195
|
+
const valuePartWithColon = originalText.substring(colonIndex);
|
|
1196
|
+
return fixer.replaceText(node, `${suggestedMatch}${valuePartWithColon}`);
|
|
1197
|
+
} else if (node.type === "Identifier") {
|
|
1198
|
+
return fixer.replaceText(node, suggestedMatch);
|
|
1199
|
+
}
|
|
1200
|
+
return null;
|
|
1201
|
+
}
|
|
1202
|
+
});
|
|
1203
|
+
}
|
|
1204
|
+
};
|
|
1205
|
+
}
|
|
1206
|
+
};
|
|
1207
|
+
|
|
1208
|
+
// src/rules/v9/reduce-annotations.ts
|
|
1209
|
+
var import_rule_messages12 = __toESM(require_rule_messages());
|
|
1210
|
+
var ruleConfig10 = import_rule_messages12.default["reduce-annotations"];
|
|
1211
|
+
var { type: type11, description: description11, url: url11, messages: messages11 } = ruleConfig10;
|
|
1212
|
+
var SLDS_ANNOTATIONS = [
|
|
1213
|
+
"@sldsValidatorIgnoreNextLine",
|
|
1214
|
+
"@sldsValidatorAllow",
|
|
1215
|
+
"@sldsValidatorIgnore"
|
|
1216
|
+
];
|
|
1217
|
+
var reduce_annotations_default = {
|
|
1218
|
+
meta: {
|
|
1219
|
+
type: type11,
|
|
1220
|
+
docs: {
|
|
1221
|
+
description: description11,
|
|
1222
|
+
recommended: true,
|
|
1223
|
+
url: url11
|
|
1224
|
+
},
|
|
1225
|
+
messages: messages11
|
|
1226
|
+
},
|
|
1227
|
+
create(context) {
|
|
1228
|
+
return {
|
|
1229
|
+
StyleSheet(node) {
|
|
1230
|
+
const sourceCode = context.sourceCode;
|
|
1231
|
+
let comments = sourceCode?.comments || [];
|
|
1232
|
+
comments.forEach((comment) => {
|
|
1233
|
+
const commentContent = comment.value.trim();
|
|
1234
|
+
const matchingAnnotation = SLDS_ANNOTATIONS.find(
|
|
1235
|
+
(annotation) => commentContent.startsWith(annotation)
|
|
1236
|
+
);
|
|
1237
|
+
if (matchingAnnotation) {
|
|
1238
|
+
context.report({
|
|
1239
|
+
node: comment,
|
|
1240
|
+
messageId: "removeAnnotation"
|
|
1241
|
+
});
|
|
1242
|
+
}
|
|
1243
|
+
});
|
|
1244
|
+
}
|
|
1245
|
+
};
|
|
1246
|
+
}
|
|
1247
|
+
};
|
|
1248
|
+
|
|
1249
|
+
// src/rules/v9/no-slds-private-var.ts
|
|
1250
|
+
var import_rule_messages13 = __toESM(require_rule_messages());
|
|
1251
|
+
var ruleConfig11 = import_rule_messages13.default["no-slds-private-var"];
|
|
1252
|
+
var { type: type12, description: description12, url: url12, messages: messages12 } = ruleConfig11;
|
|
1253
|
+
var no_slds_private_var_default = {
|
|
1254
|
+
meta: {
|
|
1255
|
+
type: type12,
|
|
1256
|
+
docs: {
|
|
1257
|
+
description: description12,
|
|
1258
|
+
recommended: true,
|
|
1259
|
+
url: url12
|
|
1260
|
+
},
|
|
1261
|
+
fixable: "code",
|
|
1262
|
+
messages: messages12
|
|
1263
|
+
},
|
|
1264
|
+
create(context) {
|
|
1265
|
+
return {
|
|
1266
|
+
// Handle CSS custom properties (declarations starting with --)
|
|
1267
|
+
"Declaration"(node) {
|
|
1268
|
+
if (node.property && typeof node.property === "string" && node.property.startsWith("--_slds-")) {
|
|
1269
|
+
context.report({
|
|
1270
|
+
node,
|
|
1271
|
+
messageId: "privateVar",
|
|
1272
|
+
data: { prop: node.property },
|
|
1273
|
+
fix(fixer) {
|
|
1274
|
+
const newProperty = node.property.replace("--_slds-", "--slds-");
|
|
1275
|
+
const sourceCode = context.sourceCode.getText(node);
|
|
1276
|
+
const fixedCode = sourceCode.replace(node.property, newProperty);
|
|
1277
|
+
return fixer.replaceText(node, fixedCode);
|
|
1278
|
+
}
|
|
1279
|
+
});
|
|
1280
|
+
}
|
|
1281
|
+
}
|
|
1282
|
+
};
|
|
1283
|
+
}
|
|
1284
|
+
};
|
|
1285
|
+
|
|
1286
|
+
// src/rules/v9/no-hardcoded-values/no-hardcoded-values-slds1.ts
|
|
1287
|
+
var import_next12 = __toESM(require("@salesforce-ux/sds-metadata/next"));
|
|
1288
|
+
var import_rule_messages14 = __toESM(require_rule_messages());
|
|
1289
|
+
|
|
1290
|
+
// src/utils/color-lib-utils.ts
|
|
1291
|
+
var import_chroma_js = __toESM(require("chroma-js"));
|
|
1292
|
+
var import_css_tree = require("@eslint/css-tree");
|
|
1293
|
+
|
|
1294
|
+
// src/utils/css-functions.ts
|
|
1295
|
+
var CSS_FUNCTIONS = [
|
|
1296
|
+
"attr",
|
|
1297
|
+
"calc",
|
|
1298
|
+
"color-mix",
|
|
1299
|
+
"conic-gradient",
|
|
1300
|
+
"counter",
|
|
1301
|
+
"cubic-bezier",
|
|
1302
|
+
"linear-gradient",
|
|
1303
|
+
"max",
|
|
1304
|
+
"min",
|
|
1305
|
+
"radial-gradient",
|
|
1306
|
+
"repeating-conic-gradient",
|
|
1307
|
+
"repeating-linear-gradient",
|
|
1308
|
+
"repeating-radial-gradient",
|
|
1309
|
+
"var"
|
|
1310
|
+
];
|
|
1311
|
+
var CSS_MATH_FUNCTIONS = ["calc", "min", "max"];
|
|
1312
|
+
var RGB_COLOR_FUNCTIONS = ["rgb", "rgba", "hsl", "hsla"];
|
|
1313
|
+
var cssFunctionsRegex = new RegExp(`(?:${CSS_FUNCTIONS.join("|")})`);
|
|
1314
|
+
var cssFunctionsExactRegex = new RegExp(`^(?:${CSS_FUNCTIONS.join("|")})$`);
|
|
1315
|
+
var cssMathFunctionsRegex = new RegExp(`^(?:${CSS_MATH_FUNCTIONS.join("|")})$`);
|
|
1316
|
+
function isCssFunction(value) {
|
|
1317
|
+
return cssFunctionsExactRegex.test(value);
|
|
1318
|
+
}
|
|
1319
|
+
function isCssColorFunction(value) {
|
|
1320
|
+
return RGB_COLOR_FUNCTIONS.includes(value);
|
|
1321
|
+
}
|
|
1322
|
+
|
|
1323
|
+
// src/utils/color-lib-utils.ts
|
|
1324
|
+
var LAB_THRESHOLD = 25;
|
|
1325
|
+
var isHexCode = (color) => {
|
|
1326
|
+
const hexPattern = /^#(?:[0-9a-fA-F]{3}){1,2}$/;
|
|
1327
|
+
return hexPattern.test(color);
|
|
1328
|
+
};
|
|
1329
|
+
var convertToHex = (color) => {
|
|
1330
|
+
try {
|
|
1331
|
+
return (0, import_chroma_js.default)(color).hex();
|
|
1332
|
+
} catch (e) {
|
|
1333
|
+
return null;
|
|
1334
|
+
}
|
|
1335
|
+
};
|
|
1336
|
+
var findClosestColorHook = (color, supportedColors, cssProperty) => {
|
|
1337
|
+
const returnStylingHooks = [];
|
|
1338
|
+
const closestHooksWithSameProperty = [];
|
|
1339
|
+
const closestHooksWithoutSameProperty = [];
|
|
1340
|
+
const closestHooksWithAllProperty = [];
|
|
1341
|
+
const labColor = (0, import_chroma_js.default)(color).lab();
|
|
1342
|
+
Object.entries(supportedColors).forEach(([sldsValue, data]) => {
|
|
1343
|
+
if (sldsValue && isHexCode(sldsValue)) {
|
|
1344
|
+
const hooks = data;
|
|
1345
|
+
hooks.forEach((hook) => {
|
|
1346
|
+
const labSupportedColor = (0, import_chroma_js.default)(sldsValue).lab();
|
|
1347
|
+
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");
|
|
1348
|
+
if (hook.properties.includes(cssProperty)) {
|
|
1349
|
+
if (distance <= LAB_THRESHOLD) {
|
|
1350
|
+
closestHooksWithSameProperty.push({ name: hook.name, distance });
|
|
1351
|
+
}
|
|
1352
|
+
} else if (hook.properties.includes("*")) {
|
|
1353
|
+
if (distance <= LAB_THRESHOLD) {
|
|
1354
|
+
closestHooksWithAllProperty.push({ name: hook.name, distance });
|
|
1355
|
+
}
|
|
1356
|
+
} else {
|
|
1357
|
+
if (distance <= LAB_THRESHOLD) {
|
|
1358
|
+
closestHooksWithoutSameProperty.push({ name: hook.name, distance });
|
|
1359
|
+
}
|
|
1360
|
+
}
|
|
1361
|
+
});
|
|
1362
|
+
}
|
|
1363
|
+
});
|
|
1364
|
+
const closesthookGroups = [
|
|
1365
|
+
{ hooks: closestHooksWithSameProperty, distance: 0 },
|
|
1366
|
+
{ hooks: closestHooksWithAllProperty, distance: 0 },
|
|
1367
|
+
{ hooks: closestHooksWithSameProperty, distance: Infinity },
|
|
1368
|
+
// For hooks with distance > 0
|
|
1369
|
+
{ hooks: closestHooksWithAllProperty, distance: Infinity },
|
|
1370
|
+
{ hooks: closestHooksWithoutSameProperty, distance: Infinity }
|
|
1371
|
+
];
|
|
1372
|
+
for (const group of closesthookGroups) {
|
|
1373
|
+
const filteredHooks = group.hooks.filter(
|
|
1374
|
+
(h) => group.distance === 0 ? h.distance === 0 : h.distance > 0
|
|
1375
|
+
);
|
|
1376
|
+
if (returnStylingHooks.length < 1 && filteredHooks.length > 0) {
|
|
1377
|
+
filteredHooks.sort((a, b) => a.distance - b.distance);
|
|
1378
|
+
returnStylingHooks.push(...filteredHooks.slice(0, 5).map((h) => h.name));
|
|
1379
|
+
}
|
|
1380
|
+
}
|
|
1381
|
+
return Array.from(new Set(returnStylingHooks));
|
|
1382
|
+
};
|
|
1383
|
+
var isValidColor = (val) => import_chroma_js.default.valid(val);
|
|
1384
|
+
var extractColorValue = (node) => {
|
|
1385
|
+
let colorValue = null;
|
|
1386
|
+
switch (node.type) {
|
|
1387
|
+
case "Hash":
|
|
1388
|
+
colorValue = `#${node.value}`;
|
|
1389
|
+
break;
|
|
1390
|
+
case "Identifier":
|
|
1391
|
+
colorValue = node.name;
|
|
1392
|
+
break;
|
|
1393
|
+
case "Function":
|
|
1394
|
+
if (isCssColorFunction(node.name)) {
|
|
1395
|
+
colorValue = (0, import_css_tree.generate)(node);
|
|
1396
|
+
}
|
|
1397
|
+
break;
|
|
1398
|
+
}
|
|
1399
|
+
return colorValue && isValidColor(colorValue) ? colorValue : null;
|
|
1400
|
+
};
|
|
1401
|
+
|
|
1402
|
+
// src/utils/property-matcher.ts
|
|
1403
|
+
var DIRECTION_VALUES = "(?:top|right|bottom|left|inline|block|inline-start|inline-end|start|end|block-start|block-end)";
|
|
1404
|
+
var CORNER_VALUES = "(?:top-left|top-right|bottom-right|bottom-left|start-start|start-end|end-start|end-end)";
|
|
1405
|
+
var INSET_VALUES = "(?:inline|block|inline-start|inline-end|block-start|block-end)";
|
|
1406
|
+
var BORDER_COLOR_REGEX = new RegExp(`^border(?:-${DIRECTION_VALUES})?-color$`);
|
|
1407
|
+
var BORDER_WIDTH_REGEX = new RegExp(`^border(?:-${DIRECTION_VALUES})?-width$`);
|
|
1408
|
+
var MARGIN_REGEX = new RegExp(`^margin(?:-${DIRECTION_VALUES})?$`);
|
|
1409
|
+
var PADDING_REGEX = new RegExp(`^padding(?:-${DIRECTION_VALUES})?$`);
|
|
1410
|
+
var BORDER_RADIUS_REGEX = new RegExp(`^border(?:-${CORNER_VALUES})?-radius$`);
|
|
1411
|
+
var INSET_REGEX = new RegExp(`^inset(?:-${INSET_VALUES})?$`);
|
|
1412
|
+
function isBorderColorProperty(cssProperty) {
|
|
1413
|
+
return BORDER_COLOR_REGEX.test(cssProperty);
|
|
1414
|
+
}
|
|
1415
|
+
function isBorderWidthProperty(cssProperty) {
|
|
1416
|
+
return BORDER_WIDTH_REGEX.test(cssProperty);
|
|
1417
|
+
}
|
|
1418
|
+
function isMarginProperty(cssProperty) {
|
|
1419
|
+
return MARGIN_REGEX.test(cssProperty);
|
|
1420
|
+
}
|
|
1421
|
+
function isPaddingProperty(cssProperty) {
|
|
1422
|
+
return PADDING_REGEX.test(cssProperty);
|
|
1423
|
+
}
|
|
1424
|
+
function isBorderRadius(cssProperty) {
|
|
1425
|
+
return BORDER_RADIUS_REGEX.test(cssProperty);
|
|
1426
|
+
}
|
|
1427
|
+
function isDimensionProperty(cssProperty) {
|
|
1428
|
+
return ["width", "height", "min-width", "max-width", "min-height", "max-height"].includes(cssProperty);
|
|
1429
|
+
}
|
|
1430
|
+
function isInsetProperty(cssProperty) {
|
|
1431
|
+
return INSET_REGEX.test(cssProperty);
|
|
1432
|
+
}
|
|
1433
|
+
var fontProperties = [
|
|
1434
|
+
"font",
|
|
1435
|
+
"font-size",
|
|
1436
|
+
"font-weight"
|
|
1437
|
+
];
|
|
1438
|
+
var colorProperties = [
|
|
1439
|
+
"color",
|
|
1440
|
+
"fill",
|
|
1441
|
+
"background",
|
|
1442
|
+
"background-color",
|
|
1443
|
+
"stroke",
|
|
1444
|
+
"border",
|
|
1445
|
+
"border*",
|
|
1446
|
+
"border*-color",
|
|
1447
|
+
"outline",
|
|
1448
|
+
"outline-color"
|
|
1449
|
+
];
|
|
1450
|
+
var densificationProperties = [
|
|
1451
|
+
"border*",
|
|
1452
|
+
"margin*",
|
|
1453
|
+
"padding*",
|
|
1454
|
+
"width",
|
|
1455
|
+
"height",
|
|
1456
|
+
"min-width",
|
|
1457
|
+
"max-width",
|
|
1458
|
+
"min-height",
|
|
1459
|
+
"max-height",
|
|
1460
|
+
"inset",
|
|
1461
|
+
"top",
|
|
1462
|
+
"right",
|
|
1463
|
+
"left",
|
|
1464
|
+
"bottom",
|
|
1465
|
+
"outline",
|
|
1466
|
+
"outline-width",
|
|
1467
|
+
"line-height"
|
|
1468
|
+
];
|
|
1469
|
+
function toSelector(properties) {
|
|
1470
|
+
const selectorParts = properties.map((prop) => {
|
|
1471
|
+
if (prop.includes("*")) {
|
|
1472
|
+
const regexPattern = prop.replace(/\*/g, ".*");
|
|
1473
|
+
return `Declaration[property=/${regexPattern}$/]`;
|
|
1474
|
+
} else {
|
|
1475
|
+
return `Declaration[property='${prop}']`;
|
|
1476
|
+
}
|
|
1477
|
+
});
|
|
1478
|
+
return selectorParts.join(", ");
|
|
1479
|
+
}
|
|
1480
|
+
function resolvePropertyToMatch(cssProperty) {
|
|
1481
|
+
const propertyToMatch = cssProperty.toLowerCase();
|
|
1482
|
+
if (propertyToMatch === "outline" || propertyToMatch === "outline-width" || isBorderWidthProperty(propertyToMatch)) {
|
|
1483
|
+
return "border-width";
|
|
1484
|
+
} else if (isMarginProperty(propertyToMatch)) {
|
|
1485
|
+
return "margin";
|
|
1486
|
+
} else if (isPaddingProperty(propertyToMatch)) {
|
|
1487
|
+
return "padding";
|
|
1488
|
+
} else if (isBorderRadius(propertyToMatch)) {
|
|
1489
|
+
return "border-radius";
|
|
1490
|
+
} else if (isDimensionProperty(propertyToMatch)) {
|
|
1491
|
+
return "width";
|
|
1492
|
+
} else if (isInsetProperty(propertyToMatch)) {
|
|
1493
|
+
return "top";
|
|
1494
|
+
} else if (cssProperty === "background" || cssProperty === "background-color") {
|
|
1495
|
+
return "background-color";
|
|
1496
|
+
} else if (cssProperty === "outline" || cssProperty === "outline-color" || isBorderColorProperty(cssProperty)) {
|
|
1497
|
+
return "border-color";
|
|
1498
|
+
}
|
|
1499
|
+
return propertyToMatch;
|
|
1500
|
+
}
|
|
1501
|
+
|
|
1502
|
+
// src/utils/hardcoded-shared-utils.ts
|
|
1503
|
+
var import_css_tree2 = require("@eslint/css-tree");
|
|
1504
|
+
var FONT_WEIGHTS = [
|
|
1505
|
+
"normal",
|
|
1506
|
+
"bold",
|
|
1507
|
+
"bolder",
|
|
1508
|
+
"lighter",
|
|
1509
|
+
"100",
|
|
1510
|
+
"200",
|
|
1511
|
+
"300",
|
|
1512
|
+
"400",
|
|
1513
|
+
"500",
|
|
1514
|
+
"600",
|
|
1515
|
+
"700",
|
|
1516
|
+
"800",
|
|
1517
|
+
"900"
|
|
1518
|
+
];
|
|
1519
|
+
function isKnownFontWeight(value) {
|
|
1520
|
+
const stringValue = value.toString();
|
|
1521
|
+
return FONT_WEIGHTS.includes(stringValue.toLowerCase());
|
|
1522
|
+
}
|
|
1523
|
+
function handleShorthandAutoFix(declarationNode, context, valueText, replacements) {
|
|
1524
|
+
const sortedReplacements = replacements.sort((a, b) => a.start - b.start);
|
|
1525
|
+
const hasAnyHooks = sortedReplacements.some((r) => r.hasHook);
|
|
1526
|
+
const canAutoFix = hasAnyHooks;
|
|
1527
|
+
sortedReplacements.forEach(({ start, end, replacement, displayValue, hasHook }) => {
|
|
1528
|
+
const originalValue = valueText.substring(start, end);
|
|
1529
|
+
const valueStartColumn = declarationNode.value.loc.start.column;
|
|
1530
|
+
const valueColumn = valueStartColumn + start;
|
|
1531
|
+
const { loc: { start: locStart, end: locEnd } } = declarationNode.value;
|
|
1532
|
+
const reportNode = {
|
|
1533
|
+
...declarationNode.value,
|
|
1534
|
+
loc: {
|
|
1535
|
+
...declarationNode.value.loc,
|
|
1536
|
+
start: {
|
|
1537
|
+
...locStart,
|
|
1538
|
+
column: valueColumn
|
|
50
1539
|
},
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
sourceType: "module"
|
|
1540
|
+
end: {
|
|
1541
|
+
...locEnd,
|
|
1542
|
+
column: valueColumn + originalValue.length
|
|
55
1543
|
}
|
|
1544
|
+
}
|
|
1545
|
+
};
|
|
1546
|
+
if (hasHook) {
|
|
1547
|
+
const fix = canAutoFix ? (fixer) => {
|
|
1548
|
+
let newValue = valueText;
|
|
1549
|
+
for (let i = sortedReplacements.length - 1; i >= 0; i--) {
|
|
1550
|
+
const { start: rStart, end: rEnd, replacement: rReplacement } = sortedReplacements[i];
|
|
1551
|
+
newValue = newValue.substring(0, rStart) + rReplacement + newValue.substring(rEnd);
|
|
1552
|
+
}
|
|
1553
|
+
return fixer.replaceText(declarationNode.value, newValue);
|
|
1554
|
+
} : void 0;
|
|
1555
|
+
context.context.report({
|
|
1556
|
+
node: reportNode,
|
|
1557
|
+
messageId: "hardcodedValue",
|
|
1558
|
+
data: {
|
|
1559
|
+
oldValue: originalValue,
|
|
1560
|
+
newValue: displayValue
|
|
1561
|
+
},
|
|
1562
|
+
fix
|
|
1563
|
+
});
|
|
1564
|
+
} else {
|
|
1565
|
+
context.context.report({
|
|
1566
|
+
node: reportNode,
|
|
1567
|
+
messageId: "noReplacement",
|
|
1568
|
+
data: {
|
|
1569
|
+
oldValue: originalValue
|
|
1570
|
+
}
|
|
1571
|
+
});
|
|
1572
|
+
}
|
|
1573
|
+
});
|
|
1574
|
+
}
|
|
1575
|
+
function forEachValue(valueText, extractValue, shouldSkipNode, callback) {
|
|
1576
|
+
if (!valueText || typeof valueText !== "string") {
|
|
1577
|
+
return;
|
|
1578
|
+
}
|
|
1579
|
+
try {
|
|
1580
|
+
const ast = (0, import_css_tree2.parse)(valueText, { context: "value", positions: true });
|
|
1581
|
+
(0, import_css_tree2.walk)(ast, {
|
|
1582
|
+
enter(node) {
|
|
1583
|
+
if (shouldSkipNode(node)) {
|
|
1584
|
+
return this.skip;
|
|
1585
|
+
}
|
|
1586
|
+
const value = extractValue(node);
|
|
1587
|
+
if (value !== null) {
|
|
1588
|
+
const positionInfo = {
|
|
1589
|
+
start: node.loc?.start,
|
|
1590
|
+
end: node.loc?.end
|
|
1591
|
+
};
|
|
1592
|
+
callback(value, positionInfo);
|
|
1593
|
+
}
|
|
1594
|
+
}
|
|
1595
|
+
});
|
|
1596
|
+
} catch (error) {
|
|
1597
|
+
return;
|
|
1598
|
+
}
|
|
1599
|
+
}
|
|
1600
|
+
function shouldSkipColorNode(node) {
|
|
1601
|
+
return node.type === "Function" && isCssFunction(node.name);
|
|
1602
|
+
}
|
|
1603
|
+
function shouldSkipDimensionNode(node) {
|
|
1604
|
+
return node.type === "Function";
|
|
1605
|
+
}
|
|
1606
|
+
function extractDimensionValue(valueNode, cssProperty) {
|
|
1607
|
+
if (!valueNode) return null;
|
|
1608
|
+
switch (valueNode.type) {
|
|
1609
|
+
case "Dimension":
|
|
1610
|
+
const numValue = Number(valueNode.value);
|
|
1611
|
+
if (numValue === 0) return null;
|
|
1612
|
+
const unit = valueNode.unit.toLowerCase();
|
|
1613
|
+
if (unit !== "px" && unit !== "rem" && unit !== "%") return null;
|
|
1614
|
+
return {
|
|
1615
|
+
number: numValue,
|
|
1616
|
+
unit
|
|
1617
|
+
};
|
|
1618
|
+
case "Number":
|
|
1619
|
+
const numberValue = Number(valueNode.value);
|
|
1620
|
+
if (numberValue === 0) return null;
|
|
1621
|
+
return {
|
|
1622
|
+
number: numberValue,
|
|
1623
|
+
unit: null
|
|
1624
|
+
};
|
|
1625
|
+
case "Percentage":
|
|
1626
|
+
const percentValue = Number(valueNode.value);
|
|
1627
|
+
if (percentValue === 0) return null;
|
|
1628
|
+
return {
|
|
1629
|
+
number: percentValue,
|
|
1630
|
+
unit: "%"
|
|
1631
|
+
};
|
|
1632
|
+
case "Value":
|
|
1633
|
+
return valueNode.children?.[0] ? extractDimensionValue(valueNode.children[0], cssProperty) : null;
|
|
1634
|
+
}
|
|
1635
|
+
return null;
|
|
1636
|
+
}
|
|
1637
|
+
function forEachColorValue(valueText, callback) {
|
|
1638
|
+
forEachValue(valueText, extractColorValue, shouldSkipColorNode, callback);
|
|
1639
|
+
}
|
|
1640
|
+
function forEachDensityValue(valueText, cssProperty, callback) {
|
|
1641
|
+
forEachValue(
|
|
1642
|
+
valueText,
|
|
1643
|
+
(node) => extractDimensionValue(node, cssProperty),
|
|
1644
|
+
shouldSkipDimensionNode,
|
|
1645
|
+
callback
|
|
1646
|
+
);
|
|
1647
|
+
}
|
|
1648
|
+
function extractFontValue(node) {
|
|
1649
|
+
if (!node) return null;
|
|
1650
|
+
switch (node.type) {
|
|
1651
|
+
case "Dimension":
|
|
1652
|
+
const numValue = Number(node.value);
|
|
1653
|
+
if (numValue <= 0) return null;
|
|
1654
|
+
const unit = node.unit.toLowerCase();
|
|
1655
|
+
if (unit !== "px" && unit !== "rem" && unit !== "%") return null;
|
|
1656
|
+
return {
|
|
1657
|
+
number: numValue,
|
|
1658
|
+
unit
|
|
1659
|
+
};
|
|
1660
|
+
case "Number":
|
|
1661
|
+
const numberValue = Number(node.value);
|
|
1662
|
+
if (numberValue <= 0) {
|
|
1663
|
+
return null;
|
|
1664
|
+
}
|
|
1665
|
+
if (!isKnownFontWeight(numberValue)) {
|
|
1666
|
+
return null;
|
|
1667
|
+
}
|
|
1668
|
+
return {
|
|
1669
|
+
number: numberValue,
|
|
1670
|
+
unit: null
|
|
1671
|
+
};
|
|
1672
|
+
case "Identifier":
|
|
1673
|
+
const namedValue = node.name.toLowerCase();
|
|
1674
|
+
if (!isKnownFontWeight(namedValue)) {
|
|
1675
|
+
return null;
|
|
1676
|
+
}
|
|
1677
|
+
if (namedValue === "normal") {
|
|
1678
|
+
return { number: 400, unit: null };
|
|
1679
|
+
}
|
|
1680
|
+
return { number: namedValue, unit: null };
|
|
1681
|
+
case "Percentage":
|
|
1682
|
+
const percentValue = Number(node.value);
|
|
1683
|
+
if (percentValue === 0) return null;
|
|
1684
|
+
return {
|
|
1685
|
+
number: percentValue,
|
|
1686
|
+
unit: "%"
|
|
1687
|
+
};
|
|
1688
|
+
case "Value":
|
|
1689
|
+
return node.children?.[0] ? extractFontValue(node.children[0]) : null;
|
|
1690
|
+
}
|
|
1691
|
+
return null;
|
|
1692
|
+
}
|
|
1693
|
+
function shouldSkipFontNode(node) {
|
|
1694
|
+
return node.type === "Function";
|
|
1695
|
+
}
|
|
1696
|
+
function forEachFontValue(valueText, callback) {
|
|
1697
|
+
forEachValue(valueText, extractFontValue, shouldSkipFontNode, callback);
|
|
1698
|
+
}
|
|
1699
|
+
|
|
1700
|
+
// src/rules/v9/no-hardcoded-values/handlers/colorHandler.ts
|
|
1701
|
+
var handleColorDeclaration = (node, context) => {
|
|
1702
|
+
const cssProperty = node.property.toLowerCase();
|
|
1703
|
+
const valueText = context.sourceCode.getText(node.value);
|
|
1704
|
+
const replacements = [];
|
|
1705
|
+
forEachColorValue(valueText, (colorValue, positionInfo) => {
|
|
1706
|
+
if (colorValue !== "transparent" && isValidColor(colorValue)) {
|
|
1707
|
+
const replacement = createColorReplacement(colorValue, cssProperty, context, positionInfo, valueText);
|
|
1708
|
+
if (replacement) {
|
|
1709
|
+
replacements.push(replacement);
|
|
1710
|
+
}
|
|
1711
|
+
}
|
|
1712
|
+
});
|
|
1713
|
+
handleShorthandAutoFix(node, context, valueText, replacements);
|
|
1714
|
+
};
|
|
1715
|
+
function createColorReplacement(colorValue, cssProperty, context, positionInfo, originalValueText) {
|
|
1716
|
+
if (!positionInfo?.start) {
|
|
1717
|
+
return null;
|
|
1718
|
+
}
|
|
1719
|
+
const hexValue = convertToHex(colorValue);
|
|
1720
|
+
if (!hexValue) {
|
|
1721
|
+
return null;
|
|
1722
|
+
}
|
|
1723
|
+
const propToMatch = resolvePropertyToMatch(cssProperty);
|
|
1724
|
+
const closestHooks = findClosestColorHook(hexValue, context.valueToStylinghook, propToMatch);
|
|
1725
|
+
const start = positionInfo.start.offset;
|
|
1726
|
+
const end = positionInfo.end.offset;
|
|
1727
|
+
const originalValue = originalValueText ? originalValueText.substring(start, end) : colorValue;
|
|
1728
|
+
if (closestHooks.length === 1) {
|
|
1729
|
+
return {
|
|
1730
|
+
start,
|
|
1731
|
+
end,
|
|
1732
|
+
replacement: `var(${closestHooks[0]}, ${colorValue})`,
|
|
1733
|
+
displayValue: closestHooks[0],
|
|
1734
|
+
hasHook: true
|
|
1735
|
+
};
|
|
1736
|
+
} else if (closestHooks.length > 1) {
|
|
1737
|
+
return {
|
|
1738
|
+
start,
|
|
1739
|
+
end,
|
|
1740
|
+
replacement: originalValue,
|
|
1741
|
+
// Use original value to preserve spacing
|
|
1742
|
+
displayValue: closestHooks.join(", "),
|
|
1743
|
+
hasHook: true
|
|
1744
|
+
// ← THE FIX: Multiple hooks still means "has hooks"
|
|
1745
|
+
};
|
|
1746
|
+
} else {
|
|
1747
|
+
return {
|
|
1748
|
+
start,
|
|
1749
|
+
end,
|
|
1750
|
+
replacement: originalValue,
|
|
1751
|
+
// Use original value to preserve spacing
|
|
1752
|
+
displayValue: originalValue,
|
|
1753
|
+
hasHook: false
|
|
1754
|
+
};
|
|
1755
|
+
}
|
|
1756
|
+
}
|
|
1757
|
+
|
|
1758
|
+
// src/utils/value-utils.ts
|
|
1759
|
+
function parseUnitValue(value) {
|
|
1760
|
+
if (!value) return null;
|
|
1761
|
+
const match = value.match(/^(-?\d*\.?\d+)(px|rem|%)?$/);
|
|
1762
|
+
if (!match) return null;
|
|
1763
|
+
const number = parseFloat(match[1]);
|
|
1764
|
+
const unit = match[2] ? match[2] : null;
|
|
1765
|
+
if (isNaN(number)) return null;
|
|
1766
|
+
return { number, unit };
|
|
1767
|
+
}
|
|
1768
|
+
function toAlternateUnitValue(numberVal, unitType) {
|
|
1769
|
+
if (unitType === "px") {
|
|
1770
|
+
let floatValue = parseFloat(`${numberVal / 16}`);
|
|
1771
|
+
if (!isNaN(floatValue)) {
|
|
1772
|
+
return {
|
|
1773
|
+
unit: "rem",
|
|
1774
|
+
number: parseFloat(floatValue.toFixed(4))
|
|
1775
|
+
};
|
|
1776
|
+
}
|
|
1777
|
+
} else if (unitType === "rem") {
|
|
1778
|
+
const intValue = parseInt(`${numberVal * 16}`);
|
|
1779
|
+
if (!isNaN(intValue)) {
|
|
1780
|
+
return {
|
|
1781
|
+
unit: "px",
|
|
1782
|
+
number: intValue
|
|
1783
|
+
};
|
|
1784
|
+
}
|
|
1785
|
+
}
|
|
1786
|
+
return null;
|
|
1787
|
+
}
|
|
1788
|
+
|
|
1789
|
+
// src/utils/styling-hook-utils.ts
|
|
1790
|
+
function isValueMatch(valueToMatch, sldsValue) {
|
|
1791
|
+
if (!valueToMatch || !sldsValue) {
|
|
1792
|
+
return false;
|
|
1793
|
+
}
|
|
1794
|
+
return valueToMatch.unit == sldsValue.unit && valueToMatch.number === sldsValue.number;
|
|
1795
|
+
}
|
|
1796
|
+
function getStylingHooksForDensityValue(parsedValue, supportedStylinghooks, cssProperty) {
|
|
1797
|
+
if (!parsedValue) return [];
|
|
1798
|
+
const alternateValue = toAlternateUnitValue(parsedValue.number, parsedValue.unit);
|
|
1799
|
+
const matchedHooks = [];
|
|
1800
|
+
for (const [sldsValue, hooks] of Object.entries(supportedStylinghooks)) {
|
|
1801
|
+
const parsedSldsValue = parseUnitValue(sldsValue);
|
|
1802
|
+
if (isValueMatch(parsedValue, parsedSldsValue) || alternateValue && isValueMatch(alternateValue, parsedSldsValue)) {
|
|
1803
|
+
hooks.filter((hook) => hook.properties.includes(cssProperty)).forEach((hook) => matchedHooks.push(hook.name));
|
|
1804
|
+
}
|
|
1805
|
+
}
|
|
1806
|
+
return matchedHooks;
|
|
1807
|
+
}
|
|
1808
|
+
|
|
1809
|
+
// src/rules/v9/no-hardcoded-values/handlers/densityHandler.ts
|
|
1810
|
+
var handleDensityDeclaration = (node, context) => {
|
|
1811
|
+
const cssProperty = node.property.toLowerCase();
|
|
1812
|
+
const valueText = context.sourceCode.getText(node.value);
|
|
1813
|
+
const replacements = [];
|
|
1814
|
+
forEachDensityValue(valueText, cssProperty, (parsedDimension, positionInfo) => {
|
|
1815
|
+
if (parsedDimension) {
|
|
1816
|
+
const replacement = createDimensionReplacement(parsedDimension, cssProperty, context, positionInfo);
|
|
1817
|
+
if (replacement) {
|
|
1818
|
+
replacements.push(replacement);
|
|
1819
|
+
}
|
|
1820
|
+
}
|
|
1821
|
+
});
|
|
1822
|
+
handleShorthandAutoFix(node, context, valueText, replacements);
|
|
1823
|
+
};
|
|
1824
|
+
function createDimensionReplacement(parsedDimension, cssProperty, context, positionInfo) {
|
|
1825
|
+
if (!parsedDimension || !positionInfo?.start) {
|
|
1826
|
+
return null;
|
|
1827
|
+
}
|
|
1828
|
+
const rawValue = parsedDimension.unit ? `${parsedDimension.number}${parsedDimension.unit}` : parsedDimension.number.toString();
|
|
1829
|
+
const propToMatch = resolvePropertyToMatch(cssProperty);
|
|
1830
|
+
const closestHooks = getStylingHooksForDensityValue(parsedDimension, context.valueToStylinghook, propToMatch);
|
|
1831
|
+
const start = positionInfo.start.offset;
|
|
1832
|
+
const end = positionInfo.end.offset;
|
|
1833
|
+
if (closestHooks.length === 1) {
|
|
1834
|
+
return {
|
|
1835
|
+
start,
|
|
1836
|
+
end,
|
|
1837
|
+
replacement: `var(${closestHooks[0]}, ${rawValue})`,
|
|
1838
|
+
displayValue: closestHooks[0],
|
|
1839
|
+
hasHook: true
|
|
1840
|
+
};
|
|
1841
|
+
} else if (closestHooks.length > 1) {
|
|
1842
|
+
return {
|
|
1843
|
+
start,
|
|
1844
|
+
end,
|
|
1845
|
+
replacement: rawValue,
|
|
1846
|
+
displayValue: closestHooks.join(", "),
|
|
1847
|
+
hasHook: true
|
|
1848
|
+
};
|
|
1849
|
+
} else {
|
|
1850
|
+
return {
|
|
1851
|
+
start,
|
|
1852
|
+
end,
|
|
1853
|
+
replacement: rawValue,
|
|
1854
|
+
displayValue: rawValue,
|
|
1855
|
+
hasHook: false
|
|
1856
|
+
};
|
|
1857
|
+
}
|
|
1858
|
+
}
|
|
1859
|
+
|
|
1860
|
+
// src/rules/v9/no-hardcoded-values/handlers/fontHandler.ts
|
|
1861
|
+
var handleFontDeclaration = (node, context) => {
|
|
1862
|
+
const cssProperty = node.property.toLowerCase();
|
|
1863
|
+
const valueText = context.sourceCode.getText(node.value);
|
|
1864
|
+
const replacements = [];
|
|
1865
|
+
forEachFontValue(valueText, (fontValue, positionInfo) => {
|
|
1866
|
+
if (fontValue && isValidFontValue(fontValue, cssProperty)) {
|
|
1867
|
+
const replacement = createFontReplacement(fontValue, cssProperty, context, positionInfo);
|
|
1868
|
+
if (replacement) {
|
|
1869
|
+
replacements.push(replacement);
|
|
1870
|
+
}
|
|
1871
|
+
}
|
|
1872
|
+
});
|
|
1873
|
+
handleShorthandAutoFix(node, context, valueText, replacements);
|
|
1874
|
+
};
|
|
1875
|
+
function isValidFontValue(fontValue, cssProperty) {
|
|
1876
|
+
if (cssProperty === "font-size") {
|
|
1877
|
+
return !!fontValue.unit;
|
|
1878
|
+
} else if (cssProperty === "font-weight") {
|
|
1879
|
+
return !fontValue.unit && isKnownFontWeight(fontValue.number);
|
|
1880
|
+
} else if (cssProperty === "font") {
|
|
1881
|
+
if (!fontValue.unit && isKnownFontWeight(fontValue.number)) {
|
|
1882
|
+
return true;
|
|
1883
|
+
} else if (fontValue.unit) {
|
|
1884
|
+
return true;
|
|
1885
|
+
} else {
|
|
1886
|
+
return false;
|
|
1887
|
+
}
|
|
1888
|
+
}
|
|
1889
|
+
return false;
|
|
1890
|
+
}
|
|
1891
|
+
function createFontReplacement(fontValue, cssProperty, context, positionInfo) {
|
|
1892
|
+
if (!positionInfo?.start) {
|
|
1893
|
+
return null;
|
|
1894
|
+
}
|
|
1895
|
+
const rawValue = fontValue.unit ? `${fontValue.number}${fontValue.unit}` : fontValue.number.toString();
|
|
1896
|
+
const propToMatch = !fontValue.unit && isKnownFontWeight(fontValue.number) ? resolvePropertyToMatch("font-weight") : resolvePropertyToMatch("font-size");
|
|
1897
|
+
const closestHooks = getStylingHooksForDensityValue(fontValue, context.valueToStylinghook, propToMatch);
|
|
1898
|
+
const start = positionInfo.start.offset;
|
|
1899
|
+
const end = positionInfo.end.offset;
|
|
1900
|
+
if (closestHooks.length === 1) {
|
|
1901
|
+
return {
|
|
1902
|
+
start,
|
|
1903
|
+
end,
|
|
1904
|
+
replacement: `var(${closestHooks[0]}, ${rawValue})`,
|
|
1905
|
+
displayValue: closestHooks[0],
|
|
1906
|
+
hasHook: true
|
|
1907
|
+
};
|
|
1908
|
+
} else if (closestHooks.length > 1) {
|
|
1909
|
+
return {
|
|
1910
|
+
start,
|
|
1911
|
+
end,
|
|
1912
|
+
replacement: rawValue,
|
|
1913
|
+
displayValue: closestHooks.join(", "),
|
|
1914
|
+
hasHook: true
|
|
1915
|
+
};
|
|
1916
|
+
} else {
|
|
1917
|
+
return {
|
|
1918
|
+
start,
|
|
1919
|
+
end,
|
|
1920
|
+
replacement: rawValue,
|
|
1921
|
+
displayValue: rawValue,
|
|
1922
|
+
hasHook: false
|
|
1923
|
+
};
|
|
1924
|
+
}
|
|
1925
|
+
}
|
|
1926
|
+
|
|
1927
|
+
// src/utils/boxShadowValueParser.ts
|
|
1928
|
+
var import_css_tree3 = require("@eslint/css-tree");
|
|
1929
|
+
function isColorValue(node) {
|
|
1930
|
+
if (!node) return false;
|
|
1931
|
+
switch (node.type) {
|
|
1932
|
+
case "Hash":
|
|
1933
|
+
return true;
|
|
1934
|
+
// #hex colors
|
|
1935
|
+
case "Identifier":
|
|
1936
|
+
return isValidColor(node.name);
|
|
1937
|
+
case "Function":
|
|
1938
|
+
return isCssColorFunction(node.name.toLowerCase());
|
|
1939
|
+
default:
|
|
1940
|
+
return false;
|
|
1941
|
+
}
|
|
1942
|
+
}
|
|
1943
|
+
function isLengthValue(node) {
|
|
1944
|
+
if (!node) return false;
|
|
1945
|
+
switch (node.type) {
|
|
1946
|
+
case "Dimension":
|
|
1947
|
+
const dimensionStr = `${node.value}${node.unit}`;
|
|
1948
|
+
return parseUnitValue(dimensionStr) !== null;
|
|
1949
|
+
case "Number":
|
|
1950
|
+
return Number(node.value) === 0;
|
|
1951
|
+
default:
|
|
1952
|
+
return false;
|
|
1953
|
+
}
|
|
1954
|
+
}
|
|
1955
|
+
function isInsetKeyword(node) {
|
|
1956
|
+
return node?.type === "Identifier" && node.name.toLowerCase() === "inset";
|
|
1957
|
+
}
|
|
1958
|
+
function extractShadowParts(valueText) {
|
|
1959
|
+
const shadows = [];
|
|
1960
|
+
let currentShadow = {
|
|
1961
|
+
lengthParts: [],
|
|
1962
|
+
colorParts: [],
|
|
1963
|
+
inset: false
|
|
1964
|
+
};
|
|
1965
|
+
try {
|
|
1966
|
+
const ast = (0, import_css_tree3.parse)(valueText, { context: "value" });
|
|
1967
|
+
(0, import_css_tree3.walk)(ast, {
|
|
1968
|
+
enter(node) {
|
|
1969
|
+
if (node.type === "Function") {
|
|
1970
|
+
return this.skip;
|
|
1971
|
+
}
|
|
1972
|
+
if (isInsetKeyword(node)) {
|
|
1973
|
+
currentShadow.inset = true;
|
|
1974
|
+
} else if (isLengthValue(node)) {
|
|
1975
|
+
currentShadow.lengthParts.push((0, import_css_tree3.generate)(node));
|
|
1976
|
+
} else if (isColorValue(node)) {
|
|
1977
|
+
currentShadow.colorParts.push((0, import_css_tree3.generate)(node));
|
|
1978
|
+
}
|
|
1979
|
+
}
|
|
1980
|
+
});
|
|
1981
|
+
if (currentShadow.lengthParts.length > 0 || currentShadow.colorParts.length > 0 || currentShadow.inset) {
|
|
1982
|
+
shadows.push(currentShadow);
|
|
1983
|
+
}
|
|
1984
|
+
} catch (error) {
|
|
1985
|
+
return [];
|
|
1986
|
+
}
|
|
1987
|
+
return shadows;
|
|
1988
|
+
}
|
|
1989
|
+
function parseBoxShadowValue(value) {
|
|
1990
|
+
const shadowStrings = value.split(",").map((s) => s.trim());
|
|
1991
|
+
const allShadows = [];
|
|
1992
|
+
for (const shadowString of shadowStrings) {
|
|
1993
|
+
const shadows = extractShadowParts(shadowString);
|
|
1994
|
+
const parsedShadows = shadows.map((shadow) => {
|
|
1995
|
+
const shadowValue = {};
|
|
1996
|
+
const lengthProps = ["offsetX", "offsetY", "blurRadius", "spreadRadius"];
|
|
1997
|
+
lengthProps.forEach((prop, index) => {
|
|
1998
|
+
if (shadow.lengthParts.length > index) {
|
|
1999
|
+
shadowValue[prop] = shadow.lengthParts[index];
|
|
2000
|
+
}
|
|
2001
|
+
});
|
|
2002
|
+
if (shadow.colorParts.length > 0) {
|
|
2003
|
+
shadowValue.color = shadow.colorParts[0];
|
|
2004
|
+
}
|
|
2005
|
+
if (shadow.inset) {
|
|
2006
|
+
shadowValue.inset = true;
|
|
2007
|
+
}
|
|
2008
|
+
return shadowValue;
|
|
2009
|
+
});
|
|
2010
|
+
allShadows.push(...parsedShadows);
|
|
2011
|
+
}
|
|
2012
|
+
return allShadows;
|
|
2013
|
+
}
|
|
2014
|
+
function normalizeLengthValue(value) {
|
|
2015
|
+
if (!value) return "0px";
|
|
2016
|
+
if (value === "0") return "0px";
|
|
2017
|
+
return value;
|
|
2018
|
+
}
|
|
2019
|
+
function isBoxShadowMatch(parsedCssValue, parsedValueHook) {
|
|
2020
|
+
if (parsedCssValue.length !== parsedValueHook.length) {
|
|
2021
|
+
return false;
|
|
2022
|
+
}
|
|
2023
|
+
for (let i = 0; i < parsedCssValue.length; i++) {
|
|
2024
|
+
const cssShadow = parsedCssValue[i];
|
|
2025
|
+
const hookShadow = parsedValueHook[i];
|
|
2026
|
+
if (cssShadow.color !== hookShadow.color || cssShadow.inset !== hookShadow.inset) {
|
|
2027
|
+
return false;
|
|
2028
|
+
}
|
|
2029
|
+
const lengthProps = ["offsetX", "offsetY", "blurRadius", "spreadRadius"];
|
|
2030
|
+
for (const prop of lengthProps) {
|
|
2031
|
+
if (normalizeLengthValue(cssShadow[prop]) !== normalizeLengthValue(hookShadow[prop])) {
|
|
2032
|
+
return false;
|
|
2033
|
+
}
|
|
2034
|
+
}
|
|
2035
|
+
}
|
|
2036
|
+
return true;
|
|
2037
|
+
}
|
|
2038
|
+
|
|
2039
|
+
// src/rules/v9/no-hardcoded-values/handlers/boxShadowHandler.ts
|
|
2040
|
+
function containsCssVariable(valueText) {
|
|
2041
|
+
return valueText.includes("var(");
|
|
2042
|
+
}
|
|
2043
|
+
var handleBoxShadowDeclaration = (node, context) => {
|
|
2044
|
+
const cssProperty = node.property.toLowerCase();
|
|
2045
|
+
const valueText = context.sourceCode.getText(node.value);
|
|
2046
|
+
if (containsCssVariable(valueText)) {
|
|
2047
|
+
return;
|
|
2048
|
+
}
|
|
2049
|
+
const replacements = [];
|
|
2050
|
+
const parsedCssValue = parseAndValidateBoxShadow(valueText);
|
|
2051
|
+
if (parsedCssValue) {
|
|
2052
|
+
const shadowHooks = getBoxShadowHooks(context.valueToStylinghook);
|
|
2053
|
+
const closestHooks = findMatchingBoxShadowHooks(parsedCssValue, shadowHooks);
|
|
2054
|
+
const positionInfo = {
|
|
2055
|
+
start: { offset: 0, line: 1, column: 1 },
|
|
2056
|
+
end: { offset: valueText.length, line: 1, column: valueText.length + 1 }
|
|
2057
|
+
};
|
|
2058
|
+
const replacement = createBoxShadowReplacement(
|
|
2059
|
+
valueText,
|
|
2060
|
+
closestHooks,
|
|
2061
|
+
context,
|
|
2062
|
+
positionInfo
|
|
2063
|
+
);
|
|
2064
|
+
if (replacement) {
|
|
2065
|
+
replacements.push(replacement);
|
|
2066
|
+
}
|
|
2067
|
+
}
|
|
2068
|
+
handleShorthandAutoFix(node, context, valueText, replacements);
|
|
2069
|
+
};
|
|
2070
|
+
function getBoxShadowHooks(supportedStylinghooks) {
|
|
2071
|
+
return Object.entries(supportedStylinghooks).filter(([key, value]) => {
|
|
2072
|
+
return value.some((hook) => hook.properties.includes("box-shadow"));
|
|
2073
|
+
}).map(([key, value]) => {
|
|
2074
|
+
return [key, value.map((hook) => hook.name)];
|
|
2075
|
+
});
|
|
2076
|
+
}
|
|
2077
|
+
function parseAndValidateBoxShadow(cssValue) {
|
|
2078
|
+
const parsedCssValue = parseBoxShadowValue(cssValue).filter((shadow) => Object.keys(shadow).length > 0);
|
|
2079
|
+
if (parsedCssValue.length === 0) {
|
|
2080
|
+
return null;
|
|
2081
|
+
}
|
|
2082
|
+
return parsedCssValue;
|
|
2083
|
+
}
|
|
2084
|
+
function findMatchingBoxShadowHooks(parsedCssValue, shadowHooks) {
|
|
2085
|
+
for (const [shadowHookValue, closestHooks] of shadowHooks) {
|
|
2086
|
+
const parsedHookValue = parseAndValidateBoxShadow(shadowHookValue);
|
|
2087
|
+
if (parsedHookValue && isBoxShadowMatch(parsedCssValue, parsedHookValue)) {
|
|
2088
|
+
return closestHooks;
|
|
2089
|
+
}
|
|
2090
|
+
}
|
|
2091
|
+
return [];
|
|
2092
|
+
}
|
|
2093
|
+
function createBoxShadowReplacement(originalValue, hooks, context, positionInfo) {
|
|
2094
|
+
if (!positionInfo?.start) {
|
|
2095
|
+
return null;
|
|
2096
|
+
}
|
|
2097
|
+
const start = positionInfo.start.offset;
|
|
2098
|
+
const end = positionInfo.end.offset;
|
|
2099
|
+
if (hooks.length === 1) {
|
|
2100
|
+
return {
|
|
2101
|
+
start,
|
|
2102
|
+
end,
|
|
2103
|
+
replacement: `var(${hooks[0]}, ${originalValue})`,
|
|
2104
|
+
displayValue: hooks[0],
|
|
2105
|
+
hasHook: true
|
|
2106
|
+
};
|
|
2107
|
+
} else if (hooks.length > 1) {
|
|
2108
|
+
return {
|
|
2109
|
+
start,
|
|
2110
|
+
end,
|
|
2111
|
+
replacement: originalValue,
|
|
2112
|
+
displayValue: hooks.join(", "),
|
|
2113
|
+
hasHook: true
|
|
2114
|
+
};
|
|
2115
|
+
} else {
|
|
2116
|
+
return {
|
|
2117
|
+
start,
|
|
2118
|
+
end,
|
|
2119
|
+
replacement: originalValue,
|
|
2120
|
+
displayValue: originalValue,
|
|
2121
|
+
hasHook: false
|
|
2122
|
+
};
|
|
2123
|
+
}
|
|
2124
|
+
}
|
|
2125
|
+
|
|
2126
|
+
// src/rules/v9/no-hardcoded-values/noHardcodedValueRule.ts
|
|
2127
|
+
function defineNoHardcodedValueRule(config) {
|
|
2128
|
+
const { ruleConfig: ruleConfig14 } = config;
|
|
2129
|
+
const { type: type15, description: description15, url: url15, messages: messages15 } = ruleConfig14;
|
|
2130
|
+
return {
|
|
2131
|
+
meta: {
|
|
2132
|
+
type: type15,
|
|
2133
|
+
docs: {
|
|
2134
|
+
description: description15,
|
|
2135
|
+
recommended: true,
|
|
2136
|
+
url: url15
|
|
2137
|
+
},
|
|
2138
|
+
fixable: "code",
|
|
2139
|
+
messages: messages15
|
|
2140
|
+
},
|
|
2141
|
+
create(context) {
|
|
2142
|
+
const handlerContext = {
|
|
2143
|
+
valueToStylinghook: config.valueToStylinghook,
|
|
2144
|
+
context,
|
|
2145
|
+
sourceCode: context.sourceCode
|
|
2146
|
+
};
|
|
2147
|
+
const colorOnlySelector = toSelector(colorProperties);
|
|
2148
|
+
const densityOnlySelector = toSelector(densificationProperties);
|
|
2149
|
+
const fontDensitySelector = toSelector(fontProperties);
|
|
2150
|
+
const overlappingProperties = colorProperties.filter((colorProp) => {
|
|
2151
|
+
return densificationProperties.some((densityProp) => {
|
|
2152
|
+
if (densityProp === colorProp) {
|
|
2153
|
+
return true;
|
|
2154
|
+
}
|
|
2155
|
+
if (densityProp.includes("*")) {
|
|
2156
|
+
const regexPattern = new RegExp("^" + densityProp.replace(/\*/g, ".*") + "$");
|
|
2157
|
+
return regexPattern.test(colorProp);
|
|
2158
|
+
}
|
|
2159
|
+
return false;
|
|
2160
|
+
});
|
|
2161
|
+
});
|
|
2162
|
+
const overlappingSet = new Set(overlappingProperties);
|
|
2163
|
+
const colorOnlyProps = colorProperties.filter((prop) => !overlappingSet.has(prop));
|
|
2164
|
+
const densityOnlyProps = densificationProperties.filter((prop) => !overlappingSet.has(prop));
|
|
2165
|
+
const visitors = {};
|
|
2166
|
+
if (colorOnlyProps.length > 0) {
|
|
2167
|
+
const colorOnlySelector2 = toSelector(colorOnlyProps);
|
|
2168
|
+
visitors[colorOnlySelector2] = (node) => {
|
|
2169
|
+
handleColorDeclaration(node, handlerContext);
|
|
2170
|
+
};
|
|
2171
|
+
}
|
|
2172
|
+
if (densityOnlyProps.length > 0) {
|
|
2173
|
+
const densityOnlySelector2 = toSelector(densityOnlyProps);
|
|
2174
|
+
visitors[densityOnlySelector2] = (node) => {
|
|
2175
|
+
handleDensityDeclaration(node, handlerContext);
|
|
2176
|
+
};
|
|
2177
|
+
}
|
|
2178
|
+
visitors[fontDensitySelector] = (node) => {
|
|
2179
|
+
handleFontDeclaration(node, handlerContext);
|
|
2180
|
+
};
|
|
2181
|
+
visitors['Declaration[property="box-shadow"]'] = (node) => {
|
|
2182
|
+
handleBoxShadowDeclaration(node, handlerContext);
|
|
2183
|
+
};
|
|
2184
|
+
if (overlappingProperties.length > 0) {
|
|
2185
|
+
const overlappingSelector = toSelector(overlappingProperties);
|
|
2186
|
+
visitors[overlappingSelector] = (node) => {
|
|
2187
|
+
handleColorDeclaration(node, handlerContext);
|
|
2188
|
+
handleDensityDeclaration(node, handlerContext);
|
|
2189
|
+
};
|
|
2190
|
+
}
|
|
2191
|
+
return visitors;
|
|
2192
|
+
}
|
|
2193
|
+
};
|
|
2194
|
+
}
|
|
2195
|
+
|
|
2196
|
+
// src/rules/v9/no-hardcoded-values/no-hardcoded-values-slds1.ts
|
|
2197
|
+
var ruleConfig12 = import_rule_messages14.default["no-hardcoded-values-slds1"];
|
|
2198
|
+
var { type: type13, description: description13, url: url13, messages: messages13 } = ruleConfig12;
|
|
2199
|
+
var valueToStylinghook = import_next12.default.valueToStylingHooksSlds;
|
|
2200
|
+
var no_hardcoded_values_slds1_default = defineNoHardcodedValueRule({
|
|
2201
|
+
ruleConfig: ruleConfig12,
|
|
2202
|
+
valueToStylinghook
|
|
2203
|
+
});
|
|
2204
|
+
|
|
2205
|
+
// src/rules/v9/no-hardcoded-values/no-hardcoded-values-slds2.ts
|
|
2206
|
+
var import_next13 = __toESM(require("@salesforce-ux/sds-metadata/next"));
|
|
2207
|
+
var import_rule_messages15 = __toESM(require_rule_messages());
|
|
2208
|
+
var ruleConfig13 = import_rule_messages15.default["no-hardcoded-values-slds2"];
|
|
2209
|
+
var { type: type14, description: description14, url: url14, messages: messages14 } = ruleConfig13;
|
|
2210
|
+
var valueToStylinghook2 = import_next13.default.valueToStylingHooksCosmos;
|
|
2211
|
+
var no_hardcoded_values_slds2_default = defineNoHardcodedValueRule({
|
|
2212
|
+
ruleConfig: ruleConfig13,
|
|
2213
|
+
valueToStylinghook: valueToStylinghook2
|
|
2214
|
+
});
|
|
2215
|
+
|
|
2216
|
+
// src/index.ts
|
|
2217
|
+
var import_parser2 = __toESM(require("@html-eslint/parser"));
|
|
2218
|
+
var import_css = __toESM(require("@eslint/css"));
|
|
2219
|
+
|
|
2220
|
+
// eslint.rules.internal.json
|
|
2221
|
+
var eslint_rules_internal_default = {
|
|
2222
|
+
css: {
|
|
2223
|
+
"@salesforce-ux/slds/no-slds-class-overrides": "warn",
|
|
2224
|
+
"@salesforce-ux/slds/no-deprecated-slds-classes": "warn",
|
|
2225
|
+
"@salesforce-ux/slds/no-deprecated-tokens-slds1": "error",
|
|
2226
|
+
"@salesforce-ux/slds/lwc-token-to-slds-hook": "error",
|
|
2227
|
+
"@salesforce-ux/slds/enforce-sds-to-slds-hooks": "warn",
|
|
2228
|
+
"@salesforce-ux/slds/no-sldshook-fallback-for-lwctoken": "warn",
|
|
2229
|
+
"@salesforce-ux/slds/no-unsupported-hooks-slds2": "warn",
|
|
2230
|
+
"@salesforce-ux/slds/no-slds-var-without-fallback": "warn",
|
|
2231
|
+
"@salesforce-ux/slds/no-slds-namespace-for-custom-hooks": "warn",
|
|
2232
|
+
"@salesforce-ux/slds/enforce-component-hook-naming-convention": "error",
|
|
2233
|
+
"@salesforce-ux/slds/no-slds-private-var": "warn",
|
|
2234
|
+
"@salesforce-ux/slds/no-hardcoded-values-slds1": "error",
|
|
2235
|
+
"@salesforce-ux/slds/no-hardcoded-values-slds2": "warn",
|
|
2236
|
+
"@salesforce-ux/slds/reduce-annotations": "warn"
|
|
2237
|
+
},
|
|
2238
|
+
html: {
|
|
2239
|
+
"@salesforce-ux/slds/enforce-bem-usage": "error",
|
|
2240
|
+
"@salesforce-ux/slds/no-deprecated-classes-slds2": "error",
|
|
2241
|
+
"@salesforce-ux/slds/modal-close-button-issue": "error"
|
|
2242
|
+
}
|
|
2243
|
+
};
|
|
2244
|
+
|
|
2245
|
+
// src/index.ts
|
|
2246
|
+
var rules = {
|
|
2247
|
+
"enforce-bem-usage": import_enforce_bem_usage.default,
|
|
2248
|
+
"no-deprecated-classes-slds2": import_no_deprecated_classes_slds2.default,
|
|
2249
|
+
"modal-close-button-issue": import_modal_close_button_issue.default,
|
|
2250
|
+
"no-slds-class-overrides": no_slds_class_overrides_default,
|
|
2251
|
+
"no-deprecated-slds-classes": no_deprecated_slds_classes_default,
|
|
2252
|
+
"no-deprecated-tokens-slds1": no_deprecated_tokens_slds1_default,
|
|
2253
|
+
"lwc-token-to-slds-hook": lwc_token_to_slds_hook_default,
|
|
2254
|
+
"enforce-sds-to-slds-hooks": enforce_sds_to_slds_hooks_default,
|
|
2255
|
+
"no-sldshook-fallback-for-lwctoken": no_sldshook_fallback_for_lwctoken_default,
|
|
2256
|
+
"no-unsupported-hooks-slds2": no_unsupported_hooks_slds2_default,
|
|
2257
|
+
"no-slds-var-without-fallback": no_slds_var_without_fallback_default,
|
|
2258
|
+
"no-slds-namespace-for-custom-hooks": no_slds_namespace_for_custom_hooks_default,
|
|
2259
|
+
"enforce-component-hook-naming-convention": enforce_component_hook_naming_convention_default,
|
|
2260
|
+
"no-slds-private-var": no_slds_private_var_default,
|
|
2261
|
+
"no-hardcoded-values-slds1": no_hardcoded_values_slds1_default,
|
|
2262
|
+
"no-hardcoded-values-slds2": no_hardcoded_values_slds2_default,
|
|
2263
|
+
"reduce-annotations": reduce_annotations_default
|
|
2264
|
+
};
|
|
2265
|
+
var plugin = {
|
|
2266
|
+
meta: {
|
|
2267
|
+
name: "@salesforce-ux/eslint-plugin-slds",
|
|
2268
|
+
version: "1.0.0-internal-alpha.0"
|
|
2269
|
+
},
|
|
2270
|
+
rules,
|
|
2271
|
+
configs: {}
|
|
2272
|
+
};
|
|
2273
|
+
Object.assign(plugin.configs, {
|
|
2274
|
+
// Flat config for ESLint v9+
|
|
2275
|
+
"flat/recommended": [
|
|
2276
|
+
// HTML/Component config
|
|
2277
|
+
{
|
|
2278
|
+
files: ["**/*.html", "**/*.cmp"],
|
|
2279
|
+
languageOptions: {
|
|
2280
|
+
parser: import_parser2.default,
|
|
2281
|
+
ecmaVersion: 2021,
|
|
2282
|
+
sourceType: "module"
|
|
2283
|
+
},
|
|
2284
|
+
plugins: {
|
|
2285
|
+
"@salesforce-ux/slds": plugin
|
|
2286
|
+
},
|
|
2287
|
+
rules: eslint_rules_internal_default.html
|
|
2288
|
+
},
|
|
2289
|
+
// CSS config - Standard CSS files
|
|
2290
|
+
{
|
|
2291
|
+
files: ["**/*.{css,scss}"],
|
|
2292
|
+
language: "css/css",
|
|
2293
|
+
...import_css.default.configs.recommended,
|
|
2294
|
+
languageOptions: {
|
|
2295
|
+
tolerant: true
|
|
2296
|
+
// Allow recoverable parsing errors for SCSS syntax
|
|
2297
|
+
},
|
|
2298
|
+
plugins: {
|
|
2299
|
+
css: import_css.default,
|
|
2300
|
+
"@salesforce-ux/slds": plugin
|
|
2301
|
+
},
|
|
2302
|
+
rules: eslint_rules_internal_default.css
|
|
2303
|
+
}
|
|
2304
|
+
],
|
|
2305
|
+
// legacy config for ESLint v8-
|
|
2306
|
+
recommended: {
|
|
2307
|
+
plugins: ["@salesforce-ux/slds"],
|
|
2308
|
+
rules: eslint_rules_internal_default.html,
|
|
2309
|
+
parser: import_parser2.default,
|
|
2310
|
+
parserOptions: {
|
|
2311
|
+
ecmaVersion: 2021,
|
|
2312
|
+
sourceType: "module"
|
|
56
2313
|
}
|
|
2314
|
+
}
|
|
57
2315
|
});
|
|
58
2316
|
module.exports = plugin;
|
|
2317
|
+
//# sourceMappingURL=index.js.map
|