@atlaskit/eslint-plugin-design-system 10.8.2 → 10.10.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 +17 -0
- package/README.md +1 -0
- package/constellation/consistent-css-prop-usage/usage.mdx +9 -0
- package/constellation/index/usage.mdx +1 -0
- package/constellation/no-custom-icons/usage.mdx +36 -0
- package/dist/cjs/presets/all.codegen.js +2 -1
- package/dist/cjs/rules/consistent-css-prop-usage/index.js +19 -2
- package/dist/cjs/rules/ensure-design-token-usage/index.js +199 -227
- package/dist/cjs/rules/index.codegen.js +3 -1
- package/dist/cjs/rules/no-custom-icons/checks/has-prop.js +12 -0
- package/dist/cjs/rules/no-custom-icons/checks/is-from-import-source.js +42 -0
- package/dist/cjs/rules/no-custom-icons/checks/is-imported-jsx-element.js +10 -0
- package/dist/cjs/rules/no-custom-icons/index.js +67 -0
- package/dist/cjs/rules/no-legacy-icons/index.js +11 -83
- package/dist/cjs/rules/use-tokens-typography/index.js +4 -8
- package/dist/cjs/rules/utils/error-boundary.js +58 -11
- package/dist/es2019/presets/all.codegen.js +2 -1
- package/dist/es2019/rules/consistent-css-prop-usage/index.js +19 -2
- package/dist/es2019/rules/ensure-design-token-usage/index.js +16 -30
- package/dist/es2019/rules/index.codegen.js +3 -1
- package/dist/es2019/rules/no-custom-icons/checks/has-prop.js +4 -0
- package/dist/es2019/rules/no-custom-icons/checks/is-from-import-source.js +23 -0
- package/dist/es2019/rules/no-custom-icons/checks/is-imported-jsx-element.js +4 -0
- package/dist/es2019/rules/no-custom-icons/index.js +61 -0
- package/dist/es2019/rules/no-legacy-icons/index.js +11 -65
- package/dist/es2019/rules/use-tokens-typography/index.js +3 -7
- package/dist/es2019/rules/utils/error-boundary.js +55 -11
- package/dist/esm/presets/all.codegen.js +2 -1
- package/dist/esm/rules/consistent-css-prop-usage/index.js +19 -2
- package/dist/esm/rules/ensure-design-token-usage/index.js +199 -227
- package/dist/esm/rules/index.codegen.js +3 -1
- package/dist/esm/rules/no-custom-icons/checks/has-prop.js +6 -0
- package/dist/esm/rules/no-custom-icons/checks/is-from-import-source.js +36 -0
- package/dist/esm/rules/no-custom-icons/checks/is-imported-jsx-element.js +4 -0
- package/dist/esm/rules/no-custom-icons/index.js +61 -0
- package/dist/esm/rules/no-legacy-icons/index.js +11 -83
- package/dist/esm/rules/use-tokens-typography/index.js +4 -8
- package/dist/esm/rules/utils/error-boundary.js +56 -10
- package/dist/types/index.codegen.d.ts +1 -0
- package/dist/types/presets/all.codegen.d.ts +2 -1
- package/dist/types/rules/consistent-css-prop-usage/types.d.ts +1 -0
- package/dist/types/rules/index.codegen.d.ts +1 -0
- package/dist/types/rules/no-custom-icons/checks/has-prop.d.ts +2 -0
- package/dist/types/rules/no-custom-icons/checks/is-from-import-source.d.ts +8 -0
- package/dist/types/rules/no-custom-icons/checks/is-imported-jsx-element.d.ts +8 -0
- package/dist/types/rules/no-custom-icons/index.d.ts +3 -0
- package/dist/types/rules/no-legacy-icons/index.d.ts +1 -2
- package/dist/types/rules/utils/error-boundary.d.ts +8 -5
- package/dist/types-ts4.5/index.codegen.d.ts +1 -0
- package/dist/types-ts4.5/presets/all.codegen.d.ts +2 -1
- package/dist/types-ts4.5/rules/consistent-css-prop-usage/types.d.ts +1 -0
- package/dist/types-ts4.5/rules/index.codegen.d.ts +1 -0
- package/dist/types-ts4.5/rules/no-custom-icons/checks/has-prop.d.ts +2 -0
- package/dist/types-ts4.5/rules/no-custom-icons/checks/is-from-import-source.d.ts +8 -0
- package/dist/types-ts4.5/rules/no-custom-icons/checks/is-imported-jsx-element.d.ts +8 -0
- package/dist/types-ts4.5/rules/no-custom-icons/index.d.ts +3 -0
- package/dist/types-ts4.5/rules/no-legacy-icons/index.d.ts +1 -2
- package/dist/types-ts4.5/rules/utils/error-boundary.d.ts +8 -5
- package/package.json +1 -1
|
@@ -36,26 +36,18 @@ var createWithConfig = exports.createWithConfig = function createWithConfig(init
|
|
|
36
36
|
failSilently: (userConfig === null || userConfig === void 0 ? void 0 : userConfig.failSilently) || defaultConfig.failSilently
|
|
37
37
|
};
|
|
38
38
|
var tokenNode = null;
|
|
39
|
-
return {
|
|
39
|
+
return (0, _errorBoundary.errorBoundary)({
|
|
40
40
|
ImportDeclaration: function ImportDeclaration(node) {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
}, {
|
|
46
|
-
config: config
|
|
47
|
-
});
|
|
41
|
+
if (node.source.value === '@atlaskit/tokens' && config.applyImport) {
|
|
42
|
+
tokenNode = node;
|
|
43
|
+
}
|
|
48
44
|
},
|
|
49
45
|
// For expressions within template literals (e.g. `color: ${red}`) - color only
|
|
50
46
|
'TemplateLiteral > Identifier': function TemplateLiteralIdentifier(node) {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
return;
|
|
56
|
-
}, {
|
|
57
|
-
config: config
|
|
58
|
-
});
|
|
47
|
+
if (config.domains.includes('color')) {
|
|
48
|
+
return (0, _color.lintTemplateIdentifierForColor)(node, context, config);
|
|
49
|
+
}
|
|
50
|
+
return;
|
|
59
51
|
},
|
|
60
52
|
// const styles = css({ color: 'red', margin: '4px' }), styled.div({ color: 'red', margin: '4px' })
|
|
61
53
|
ObjectExpression: function (_ObjectExpression) {
|
|
@@ -67,263 +59,243 @@ var createWithConfig = exports.createWithConfig = function createWithConfig(init
|
|
|
67
59
|
};
|
|
68
60
|
return ObjectExpression;
|
|
69
61
|
}(function (parentNode) {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
var importSources = (0, _isSupportedImport.getImportSources)(context);
|
|
62
|
+
var _context$getScope = context.getScope(),
|
|
63
|
+
references = _context$getScope.references;
|
|
64
|
+
/**
|
|
65
|
+
* NOTE: This rule doesn't have an `importSources` config option,
|
|
66
|
+
* so this will just be equal to DEFAULT_IMPORT_SOURCES (which is fine)
|
|
67
|
+
*/
|
|
68
|
+
var importSources = (0, _isSupportedImport.getImportSources)(context);
|
|
78
69
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
70
|
+
// To force the correct node type
|
|
71
|
+
if (!(0, _eslintCodemodUtils.isNodeOfType)(parentNode, 'ObjectExpression')) {
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
83
74
|
|
|
84
|
-
|
|
85
|
-
|
|
75
|
+
// Return for nested objects - these get handled automatically so without returning we'd be doubling up
|
|
76
|
+
if (parentNode.parent.type === 'Property') {
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
if ((0, _isNode.isDecendantOfXcssBlock)(parentNode, references, importSources)) {
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
if (!(0, _isNode.isDecendantOfStyleBlock)(parentNode) && !(0, _isNode.isDecendantOfType)(parentNode, 'JSXExpressionContainer')) {
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
function findObjectStyles(node) {
|
|
86
|
+
if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'Property')) {
|
|
86
87
|
return;
|
|
87
88
|
}
|
|
88
|
-
if ((0,
|
|
89
|
+
if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'ObjectExpression')) {
|
|
90
|
+
return node.value.properties.forEach(findObjectStyles);
|
|
91
|
+
}
|
|
92
|
+
if (!(0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Identifier') && !(0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Literal')) {
|
|
89
93
|
return;
|
|
90
94
|
}
|
|
91
|
-
|
|
95
|
+
var propertyName = (0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Identifier') ? node.key.name : String(node.key.value);
|
|
96
|
+
|
|
97
|
+
// Returns which domains to lint against based on rule's config and current property
|
|
98
|
+
var domains = (0, _utils.getDomainsForProperty)(propertyName, config.domains);
|
|
99
|
+
if (domains.length === 0 || (0, _isNode.isDecendantOfGlobalToken)(node.value)) {
|
|
92
100
|
return;
|
|
93
101
|
}
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
102
|
+
if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'TemplateLiteral')) {
|
|
103
|
+
var value = (0, _utils.getValueFromTemplateLiteralRaw)(node.value, context);
|
|
104
|
+
if (Array.isArray(value) && value.some(_utils.isCalc)) {
|
|
105
|
+
return context.report({
|
|
106
|
+
node: node,
|
|
107
|
+
messageId: 'noCalcUsage',
|
|
108
|
+
data: {
|
|
109
|
+
payload: "".concat(propertyName)
|
|
110
|
+
}
|
|
111
|
+
});
|
|
103
112
|
}
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
// Returns which domains to lint against based on rule's config and current property
|
|
107
|
-
var domains = (0, _utils.getDomainsForProperty)(propertyName, config.domains);
|
|
108
|
-
if (domains.length === 0 || (0, _isNode.isDecendantOfGlobalToken)(node.value)) {
|
|
113
|
+
if (node.value.expressions.some(_isNode.isDecendantOfGlobalToken)) {
|
|
109
114
|
return;
|
|
110
115
|
}
|
|
111
|
-
if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'TemplateLiteral')) {
|
|
112
|
-
var value = (0, _utils.getValueFromTemplateLiteralRaw)(node.value, context);
|
|
113
|
-
if (Array.isArray(value) && value.some(_utils.isCalc)) {
|
|
114
|
-
return context.report({
|
|
115
|
-
node: node,
|
|
116
|
-
messageId: 'noCalcUsage',
|
|
117
|
-
data: {
|
|
118
|
-
payload: "".concat(propertyName)
|
|
119
|
-
}
|
|
120
|
-
});
|
|
121
|
-
}
|
|
122
|
-
if (node.value.expressions.some(_isNode.isDecendantOfGlobalToken)) {
|
|
123
|
-
return;
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
if (domains.includes('color')) {
|
|
127
|
-
return (0, _color.lintObjectForColor)(node, context, config);
|
|
128
|
-
}
|
|
129
|
-
if (domains.includes('spacing') || domains.includes('shape')) {
|
|
130
|
-
/**
|
|
131
|
-
* We do this in case the fontSize for a style object is declared alongside the `em` or `lineHeight` declaration.
|
|
132
|
-
*/
|
|
133
|
-
var fontSizeNode = (0, _utils.getPropertyNodeFromParent)('fontSize', parentNode);
|
|
134
|
-
var fontSize = fontSizeNode && (0, _utils.getValueForPropertyNode)(fontSizeNode, context);
|
|
135
|
-
return (0, _spacing.lintObjectForSpacing)(node, context, config, fontSize, tokenNode);
|
|
136
|
-
}
|
|
137
116
|
}
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
117
|
+
if (domains.includes('color')) {
|
|
118
|
+
return (0, _color.lintObjectForColor)(node, context, config);
|
|
119
|
+
}
|
|
120
|
+
if (domains.includes('spacing') || domains.includes('shape')) {
|
|
121
|
+
/**
|
|
122
|
+
* We do this in case the fontSize for a style object is declared alongside the `em` or `lineHeight` declaration.
|
|
123
|
+
*/
|
|
124
|
+
var fontSizeNode = (0, _utils.getPropertyNodeFromParent)('fontSize', parentNode);
|
|
125
|
+
var fontSize = fontSizeNode && (0, _utils.getValueForPropertyNode)(fontSizeNode, context);
|
|
126
|
+
return (0, _spacing.lintObjectForSpacing)(node, context, config, fontSize, tokenNode);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
parentNode.properties.forEach(findObjectStyles);
|
|
142
130
|
}),
|
|
143
131
|
// CSSTemplateLiteral and StyledTemplateLiteral
|
|
144
132
|
// const cssTemplateLiteral = css`color: red; padding: 12px`;
|
|
145
133
|
// const styledTemplateLiteral = styled.p`color: red; padding: 8px`;
|
|
146
134
|
'TaggedTemplateExpression[tag.name="css"],TaggedTemplateExpression[tag.object.name="styled"],TaggedTemplateExpression[tag.callee.name="styled"]': function TaggedTemplateExpressionTagNameCssTaggedTemplateExpressionTagObjectNameStyledTaggedTemplateExpressionTagCalleeNameStyled(node) {
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
if
|
|
154
|
-
|
|
155
|
-
|
|
135
|
+
// To force the correct node type
|
|
136
|
+
if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'TaggedTemplateExpression')) {
|
|
137
|
+
return;
|
|
138
|
+
}
|
|
139
|
+
var processedCssLines = (0, _utils.processCssNode)(node, context);
|
|
140
|
+
if (!processedCssLines) {
|
|
141
|
+
// if we can't get a processed css we bail
|
|
142
|
+
return;
|
|
143
|
+
}
|
|
144
|
+
var globalFontSize = (0, _utils.getFontSizeValueInScope)(processedCssLines);
|
|
145
|
+
var textForSource = context.getSourceCode().getText(node.quasi);
|
|
146
|
+
var allReplacedValues = [];
|
|
147
|
+
var completeSource = processedCssLines.reduce(function (currentSource, _ref) {
|
|
148
|
+
var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
|
|
149
|
+
resolvedCssLine = _ref2[0],
|
|
150
|
+
originalCssLine = _ref2[1];
|
|
151
|
+
var _resolvedCssLine$spli = resolvedCssLine.split(':'),
|
|
152
|
+
_resolvedCssLine$spli2 = (0, _slicedToArray2.default)(_resolvedCssLine$spli, 2),
|
|
153
|
+
originalProperty = _resolvedCssLine$spli2[0],
|
|
154
|
+
resolvedCssValues = _resolvedCssLine$spli2[1];
|
|
155
|
+
var _originalCssLine$spli = originalCssLine.split(':'),
|
|
156
|
+
_originalCssLine$spli2 = (0, _slicedToArray2.default)(_originalCssLine$spli, 2),
|
|
157
|
+
_ = _originalCssLine$spli2[0],
|
|
158
|
+
originalCssValues = _originalCssLine$spli2[1];
|
|
159
|
+
var propertyName = (0, _utils.convertHyphenatedNameToCamelCase)(originalProperty);
|
|
160
|
+
var isFontFamily = /fontFamily/.test(propertyName);
|
|
161
|
+
var replacedValuesPerProperty = [originalProperty];
|
|
162
|
+
var domains = (0, _utils.getDomainsForProperty)(propertyName, config.domains);
|
|
163
|
+
if (domains.length === 0 || !resolvedCssValues) {
|
|
164
|
+
// in both of these cases no changes should be made to the current property
|
|
165
|
+
return currentSource;
|
|
156
166
|
}
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
var allReplacedValues = [];
|
|
160
|
-
var completeSource = processedCssLines.reduce(function (currentSource, _ref) {
|
|
161
|
-
var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
|
|
162
|
-
resolvedCssLine = _ref2[0],
|
|
163
|
-
originalCssLine = _ref2[1];
|
|
164
|
-
var _resolvedCssLine$spli = resolvedCssLine.split(':'),
|
|
165
|
-
_resolvedCssLine$spli2 = (0, _slicedToArray2.default)(_resolvedCssLine$spli, 2),
|
|
166
|
-
originalProperty = _resolvedCssLine$spli2[0],
|
|
167
|
-
resolvedCssValues = _resolvedCssLine$spli2[1];
|
|
168
|
-
var _originalCssLine$spli = originalCssLine.split(':'),
|
|
169
|
-
_originalCssLine$spli2 = (0, _slicedToArray2.default)(_originalCssLine$spli, 2),
|
|
170
|
-
_ = _originalCssLine$spli2[0],
|
|
171
|
-
originalCssValues = _originalCssLine$spli2[1];
|
|
172
|
-
var propertyName = (0, _utils.convertHyphenatedNameToCamelCase)(originalProperty);
|
|
173
|
-
var isFontFamily = /fontFamily/.test(propertyName);
|
|
174
|
-
var replacedValuesPerProperty = [originalProperty];
|
|
175
|
-
var domains = (0, _utils.getDomainsForProperty)(propertyName, config.domains);
|
|
176
|
-
if (domains.length === 0 || !resolvedCssValues) {
|
|
177
|
-
// in both of these cases no changes should be made to the current property
|
|
167
|
+
if (domains.includes('color')) {
|
|
168
|
+
if ((0, _utils.includesTokenString)(resolvedCssValues.trim())) {
|
|
178
169
|
return currentSource;
|
|
179
170
|
}
|
|
180
|
-
if (
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
171
|
+
if ((0, _isColor.includesHardCodedColor)(resolvedCssValues)) {
|
|
172
|
+
context.report({
|
|
173
|
+
messageId: 'hardCodedColor',
|
|
174
|
+
node: node
|
|
175
|
+
});
|
|
176
|
+
return currentSource;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
if (domains.includes('spacing') || domains.includes('shape')) {
|
|
180
|
+
if (!(0, _utils.isValidSpacingValue)(resolvedCssValues, globalFontSize)) {
|
|
181
|
+
// no changes should be made to the current property
|
|
182
|
+
return currentSource;
|
|
191
183
|
}
|
|
192
|
-
if (domains.includes('spacing') || domains.includes('shape')) {
|
|
193
|
-
if (!(0, _utils.isValidSpacingValue)(resolvedCssValues, globalFontSize)) {
|
|
194
|
-
// no changes should be made to the current property
|
|
195
|
-
return currentSource;
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
// gets the values from the associated property, numeric values or NaN
|
|
199
|
-
var processedNumericValues = (0, _utils.getValueFromShorthand)(resolvedCssValues);
|
|
200
|
-
var processedValues = (0, _utils.splitShorthandValues)(resolvedCssValues);
|
|
201
|
-
// only splits shorthand values but it does not transform NaNs so tokens are preserved
|
|
202
|
-
var originalValues = (0, _utils.splitShorthandValues)(originalCssValues);
|
|
203
|
-
|
|
204
|
-
// reconstructing the string
|
|
205
|
-
// should replace what it can and preserve the raw value for everything else
|
|
206
184
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
(0, _utils.emToPixels)(value, globalFontSize) || value, processedValues[index], originalValues[index]];
|
|
213
|
-
}).map(function (_ref3) {
|
|
214
|
-
var _ref4 = (0, _slicedToArray2.default)(_ref3, 3),
|
|
215
|
-
numericOrNanValue = _ref4[0],
|
|
216
|
-
pxValue = _ref4[1],
|
|
217
|
-
originalValue = _ref4[2];
|
|
218
|
-
if (!originalValue) {
|
|
219
|
-
return originalValue;
|
|
220
|
-
}
|
|
221
|
-
if ((0, _utils.isCalc)(originalValue)) {
|
|
222
|
-
context.report({
|
|
223
|
-
node: node,
|
|
224
|
-
messageId: 'noCalcUsage',
|
|
225
|
-
data: {
|
|
226
|
-
payload: "".concat(propertyName)
|
|
227
|
-
}
|
|
228
|
-
});
|
|
229
|
-
return originalValue;
|
|
230
|
-
}
|
|
231
|
-
if ((0, _utils.isTokenValueString)(originalValue)) {
|
|
232
|
-
// if the value is already valid, nothing to report or replace
|
|
233
|
-
return originalValue;
|
|
234
|
-
}
|
|
185
|
+
// gets the values from the associated property, numeric values or NaN
|
|
186
|
+
var processedNumericValues = (0, _utils.getValueFromShorthand)(resolvedCssValues);
|
|
187
|
+
var processedValues = (0, _utils.splitShorthandValues)(resolvedCssValues);
|
|
188
|
+
// only splits shorthand values but it does not transform NaNs so tokens are preserved
|
|
189
|
+
var originalValues = (0, _utils.splitShorthandValues)(originalCssValues);
|
|
235
190
|
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
return originalValue;
|
|
239
|
-
}
|
|
240
|
-
if (isNaN(numericOrNanValue) && !isFontFamily) {
|
|
241
|
-
// do not report if we have nothing to replace with
|
|
242
|
-
return originalValue;
|
|
243
|
-
}
|
|
191
|
+
// reconstructing the string
|
|
192
|
+
// should replace what it can and preserve the raw value for everything else
|
|
244
193
|
|
|
245
|
-
|
|
194
|
+
var replacementValue = processedNumericValues
|
|
195
|
+
// put together resolved value and original value on a tuple
|
|
196
|
+
.map(function (value, index) {
|
|
197
|
+
return [
|
|
198
|
+
// if emToPX conversion fails we'll default to original value
|
|
199
|
+
(0, _utils.emToPixels)(value, globalFontSize) || value, processedValues[index], originalValues[index]];
|
|
200
|
+
}).map(function (_ref3) {
|
|
201
|
+
var _ref4 = (0, _slicedToArray2.default)(_ref3, 3),
|
|
202
|
+
numericOrNanValue = _ref4[0],
|
|
203
|
+
pxValue = _ref4[1],
|
|
204
|
+
originalValue = _ref4[2];
|
|
205
|
+
if (!originalValue) {
|
|
206
|
+
return originalValue;
|
|
207
|
+
}
|
|
208
|
+
if ((0, _utils.isCalc)(originalValue)) {
|
|
246
209
|
context.report({
|
|
247
210
|
node: node,
|
|
248
|
-
messageId: '
|
|
211
|
+
messageId: 'noCalcUsage',
|
|
249
212
|
data: {
|
|
250
|
-
payload: "".concat(propertyName
|
|
213
|
+
payload: "".concat(propertyName)
|
|
251
214
|
}
|
|
252
215
|
});
|
|
216
|
+
return originalValue;
|
|
217
|
+
}
|
|
218
|
+
if ((0, _utils.isTokenValueString)(originalValue)) {
|
|
219
|
+
// if the value is already valid, nothing to report or replace
|
|
220
|
+
return originalValue;
|
|
221
|
+
}
|
|
253
222
|
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
return replacementToken;
|
|
262
|
-
}).join(' ');
|
|
263
|
-
if (replacedValuesPerProperty.length > 1) {
|
|
264
|
-
// first value is the property name, so it will always have at least 1
|
|
265
|
-
allReplacedValues.push(replacedValuesPerProperty);
|
|
223
|
+
// do not replace 0 or auto with tokens
|
|
224
|
+
if ((0, _utils.isZero)(pxValue) || (0, _utils.isAuto)(pxValue)) {
|
|
225
|
+
return originalValue;
|
|
226
|
+
}
|
|
227
|
+
if (isNaN(numericOrNanValue) && !isFontFamily) {
|
|
228
|
+
// do not report if we have nothing to replace with
|
|
229
|
+
return originalValue;
|
|
266
230
|
}
|
|
267
231
|
|
|
268
|
-
//
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
232
|
+
// value is numeric or fontFamily, and needs replacing we'll report first
|
|
233
|
+
context.report({
|
|
234
|
+
node: node,
|
|
235
|
+
messageId: 'noRawSpacingValues',
|
|
236
|
+
data: {
|
|
237
|
+
payload: "".concat(propertyName, ":").concat(numericOrNanValue)
|
|
238
|
+
}
|
|
239
|
+
});
|
|
240
|
+
|
|
241
|
+
// from here on we know value is numeric or a font family, so it might or might not have a token equivalent
|
|
242
|
+
var replacementNode = (0, _utils.getTokenReplacement)(propertyName, numericOrNanValue);
|
|
243
|
+
if (!replacementNode) {
|
|
244
|
+
return originalValue;
|
|
273
245
|
}
|
|
274
|
-
|
|
246
|
+
var replacementToken = '${' + replacementNode.toString() + '}';
|
|
247
|
+
replacedValuesPerProperty.push(isFontFamily ? numericOrNanValue.trim() : pxValue);
|
|
248
|
+
return replacementToken;
|
|
249
|
+
}).join(' ');
|
|
250
|
+
if (replacedValuesPerProperty.length > 1) {
|
|
251
|
+
// first value is the property name, so it will always have at least 1
|
|
252
|
+
allReplacedValues.push(replacedValuesPerProperty);
|
|
275
253
|
}
|
|
276
|
-
return currentSource;
|
|
277
|
-
}, textForSource);
|
|
278
|
-
if (completeSource !== textForSource) {
|
|
279
|
-
// means we found some replacement values, we'll give the option to fix them
|
|
280
254
|
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
255
|
+
// replace property:val with new property:val
|
|
256
|
+
var replacedCssLine = currentSource.replace(originalCssLine, // padding: ${gridSize()}px;
|
|
257
|
+
"".concat(originalProperty, ": ").concat(replacementValue));
|
|
258
|
+
if (!replacedCssLine) {
|
|
259
|
+
return currentSource;
|
|
260
|
+
}
|
|
261
|
+
return replacedCssLine;
|
|
288
262
|
}
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
263
|
+
return currentSource;
|
|
264
|
+
}, textForSource);
|
|
265
|
+
if (completeSource !== textForSource) {
|
|
266
|
+
// means we found some replacement values, we'll give the option to fix them
|
|
267
|
+
|
|
268
|
+
context.report({
|
|
269
|
+
node: node,
|
|
270
|
+
messageId: 'autofixesPossible',
|
|
271
|
+
fix: function fix(fixer) {
|
|
272
|
+
return (!tokenNode && config.applyImport ? [(0, _utils.insertTokensImport)(fixer)] : []).concat([fixer.replaceText(node.quasi, completeSource)]);
|
|
273
|
+
}
|
|
274
|
+
});
|
|
275
|
+
}
|
|
292
276
|
},
|
|
293
277
|
// For inline JSX styles - literals (e.g. <Test color="red"/>) - color only
|
|
294
278
|
'JSXAttribute > Literal': function JSXAttributeLiteral(node) {
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
return;
|
|
300
|
-
}, {
|
|
301
|
-
config: config
|
|
302
|
-
});
|
|
279
|
+
if (config.domains.includes('color')) {
|
|
280
|
+
return (0, _color.lintJSXLiteralForColor)(node, context, config);
|
|
281
|
+
}
|
|
282
|
+
return;
|
|
303
283
|
},
|
|
304
284
|
// For inline JSX styles - members (e.g. <Test color={color.red}/>) - color only
|
|
305
285
|
'JSXExpressionContainer > MemberExpression': function JSXExpressionContainerMemberExpression(node) {
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
return;
|
|
311
|
-
}, {
|
|
312
|
-
config: config
|
|
313
|
-
});
|
|
286
|
+
if (config.domains.includes('color')) {
|
|
287
|
+
return (0, _color.lintJSXMemberForColor)(node, context, config);
|
|
288
|
+
}
|
|
289
|
+
return;
|
|
314
290
|
},
|
|
315
291
|
// For inline JSX styles - identifiers (e.g. <Test color={red}/>) - color only
|
|
316
292
|
'JSXExpressionContainer > Identifier': function JSXExpressionContainerIdentifier(node) {
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
return;
|
|
322
|
-
}, {
|
|
323
|
-
config: config
|
|
324
|
-
});
|
|
293
|
+
if (config.domains.includes('color')) {
|
|
294
|
+
return (0, _color.lintJSXIdentifierForColor)(node, context, config);
|
|
295
|
+
}
|
|
296
|
+
return;
|
|
325
297
|
}
|
|
326
|
-
};
|
|
298
|
+
}, config);
|
|
327
299
|
};
|
|
328
300
|
};
|
|
329
301
|
var rule = (0, _createRule.createLintRule)({
|
|
@@ -11,6 +11,7 @@ var _ensureDesignTokenUsagePreview = _interopRequireDefault(require("./ensure-de
|
|
|
11
11
|
var _iconLabel = _interopRequireDefault(require("./icon-label"));
|
|
12
12
|
var _noBannedImports = _interopRequireDefault(require("./no-banned-imports"));
|
|
13
13
|
var _noCssTaggedTemplateExpression = _interopRequireDefault(require("./no-css-tagged-template-expression"));
|
|
14
|
+
var _noCustomIcons = _interopRequireDefault(require("./no-custom-icons"));
|
|
14
15
|
var _noDeprecatedApis = _interopRequireDefault(require("./no-deprecated-apis"));
|
|
15
16
|
var _noDeprecatedDesignTokenUsage = _interopRequireDefault(require("./no-deprecated-design-token-usage"));
|
|
16
17
|
var _noDeprecatedImports = _interopRequireDefault(require("./no-deprecated-imports"));
|
|
@@ -47,7 +48,7 @@ var _useTokensTypography = _interopRequireDefault(require("./use-tokens-typograp
|
|
|
47
48
|
var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
|
|
48
49
|
/**
|
|
49
50
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
50
|
-
* @codegen <<SignedSource::
|
|
51
|
+
* @codegen <<SignedSource::402e6eb5433560b1032e5ed926bb5564>>
|
|
51
52
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
52
53
|
*/
|
|
53
54
|
var _default = exports.default = {
|
|
@@ -57,6 +58,7 @@ var _default = exports.default = {
|
|
|
57
58
|
'icon-label': _iconLabel.default,
|
|
58
59
|
'no-banned-imports': _noBannedImports.default,
|
|
59
60
|
'no-css-tagged-template-expression': _noCssTaggedTemplateExpression.default,
|
|
61
|
+
'no-custom-icons': _noCustomIcons.default,
|
|
60
62
|
'no-deprecated-apis': _noDeprecatedApis.default,
|
|
61
63
|
'no-deprecated-design-token-usage': _noDeprecatedDesignTokenUsage.default,
|
|
62
64
|
'no-deprecated-imports': _noDeprecatedImports.default,
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.hasProp = hasProp;
|
|
7
|
+
var _eslintCodemodUtils = require("eslint-codemod-utils");
|
|
8
|
+
function hasProp(node, propName) {
|
|
9
|
+
return (0, _eslintCodemodUtils.isNodeOfType)(node.openingElement, 'JSXOpeningElement') && node.openingElement.attributes.some(function (a) {
|
|
10
|
+
return a.type === 'JSXAttribute' && a.name.name === propName;
|
|
11
|
+
});
|
|
12
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.createIsFromImportSourceFor = createIsFromImportSourceFor;
|
|
7
|
+
var _isImportedJsxElement = require("./is-imported-jsx-element");
|
|
8
|
+
function createIsFromImportSourceFor() {
|
|
9
|
+
for (var _len = arguments.length, importSources = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
10
|
+
importSources[_key] = arguments[_key];
|
|
11
|
+
}
|
|
12
|
+
var literalImportSources = importSources.filter(function (s) {
|
|
13
|
+
return typeof s === 'string';
|
|
14
|
+
});
|
|
15
|
+
var matchImportSources = importSources.filter(function (s) {
|
|
16
|
+
return s instanceof RegExp;
|
|
17
|
+
});
|
|
18
|
+
var varImportSourceMap = new Map();
|
|
19
|
+
function isFromImportSource(node) {
|
|
20
|
+
return (0, _isImportedJsxElement.isImportedJSXElement)(node) && varImportSourceMap.has(node.openingElement.name.name);
|
|
21
|
+
}
|
|
22
|
+
isFromImportSource.importDeclarationHook = function (node) {
|
|
23
|
+
var source = node.source.value;
|
|
24
|
+
if (typeof source !== 'string' || !(literalImportSources.includes(source) || matchImportSources.some(function (r) {
|
|
25
|
+
return r.test(source);
|
|
26
|
+
}))) {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
node.specifiers.filter(function (spec) {
|
|
30
|
+
return ['ImportSpecifier', 'ImportDefaultSpecifier'].includes(spec.type);
|
|
31
|
+
}).forEach(function (spec) {
|
|
32
|
+
return varImportSourceMap.set(spec.local.name, source);
|
|
33
|
+
});
|
|
34
|
+
};
|
|
35
|
+
isFromImportSource.getImportSource = function (node) {
|
|
36
|
+
if (!isFromImportSource(node)) {
|
|
37
|
+
throw new Error('Node is not an imported JSX element');
|
|
38
|
+
}
|
|
39
|
+
return varImportSourceMap.get(node.openingElement.name.name);
|
|
40
|
+
};
|
|
41
|
+
return isFromImportSource;
|
|
42
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.isImportedJSXElement = isImportedJSXElement;
|
|
7
|
+
var _eslintCodemodUtils = require("eslint-codemod-utils");
|
|
8
|
+
function isImportedJSXElement(node) {
|
|
9
|
+
return (0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement') && (0, _eslintCodemodUtils.isNodeOfType)(node.openingElement.name, 'JSXIdentifier');
|
|
10
|
+
}
|