@dialpad/eslint-plugin-dialtone 1.11.2 → 1.11.3-next.1
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.
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @fileoverview Detects usage of deprecated xxl/xxxl headline sizes which have been renamed to 2xl/3xl.
|
|
3
|
+
* @author Dialtone Team
|
|
4
|
+
*/
|
|
5
|
+
'use strict';
|
|
6
|
+
|
|
7
|
+
// ------------------------------------------------------------------------------
|
|
8
|
+
// Rule Definition
|
|
9
|
+
// ------------------------------------------------------------------------------
|
|
10
|
+
|
|
11
|
+
const SIZE_MAP = {
|
|
12
|
+
xxxl: '3xl',
|
|
13
|
+
xxl: '2xl',
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
module.exports = {
|
|
17
|
+
meta: {
|
|
18
|
+
type: 'suggestion',
|
|
19
|
+
docs: {
|
|
20
|
+
description: 'Headline sizes xxl/xxxl have been renamed to 2xl/3xl.',
|
|
21
|
+
recommended: false,
|
|
22
|
+
url: 'https://github.com/dialpad/dialtone/blob/staging/packages/eslint-plugin-dialtone/docs/rules/deprecated-headline-sizes.md',
|
|
23
|
+
},
|
|
24
|
+
fixable: 'code',
|
|
25
|
+
schema: [],
|
|
26
|
+
messages: {
|
|
27
|
+
deprecatedSize: 'Headline size "{{oldSize}}" has been renamed to "{{newSize}}". Update size="{{oldSize}}" to size="{{newSize}}".',
|
|
28
|
+
deprecatedClass: 'CSS class "{{oldClass}}" has been renamed to "{{newClass}}". Update to use the new class name.',
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
|
|
32
|
+
create(context) {
|
|
33
|
+
const sourceCode = context.sourceCode ?? context.getSourceCode();
|
|
34
|
+
return sourceCode.parserServices.defineTemplateBodyVisitor({
|
|
35
|
+
VAttribute(node) {
|
|
36
|
+
// Check size prop (e.g., size="xxl" or size="xxxl")
|
|
37
|
+
if (node.key.name === 'size' && node.value && node.value.value) {
|
|
38
|
+
const sizeValue = node.value.value;
|
|
39
|
+
if (SIZE_MAP[sizeValue]) {
|
|
40
|
+
context.report({
|
|
41
|
+
node,
|
|
42
|
+
messageId: 'deprecatedSize',
|
|
43
|
+
data: {
|
|
44
|
+
oldSize: sizeValue,
|
|
45
|
+
newSize: SIZE_MAP[sizeValue],
|
|
46
|
+
},
|
|
47
|
+
fix(fixer) {
|
|
48
|
+
return fixer.replaceText(node.value, `"${SIZE_MAP[sizeValue]}"`);
|
|
49
|
+
},
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// Check class attributes for deprecated d-text-headline--xxl/xxxl classes
|
|
55
|
+
// Note: We only flag d-text-headline-- (current system), NOT d-headline-- (legacy system)
|
|
56
|
+
if (node.key.name === 'class' && node.value && node.value.value) {
|
|
57
|
+
const classValue = node.value.value;
|
|
58
|
+
// Match d-text-headline--xxl or d-text-headline--xxxl (but NOT d-headline--xxl)
|
|
59
|
+
const match = classValue.match(/\bd-text-headline--(xxx?l)\b/);
|
|
60
|
+
if (match && SIZE_MAP[match[1]]) {
|
|
61
|
+
const oldClass = `d-text-headline--${match[1]}`;
|
|
62
|
+
const newClass = `d-text-headline--${SIZE_MAP[match[1]]}`;
|
|
63
|
+
context.report({
|
|
64
|
+
node,
|
|
65
|
+
messageId: 'deprecatedClass',
|
|
66
|
+
data: { oldClass, newClass },
|
|
67
|
+
fix(fixer) {
|
|
68
|
+
const newValue = classValue.replace(oldClass, newClass);
|
|
69
|
+
return fixer.replaceText(node.value, `"${newValue}"`);
|
|
70
|
+
},
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
});
|
|
76
|
+
},
|
|
77
|
+
};
|