@atlaskit/eslint-plugin-design-system 8.23.0 → 8.23.2
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/CHANGELOG.md +12 -0
- package/dist/cjs/ast-nodes/function-call.js +48 -0
- package/dist/cjs/ast-nodes/import.js +49 -0
- package/dist/cjs/ast-nodes/index.js +40 -0
- package/dist/cjs/ast-nodes/jsx-attribute.js +64 -0
- package/dist/cjs/ast-nodes/jsx-element.js +55 -0
- package/dist/cjs/ast-nodes/root.js +34 -0
- package/dist/cjs/rules/ensure-design-token-usage/error-boundary.js +24 -0
- package/dist/cjs/rules/ensure-design-token-usage/index.js +208 -177
- package/dist/cjs/rules/use-primitives/index.js +6 -76
- package/dist/cjs/rules/use-primitives/transformers/emotion-css/index.js +168 -0
- package/dist/cjs/rules/use-primitives/transformers/emotion-css/supported.js +52 -0
- package/dist/cjs/rules/use-primitives/utils/is-valid-css-properties-to-transform.js +3 -0
- package/dist/es2019/ast-nodes/function-call.js +42 -0
- package/dist/es2019/ast-nodes/import.js +42 -0
- package/dist/es2019/ast-nodes/index.js +5 -0
- package/dist/es2019/ast-nodes/jsx-attribute.js +59 -0
- package/dist/es2019/ast-nodes/jsx-element.js +50 -0
- package/dist/es2019/ast-nodes/root.js +28 -0
- package/dist/es2019/rules/ensure-design-token-usage/error-boundary.js +19 -0
- package/dist/es2019/rules/ensure-design-token-usage/index.js +33 -16
- package/dist/es2019/rules/use-primitives/index.js +9 -79
- package/dist/es2019/rules/use-primitives/transformers/emotion-css/index.js +159 -0
- package/dist/es2019/rules/use-primitives/transformers/emotion-css/supported.js +46 -0
- package/dist/es2019/rules/use-primitives/utils/is-valid-css-properties-to-transform.js +3 -0
- package/dist/esm/ast-nodes/function-call.js +42 -0
- package/dist/esm/ast-nodes/import.js +43 -0
- package/dist/esm/ast-nodes/index.js +5 -0
- package/dist/esm/ast-nodes/jsx-attribute.js +59 -0
- package/dist/esm/ast-nodes/jsx-element.js +50 -0
- package/dist/esm/ast-nodes/root.js +28 -0
- package/dist/esm/rules/ensure-design-token-usage/error-boundary.js +18 -0
- package/dist/esm/rules/ensure-design-token-usage/index.js +208 -177
- package/dist/esm/rules/use-primitives/index.js +9 -79
- package/dist/esm/rules/use-primitives/transformers/emotion-css/index.js +158 -0
- package/dist/esm/rules/use-primitives/transformers/emotion-css/supported.js +46 -0
- package/dist/esm/rules/use-primitives/utils/is-valid-css-properties-to-transform.js +3 -0
- package/dist/types/ast-nodes/function-call.d.ts +21 -0
- package/dist/types/ast-nodes/import.d.ts +16 -0
- package/dist/types/ast-nodes/index.d.ts +5 -0
- package/dist/types/ast-nodes/jsx-attribute.d.ts +26 -0
- package/dist/types/ast-nodes/jsx-element.d.ts +21 -0
- package/dist/types/ast-nodes/root.d.ts +19 -0
- package/dist/types/rules/ensure-design-token-usage/error-boundary.d.ts +11 -0
- package/dist/types/rules/ensure-design-token-usage/types.d.ts +1 -0
- package/dist/types/rules/use-primitives/transformers/emotion-css/index.d.ts +35 -0
- package/dist/types/rules/use-primitives/transformers/emotion-css/supported.d.ts +9 -0
- package/dist/types-ts4.5/ast-nodes/function-call.d.ts +21 -0
- package/dist/types-ts4.5/ast-nodes/import.d.ts +16 -0
- package/dist/types-ts4.5/ast-nodes/index.d.ts +5 -0
- package/dist/types-ts4.5/ast-nodes/jsx-attribute.d.ts +26 -0
- package/dist/types-ts4.5/ast-nodes/jsx-element.d.ts +21 -0
- package/dist/types-ts4.5/ast-nodes/root.d.ts +19 -0
- package/dist/types-ts4.5/rules/ensure-design-token-usage/error-boundary.d.ts +11 -0
- package/dist/types-ts4.5/rules/ensure-design-token-usage/types.d.ts +1 -0
- package/dist/types-ts4.5/rules/use-primitives/transformers/emotion-css/index.d.ts +35 -0
- package/dist/types-ts4.5/rules/use-primitives/transformers/emotion-css/supported.d.ts +9 -0
- package/package.json +1 -1
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
+
/* eslint-disable @repo/internal/react/require-jsdoc */
|
|
3
|
+
|
|
4
|
+
import { getIdentifierInParentScope, isNodeOfType } from 'eslint-codemod-utils';
|
|
5
|
+
import * as ast from '../../../../ast-nodes';
|
|
6
|
+
import { getVariableDefinitionValue, getVariableUsagesCount, isValidCssPropertiesToTransform } from '../../utils';
|
|
7
|
+
import { cssToXcssTransformer } from '../css-to-xcss';
|
|
8
|
+
import * as supported from './supported';
|
|
9
|
+
export var EmotionCSS = {
|
|
10
|
+
lint: function lint(node, _ref) {
|
|
11
|
+
var context = _ref.context,
|
|
12
|
+
config = _ref.config;
|
|
13
|
+
if (!isNodeOfType(node, 'JSXElement')) {
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
// Check whether all criteria needed to make a transformation are met
|
|
18
|
+
if (!EmotionCSS._check(node, {
|
|
19
|
+
context: context,
|
|
20
|
+
config: config
|
|
21
|
+
})) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
context.report({
|
|
25
|
+
node: node.openingElement,
|
|
26
|
+
messageId: 'preferPrimitivesBox',
|
|
27
|
+
suggest: [{
|
|
28
|
+
desc: "Convert to Box",
|
|
29
|
+
fix: EmotionCSS._fix(node, {
|
|
30
|
+
context: context
|
|
31
|
+
})
|
|
32
|
+
}]
|
|
33
|
+
});
|
|
34
|
+
},
|
|
35
|
+
_check: function _check(node, _ref2) {
|
|
36
|
+
var _cssVariableValue$nod, _cssVariableValue$nod2;
|
|
37
|
+
var context = _ref2.context,
|
|
38
|
+
config = _ref2.config;
|
|
39
|
+
if (!config.patterns.includes('compiled-css-function')) {
|
|
40
|
+
return false;
|
|
41
|
+
}
|
|
42
|
+
if (!isNodeOfType(node, 'JSXElement')) {
|
|
43
|
+
return false;
|
|
44
|
+
}
|
|
45
|
+
var elementName = ast.JSXElement.getName(node);
|
|
46
|
+
if (!elementName) {
|
|
47
|
+
return false;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
// Currently we only support `div`. This may change in future.
|
|
51
|
+
if (!supported.elements.includes(elementName)) {
|
|
52
|
+
return false;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// Ignore elements that contain dangerous attributes like `id`.
|
|
56
|
+
if (!this._containsOnlySupportedAttributes(node)) {
|
|
57
|
+
return false;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
// Currently we don't transform anything to `Box` unless it defines styles
|
|
61
|
+
var cssAttr = ast.JSXElement.getAttributeByName(node, 'css');
|
|
62
|
+
if (!cssAttr) {
|
|
63
|
+
return false;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
// Get `myStyles` in `css={myStyles}` as a string so we can search for the `const myStyles` VariableDefinition
|
|
67
|
+
var cssAttrValue = ast.JSXAttribute.getValue(cssAttr);
|
|
68
|
+
if ((cssAttrValue === null || cssAttrValue === void 0 ? void 0 : cssAttrValue.type) !== 'ExpressionStatement') {
|
|
69
|
+
return false;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// TODO: Everything below this line could be refactored to use `ast-nodes`.
|
|
73
|
+
|
|
74
|
+
// Bail if the styles are used on multiple JSXElements
|
|
75
|
+
if (getVariableUsagesCount(cssAttrValue.value, context) !== 1) {
|
|
76
|
+
return false;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// Find where `myStyles` is defined. We're looking for `const myStyles = css({...})`
|
|
80
|
+
var cssVariableDefinition = getIdentifierInParentScope(context.getScope(), cssAttrValue.value);
|
|
81
|
+
var cssVariableValue = getVariableDefinitionValue(cssVariableDefinition);
|
|
82
|
+
// Check if `cssVariableValue` is a function called `css()`
|
|
83
|
+
if (ast.FunctionCall.getName(cssVariableValue === null || cssVariableValue === void 0 || (_cssVariableValue$nod = cssVariableValue.node) === null || _cssVariableValue$nod === void 0 ? void 0 : _cssVariableValue$nod.init) !== 'css') {
|
|
84
|
+
return false;
|
|
85
|
+
}
|
|
86
|
+
if (!isValidCssPropertiesToTransform(cssVariableValue === null || cssVariableValue === void 0 || (_cssVariableValue$nod2 = cssVariableValue.node) === null || _cssVariableValue$nod2 === void 0 ? void 0 : _cssVariableValue$nod2.init, config)) {
|
|
87
|
+
return false;
|
|
88
|
+
}
|
|
89
|
+
var importDeclaration = ast.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/primitives');
|
|
90
|
+
|
|
91
|
+
// If there is more than one `@atlaskit/primitives` import, then it becomes difficult to determine which import to transform
|
|
92
|
+
if (importDeclaration.length > 1) {
|
|
93
|
+
return false;
|
|
94
|
+
}
|
|
95
|
+
return true;
|
|
96
|
+
},
|
|
97
|
+
_fix: function _fix(node, _ref3) {
|
|
98
|
+
var _this = this;
|
|
99
|
+
var context = _ref3.context;
|
|
100
|
+
return function (fixer) {
|
|
101
|
+
var importFix = _this._upsertImportDeclaration({
|
|
102
|
+
module: '@atlaskit/primitives',
|
|
103
|
+
specifiers: ['Box', 'xcss']
|
|
104
|
+
}, context, fixer);
|
|
105
|
+
var cssAttr = ast.JSXElement.getAttributeByName(node, 'css'); // Can strongly assert the type here, because we validated it exists in `check()`.
|
|
106
|
+
var attributeFix = ast.JSXAttribute.updateName(cssAttr, 'xcss', fixer);
|
|
107
|
+
var elementNameFixes = ast.JSXElement.updateName(node, 'Box', fixer);
|
|
108
|
+
var cssToXcssTransform = cssToXcssTransformer(node, context, fixer);
|
|
109
|
+
return [importFix, attributeFix].concat(_toConsumableArray(elementNameFixes), _toConsumableArray(cssToXcssTransform)).filter(function (fix) {
|
|
110
|
+
return Boolean(fix);
|
|
111
|
+
}); // Some of the transformers can return arrays with undefined, so filter them out
|
|
112
|
+
};
|
|
113
|
+
},
|
|
114
|
+
/**
|
|
115
|
+
* Check that every attribute in the JSXElement is something we support.
|
|
116
|
+
* We do this via a whitelist in `this.attributes`. The result is we exclude
|
|
117
|
+
* dangerous attrs like `id` and `style`.
|
|
118
|
+
*/
|
|
119
|
+
_containsOnlySupportedAttributes: function _containsOnlySupportedAttributes(node) {
|
|
120
|
+
var attrs = ast.JSXElement.getAttributes(node);
|
|
121
|
+
return attrs.every(function (attr) {
|
|
122
|
+
if (!isNodeOfType(attr, 'JSXAttribute')) {
|
|
123
|
+
return false;
|
|
124
|
+
}
|
|
125
|
+
if (!isNodeOfType(attr.name, 'JSXIdentifier')) {
|
|
126
|
+
return false;
|
|
127
|
+
}
|
|
128
|
+
return supported.attributes.includes(attr.name.name);
|
|
129
|
+
});
|
|
130
|
+
},
|
|
131
|
+
/**
|
|
132
|
+
* Currently this is defined here because it's not very general purpose.
|
|
133
|
+
* If we were to move this to `ast-nodes`, half the implementation would be in `Root`,
|
|
134
|
+
* and the other half would be in `Import`.
|
|
135
|
+
*
|
|
136
|
+
* TODO: Refactor and move to `ast-nodes`
|
|
137
|
+
*
|
|
138
|
+
* Note: It does not handle default imports, namespace imports, or aliased imports.
|
|
139
|
+
*/
|
|
140
|
+
_upsertImportDeclaration: function _upsertImportDeclaration(_ref4, context, fixer) {
|
|
141
|
+
var module = _ref4.module,
|
|
142
|
+
specifiers = _ref4.specifiers;
|
|
143
|
+
// Find any imports that match the packageName
|
|
144
|
+
var root = context.getSourceCode().ast.body;
|
|
145
|
+
var importDeclarations = ast.Root.findImportsByModule(root, module);
|
|
146
|
+
|
|
147
|
+
// The import doesn't exist yet, we can just insert a whole new one
|
|
148
|
+
if (importDeclarations.length === 0) {
|
|
149
|
+
return ast.Root.insertImport(root, {
|
|
150
|
+
module: module,
|
|
151
|
+
specifiers: specifiers
|
|
152
|
+
}, fixer);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
// The import exists so, modify the existing one
|
|
156
|
+
return ast.Import.insertNamedSpecifiers(importDeclarations[0], specifiers, fixer);
|
|
157
|
+
}
|
|
158
|
+
};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
export var elements = ['div'];
|
|
2
|
+
export var attributes = ['css'
|
|
3
|
+
// 'data-testid'
|
|
4
|
+
];
|
|
5
|
+
|
|
6
|
+
// TODO: https://product-fabric.atlassian.net/browse/DSP-16054
|
|
7
|
+
var spaceTokenMap = {
|
|
8
|
+
'0px': 'space.0',
|
|
9
|
+
'2px': 'space.025',
|
|
10
|
+
'4px': 'space.050',
|
|
11
|
+
'6px': 'space.075',
|
|
12
|
+
'8px': 'space.100',
|
|
13
|
+
'12px': 'space.150',
|
|
14
|
+
'16px': 'space.200',
|
|
15
|
+
'20px': 'space.250',
|
|
16
|
+
'24px': 'space.300',
|
|
17
|
+
'32px': 'space.400',
|
|
18
|
+
'40px': 'space.500',
|
|
19
|
+
'48px': 'space.600',
|
|
20
|
+
'64px': 'space.800',
|
|
21
|
+
'80px': 'space.1000'
|
|
22
|
+
};
|
|
23
|
+
export var styles = {
|
|
24
|
+
padding: spaceTokenMap,
|
|
25
|
+
paddingBlock: spaceTokenMap,
|
|
26
|
+
paddingBlockEnd: spaceTokenMap,
|
|
27
|
+
paddingBlockStart: spaceTokenMap,
|
|
28
|
+
paddingBottom: spaceTokenMap,
|
|
29
|
+
paddingInline: spaceTokenMap,
|
|
30
|
+
paddingInlineEnd: spaceTokenMap,
|
|
31
|
+
paddingInlineStart: spaceTokenMap,
|
|
32
|
+
paddingLeft: spaceTokenMap,
|
|
33
|
+
paddingRight: spaceTokenMap,
|
|
34
|
+
paddingTop: spaceTokenMap,
|
|
35
|
+
margin: spaceTokenMap,
|
|
36
|
+
marginBlock: spaceTokenMap,
|
|
37
|
+
marginBlockEnd: spaceTokenMap,
|
|
38
|
+
marginBlockStart: spaceTokenMap,
|
|
39
|
+
marginBottom: spaceTokenMap,
|
|
40
|
+
marginInline: spaceTokenMap,
|
|
41
|
+
marginInlineEnd: spaceTokenMap,
|
|
42
|
+
marginInlineStart: spaceTokenMap,
|
|
43
|
+
marginLeft: spaceTokenMap,
|
|
44
|
+
marginRight: spaceTokenMap,
|
|
45
|
+
marginTop: spaceTokenMap
|
|
46
|
+
};
|
|
@@ -5,6 +5,9 @@ import { isNodeOfType } from 'eslint-codemod-utils';
|
|
|
5
5
|
import { supportedStylesMap } from '../transformers/css-to-xcss';
|
|
6
6
|
import { convertASTObjectExpressionToJSObject } from './convert-ast-object-expression-to-js-object';
|
|
7
7
|
export var isValidCssPropertiesToTransform = function isValidCssPropertiesToTransform(node, config) {
|
|
8
|
+
if (!node) {
|
|
9
|
+
return false;
|
|
10
|
+
}
|
|
8
11
|
var cssObjectExpression = node.arguments[0];
|
|
9
12
|
// Bail on empty object calls
|
|
10
13
|
if (!cssObjectExpression || !isNodeOfType(cssObjectExpression, 'ObjectExpression')) {
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { Rule } from 'eslint';
|
|
2
|
+
import { CallExpression, ObjectExpression } from 'eslint-codemod-utils';
|
|
3
|
+
export declare const FunctionCall: {
|
|
4
|
+
getName(node: CallExpression): string | undefined;
|
|
5
|
+
updateName(node: CallExpression, newName: string, fixer: Rule.RuleFixer): Rule.Fix;
|
|
6
|
+
/**
|
|
7
|
+
* Function arguments can be many things:
|
|
8
|
+
* `css(myStyles, () => {}, undefined, 'literal', ...rest) // etc`
|
|
9
|
+
* They all need slightly different treatment.
|
|
10
|
+
*
|
|
11
|
+
* Currently 'getArgumentAtPos' only implements strategies for Literals and ObjectExpressions.
|
|
12
|
+
* If you need to support another type of arg, add it, and update the type.
|
|
13
|
+
*/
|
|
14
|
+
getArgumentAtPos(node: CallExpression, pos: number): {
|
|
15
|
+
type: 'Literal';
|
|
16
|
+
value: string;
|
|
17
|
+
} | {
|
|
18
|
+
type: 'ObjectExpression';
|
|
19
|
+
value: ObjectExpression;
|
|
20
|
+
} | undefined;
|
|
21
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { Rule } from 'eslint';
|
|
2
|
+
import { type ImportDeclaration } from 'eslint-codemod-utils';
|
|
3
|
+
export declare const Import: {
|
|
4
|
+
/**
|
|
5
|
+
* Note: fixes can't overlap, which means this will fail:
|
|
6
|
+
* ```
|
|
7
|
+
* const importNode = Root.findImportByModule('@atlaskit/primitives')
|
|
8
|
+
* Import.insertNamedSpecifier(importNode, 'Box')
|
|
9
|
+
* Import.insertNamedSpecifier(importNode, 'xcss')
|
|
10
|
+
* ```
|
|
11
|
+
*
|
|
12
|
+
* For this reason `insertNamedSpecifiers` accepts a `specifiers` array, so you can group all inserts together.
|
|
13
|
+
*/
|
|
14
|
+
insertNamedSpecifiers(node: ImportDeclaration, specifiers: string[], fixer: Rule.RuleFixer): Rule.Fix | undefined;
|
|
15
|
+
containsNamedSpecifier(node: ImportDeclaration, name: string): boolean;
|
|
16
|
+
};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { Rule } from 'eslint';
|
|
2
|
+
import { JSXAttribute } from 'eslint-codemod-utils';
|
|
3
|
+
declare const HelperJSXAttribute: {
|
|
4
|
+
getName(node: JSXAttribute): string;
|
|
5
|
+
updateName(node: JSXAttribute, name: string, fixer: Rule.RuleFixer): Rule.Fix;
|
|
6
|
+
/**
|
|
7
|
+
* A JSXAttribute value can be many things:
|
|
8
|
+
* - css='myStyles'
|
|
9
|
+
* - css={myStyles}
|
|
10
|
+
* - css={[styles1, styles2]}
|
|
11
|
+
* - header={<></>}
|
|
12
|
+
* - css={styleMap.header}
|
|
13
|
+
* - css={...styles}
|
|
14
|
+
*
|
|
15
|
+
* Currently, `getValue` has only implemented strategies for when the value is a string, or an ExpressionStatement
|
|
16
|
+
* If you need additional functionality add it, and set the correct `type` on the returned object
|
|
17
|
+
*/
|
|
18
|
+
getValue(node: JSXAttribute): {
|
|
19
|
+
type: 'ExpressionStatement';
|
|
20
|
+
value: string;
|
|
21
|
+
} | {
|
|
22
|
+
type: 'Literal';
|
|
23
|
+
value: string;
|
|
24
|
+
} | undefined;
|
|
25
|
+
};
|
|
26
|
+
export { HelperJSXAttribute as JSXAttribute };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { Rule } from 'eslint';
|
|
2
|
+
import { JSXAttribute, JSXElement, JSXSpreadAttribute } from 'eslint-codemod-utils';
|
|
3
|
+
export declare const JSXElementHelper: {
|
|
4
|
+
/**
|
|
5
|
+
* Names of JSXElements can be any of:
|
|
6
|
+
* `<Component></Component>` - (JSXIdentifier)
|
|
7
|
+
* `<MyComponents.Component></MyComponents.Component>` - `MyComponents` is a namespace (JSXNamespacedName)
|
|
8
|
+
* `<MyComponents.Component></MyComponents.Component>` - `MyComponents` is an object (JSXMemberExpression)
|
|
9
|
+
*
|
|
10
|
+
* Getting the name of a JSXMemberExpression is difficult, because object can contain objects, which is recursively defined in the AST.
|
|
11
|
+
* e.g. getting the name of `<MyComponents.PresentationLayer.LeftSideBar.Header />` would require `getName` to recursively resolve all parts of the name.
|
|
12
|
+
* `getName` does not currently have this functionality. Add it if you need it.
|
|
13
|
+
*/
|
|
14
|
+
getName(node: JSXElement): string;
|
|
15
|
+
updateName(node: JSXElement, newName: string, fixer: Rule.RuleFixer): Rule.Fix[];
|
|
16
|
+
isSelfClosing(node: JSXElement): boolean;
|
|
17
|
+
getAttributes(node: JSXElement): (JSXAttribute | JSXSpreadAttribute)[];
|
|
18
|
+
getAttributeByName(node: JSXElement, name: string): JSXAttribute | undefined;
|
|
19
|
+
containsSpreadAttributes(node: JSXElement): boolean;
|
|
20
|
+
};
|
|
21
|
+
export { JSXElementHelper as JSXElement };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/// <reference types="node" />
|
|
2
|
+
import type { Rule } from 'eslint';
|
|
3
|
+
import { Directive, ImportDeclaration, insertImportDeclaration, ModuleDeclaration, Statement } from 'eslint-codemod-utils';
|
|
4
|
+
type ImportData = Parameters<typeof insertImportDeclaration>[1];
|
|
5
|
+
export declare const Root: {
|
|
6
|
+
/**
|
|
7
|
+
* Note: This can return multiple ImportDeclarations for cases like:
|
|
8
|
+
* ```
|
|
9
|
+
* import { Stack } from '@atlaskit/primitives'
|
|
10
|
+
* import type { StackProps } from '@atlaskit/primitives'
|
|
11
|
+
* ```
|
|
12
|
+
*/
|
|
13
|
+
findImportsByModule(root: (Directive | Statement | ModuleDeclaration)[], name: string): ImportDeclaration[];
|
|
14
|
+
insertImport(root: (Directive | Statement | ModuleDeclaration)[], data: {
|
|
15
|
+
module: string;
|
|
16
|
+
specifiers: ImportData;
|
|
17
|
+
}, fixer: Rule.RuleFixer): Rule.Fix;
|
|
18
|
+
};
|
|
19
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { RuleConfig } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* ESLint rules should NEVER throw exceptions, because that breaks the VSCode ESLint server
|
|
4
|
+
* (and probably the IntelliJ one too), which causes linting to fail in a file.
|
|
5
|
+
*
|
|
6
|
+
* It also breaks CI, which was the reason this error boundary was added. It's a final
|
|
7
|
+
* catch all.
|
|
8
|
+
*/
|
|
9
|
+
export declare const errorBoundary: (func: () => void, { config }: {
|
|
10
|
+
config: RuleConfig;
|
|
11
|
+
}) => void;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { Rule } from 'eslint';
|
|
2
|
+
import { JSXElement } from 'eslint-codemod-utils';
|
|
3
|
+
import { RuleConfig } from '../../config';
|
|
4
|
+
interface MetaData {
|
|
5
|
+
context: Rule.RuleContext;
|
|
6
|
+
config: RuleConfig;
|
|
7
|
+
}
|
|
8
|
+
type FixFunction = (fixer: Rule.RuleFixer) => Rule.Fix[];
|
|
9
|
+
export declare const EmotionCSS: {
|
|
10
|
+
lint(node: Rule.Node, { context, config }: MetaData): void;
|
|
11
|
+
_check(node: Rule.Node, { context, config }: MetaData): boolean;
|
|
12
|
+
_fix(node: JSXElement, { context }: {
|
|
13
|
+
context: Rule.RuleContext;
|
|
14
|
+
}): FixFunction;
|
|
15
|
+
/**
|
|
16
|
+
* Check that every attribute in the JSXElement is something we support.
|
|
17
|
+
* We do this via a whitelist in `this.attributes`. The result is we exclude
|
|
18
|
+
* dangerous attrs like `id` and `style`.
|
|
19
|
+
*/
|
|
20
|
+
_containsOnlySupportedAttributes(node: JSXElement): boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Currently this is defined here because it's not very general purpose.
|
|
23
|
+
* If we were to move this to `ast-nodes`, half the implementation would be in `Root`,
|
|
24
|
+
* and the other half would be in `Import`.
|
|
25
|
+
*
|
|
26
|
+
* TODO: Refactor and move to `ast-nodes`
|
|
27
|
+
*
|
|
28
|
+
* Note: It does not handle default imports, namespace imports, or aliased imports.
|
|
29
|
+
*/
|
|
30
|
+
_upsertImportDeclaration({ module, specifiers, }: {
|
|
31
|
+
module: string;
|
|
32
|
+
specifiers: string[];
|
|
33
|
+
}, context: Rule.RuleContext, fixer: Rule.RuleFixer): Rule.Fix | undefined;
|
|
34
|
+
};
|
|
35
|
+
export {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { Rule } from 'eslint';
|
|
2
|
+
import { CallExpression, ObjectExpression } from 'eslint-codemod-utils';
|
|
3
|
+
export declare const FunctionCall: {
|
|
4
|
+
getName(node: CallExpression): string | undefined;
|
|
5
|
+
updateName(node: CallExpression, newName: string, fixer: Rule.RuleFixer): Rule.Fix;
|
|
6
|
+
/**
|
|
7
|
+
* Function arguments can be many things:
|
|
8
|
+
* `css(myStyles, () => {}, undefined, 'literal', ...rest) // etc`
|
|
9
|
+
* They all need slightly different treatment.
|
|
10
|
+
*
|
|
11
|
+
* Currently 'getArgumentAtPos' only implements strategies for Literals and ObjectExpressions.
|
|
12
|
+
* If you need to support another type of arg, add it, and update the type.
|
|
13
|
+
*/
|
|
14
|
+
getArgumentAtPos(node: CallExpression, pos: number): {
|
|
15
|
+
type: 'Literal';
|
|
16
|
+
value: string;
|
|
17
|
+
} | {
|
|
18
|
+
type: 'ObjectExpression';
|
|
19
|
+
value: ObjectExpression;
|
|
20
|
+
} | undefined;
|
|
21
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { Rule } from 'eslint';
|
|
2
|
+
import { type ImportDeclaration } from 'eslint-codemod-utils';
|
|
3
|
+
export declare const Import: {
|
|
4
|
+
/**
|
|
5
|
+
* Note: fixes can't overlap, which means this will fail:
|
|
6
|
+
* ```
|
|
7
|
+
* const importNode = Root.findImportByModule('@atlaskit/primitives')
|
|
8
|
+
* Import.insertNamedSpecifier(importNode, 'Box')
|
|
9
|
+
* Import.insertNamedSpecifier(importNode, 'xcss')
|
|
10
|
+
* ```
|
|
11
|
+
*
|
|
12
|
+
* For this reason `insertNamedSpecifiers` accepts a `specifiers` array, so you can group all inserts together.
|
|
13
|
+
*/
|
|
14
|
+
insertNamedSpecifiers(node: ImportDeclaration, specifiers: string[], fixer: Rule.RuleFixer): Rule.Fix | undefined;
|
|
15
|
+
containsNamedSpecifier(node: ImportDeclaration, name: string): boolean;
|
|
16
|
+
};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { Rule } from 'eslint';
|
|
2
|
+
import { JSXAttribute } from 'eslint-codemod-utils';
|
|
3
|
+
declare const HelperJSXAttribute: {
|
|
4
|
+
getName(node: JSXAttribute): string;
|
|
5
|
+
updateName(node: JSXAttribute, name: string, fixer: Rule.RuleFixer): Rule.Fix;
|
|
6
|
+
/**
|
|
7
|
+
* A JSXAttribute value can be many things:
|
|
8
|
+
* - css='myStyles'
|
|
9
|
+
* - css={myStyles}
|
|
10
|
+
* - css={[styles1, styles2]}
|
|
11
|
+
* - header={<></>}
|
|
12
|
+
* - css={styleMap.header}
|
|
13
|
+
* - css={...styles}
|
|
14
|
+
*
|
|
15
|
+
* Currently, `getValue` has only implemented strategies for when the value is a string, or an ExpressionStatement
|
|
16
|
+
* If you need additional functionality add it, and set the correct `type` on the returned object
|
|
17
|
+
*/
|
|
18
|
+
getValue(node: JSXAttribute): {
|
|
19
|
+
type: 'ExpressionStatement';
|
|
20
|
+
value: string;
|
|
21
|
+
} | {
|
|
22
|
+
type: 'Literal';
|
|
23
|
+
value: string;
|
|
24
|
+
} | undefined;
|
|
25
|
+
};
|
|
26
|
+
export { HelperJSXAttribute as JSXAttribute };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { Rule } from 'eslint';
|
|
2
|
+
import { JSXAttribute, JSXElement, JSXSpreadAttribute } from 'eslint-codemod-utils';
|
|
3
|
+
export declare const JSXElementHelper: {
|
|
4
|
+
/**
|
|
5
|
+
* Names of JSXElements can be any of:
|
|
6
|
+
* `<Component></Component>` - (JSXIdentifier)
|
|
7
|
+
* `<MyComponents.Component></MyComponents.Component>` - `MyComponents` is a namespace (JSXNamespacedName)
|
|
8
|
+
* `<MyComponents.Component></MyComponents.Component>` - `MyComponents` is an object (JSXMemberExpression)
|
|
9
|
+
*
|
|
10
|
+
* Getting the name of a JSXMemberExpression is difficult, because object can contain objects, which is recursively defined in the AST.
|
|
11
|
+
* e.g. getting the name of `<MyComponents.PresentationLayer.LeftSideBar.Header />` would require `getName` to recursively resolve all parts of the name.
|
|
12
|
+
* `getName` does not currently have this functionality. Add it if you need it.
|
|
13
|
+
*/
|
|
14
|
+
getName(node: JSXElement): string;
|
|
15
|
+
updateName(node: JSXElement, newName: string, fixer: Rule.RuleFixer): Rule.Fix[];
|
|
16
|
+
isSelfClosing(node: JSXElement): boolean;
|
|
17
|
+
getAttributes(node: JSXElement): (JSXAttribute | JSXSpreadAttribute)[];
|
|
18
|
+
getAttributeByName(node: JSXElement, name: string): JSXAttribute | undefined;
|
|
19
|
+
containsSpreadAttributes(node: JSXElement): boolean;
|
|
20
|
+
};
|
|
21
|
+
export { JSXElementHelper as JSXElement };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/// <reference types="node" />
|
|
2
|
+
import type { Rule } from 'eslint';
|
|
3
|
+
import { Directive, ImportDeclaration, insertImportDeclaration, ModuleDeclaration, Statement } from 'eslint-codemod-utils';
|
|
4
|
+
type ImportData = Parameters<typeof insertImportDeclaration>[1];
|
|
5
|
+
export declare const Root: {
|
|
6
|
+
/**
|
|
7
|
+
* Note: This can return multiple ImportDeclarations for cases like:
|
|
8
|
+
* ```
|
|
9
|
+
* import { Stack } from '@atlaskit/primitives'
|
|
10
|
+
* import type { StackProps } from '@atlaskit/primitives'
|
|
11
|
+
* ```
|
|
12
|
+
*/
|
|
13
|
+
findImportsByModule(root: (Directive | Statement | ModuleDeclaration)[], name: string): ImportDeclaration[];
|
|
14
|
+
insertImport(root: (Directive | Statement | ModuleDeclaration)[], data: {
|
|
15
|
+
module: string;
|
|
16
|
+
specifiers: ImportData;
|
|
17
|
+
}, fixer: Rule.RuleFixer): Rule.Fix;
|
|
18
|
+
};
|
|
19
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { RuleConfig } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* ESLint rules should NEVER throw exceptions, because that breaks the VSCode ESLint server
|
|
4
|
+
* (and probably the IntelliJ one too), which causes linting to fail in a file.
|
|
5
|
+
*
|
|
6
|
+
* It also breaks CI, which was the reason this error boundary was added. It's a final
|
|
7
|
+
* catch all.
|
|
8
|
+
*/
|
|
9
|
+
export declare const errorBoundary: (func: () => void, { config }: {
|
|
10
|
+
config: RuleConfig;
|
|
11
|
+
}) => void;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { Rule } from 'eslint';
|
|
2
|
+
import { JSXElement } from 'eslint-codemod-utils';
|
|
3
|
+
import { RuleConfig } from '../../config';
|
|
4
|
+
interface MetaData {
|
|
5
|
+
context: Rule.RuleContext;
|
|
6
|
+
config: RuleConfig;
|
|
7
|
+
}
|
|
8
|
+
type FixFunction = (fixer: Rule.RuleFixer) => Rule.Fix[];
|
|
9
|
+
export declare const EmotionCSS: {
|
|
10
|
+
lint(node: Rule.Node, { context, config }: MetaData): void;
|
|
11
|
+
_check(node: Rule.Node, { context, config }: MetaData): boolean;
|
|
12
|
+
_fix(node: JSXElement, { context }: {
|
|
13
|
+
context: Rule.RuleContext;
|
|
14
|
+
}): FixFunction;
|
|
15
|
+
/**
|
|
16
|
+
* Check that every attribute in the JSXElement is something we support.
|
|
17
|
+
* We do this via a whitelist in `this.attributes`. The result is we exclude
|
|
18
|
+
* dangerous attrs like `id` and `style`.
|
|
19
|
+
*/
|
|
20
|
+
_containsOnlySupportedAttributes(node: JSXElement): boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Currently this is defined here because it's not very general purpose.
|
|
23
|
+
* If we were to move this to `ast-nodes`, half the implementation would be in `Root`,
|
|
24
|
+
* and the other half would be in `Import`.
|
|
25
|
+
*
|
|
26
|
+
* TODO: Refactor and move to `ast-nodes`
|
|
27
|
+
*
|
|
28
|
+
* Note: It does not handle default imports, namespace imports, or aliased imports.
|
|
29
|
+
*/
|
|
30
|
+
_upsertImportDeclaration({ module, specifiers, }: {
|
|
31
|
+
module: string;
|
|
32
|
+
specifiers: string[];
|
|
33
|
+
}, context: Rule.RuleContext, fixer: Rule.RuleFixer): Rule.Fix | undefined;
|
|
34
|
+
};
|
|
35
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/eslint-plugin-design-system",
|
|
3
3
|
"description": "The essential plugin for use with the Atlassian Design System.",
|
|
4
|
-
"version": "8.23.
|
|
4
|
+
"version": "8.23.2",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"registry": "https://registry.npmjs.org/"
|