@atlaskit/eslint-plugin-design-system 8.23.1 → 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.
Files changed (48) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/ast-nodes/function-call.js +48 -0
  3. package/dist/cjs/ast-nodes/import.js +49 -0
  4. package/dist/cjs/ast-nodes/index.js +40 -0
  5. package/dist/cjs/ast-nodes/jsx-attribute.js +64 -0
  6. package/dist/cjs/ast-nodes/jsx-element.js +55 -0
  7. package/dist/cjs/ast-nodes/root.js +34 -0
  8. package/dist/cjs/rules/use-primitives/index.js +6 -76
  9. package/dist/cjs/rules/use-primitives/transformers/emotion-css/index.js +168 -0
  10. package/dist/cjs/rules/use-primitives/transformers/emotion-css/supported.js +52 -0
  11. package/dist/cjs/rules/use-primitives/utils/is-valid-css-properties-to-transform.js +3 -0
  12. package/dist/es2019/ast-nodes/function-call.js +42 -0
  13. package/dist/es2019/ast-nodes/import.js +42 -0
  14. package/dist/es2019/ast-nodes/index.js +5 -0
  15. package/dist/es2019/ast-nodes/jsx-attribute.js +59 -0
  16. package/dist/es2019/ast-nodes/jsx-element.js +50 -0
  17. package/dist/es2019/ast-nodes/root.js +28 -0
  18. package/dist/es2019/rules/use-primitives/index.js +9 -79
  19. package/dist/es2019/rules/use-primitives/transformers/emotion-css/index.js +159 -0
  20. package/dist/es2019/rules/use-primitives/transformers/emotion-css/supported.js +46 -0
  21. package/dist/es2019/rules/use-primitives/utils/is-valid-css-properties-to-transform.js +3 -0
  22. package/dist/esm/ast-nodes/function-call.js +42 -0
  23. package/dist/esm/ast-nodes/import.js +43 -0
  24. package/dist/esm/ast-nodes/index.js +5 -0
  25. package/dist/esm/ast-nodes/jsx-attribute.js +59 -0
  26. package/dist/esm/ast-nodes/jsx-element.js +50 -0
  27. package/dist/esm/ast-nodes/root.js +28 -0
  28. package/dist/esm/rules/use-primitives/index.js +9 -79
  29. package/dist/esm/rules/use-primitives/transformers/emotion-css/index.js +158 -0
  30. package/dist/esm/rules/use-primitives/transformers/emotion-css/supported.js +46 -0
  31. package/dist/esm/rules/use-primitives/utils/is-valid-css-properties-to-transform.js +3 -0
  32. package/dist/types/ast-nodes/function-call.d.ts +21 -0
  33. package/dist/types/ast-nodes/import.d.ts +16 -0
  34. package/dist/types/ast-nodes/index.d.ts +5 -0
  35. package/dist/types/ast-nodes/jsx-attribute.d.ts +26 -0
  36. package/dist/types/ast-nodes/jsx-element.d.ts +21 -0
  37. package/dist/types/ast-nodes/root.d.ts +19 -0
  38. package/dist/types/rules/use-primitives/transformers/emotion-css/index.d.ts +35 -0
  39. package/dist/types/rules/use-primitives/transformers/emotion-css/supported.d.ts +9 -0
  40. package/dist/types-ts4.5/ast-nodes/function-call.d.ts +21 -0
  41. package/dist/types-ts4.5/ast-nodes/import.d.ts +16 -0
  42. package/dist/types-ts4.5/ast-nodes/index.d.ts +5 -0
  43. package/dist/types-ts4.5/ast-nodes/jsx-attribute.d.ts +26 -0
  44. package/dist/types-ts4.5/ast-nodes/jsx-element.d.ts +21 -0
  45. package/dist/types-ts4.5/ast-nodes/root.d.ts +19 -0
  46. package/dist/types-ts4.5/rules/use-primitives/transformers/emotion-css/index.d.ts +35 -0
  47. package/dist/types-ts4.5/rules/use-primitives/transformers/emotion-css/supported.d.ts +9 -0
  48. package/package.json +1 -1
