@agilebot/eslint-plugin 0.1.5 → 0.2.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/LICENSE +9 -9
- package/README.md +11 -11
- package/lib/index.js +58 -59
- package/lib/rules/import/enforce-icon-alias.js +42 -43
- package/lib/rules/import/monorepo.js +49 -49
- package/lib/rules/intl/id-missing.js +111 -105
- package/lib/rules/intl/id-prefix.js +103 -97
- package/lib/rules/intl/id-unused.js +123 -117
- package/lib/rules/intl/no-default.js +63 -57
- package/lib/rules/others/no-unnecessary-template-literals.js +38 -38
- package/lib/rules/react/better-exhaustive-deps.js +1923 -1921
- package/lib/rules/react/hook-use-ref.js +35 -37
- package/lib/rules/react/no-inline-styles.js +87 -87
- package/lib/rules/react/prefer-named-property-access.js +105 -105
- package/lib/rules/tss/class-naming.js +43 -43
- package/lib/rules/tss/no-color-value.js +58 -58
- package/lib/rules/tss/unused-classes.js +108 -108
- package/lib/util/intl.js +127 -127
- package/lib/util/settings.js +14 -14
- package/lib/util/translations.js +66 -66
- package/lib/util/tss.js +109 -109
- package/package.json +5 -3
@@ -1,37 +1,35 @@
|
|
1
|
-
const Components = require('eslint-plugin-react/lib/util/Components');
|
2
|
-
|
3
|
-
module.exports = {
|
4
|
-
meta: {
|
5
|
-
docs: {
|
6
|
-
description: 'Ensure naming of useRef hook value.',
|
7
|
-
recommended: false
|
8
|
-
},
|
9
|
-
schema: [],
|
10
|
-
type: 'suggestion',
|
11
|
-
hasSuggestions: true
|
12
|
-
},
|
13
|
-
|
14
|
-
create: Components.detect((context, component, util) => {
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
})
|
37
|
-
};
|
1
|
+
const Components = require('eslint-plugin-react/lib/util/Components');
|
2
|
+
|
3
|
+
module.exports = {
|
4
|
+
meta: {
|
5
|
+
docs: {
|
6
|
+
description: 'Ensure naming of useRef hook value.',
|
7
|
+
recommended: false
|
8
|
+
},
|
9
|
+
schema: [],
|
10
|
+
type: 'suggestion',
|
11
|
+
hasSuggestions: true
|
12
|
+
},
|
13
|
+
|
14
|
+
create: Components.detect((context, component, util) => ({
|
15
|
+
CallExpression(node) {
|
16
|
+
const isImmediateReturn =
|
17
|
+
node.parent && node.parent.type === 'ReturnStatement';
|
18
|
+
|
19
|
+
if (isImmediateReturn || !util.isReactHookCall(node, ['useRef'])) {
|
20
|
+
return;
|
21
|
+
}
|
22
|
+
if (node.parent.id.type !== 'Identifier') {
|
23
|
+
return;
|
24
|
+
}
|
25
|
+
const variable = node.parent.id.name;
|
26
|
+
|
27
|
+
if (!variable.endsWith('Ref')) {
|
28
|
+
context.report({
|
29
|
+
node: node,
|
30
|
+
message: 'useRef call is not end with "Ref"'
|
31
|
+
});
|
32
|
+
}
|
33
|
+
}
|
34
|
+
}))
|
35
|
+
};
|
@@ -1,87 +1,87 @@
|
|
1
|
-
module.exports = {
|
2
|
-
meta: {
|
3
|
-
docs: {
|
4
|
-
description: 'Disallow style props on components and DOM Nodes',
|
5
|
-
category: 'Best Practices',
|
6
|
-
recommended: false
|
7
|
-
},
|
8
|
-
messages: {
|
9
|
-
disallowInlineStyles:
|
10
|
-
'Avoid using inline styles, use sx prop or tss-react or styled-component instead'
|
11
|
-
},
|
12
|
-
schema: [
|
13
|
-
{
|
14
|
-
type: 'object',
|
15
|
-
properties: {
|
16
|
-
allowedFor: {
|
17
|
-
type: 'array',
|
18
|
-
uniqueItems: true,
|
19
|
-
items: { type: 'string' }
|
20
|
-
}
|
21
|
-
}
|
22
|
-
}
|
23
|
-
]
|
24
|
-
},
|
25
|
-
|
26
|
-
create(context) {
|
27
|
-
const configuration = context.options[0] || {};
|
28
|
-
const allowedFor = configuration.allowedFor || [];
|
29
|
-
|
30
|
-
function checkComponent(node) {
|
31
|
-
const parentName = node.parent.name;
|
32
|
-
// Extract a component name when using a "namespace", e.g. `<AntdLayout.Content />`.
|
33
|
-
const tag =
|
34
|
-
parentName.name ||
|
35
|
-
`${parentName.object.name}.${parentName.property.name}`;
|
36
|
-
const componentName = parentName.name || parentName.property.name;
|
37
|
-
if (
|
38
|
-
componentName &&
|
39
|
-
typeof componentName[0] === 'string' &&
|
40
|
-
componentName[0] !== componentName[0].toUpperCase()
|
41
|
-
) {
|
42
|
-
// This is a DOM node, not a Component, so exit.
|
43
|
-
return;
|
44
|
-
}
|
45
|
-
|
46
|
-
if (allowedFor.includes(tag)) {
|
47
|
-
return;
|
48
|
-
}
|
49
|
-
const prop = node.name.name;
|
50
|
-
|
51
|
-
if (prop === 'style') {
|
52
|
-
context.report({
|
53
|
-
node,
|
54
|
-
messageId: 'disallowInlineStyles'
|
55
|
-
});
|
56
|
-
}
|
57
|
-
}
|
58
|
-
|
59
|
-
function checkDOMNodes(node) {
|
60
|
-
const tag = node.parent.name.name;
|
61
|
-
if (
|
62
|
-
!(tag && typeof tag === 'string' && tag[0] !== tag[0].toUpperCase())
|
63
|
-
) {
|
64
|
-
// This is a Component, not a DOM node, so exit.
|
65
|
-
return;
|
66
|
-
}
|
67
|
-
if (allowedFor.includes(tag)) {
|
68
|
-
return;
|
69
|
-
}
|
70
|
-
const prop = node.name.name;
|
71
|
-
|
72
|
-
if (prop === 'style') {
|
73
|
-
context.report({
|
74
|
-
node,
|
75
|
-
messageId: 'disallowInlineStyles'
|
76
|
-
});
|
77
|
-
}
|
78
|
-
}
|
79
|
-
|
80
|
-
return {
|
81
|
-
JSXAttribute(node) {
|
82
|
-
checkComponent(node);
|
83
|
-
checkDOMNodes(node);
|
84
|
-
}
|
85
|
-
};
|
86
|
-
}
|
87
|
-
};
|
1
|
+
module.exports = {
|
2
|
+
meta: {
|
3
|
+
docs: {
|
4
|
+
description: 'Disallow style props on components and DOM Nodes',
|
5
|
+
category: 'Best Practices',
|
6
|
+
recommended: false
|
7
|
+
},
|
8
|
+
messages: {
|
9
|
+
disallowInlineStyles:
|
10
|
+
'Avoid using inline styles, use sx prop or tss-react or styled-component instead'
|
11
|
+
},
|
12
|
+
schema: [
|
13
|
+
{
|
14
|
+
type: 'object',
|
15
|
+
properties: {
|
16
|
+
allowedFor: {
|
17
|
+
type: 'array',
|
18
|
+
uniqueItems: true,
|
19
|
+
items: { type: 'string' }
|
20
|
+
}
|
21
|
+
}
|
22
|
+
}
|
23
|
+
]
|
24
|
+
},
|
25
|
+
|
26
|
+
create(context) {
|
27
|
+
const configuration = context.options[0] || {};
|
28
|
+
const allowedFor = configuration.allowedFor || [];
|
29
|
+
|
30
|
+
function checkComponent(node) {
|
31
|
+
const parentName = node.parent.name;
|
32
|
+
// Extract a component name when using a "namespace", e.g. `<AntdLayout.Content />`.
|
33
|
+
const tag =
|
34
|
+
parentName.name ||
|
35
|
+
`${parentName.object.name}.${parentName.property.name}`;
|
36
|
+
const componentName = parentName.name || parentName.property.name;
|
37
|
+
if (
|
38
|
+
componentName &&
|
39
|
+
typeof componentName[0] === 'string' &&
|
40
|
+
componentName[0] !== componentName[0].toUpperCase()
|
41
|
+
) {
|
42
|
+
// This is a DOM node, not a Component, so exit.
|
43
|
+
return;
|
44
|
+
}
|
45
|
+
|
46
|
+
if (allowedFor.includes(tag)) {
|
47
|
+
return;
|
48
|
+
}
|
49
|
+
const prop = node.name.name;
|
50
|
+
|
51
|
+
if (prop === 'style') {
|
52
|
+
context.report({
|
53
|
+
node,
|
54
|
+
messageId: 'disallowInlineStyles'
|
55
|
+
});
|
56
|
+
}
|
57
|
+
}
|
58
|
+
|
59
|
+
function checkDOMNodes(node) {
|
60
|
+
const tag = node.parent.name.name;
|
61
|
+
if (
|
62
|
+
!(tag && typeof tag === 'string' && tag[0] !== tag[0].toUpperCase())
|
63
|
+
) {
|
64
|
+
// This is a Component, not a DOM node, so exit.
|
65
|
+
return;
|
66
|
+
}
|
67
|
+
if (allowedFor.includes(tag)) {
|
68
|
+
return;
|
69
|
+
}
|
70
|
+
const prop = node.name.name;
|
71
|
+
|
72
|
+
if (prop === 'style') {
|
73
|
+
context.report({
|
74
|
+
node,
|
75
|
+
messageId: 'disallowInlineStyles'
|
76
|
+
});
|
77
|
+
}
|
78
|
+
}
|
79
|
+
|
80
|
+
return {
|
81
|
+
JSXAttribute(node) {
|
82
|
+
checkComponent(node);
|
83
|
+
checkDOMNodes(node);
|
84
|
+
}
|
85
|
+
};
|
86
|
+
}
|
87
|
+
};
|
@@ -1,105 +1,105 @@
|
|
1
|
-
const { ESLintUtils } = require('@typescript-eslint/utils');
|
2
|
-
|
3
|
-
/**
|
4
|
-
* Auto-fix util.
|
5
|
-
* Ensures that passed key is imported from 'react' package.
|
6
|
-
*/
|
7
|
-
function* updateImportStatement(context, fixer, key) {
|
8
|
-
const sourceCode = context.getSourceCode();
|
9
|
-
const importNode = sourceCode.ast.body.find(
|
10
|
-
node => node.type === 'ImportDeclaration' && node.source.value === 'react'
|
11
|
-
);
|
12
|
-
|
13
|
-
// No import from 'react' - create import statement
|
14
|
-
if (!importNode) {
|
15
|
-
yield fixer.insertTextBefore(
|
16
|
-
sourceCode.ast.body[0],
|
17
|
-
`import { ${key} } from 'react';\n`
|
18
|
-
);
|
19
|
-
|
20
|
-
return;
|
21
|
-
}
|
22
|
-
|
23
|
-
// Only default import from 'react' - add named imports section
|
24
|
-
if (
|
25
|
-
importNode.specifiers.length === 1 &&
|
26
|
-
importNode.specifiers[0].type === 'ImportDefaultSpecifier'
|
27
|
-
) {
|
28
|
-
yield fixer.insertTextAfter(importNode.specifiers[0], `, { ${key} }`);
|
29
|
-
|
30
|
-
return;
|
31
|
-
}
|
32
|
-
|
33
|
-
const alreadyImportedKeys = importNode.specifiers
|
34
|
-
.filter(specifier => specifier.type === 'ImportSpecifier')
|
35
|
-
.map(specifier => specifier.imported.name);
|
36
|
-
|
37
|
-
// Named imports section is present and current key is already imported - do nothing
|
38
|
-
if (alreadyImportedKeys.includes(key)) {
|
39
|
-
return;
|
40
|
-
}
|
41
|
-
|
42
|
-
// Named imports section is present and current key is not imported yet - add it to named imports section
|
43
|
-
yield fixer.insertTextAfter([...importNode.specifiers].pop(), `, ${key}`);
|
44
|
-
}
|
45
|
-
|
46
|
-
/** @type {import('eslint').Rule.RuleModule} */
|
47
|
-
module.exports = ESLintUtils.RuleCreator.withoutDocs({
|
48
|
-
defaultOptions: [],
|
49
|
-
meta: {
|
50
|
-
type: 'layout',
|
51
|
-
fixable: 'code',
|
52
|
-
docs: {
|
53
|
-
description:
|
54
|
-
'Enforce importing each member of React namespace separately instead of accessing them through React namespace',
|
55
|
-
category: 'Layout & Formatting'
|
56
|
-
},
|
57
|
-
messages: {
|
58
|
-
illegalReactPropertyAccess:
|
59
|
-
'Illegal React property access: {{name}}. Use named import instead.'
|
60
|
-
}
|
61
|
-
},
|
62
|
-
|
63
|
-
create(context) {
|
64
|
-
return {
|
65
|
-
// Analyze TS types declarations
|
66
|
-
TSQualifiedName(node) {
|
67
|
-
// Do nothing to types that are ending with 'Event' as they will overlap with global event types otherwise
|
68
|
-
if (node.left.name !== 'React' || node.right.name.endsWith('Event')) {
|
69
|
-
return;
|
70
|
-
}
|
71
|
-
|
72
|
-
context.report({
|
73
|
-
node,
|
74
|
-
messageId: 'illegalReactPropertyAccess',
|
75
|
-
data: {
|
76
|
-
name: node.right.name
|
77
|
-
},
|
78
|
-
*fix(fixer) {
|
79
|
-
yield fixer.replaceText(node, node.right.name);
|
80
|
-
yield* updateImportStatement(context, fixer, node.right.name);
|
81
|
-
}
|
82
|
-
});
|
83
|
-
},
|
84
|
-
|
85
|
-
// Analyze expressions for React.* access
|
86
|
-
MemberExpression(node) {
|
87
|
-
if (node.object.name !== 'React') {
|
88
|
-
return;
|
89
|
-
}
|
90
|
-
|
91
|
-
context.report({
|
92
|
-
node,
|
93
|
-
messageId: 'illegalReactPropertyAccess',
|
94
|
-
data: {
|
95
|
-
name: node.property.name
|
96
|
-
},
|
97
|
-
*fix(fixer) {
|
98
|
-
yield fixer.replaceText(node, node.property.name);
|
99
|
-
yield* updateImportStatement(context, fixer, node.property.name);
|
100
|
-
}
|
101
|
-
});
|
102
|
-
}
|
103
|
-
};
|
104
|
-
}
|
105
|
-
});
|
1
|
+
const { ESLintUtils } = require('@typescript-eslint/utils');
|
2
|
+
|
3
|
+
/**
|
4
|
+
* Auto-fix util.
|
5
|
+
* Ensures that passed key is imported from 'react' package.
|
6
|
+
*/
|
7
|
+
function* updateImportStatement(context, fixer, key) {
|
8
|
+
const sourceCode = context.getSourceCode();
|
9
|
+
const importNode = sourceCode.ast.body.find(
|
10
|
+
node => node.type === 'ImportDeclaration' && node.source.value === 'react'
|
11
|
+
);
|
12
|
+
|
13
|
+
// No import from 'react' - create import statement
|
14
|
+
if (!importNode) {
|
15
|
+
yield fixer.insertTextBefore(
|
16
|
+
sourceCode.ast.body[0],
|
17
|
+
`import { ${key} } from 'react';\n`
|
18
|
+
);
|
19
|
+
|
20
|
+
return;
|
21
|
+
}
|
22
|
+
|
23
|
+
// Only default import from 'react' - add named imports section
|
24
|
+
if (
|
25
|
+
importNode.specifiers.length === 1 &&
|
26
|
+
importNode.specifiers[0].type === 'ImportDefaultSpecifier'
|
27
|
+
) {
|
28
|
+
yield fixer.insertTextAfter(importNode.specifiers[0], `, { ${key} }`);
|
29
|
+
|
30
|
+
return;
|
31
|
+
}
|
32
|
+
|
33
|
+
const alreadyImportedKeys = importNode.specifiers
|
34
|
+
.filter(specifier => specifier.type === 'ImportSpecifier')
|
35
|
+
.map(specifier => specifier.imported.name);
|
36
|
+
|
37
|
+
// Named imports section is present and current key is already imported - do nothing
|
38
|
+
if (alreadyImportedKeys.includes(key)) {
|
39
|
+
return;
|
40
|
+
}
|
41
|
+
|
42
|
+
// Named imports section is present and current key is not imported yet - add it to named imports section
|
43
|
+
yield fixer.insertTextAfter([...importNode.specifiers].pop(), `, ${key}`);
|
44
|
+
}
|
45
|
+
|
46
|
+
/** @type {import('eslint').Rule.RuleModule} */
|
47
|
+
module.exports = ESLintUtils.RuleCreator.withoutDocs({
|
48
|
+
defaultOptions: [],
|
49
|
+
meta: {
|
50
|
+
type: 'layout',
|
51
|
+
fixable: 'code',
|
52
|
+
docs: {
|
53
|
+
description:
|
54
|
+
'Enforce importing each member of React namespace separately instead of accessing them through React namespace',
|
55
|
+
category: 'Layout & Formatting'
|
56
|
+
},
|
57
|
+
messages: {
|
58
|
+
illegalReactPropertyAccess:
|
59
|
+
'Illegal React property access: {{name}}. Use named import instead.'
|
60
|
+
}
|
61
|
+
},
|
62
|
+
|
63
|
+
create(context) {
|
64
|
+
return {
|
65
|
+
// Analyze TS types declarations
|
66
|
+
TSQualifiedName(node) {
|
67
|
+
// Do nothing to types that are ending with 'Event' as they will overlap with global event types otherwise
|
68
|
+
if (node.left.name !== 'React' || node.right.name.endsWith('Event')) {
|
69
|
+
return;
|
70
|
+
}
|
71
|
+
|
72
|
+
context.report({
|
73
|
+
node,
|
74
|
+
messageId: 'illegalReactPropertyAccess',
|
75
|
+
data: {
|
76
|
+
name: node.right.name
|
77
|
+
},
|
78
|
+
*fix(fixer) {
|
79
|
+
yield fixer.replaceText(node, node.right.name);
|
80
|
+
yield* updateImportStatement(context, fixer, node.right.name);
|
81
|
+
}
|
82
|
+
});
|
83
|
+
},
|
84
|
+
|
85
|
+
// Analyze expressions for React.* access
|
86
|
+
MemberExpression(node) {
|
87
|
+
if (node.object.name !== 'React') {
|
88
|
+
return;
|
89
|
+
}
|
90
|
+
|
91
|
+
context.report({
|
92
|
+
node,
|
93
|
+
messageId: 'illegalReactPropertyAccess',
|
94
|
+
data: {
|
95
|
+
name: node.property.name
|
96
|
+
},
|
97
|
+
*fix(fixer) {
|
98
|
+
yield fixer.replaceText(node, node.property.name);
|
99
|
+
yield* updateImportStatement(context, fixer, node.property.name);
|
100
|
+
}
|
101
|
+
});
|
102
|
+
}
|
103
|
+
};
|
104
|
+
}
|
105
|
+
});
|
@@ -1,43 +1,43 @@
|
|
1
|
-
const { getStyesObj, isCamelCase } = require('../../util/tss');
|
2
|
-
|
3
|
-
module.exports = {
|
4
|
-
meta: {
|
5
|
-
type: 'problem'
|
6
|
-
},
|
7
|
-
create: function rule(context) {
|
8
|
-
return {
|
9
|
-
CallExpression(node) {
|
10
|
-
const stylesObj = getStyesObj(node);
|
11
|
-
|
12
|
-
if (stylesObj === undefined) {
|
13
|
-
return;
|
14
|
-
}
|
15
|
-
|
16
|
-
stylesObj.properties.forEach(property => {
|
17
|
-
if (property.computed) {
|
18
|
-
// Skip over computed properties for now.
|
19
|
-
// e.g. `{ [foo]: { ... } }`
|
20
|
-
return;
|
21
|
-
}
|
22
|
-
|
23
|
-
if (
|
24
|
-
property.type === 'ExperimentalSpreadProperty' ||
|
25
|
-
property.type === 'SpreadElement'
|
26
|
-
) {
|
27
|
-
// Skip over object spread for now.
|
28
|
-
// e.g. `{ ...foo }`
|
29
|
-
return;
|
30
|
-
}
|
31
|
-
|
32
|
-
const className = property.key.value || property.key.name;
|
33
|
-
if (!isCamelCase(className)) {
|
34
|
-
context.report(
|
35
|
-
property,
|
36
|
-
`Class \`${className}\` must be camelCase in makeStyles.`
|
37
|
-
);
|
38
|
-
}
|
39
|
-
});
|
40
|
-
}
|
41
|
-
};
|
42
|
-
}
|
43
|
-
};
|
1
|
+
const { getStyesObj, isCamelCase } = require('../../util/tss');
|
2
|
+
|
3
|
+
module.exports = {
|
4
|
+
meta: {
|
5
|
+
type: 'problem'
|
6
|
+
},
|
7
|
+
create: function rule(context) {
|
8
|
+
return {
|
9
|
+
CallExpression(node) {
|
10
|
+
const stylesObj = getStyesObj(node);
|
11
|
+
|
12
|
+
if (stylesObj === undefined) {
|
13
|
+
return;
|
14
|
+
}
|
15
|
+
|
16
|
+
stylesObj.properties.forEach(property => {
|
17
|
+
if (property.computed) {
|
18
|
+
// Skip over computed properties for now.
|
19
|
+
// e.g. `{ [foo]: { ... } }`
|
20
|
+
return;
|
21
|
+
}
|
22
|
+
|
23
|
+
if (
|
24
|
+
property.type === 'ExperimentalSpreadProperty' ||
|
25
|
+
property.type === 'SpreadElement'
|
26
|
+
) {
|
27
|
+
// Skip over object spread for now.
|
28
|
+
// e.g. `{ ...foo }`
|
29
|
+
return;
|
30
|
+
}
|
31
|
+
|
32
|
+
const className = property.key.value || property.key.name;
|
33
|
+
if (!isCamelCase(className)) {
|
34
|
+
context.report(
|
35
|
+
property,
|
36
|
+
`Class \`${className}\` must be camelCase in makeStyles.`
|
37
|
+
);
|
38
|
+
}
|
39
|
+
});
|
40
|
+
}
|
41
|
+
};
|
42
|
+
}
|
43
|
+
};
|
@@ -1,58 +1,58 @@
|
|
1
|
-
const { getStyesObj } = require('../../util/tss');
|
2
|
-
|
3
|
-
module.exports = {
|
4
|
-
meta: {
|
5
|
-
type: 'problem',
|
6
|
-
docs: {
|
7
|
-
description:
|
8
|
-
'Enforce the use of color variables instead of color codes within makeStyles'
|
9
|
-
}
|
10
|
-
},
|
11
|
-
create: function (context) {
|
12
|
-
const parserOptions = context.parserOptions;
|
13
|
-
if (!parserOptions || !parserOptions.project) {
|
14
|
-
return {};
|
15
|
-
}
|
16
|
-
|
17
|
-
return {
|
18
|
-
CallExpression(node) {
|
19
|
-
const stylesObj = getStyesObj(node);
|
20
|
-
if (!stylesObj) {
|
21
|
-
return;
|
22
|
-
}
|
23
|
-
|
24
|
-
// Check for color codes inside the stylesObj
|
25
|
-
function checkColorLiteral(value) {
|
26
|
-
if (value.type === 'Literal' && typeof value.value === 'string') {
|
27
|
-
const colorCodePattern =
|
28
|
-
/#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})|rgb\?\(\s*(\d{1,3}\s*,\s*){2}\d{1,3}(?:\s*,\s*\d*(?:\.\d+)?)?\s*\)/g;
|
29
|
-
const isColorCode = colorCodePattern.test(value.value);
|
30
|
-
if (isColorCode) {
|
31
|
-
context.report({
|
32
|
-
node: value,
|
33
|
-
message:
|
34
|
-
'Use color variables instead of color codes in makeStyles.'
|
35
|
-
});
|
36
|
-
}
|
37
|
-
}
|
38
|
-
}
|
39
|
-
|
40
|
-
function loopStylesObj(obj) {
|
41
|
-
if (obj && obj.type === 'ObjectExpression') {
|
42
|
-
obj.properties.forEach(property => {
|
43
|
-
if (property.type === 'Property' && property.value) {
|
44
|
-
if (property.value.type === 'ObjectExpression') {
|
45
|
-
loopStylesObj(property.value);
|
46
|
-
} else {
|
47
|
-
checkColorLiteral(property.value);
|
48
|
-
}
|
49
|
-
}
|
50
|
-
});
|
51
|
-
}
|
52
|
-
}
|
53
|
-
|
54
|
-
loopStylesObj(stylesObj);
|
55
|
-
}
|
56
|
-
};
|
57
|
-
}
|
58
|
-
};
|
1
|
+
const { getStyesObj } = require('../../util/tss');
|
2
|
+
|
3
|
+
module.exports = {
|
4
|
+
meta: {
|
5
|
+
type: 'problem',
|
6
|
+
docs: {
|
7
|
+
description:
|
8
|
+
'Enforce the use of color variables instead of color codes within makeStyles'
|
9
|
+
}
|
10
|
+
},
|
11
|
+
create: function (context) {
|
12
|
+
const parserOptions = context.parserOptions;
|
13
|
+
if (!parserOptions || !parserOptions.project) {
|
14
|
+
return {};
|
15
|
+
}
|
16
|
+
|
17
|
+
return {
|
18
|
+
CallExpression(node) {
|
19
|
+
const stylesObj = getStyesObj(node);
|
20
|
+
if (!stylesObj) {
|
21
|
+
return;
|
22
|
+
}
|
23
|
+
|
24
|
+
// Check for color codes inside the stylesObj
|
25
|
+
function checkColorLiteral(value) {
|
26
|
+
if (value.type === 'Literal' && typeof value.value === 'string') {
|
27
|
+
const colorCodePattern =
|
28
|
+
/#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})|rgb\?\(\s*(\d{1,3}\s*,\s*){2}\d{1,3}(?:\s*,\s*\d*(?:\.\d+)?)?\s*\)/g;
|
29
|
+
const isColorCode = colorCodePattern.test(value.value);
|
30
|
+
if (isColorCode) {
|
31
|
+
context.report({
|
32
|
+
node: value,
|
33
|
+
message:
|
34
|
+
'Use color variables instead of color codes in makeStyles.'
|
35
|
+
});
|
36
|
+
}
|
37
|
+
}
|
38
|
+
}
|
39
|
+
|
40
|
+
function loopStylesObj(obj) {
|
41
|
+
if (obj && obj.type === 'ObjectExpression') {
|
42
|
+
obj.properties.forEach(property => {
|
43
|
+
if (property.type === 'Property' && property.value) {
|
44
|
+
if (property.value.type === 'ObjectExpression') {
|
45
|
+
loopStylesObj(property.value);
|
46
|
+
} else {
|
47
|
+
checkColorLiteral(property.value);
|
48
|
+
}
|
49
|
+
}
|
50
|
+
});
|
51
|
+
}
|
52
|
+
}
|
53
|
+
|
54
|
+
loopStylesObj(stylesObj);
|
55
|
+
}
|
56
|
+
};
|
57
|
+
}
|
58
|
+
};
|