@atlaskit/eslint-plugin-design-system 8.15.5 → 8.17.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/CHANGELOG.md +12 -0
- package/constellation/index/usage.mdx +62 -16
- package/dist/cjs/rules/prefer-primitives/index.js +2 -3
- package/dist/cjs/rules/prefer-primitives/utils.js +16 -5
- package/dist/cjs/rules/use-primitives/index.js +89 -58
- package/dist/cjs/rules/use-primitives/transformers/css-to-xcss.js +95 -0
- package/dist/cjs/rules/use-primitives/transformers/index.js +31 -0
- package/dist/cjs/rules/use-primitives/transformers/jsx-element-to-box.js +26 -0
- package/dist/cjs/rules/use-primitives/utils/contains-only-supported-attrs.js +19 -0
- package/dist/cjs/rules/use-primitives/utils/convert-ast-object-expression-to-js-object.js +31 -0
- package/dist/cjs/rules/use-primitives/utils/get-attribute-value-identifier.js +37 -0
- package/dist/cjs/rules/use-primitives/utils/get-function-argument-at-pos.js +10 -0
- package/dist/cjs/rules/use-primitives/utils/get-jsx-attribute-by-name.js +16 -0
- package/dist/cjs/rules/use-primitives/utils/get-variable-definition-value.js +29 -0
- package/dist/cjs/rules/use-primitives/utils/get-variable-usage-count.js +21 -0
- package/dist/cjs/rules/use-primitives/utils/index.js +89 -0
- package/dist/cjs/rules/use-primitives/utils/is-function-named.js +19 -0
- package/dist/cjs/rules/use-primitives/utils/is-valid-tag-name.js +13 -0
- package/dist/cjs/rules/use-primitives/utils/update-jsx-attribute-by-name.js +31 -0
- package/dist/cjs/rules/use-primitives/utils/update-jsx-element-name.js +16 -0
- package/dist/cjs/rules/use-primitives/utils/upsert-import-declaration.js +80 -0
- package/dist/es2019/rules/prefer-primitives/index.js +1 -2
- package/dist/es2019/rules/prefer-primitives/utils.js +11 -2
- package/dist/es2019/rules/use-primitives/index.js +91 -60
- package/dist/es2019/rules/use-primitives/transformers/css-to-xcss.js +91 -0
- package/dist/es2019/rules/use-primitives/transformers/index.js +2 -0
- package/dist/es2019/rules/use-primitives/transformers/jsx-element-to-box.js +16 -0
- package/dist/es2019/rules/use-primitives/utils/contains-only-supported-attrs.js +13 -0
- package/dist/es2019/rules/use-primitives/utils/convert-ast-object-expression-to-js-object.js +26 -0
- package/dist/es2019/rules/use-primitives/utils/get-attribute-value-identifier.js +32 -0
- package/dist/es2019/rules/use-primitives/utils/get-function-argument-at-pos.js +4 -0
- package/dist/es2019/rules/use-primitives/utils/get-jsx-attribute-by-name.js +10 -0
- package/dist/es2019/rules/use-primitives/utils/get-variable-definition-value.js +23 -0
- package/dist/es2019/rules/use-primitives/utils/get-variable-usage-count.js +15 -0
- package/dist/es2019/rules/use-primitives/utils/index.js +12 -0
- package/dist/es2019/rules/use-primitives/utils/is-function-named.js +13 -0
- package/dist/es2019/rules/use-primitives/utils/is-valid-tag-name.js +7 -0
- package/dist/es2019/rules/use-primitives/utils/update-jsx-attribute-by-name.js +26 -0
- package/dist/es2019/rules/use-primitives/utils/update-jsx-element-name.js +12 -0
- package/dist/es2019/rules/use-primitives/utils/upsert-import-declaration.js +76 -0
- package/dist/esm/rules/prefer-primitives/index.js +1 -2
- package/dist/esm/rules/prefer-primitives/utils.js +13 -2
- package/dist/esm/rules/use-primitives/index.js +91 -60
- package/dist/esm/rules/use-primitives/transformers/css-to-xcss.js +88 -0
- package/dist/esm/rules/use-primitives/transformers/index.js +2 -0
- package/dist/esm/rules/use-primitives/transformers/jsx-element-to-box.js +19 -0
- package/dist/esm/rules/use-primitives/utils/contains-only-supported-attrs.js +13 -0
- package/dist/esm/rules/use-primitives/utils/convert-ast-object-expression-to-js-object.js +26 -0
- package/dist/esm/rules/use-primitives/utils/get-attribute-value-identifier.js +32 -0
- package/dist/esm/rules/use-primitives/utils/get-function-argument-at-pos.js +4 -0
- package/dist/esm/rules/use-primitives/utils/get-jsx-attribute-by-name.js +10 -0
- package/dist/esm/rules/use-primitives/utils/get-variable-definition-value.js +23 -0
- package/dist/esm/rules/use-primitives/utils/get-variable-usage-count.js +15 -0
- package/dist/esm/rules/use-primitives/utils/index.js +12 -0
- package/dist/esm/rules/use-primitives/utils/is-function-named.js +13 -0
- package/dist/esm/rules/use-primitives/utils/is-valid-tag-name.js +7 -0
- package/dist/esm/rules/use-primitives/utils/update-jsx-attribute-by-name.js +24 -0
- package/dist/esm/rules/use-primitives/utils/update-jsx-element-name.js +10 -0
- package/dist/esm/rules/use-primitives/utils/upsert-import-declaration.js +75 -0
- package/dist/types/rules/prefer-primitives/utils.d.ts +2 -1
- package/dist/types/rules/use-primitives/transformers/css-to-xcss.d.ts +9 -0
- package/dist/types/rules/use-primitives/transformers/index.d.ts +2 -0
- package/dist/types/rules/use-primitives/transformers/jsx-element-to-box.d.ts +3 -0
- package/dist/types/rules/use-primitives/utils/contains-only-supported-attrs.d.ts +2 -0
- package/dist/types/rules/use-primitives/utils/convert-ast-object-expression-to-js-object.d.ts +9 -0
- package/dist/types/rules/use-primitives/utils/get-attribute-value-identifier.d.ts +14 -0
- package/dist/types/rules/use-primitives/utils/get-function-argument-at-pos.d.ts +2 -0
- package/dist/types/rules/use-primitives/utils/get-jsx-attribute-by-name.d.ts +2 -0
- package/dist/types/rules/use-primitives/utils/get-variable-definition-value.d.ts +2 -0
- package/dist/types/rules/use-primitives/utils/get-variable-usage-count.d.ts +6 -0
- package/dist/types/rules/use-primitives/utils/index.d.ts +12 -0
- package/dist/types/rules/use-primitives/utils/is-function-named.d.ts +2 -0
- package/dist/types/rules/use-primitives/utils/is-valid-tag-name.d.ts +2 -0
- package/dist/types/rules/use-primitives/utils/update-jsx-attribute-by-name.d.ts +3 -0
- package/dist/types/rules/use-primitives/utils/update-jsx-element-name.d.ts +3 -0
- package/dist/types/rules/use-primitives/utils/upsert-import-declaration.d.ts +11 -0
- package/dist/types-ts4.5/rules/prefer-primitives/utils.d.ts +2 -1
- package/dist/types-ts4.5/rules/use-primitives/transformers/css-to-xcss.d.ts +9 -0
- package/dist/types-ts4.5/rules/use-primitives/transformers/index.d.ts +2 -0
- package/dist/types-ts4.5/rules/use-primitives/transformers/jsx-element-to-box.d.ts +3 -0
- package/dist/types-ts4.5/rules/use-primitives/utils/contains-only-supported-attrs.d.ts +2 -0
- package/dist/types-ts4.5/rules/use-primitives/utils/convert-ast-object-expression-to-js-object.d.ts +9 -0
- package/dist/types-ts4.5/rules/use-primitives/utils/get-attribute-value-identifier.d.ts +14 -0
- package/dist/types-ts4.5/rules/use-primitives/utils/get-function-argument-at-pos.d.ts +2 -0
- package/dist/types-ts4.5/rules/use-primitives/utils/get-jsx-attribute-by-name.d.ts +2 -0
- package/dist/types-ts4.5/rules/use-primitives/utils/get-variable-definition-value.d.ts +2 -0
- package/dist/types-ts4.5/rules/use-primitives/utils/get-variable-usage-count.d.ts +6 -0
- package/dist/types-ts4.5/rules/use-primitives/utils/index.d.ts +12 -0
- package/dist/types-ts4.5/rules/use-primitives/utils/is-function-named.d.ts +2 -0
- package/dist/types-ts4.5/rules/use-primitives/utils/is-valid-tag-name.d.ts +2 -0
- package/dist/types-ts4.5/rules/use-primitives/utils/update-jsx-attribute-by-name.d.ts +3 -0
- package/dist/types-ts4.5/rules/use-primitives/utils/update-jsx-element-name.d.ts +3 -0
- package/dist/types-ts4.5/rules/use-primitives/utils/upsert-import-declaration.d.ts +11 -0
- package/package.json +3 -1
- package/dist/cjs/rules/use-primitives/utils.js +0 -364
- package/dist/es2019/rules/use-primitives/utils.js +0 -353
- package/dist/esm/rules/use-primitives/utils.js +0 -359
- package/dist/types/rules/use-primitives/utils.d.ts +0 -13
- package/dist/types-ts4.5/rules/use-primitives/utils.d.ts +0 -13
|
@@ -1,359 +0,0 @@
|
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
-
// eslint-disable-next-line import/no-extraneous-dependencies
|
|
5
|
-
|
|
6
|
-
import { getIdentifierInParentScope, hasImportDeclaration, insertImportDeclaration, insertImportSpecifier, isNodeOfType, jsxAttribute, jsxIdentifier, jsxOpeningElement, literal } from 'eslint-codemod-utils';
|
|
7
|
-
export var shouldSuggestBox = function shouldSuggestBox(node
|
|
8
|
-
// scope: Scope.Scope,
|
|
9
|
-
) {
|
|
10
|
-
if (!node) {
|
|
11
|
-
return false;
|
|
12
|
-
}
|
|
13
|
-
if (!isValidPrimitiveElement(node)) {
|
|
14
|
-
return false;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* Check for empty elements: `<div></div>` || `<span></span>`
|
|
19
|
-
*/
|
|
20
|
-
if (node.children.length === 0) {
|
|
21
|
-
return true;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
/**
|
|
25
|
-
* Check for elements containing only whitespace. e.g. `<div> </div>` || `<span> </span>`
|
|
26
|
-
*/
|
|
27
|
-
if (containsOnlyWhitespace(node)) {
|
|
28
|
-
return true;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
/**
|
|
32
|
-
* If an element contains more than one JSX child, then we don't want to convert it.
|
|
33
|
-
*/
|
|
34
|
-
var JSXChildren = getChildrenByType(node, ['JSXElement']);
|
|
35
|
-
if (JSXChildren.length > 1) {
|
|
36
|
-
return false;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
/**
|
|
40
|
-
* Check for things like:
|
|
41
|
-
* ```
|
|
42
|
-
* <div>
|
|
43
|
-
* <h2>heading</h2>
|
|
44
|
-
* subheading <= rejected because of standalone piece of text
|
|
45
|
-
* </div>
|
|
46
|
-
* ```
|
|
47
|
-
*/
|
|
48
|
-
var nonWhiteSpaceTextChildren = getChildrenByType(node, ['JSXText']).filter(function (child) {
|
|
49
|
-
return !isWhiteSpace(child.value);
|
|
50
|
-
});
|
|
51
|
-
if (nonWhiteSpaceTextChildren.length > 0) {
|
|
52
|
-
return false;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
// Possible since we now know the div only has one child
|
|
56
|
-
// const singleChild = node.children[0];
|
|
57
|
-
|
|
58
|
-
// // let's narrow down the type inside of the expression
|
|
59
|
-
// if (isNodeOfType(singleChild, 'JSXExpressionContainer')) {
|
|
60
|
-
// const expression = singleChild.expression;
|
|
61
|
-
|
|
62
|
-
// // If an Identifier that is just a string then should be a <Text>, not <Box>
|
|
63
|
-
// const identifier =
|
|
64
|
-
// isNodeOfType(expression, 'Identifier') &&
|
|
65
|
-
// getIdentifierInParentScope(scope, expression.name);
|
|
66
|
-
|
|
67
|
-
// if (
|
|
68
|
-
// identifier &&
|
|
69
|
-
// (isVariableAnnotatedWithType(identifier, 'StringTypeAnnotation') ||
|
|
70
|
-
// isVariableAnnotatedWithType(identifier, 'TSStringKeyword'))
|
|
71
|
-
// ) {
|
|
72
|
-
// return false;
|
|
73
|
-
// }
|
|
74
|
-
// }
|
|
75
|
-
|
|
76
|
-
return true;
|
|
77
|
-
};
|
|
78
|
-
export var shouldSuggestInline = function shouldSuggestInline(node, context) {
|
|
79
|
-
if (!node) {
|
|
80
|
-
return false;
|
|
81
|
-
}
|
|
82
|
-
if (!isValidPrimitiveElement(node)) {
|
|
83
|
-
return false;
|
|
84
|
-
}
|
|
85
|
-
var cssStyleObject = getCSSPropStyleObject(node, context);
|
|
86
|
-
if (!cssStyleObject) {
|
|
87
|
-
return false;
|
|
88
|
-
}
|
|
89
|
-
if (!hasInlineCompatibleStyles(cssStyleObject)) {
|
|
90
|
-
return false;
|
|
91
|
-
}
|
|
92
|
-
var JSXChildren = getChildrenByType(node, ['JSXElement']);
|
|
93
|
-
if (JSXChildren.length < 2) {
|
|
94
|
-
return false;
|
|
95
|
-
}
|
|
96
|
-
return true;
|
|
97
|
-
};
|
|
98
|
-
export var shouldSuggestStack = function shouldSuggestStack(node, context) {
|
|
99
|
-
if (!node) {
|
|
100
|
-
return false;
|
|
101
|
-
}
|
|
102
|
-
if (!isValidPrimitiveElement(node)) {
|
|
103
|
-
return false;
|
|
104
|
-
}
|
|
105
|
-
var cssStyleObject = getCSSPropStyleObject(node, context);
|
|
106
|
-
if (!cssStyleObject) {
|
|
107
|
-
return false;
|
|
108
|
-
}
|
|
109
|
-
if (!hasStackCompatibleStyles(cssStyleObject)) {
|
|
110
|
-
return false;
|
|
111
|
-
}
|
|
112
|
-
var JSXChildren = getChildrenByType(node, ['JSXElement']);
|
|
113
|
-
if (JSXChildren.length < 2) {
|
|
114
|
-
return false;
|
|
115
|
-
}
|
|
116
|
-
return true;
|
|
117
|
-
};
|
|
118
|
-
export var shouldSuggestText = function shouldSuggestText(node, scope) {
|
|
119
|
-
if (!node) {
|
|
120
|
-
return true;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
// node doesn't have children then it should be a <Box>
|
|
124
|
-
if (!node.children || node.children.length === 0) {
|
|
125
|
-
return false;
|
|
126
|
-
}
|
|
127
|
-
var containsOnlyText = node.children.filter(function (child) {
|
|
128
|
-
return isNodeOfType(child, 'Literal') || isNodeOfType(child, 'JSXText');
|
|
129
|
-
});
|
|
130
|
-
if (containsOnlyText) {
|
|
131
|
-
return true;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
// if the element contains strictly a single child... let's see what we can discover
|
|
135
|
-
if (node.children.length === 1) {
|
|
136
|
-
var singleChild = node.children[0];
|
|
137
|
-
|
|
138
|
-
// let's narrow down the type inside of the expression
|
|
139
|
-
if (isNodeOfType(singleChild, 'JSXExpressionContainer')) {
|
|
140
|
-
var expression = singleChild.expression;
|
|
141
|
-
|
|
142
|
-
// A direct Literal is another case for only <Text>
|
|
143
|
-
if (isNodeOfType(expression, 'Literal')) {
|
|
144
|
-
return true;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
// If an Identifier then we want to confirm it's just string to suggest only <Text>
|
|
148
|
-
var identifier = isNodeOfType(expression, 'Identifier') && getIdentifierInParentScope(scope, expression.name);
|
|
149
|
-
if (identifier && (isVariableAnnotatedWithType(identifier, 'StringTypeAnnotation') || isVariableAnnotatedWithType(identifier, 'TSStringKeyword'))) {
|
|
150
|
-
return true;
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
return true;
|
|
155
|
-
};
|
|
156
|
-
export var primitiveFixer = function primitiveFixer(node, nodeName, context) {
|
|
157
|
-
return function (fixer) {
|
|
158
|
-
if (!isNodeOfType(node, 'JSXOpeningElement')) {
|
|
159
|
-
return [];
|
|
160
|
-
}
|
|
161
|
-
var parent = node.parent;
|
|
162
|
-
if (!isNodeOfType(parent, 'JSXElement')) {
|
|
163
|
-
return [];
|
|
164
|
-
}
|
|
165
|
-
var fixes = [];
|
|
166
|
-
var body = context.getSourceCode().ast.body;
|
|
167
|
-
var imports = body.filter(function (node) {
|
|
168
|
-
return isNodeOfType(node, 'ImportDeclaration');
|
|
169
|
-
});
|
|
170
|
-
var primitivesNode = imports.find(function (node) {
|
|
171
|
-
return hasImportDeclaration(node, '@atlaskit/primitives');
|
|
172
|
-
});
|
|
173
|
-
if (!primitivesNode) {
|
|
174
|
-
fixes.push(fixer.insertTextBefore(body[0], "".concat(insertImportDeclaration('@atlaskit/primitives', [nodeName]), ";\n")));
|
|
175
|
-
} else {
|
|
176
|
-
fixes.push(fixer.replaceText(primitivesNode, "".concat(insertImportSpecifier(primitivesNode, nodeName), ";\n")));
|
|
177
|
-
}
|
|
178
|
-
var closingElement = parent.closingElement;
|
|
179
|
-
var jsxId = jsxIdentifier(nodeName);
|
|
180
|
-
var attributes = [];
|
|
181
|
-
|
|
182
|
-
// Box defaults to div. We only need to add an as prop if it's not a div
|
|
183
|
-
if (node.name.name !== 'div' && nodeName === 'Box') {
|
|
184
|
-
var asProp = jsxAttribute({
|
|
185
|
-
name: jsxIdentifier('as'),
|
|
186
|
-
value: literal({
|
|
187
|
-
value: "".concat(node.name.name),
|
|
188
|
-
raw: "\"".concat(node.name.name, "\"")
|
|
189
|
-
})
|
|
190
|
-
});
|
|
191
|
-
attributes.push(asProp);
|
|
192
|
-
}
|
|
193
|
-
var hasStylingProps = getJSXAttributeByName(node, 'style') || getJSXAttributeByName(node, 'css') || getJSXAttributeByName(node, 'class') || getJSXAttributeByName(node, 'className');
|
|
194
|
-
if (hasStylingProps) {
|
|
195
|
-
fixes.push(fixer.insertTextBefore(node, '// TODO: Manually convert styling into props\n'));
|
|
196
|
-
}
|
|
197
|
-
var candidateAttributes = node.attributes.map(function (attr) {
|
|
198
|
-
// pull out any named attributes we can re-map
|
|
199
|
-
if (isNodeOfType(attr, 'JSXAttribute')) {
|
|
200
|
-
if (attr.name.name === 'data-testid') {
|
|
201
|
-
return jsxAttribute(_objectSpread(_objectSpread({}, attr), {}, {
|
|
202
|
-
name: jsxIdentifier('testId')
|
|
203
|
-
}));
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
return attr;
|
|
207
|
-
}).filter(Boolean);
|
|
208
|
-
fixes.push(fixer.replaceText(node, jsxOpeningElement(_objectSpread(_objectSpread({}, node), {}, {
|
|
209
|
-
name: jsxId,
|
|
210
|
-
attributes: candidateAttributes.concat(attributes)
|
|
211
|
-
})).toString()));
|
|
212
|
-
if (closingElement && closingElement.name) {
|
|
213
|
-
fixes.push(fixer.replaceText(closingElement.name, "".concat(jsxId)));
|
|
214
|
-
}
|
|
215
|
-
return fixes;
|
|
216
|
-
};
|
|
217
|
-
};
|
|
218
|
-
var isVariableAnnotatedWithType = function isVariableAnnotatedWithType(identifier, typeAnnotation) {
|
|
219
|
-
var _identifiers$;
|
|
220
|
-
if (!identifier || identifier.identifiers.length === 0) {
|
|
221
|
-
return false;
|
|
222
|
-
}
|
|
223
|
-
var typeAnnotationObject = (_identifiers$ = identifier.identifiers[0]) === null || _identifiers$ === void 0 || (_identifiers$ = _identifiers$.typeAnnotation) === null || _identifiers$ === void 0 ? void 0 : _identifiers$.typeAnnotation;
|
|
224
|
-
|
|
225
|
-
// variable declaration lacks type definitions
|
|
226
|
-
if (!typeAnnotationObject) {
|
|
227
|
-
return false;
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
// single type annotation
|
|
231
|
-
if (typeAnnotationObject.type === typeAnnotation) {
|
|
232
|
-
return true;
|
|
233
|
-
}
|
|
234
|
-
return false;
|
|
235
|
-
};
|
|
236
|
-
var getJSXAttributeByName = function getJSXAttributeByName(node, attrName) {
|
|
237
|
-
return node.attributes.find(function (attr) {
|
|
238
|
-
// Ignore JSXSpreadAttributes
|
|
239
|
-
if (!isNodeOfType(attr, 'JSXAttribute')) {
|
|
240
|
-
return false;
|
|
241
|
-
}
|
|
242
|
-
return attr.name.name === attrName;
|
|
243
|
-
});
|
|
244
|
-
};
|
|
245
|
-
export var isWhiteSpace = function isWhiteSpace(value) {
|
|
246
|
-
return value.trim() === '';
|
|
247
|
-
};
|
|
248
|
-
function containsOnlyWhitespace(node) {
|
|
249
|
-
return node.children.every(function (child) {
|
|
250
|
-
if (!isNodeOfType(child, 'JSXText')) {
|
|
251
|
-
return false;
|
|
252
|
-
}
|
|
253
|
-
return isWhiteSpace(child.value);
|
|
254
|
-
});
|
|
255
|
-
}
|
|
256
|
-
export var getChildrenByType = function getChildrenByType(node, types) {
|
|
257
|
-
return node.children.filter(function (child) {
|
|
258
|
-
return types.find(function (type) {
|
|
259
|
-
return isNodeOfType(child, type);
|
|
260
|
-
});
|
|
261
|
-
});
|
|
262
|
-
};
|
|
263
|
-
|
|
264
|
-
// FIXME: This not correctly typed
|
|
265
|
-
|
|
266
|
-
var getCSSPropStyleObject = function getCSSPropStyleObject(node, context) {
|
|
267
|
-
var cssAttr = getJSXAttributeByName(node.openingElement, 'css');
|
|
268
|
-
var styleObj = {};
|
|
269
|
-
if (cssAttr && cssAttr.value) {
|
|
270
|
-
var scope = context.getScope();
|
|
271
|
-
var _ref = cssAttr.value,
|
|
272
|
-
expression = _ref.expression;
|
|
273
|
-
var variableDeclarator = getIdentifierInParentScope(scope, expression.name);
|
|
274
|
-
var defNode = variableDeclarator === null || variableDeclarator === void 0 ? void 0 : variableDeclarator.defs[0];
|
|
275
|
-
if (!defNode) {
|
|
276
|
-
return undefined;
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
// check if the variable declaration has a call expression init
|
|
280
|
-
// eg we're looking for css() type inits
|
|
281
|
-
if (!isNodeOfType(defNode.node, 'VariableDeclarator') && !isNodeOfType(defNode.node.init, 'CallExpression')) {
|
|
282
|
-
return undefined;
|
|
283
|
-
}
|
|
284
|
-
var init = defNode.node.init;
|
|
285
|
-
|
|
286
|
-
// make the sure the init is called 'css'
|
|
287
|
-
if (!(isNodeOfType(init.callee, 'Identifier') && init.callee.name === 'css')) {
|
|
288
|
-
return undefined;
|
|
289
|
-
}
|
|
290
|
-
var styles = init.arguments[0];
|
|
291
|
-
if (!styles) {
|
|
292
|
-
return undefined;
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
// make sure the styles are object styles (they should be but let's just double check)
|
|
296
|
-
if (!isNodeOfType(styles, 'ObjectExpression')) {
|
|
297
|
-
return undefined;
|
|
298
|
-
}
|
|
299
|
-
styles.properties.forEach(function (prop) {
|
|
300
|
-
if (!isNodeOfType(prop, 'Property')) {
|
|
301
|
-
return;
|
|
302
|
-
}
|
|
303
|
-
if (!isNodeOfType(prop.key, 'Identifier')) {
|
|
304
|
-
return;
|
|
305
|
-
}
|
|
306
|
-
if (!isNodeOfType(prop.value, 'Literal')) {
|
|
307
|
-
return;
|
|
308
|
-
}
|
|
309
|
-
styleObj[prop.key.name] = prop.value.value;
|
|
310
|
-
});
|
|
311
|
-
}
|
|
312
|
-
return styleObj;
|
|
313
|
-
};
|
|
314
|
-
export var validPrimitiveElements = new Set(['div', 'span', 'article', 'aside', 'dialog', 'footer', 'header', 'li', 'main', 'nav', 'ol', 'section', 'ul']);
|
|
315
|
-
export var isValidPrimitiveElement = function isValidPrimitiveElement(node) {
|
|
316
|
-
return validPrimitiveElements.has(node.openingElement.name.name);
|
|
317
|
-
};
|
|
318
|
-
var hasInlineCompatibleStyles = function hasInlineCompatibleStyles(cssStyleObject) {
|
|
319
|
-
if (!['flex', 'inline-flex'].includes(cssStyleObject['display'])) {
|
|
320
|
-
return false;
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
/**
|
|
324
|
-
* Default `flexDirection` is `'row'`, so we can recommend an Inline if
|
|
325
|
-
* it's `undefined`, or if it's explicitly `'row'` or `'row-reverse'`.
|
|
326
|
-
*
|
|
327
|
-
* Note: Currently we are including `'row-reverse'` even though Inline doesn't support it
|
|
328
|
-
* as an attempt to educate makers about accessibility concerns. *
|
|
329
|
-
*/
|
|
330
|
-
var flexDirection = cssStyleObject['flex-direction'] || cssStyleObject['flexDirection'];
|
|
331
|
-
var validFlexDirectionValue = ['row', 'row-reverse', undefined].includes(flexDirection);
|
|
332
|
-
|
|
333
|
-
/**
|
|
334
|
-
* Note: Currently we are including `'wrap-reverse'` even though Inline doesn't support it
|
|
335
|
-
* as an attempt to educate makers about accessibility concerns.
|
|
336
|
-
*/
|
|
337
|
-
var flexWrap = cssStyleObject['flex-wrap'] || cssStyleObject['flexWrap'];
|
|
338
|
-
var validFlexWrapValue = ['wrap', 'wrap-reverse'].includes(flexWrap);
|
|
339
|
-
if (validFlexDirectionValue || validFlexWrapValue) {
|
|
340
|
-
return true;
|
|
341
|
-
}
|
|
342
|
-
return false;
|
|
343
|
-
};
|
|
344
|
-
var hasStackCompatibleStyles = function hasStackCompatibleStyles(cssStyleObject) {
|
|
345
|
-
if (!['flex', 'inline-flex'].includes(cssStyleObject['display'])) {
|
|
346
|
-
return false;
|
|
347
|
-
}
|
|
348
|
-
|
|
349
|
-
/**
|
|
350
|
-
* Note: Currently we are including `'column-reverse'` even though Stack doesn't support it
|
|
351
|
-
* as an attempt to educate makers about accessibility concerns.
|
|
352
|
-
*/
|
|
353
|
-
var flexDirection = cssStyleObject['flex-direction'] || cssStyleObject['flexDirection'];
|
|
354
|
-
var validFlexDirectionValue = ['column', 'column-reverse'].includes(flexDirection);
|
|
355
|
-
if (!validFlexDirectionValue) {
|
|
356
|
-
return false;
|
|
357
|
-
}
|
|
358
|
-
return true;
|
|
359
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import type { Rule, Scope } from 'eslint';
|
|
2
|
-
import { EslintNode, JSXElement, JSXExpressionContainer, JSXText } from 'eslint-codemod-utils';
|
|
3
|
-
export declare const shouldSuggestBox: (node: JSXElement) => boolean;
|
|
4
|
-
export declare const shouldSuggestInline: (node: JSXElement, context: Rule.RuleContext) => boolean;
|
|
5
|
-
export declare const shouldSuggestStack: (node: JSXElement, context: Rule.RuleContext) => boolean;
|
|
6
|
-
export declare const shouldSuggestText: (node: JSXElement | undefined, scope: Scope.Scope) => boolean;
|
|
7
|
-
export declare const primitiveFixer: (node: EslintNode, nodeName: string, context: Rule.RuleContext) => (fixer: Rule.RuleFixer) => Rule.Fix[];
|
|
8
|
-
export declare const isWhiteSpace: (value: string) => boolean;
|
|
9
|
-
type JSXChild = 'JSXElement' | 'JSXExpressionContainer' | 'JSXFragment' | 'JSXText' | 'JSXSpreadChild'[];
|
|
10
|
-
export declare const getChildrenByType: (node: JSXElement, types: JSXChild[]) => (JSXElement | JSXExpressionContainer | import("estree-jsx").JSXFragment | JSXText | import("estree-jsx").JSXSpreadChild)[];
|
|
11
|
-
export declare const validPrimitiveElements: Set<string>;
|
|
12
|
-
export declare const isValidPrimitiveElement: (node: JSXElement) => boolean;
|
|
13
|
-
export {};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import type { Rule, Scope } from 'eslint';
|
|
2
|
-
import { EslintNode, JSXElement, JSXExpressionContainer, JSXText } from 'eslint-codemod-utils';
|
|
3
|
-
export declare const shouldSuggestBox: (node: JSXElement) => boolean;
|
|
4
|
-
export declare const shouldSuggestInline: (node: JSXElement, context: Rule.RuleContext) => boolean;
|
|
5
|
-
export declare const shouldSuggestStack: (node: JSXElement, context: Rule.RuleContext) => boolean;
|
|
6
|
-
export declare const shouldSuggestText: (node: JSXElement | undefined, scope: Scope.Scope) => boolean;
|
|
7
|
-
export declare const primitiveFixer: (node: EslintNode, nodeName: string, context: Rule.RuleContext) => (fixer: Rule.RuleFixer) => Rule.Fix[];
|
|
8
|
-
export declare const isWhiteSpace: (value: string) => boolean;
|
|
9
|
-
type JSXChild = 'JSXElement' | 'JSXExpressionContainer' | 'JSXFragment' | 'JSXText' | 'JSXSpreadChild'[];
|
|
10
|
-
export declare const getChildrenByType: (node: JSXElement, types: JSXChild[]) => (JSXElement | JSXExpressionContainer | import("estree-jsx").JSXFragment | JSXText | import("estree-jsx").JSXSpreadChild)[];
|
|
11
|
-
export declare const validPrimitiveElements: Set<string>;
|
|
12
|
-
export declare const isValidPrimitiveElement: (node: JSXElement) => boolean;
|
|
13
|
-
export {};
|