@@ -0,0 +1,50 @@
1
+ import { isNodeOfType, jsxIdentifier } from 'eslint-codemod-utils';
2
+ export var JSXElementHelper = {
3
+ /**
4
+ * Names of JSXElements can be any of:
5
+ * `<Component></Component>` - (JSXIdentifier)
6
+ * `<MyComponents.Component></MyComponents.Component>` - `MyComponents` is a namespace (JSXNamespacedName)
7
+ * `<MyComponents.Component></MyComponents.Component>` - `MyComponents` is an object (JSXMemberExpression)
8
+ *
9
+ * Getting the name of a JSXMemberExpression is difficult, because object can contain objects, which is recursively defined in the AST.
10
+ * e.g. getting the name of `<MyComponents.PresentationLayer.LeftSideBar.Header />` would require `getName` to recursively resolve all parts of the name.
11
+ * `getName` does not currently have this functionality. Add it if you need it.
12
+ */
13
+ getName: function getName(node) {
14
+ if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
15
+ // TODO: We may want to log this
16
+ return '';
17
+ }
18
+ return node.openingElement.name.name;
19
+ },
20
+ updateName: function updateName(node, newName, fixer) {
21
+ var isSelfClosing = JSXElementHelper.isSelfClosing(node);
22
+ var openingElementFix = fixer.replaceText(node.openingElement.name, jsxIdentifier(newName).toString());
23
+ if (isSelfClosing || !node.closingElement) {
24
+ return [openingElementFix];
25
+ }
26
+ var closingElementFix = fixer.replaceText(node.closingElement.name, jsxIdentifier(newName).toString());
27
+ return [openingElementFix, closingElementFix];
28
+ },
29
+ isSelfClosing: function isSelfClosing(node) {
30
+ return node.openingElement.selfClosing;
31
+ },
32
+ getAttributes: function getAttributes(node) {
33
+ return node.openingElement.attributes;
34
+ },
35
+ getAttributeByName: function getAttributeByName(node, name) {
36
+ return node.openingElement.attributes.find(function (attr) {
37
+ // Ignore anything other than JSXAttribute
38
+ if (!isNodeOfType(attr, 'JSXAttribute')) {
39
+ return false;
40
+ }
41
+ return attr.name.name === name;
42
+ });
43
+ },
44
+ containsSpreadAttributes: function containsSpreadAttributes(node) {
45
+ return node.openingElement.attributes.some(function (attr) {
46
+ return isNodeOfType(attr, 'JSXSpreadAttribute');
47
+ });
48
+ }
49
+ };
50
+ export { JSXElementHelper as JSXElement };
@@ -0,0 +1,28 @@
1
+ /* eslint-disable @repo/internal/react/require-jsdoc */
2
+
3
+ import { hasImportDeclaration, insertImportDeclaration, isNodeOfType } from 'eslint-codemod-utils';
4
+ // Little bit unreadable, but better than duplicating the type
5
+
6
+ export var Root = {
7
+ /**
8
+ * Note: This can return multiple ImportDeclarations for cases like:
9
+ * ```
10
+ * import { Stack } from '@atlaskit/primitives'
11
+ * import type { StackProps } from '@atlaskit/primitives'
12
+ * ```
13
+ */
14
+ findImportsByModule: function findImportsByModule(root, name) {
15
+ return root.filter(function (node) {
16
+ if (!isNodeOfType(node, 'ImportDeclaration')) {
17
+ return false;
18
+ }
19
+ if (!hasImportDeclaration(node, name)) {
20
+ return false;
21
+ }
22
+ return true;
23
+ });
24
+ },
25
+ insertImport: function insertImport(root, data, fixer) {
26
+ return fixer.insertTextBefore(root[0], "".concat(insertImportDeclaration(data.module, data.specifiers), ";\n"));
27
+ }
28
+ };
@@ -1,8 +1,9 @@
1
- import { getIdentifierInParentScope, isNodeOfType } from 'eslint-codemod-utils';
1
+ import { isNodeOfType } from 'eslint-codemod-utils';
2
2
  import { createLintRule } from '../utils/create-rule';
3
3
  import { getConfig } from './config';
4
- import { jsxElementToBoxTransformer, styledComponentToPrimitive } from './transformers';
5
- import { containsOnlySupportedAttrs, findValidJsxUsageToTransform, findValidStyledComponentCall, getAttributeValueIdentifier, getJSXAttributeByName, getVariableDefinitionValue, getVariableUsagesCount, isFunctionNamed, isValidCssPropertiesToTransform, isValidTagName } from './utils';
4
+ import { styledComponentToPrimitive } from './transformers';
5
+ import { EmotionCSS } from './transformers/emotion-css';
6
+ import { findValidJsxUsageToTransform, findValidStyledComponentCall, isValidCssPropertiesToTransform } from './utils';
6
7
  var boxDocsUrl = 'https://atlassian.design/components/primitives/box';
7
8
  var rule = createLintRule({
8
9
  meta: {
@@ -53,84 +54,13 @@ var rule = createLintRule({
53
54
  });
54
55
  },
55
56
  // transforms <div css={...}> usages
56
- JSXOpeningElement: function JSXOpeningElement(node) {
57
- if (!config.patterns.includes('compiled-css-function')) {
58
- return false;
59
- }
60
- if (!isNodeOfType(node, 'JSXOpeningElement')) {
61
- return;
62
- }
63
- if (!isNodeOfType(node.name, 'JSXIdentifier')) {
64
- return;
65
- }
66
- if (!isNodeOfType(node.parent, 'JSXElement')) {
67
- return;
68
- }
69
- var suggestBox = shouldSuggestBox(node.parent, context, config);
70
- if (suggestBox) {
71
- context.report({
72
- node: node,
73
- messageId: 'preferPrimitivesBox',
74
- data: {
75
- element: node.name.name
76
- },
77
- suggest: [{
78
- desc: "Convert to Box",
79
- fix: jsxElementToBoxTransformer(node.parent, context)
80
- }]
81
- });
82
- }
57
+ JSXElement: function JSXElement(node) {
58
+ EmotionCSS.lint(node, {
59
+ context: context,
60
+ config: config
61
+ });
83
62
  }
84
63
  };
85
64
  }
86
65
  });
87
- var shouldSuggestBox = function shouldSuggestBox(node, context, config
88
- // scope: Scope.Scope,
89
- ) {
90
- if (!node) {
91
- return false;
92
- }
93
-
94
- // Currently we only support `div`, but possibly more in future
95
- if (!isValidTagName(node)) {
96
- return false;
97
- }
98
-
99
- // Currently we only support elements that contain only a `css` attr, possibly more in future
100
- if (!containsOnlySupportedAttrs(node)) {
101
- return false;
102
- }
103
-
104
- // Get the `css` attr
105
- var cssAttr = getJSXAttributeByName(node.openingElement, 'css');
106
-
107
- // Get the prop value, e.g. `myStyles` in `css={myStyles}`
108
- var cssVariableName = getAttributeValueIdentifier(cssAttr);
109
-
110
- // `cssVariableName` could be undefined if the maker has
111
- // done something like `css={[styles1, styles2]}`, `css={...styles}`, etc
112
- if (!cssVariableName) {
113
- return false;
114
- }
115
-
116
- /**
117
- * Make sure the variable is not used in multiple JSX elements:
118
- * ```
119
- * <div css={paddingStyles}></div>
120
- * <input css={paddingStyles}></input>
121
- * ```
122
- */
123
- if (getVariableUsagesCount(cssVariableName, context) !== 1) {
124
- return false;
125
- }
126
-
127
- // Find where `cssVariableName` is defined. We're looking for `const myStyles = css({...})`
128
- var cssVariableDefinition = getIdentifierInParentScope(context.getScope(), cssVariableName);
129
- var cssVariableValue = getVariableDefinitionValue(cssVariableDefinition);
130
- // Check if `cssVariableValue` is a function called `css()`
131
- if (!cssVariableValue || !isFunctionNamed(cssVariableValue, 'css')) {
132
- return false;
133
- }
134
- return isValidCssPropertiesToTransform(cssVariableValue.node.init, config);
135
- };
136
66
  export default rule;
@@ -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,5 @@
1
+ export { FunctionCall } from './function-call';
2
+ export { Import } from './import';
3
+ export { JSXAttribute } from './jsx-attribute';
4
+ export { JSXElement } from './jsx-element';
5
+ export { Root } from './root';
@@ -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,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,9 @@
1
+ export declare const elements: string[];
2
+ export declare const attributes: string[];
3
+ declare const spaceTokenMap: {
4
+ [key: string]: string;
5
+ };
6
+ export declare const styles: {
7
+ [key: string]: typeof spaceTokenMap;
8
+ };
9
+ 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,5 @@
1
+ export { FunctionCall } from './function-call';
2
+ export { Import } from './import';
3
+ export { JSXAttribute } from './jsx-attribute';
4
+ export { JSXElement } from './jsx-element';
5
+ export { Root } from './root';
@@ -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 };