eslint-plugin-primer-react 4.2.0 → 5.0.0-rc.2db7a42

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 (12) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/docs/rules/new-css-color-vars.md +2 -2
  3. package/package-lock.json +14804 -0
  4. package/package.json +1 -1
  5. package/src/configs/recommended.js +0 -1
  6. package/src/index.js +0 -1
  7. package/src/rules/__tests__/new-color-css-vars.test.js +90 -98
  8. package/src/rules/new-color-css-vars.js +2 -2
  9. package/docs/rules/new-color-css-vars-have-fallback.md +0 -25
  10. package/src/rules/__tests__/new-css-vars-have-fallback.test.js +0 -31
  11. package/src/rules/new-color-css-vars-have-fallback.js +0 -87
  12. package/src/utils/new-color-css-vars-map.json +0 -326
package/src/rules/new-color-css-vars-have-fallback.js DELETED
@@ -1,87 +0,0 @@
1
- const cssVars = require('../utils/new-color-css-vars-map')
2
-
3
- const reportError = (propertyName, valueNode, context) => {
4
- // performance optimisation: exit early
5
- if (valueNode.type !== 'Literal' && valueNode.type !== 'TemplateElement') return
6
- // get property value
7
- const value = valueNode.type === 'Literal' ? valueNode.value : valueNode.value.cooked
8
- // return if value is not a string
9
- if (typeof value !== 'string') return
10
- // return if value does not include variable
11
- if (!value.includes('var(')) return
12
-
13
- const varRegex = /var\([^(),)]+\)/g
14
-
15
- const match = value.match(varRegex)
16
- // return if no matches
17
- if (!match) return
18
- const vars = match.flatMap(match =>
19
- match
20
- .slice(4, -1)
21
- .trim()
22
- .split(/\s*,\s*/g),
23
- )
24
- for (const cssVar of vars) {
25
- // return if no repalcement exists
26
- if (!cssVars?.includes(cssVar)) return
27
- // report the error
28
- context.report({
29
- node: valueNode,
30
- message: `Expected a fallback value for CSS variable ${cssVar}. New color variables fallbacks, check primer.style/primitives to find the correct value.`,
31
- })
32
- }
33
- }
34
-
35
- const reportOnObject = (node, context) => {
36
- const propertyName = node.key.name
37
- if (node.value?.type === 'Literal') {
38
- reportError(propertyName, node.value, context)
39
- } else if (node.value?.type === 'ConditionalExpression') {
40
- reportError(propertyName, node.value.consequent, context)
41
- reportError(propertyName, node.value.alternate, context)
42
- }
43
- }
44
-
45
- const reportOnProperty = (node, context) => {
46
- const propertyName = node.name.name
47
- if (node.value?.type === 'Literal') {
48
- reportError(propertyName, node.value, context)
49
- } else if (node.value?.type === 'JSXExpressionContainer' && node.value.expression?.type === 'ConditionalExpression') {
50
- reportError(propertyName, node.value.expression.consequent, context)
51
- reportError(propertyName, node.value.expression.alternate, context)
52
- }
53
- }
54
-
55
- const reportOnValue = (node, context) => {
56
- if (node?.type === 'Literal') {
57
- reportError(undefined, node, context)
58
- } else if (node?.type === 'JSXExpressionContainer' && node.expression?.type === 'ConditionalExpression') {
59
- reportError(undefined, node.value.expression.consequent, context)
60
- reportError(undefined, node.value.expression.alternate, context)
61
- }
62
- }
63
-
64
- const reportOnTemplateElement = (node, context) => {
65
- reportError(undefined, node, context)
66
- }
67
-
68
- module.exports = {
69
- meta: {
70
- type: 'suggestion',
71
- },
72
- /** @param {import('eslint').Rule.RuleContext} context */
73
- create(context) {
74
- return {
75
- // sx OR style property on elements
76
- ['JSXAttribute:matches([name.name=sx], [name.name=style]) ObjectExpression Property']: node =>
77
- reportOnObject(node, context),
78
- // property on element like stroke or fill
79
- ['JSXAttribute[name.name!=sx][name.name!=style]']: node => reportOnProperty(node, context),
80
- // variable that is a value
81
- [':matches(VariableDeclarator, ReturnStatement) > Literal']: node => reportOnValue(node, context),
82
- // variable that is a value
83
- [':matches(VariableDeclarator, ReturnStatement) > TemplateElement']: node =>
84
- reportOnTemplateElement(node, context),
85
- }
86
- },
87
- }
package/src/utils/new-color-css-vars-map.json DELETED
@@ -1,326 +0,0 @@
1
- [
2
- "--topicTag-borderColor",
3
- "--highlight-neutral-bgColor",
4
- "--page-header-bgColor",
5
- "--diffBlob-addition-fgColor-text",
6
- "--diffBlob-addition-fgColor-num",
7
- "--diffBlob-addition-bgColor-num",
8
- "--diffBlob-addition-bgColor-line",
9
- "--diffBlob-addition-bgColor-word",
10
- "--diffBlob-deletion-fgColor-text",
11
- "--diffBlob-deletion-fgColor-num",
12
- "--diffBlob-deletion-bgColor-num",
13
- "--diffBlob-deletion-bgColor-line",
14
- "--diffBlob-deletion-bgColor-word",
15
- "--diffBlob-hunk-bgColor-num",
16
- "--diffBlob-expander-iconColor",
17
- "--codeMirror-fgColor",
18
- "--codeMirror-bgColor",
19
- "--codeMirror-gutters-bgColor",
20
- "--codeMirror-gutterMarker-fgColor-default",
21
- "--codeMirror-gutterMarker-fgColor-muted",
22
- "--codeMirror-lineNumber-fgColor",
23
- "--codeMirror-cursor-fgColor",
24
- "--codeMirror-selection-bgColor",
25
- "--codeMirror-activeline-bgColor",
26
- "--codeMirror-matchingBracket-fgColor",
27
- "--codeMirror-lines-bgColor",
28
- "--codeMirror-syntax-fgColor-comment",
29
- "--codeMirror-syntax-fgColor-constant",
30
- "--codeMirror-syntax-fgColor-entity",
31
- "--codeMirror-syntax-fgColor-keyword",
32
- "--codeMirror-syntax-fgColor-storage",
33
- "--codeMirror-syntax-fgColor-string",
34
- "--codeMirror-syntax-fgColor-support",
35
- "--codeMirror-syntax-fgColor-variable",
36
- "--header-fgColor-default",
37
- "--header-fgColor-logo",
38
- "--header-bgColor",
39
- "--header-borderColor-divider",
40
- "--headerSearch-bgColor",
41
- "--headerSearch-borderColor",
42
- "--avatar-bgColor",
43
- "--avatar-borderColor",
44
- "--avatar-shadow",
45
- "--avatarStack-fade-bgColor-default",
46
- "--avatarStack-fade-bgColor-muted",
47
- "--control-bgColor-rest",
48
- "--control-bgColor-hover",
49
- "--control-bgColor-active",
50
- "--control-bgColor-disabled",
51
- "--control-bgColor-selected",
52
- "--control-fgColor-rest",
53
- "--control-fgColor-placeholder",
54
- "--control-fgColor-disabled",
55
- "--control-borderColor-rest",
56
- "--control-borderColor-emphasis",
57
- "--control-borderColor-disabled",
58
- "--control-borderColor-selected",
59
- "--control-borderColor-success",
60
- "--control-borderColor-danger",
61
- "--control-borderColor-warning",
62
- "--control-iconColor-rest",
63
- "--control-transparent-bgColor-rest",
64
- "--control-transparent-bgColor-hover",
65
- "--control-transparent-bgColor-active",
66
- "--control-transparent-bgColor-disabled",
67
- "--control-transparent-bgColor-selected",
68
- "--control-transparent-borderColor-rest",
69
- "--control-transparent-borderColor-hover",
70
- "--control-transparent-borderColor-active",
71
- "--control-danger-fgColor-rest",
72
- "--control-danger-fgColor-hover",
73
- "--control-danger-bgColor-hover",
74
- "--control-danger-bgColor-active",
75
- "--control-checked-bgColor-rest",
76
- "--control-checked-bgColor-hover",
77
- "--control-checked-bgColor-active",
78
- "--control-checked-bgColor-disabled",
79
- "--control-checked-fgColor-rest",
80
- "--control-checked-fgColor-disabled",
81
- "--control-checked-borderColor-rest",
82
- "--control-checked-borderColor-hover",
83
- "--control-checked-borderColor-active",
84
- "--control-checked-borderColor-disabled",
85
- "--controlTrack-bgColor-rest",
86
- "--controlTrack-bgColor-hover",
87
- "--controlTrack-bgColor-active",
88
- "--controlTrack-bgColor-disabled",
89
- "--controlTrack-fgColor-rest",
90
- "--controlTrack-fgColor-disabled",
91
- "--controlTrack-borderColor-rest",
92
- "--controlTrack-borderColor-disabled",
93
- "--controlKnob-bgColor-rest",
94
- "--controlKnob-bgColor-disabled",
95
- "--controlKnob-bgColor-checked",
96
- "--controlKnob-borderColor-rest",
97
- "--controlKnob-borderColor-disabled",
98
- "--controlKnob-borderColor-checked",
99
- "--counter-borderColor",
100
- "--button-default-fgColor-rest",
101
- "--button-default-bgColor-rest",
102
- "--button-default-bgColor-hover",
103
- "--button-default-bgColor-active",
104
- "--button-default-bgColor-selected",
105
- "--button-default-bgColor-disabled",
106
- "--button-default-borderColor-rest",
107
- "--button-default-borderColor-hover",
108
- "--button-default-borderColor-active",
109
- "--button-default-borderColor-disabled",
110
- "--button-default-shadow-resting",
111
- "--button-primary-fgColor-rest",
112
- "--button-primary-fgColor-disabled",
113
- "--button-primary-iconColor-rest",
114
- "--button-primary-bgColor-rest",
115
- "--button-primary-bgColor-hover",
116
- "--button-primary-bgColor-active",
117
- "--button-primary-bgColor-disabled",
118
- "--button-primary-borderColor-rest",
119
- "--button-primary-borderColor-hover",
120
- "--button-primary-borderColor-active",
121
- "--button-primary-borderColor-disabled",
122
- "--button-primary-shadow-selected",
123
- "--button-invisible-fgColor-rest",
124
- "--button-invisible-fgColor-hover",
125
- "--button-invisible-fgColor-disabled",
126
- "--button-invisible-iconColor-rest",
127
- "--button-invisible-iconColor-hover",
128
- "--button-invisible-iconColor-disabled",
129
- "--button-invisible-bgColor-rest",
130
- "--button-invisible-bgColor-hover",
131
- "--button-invisible-bgColor-active",
132
- "--button-invisible-bgColor-disabled",
133
- "--button-invisible-borderColor-rest",
134
- "--button-invisible-borderColor-hover",
135
- "--button-invisible-borderColor-disabled",
136
- "--button-outline-fgColor-rest",
137
- "--button-outline-fgColor-hover",
138
- "--button-outline-fgColor-active",
139
- "--button-outline-fgColor-disabled",
140
- "--button-outline-bgColor-rest",
141
- "--button-outline-bgColor-hover",
142
- "--button-outline-bgColor-active",
143
- "--button-outline-bgColor-disabled",
144
- "--button-outline-borderColor-hover",
145
- "--button-outline-borderColor-selected",
146
- "--button-outline-shadow-selected",
147
- "--button-danger-fgColor-rest",
148
- "--button-danger-fgColor-hover",
149
- "--button-danger-fgColor-active",
150
- "--button-danger-fgColor-disabled",
151
- "--button-danger-iconColor-rest",
152
- "--button-danger-iconColor-hover",
153
- "--button-danger-bgColor-rest",
154
- "--button-danger-bgColor-hover",
155
- "--button-danger-bgColor-active",
156
- "--button-danger-bgColor-disabled",
157
- "--button-danger-borderColor-rest",
158
- "--button-danger-borderColor-hover",
159
- "--button-danger-borderColor-active",
160
- "--button-danger-shadow-selected",
161
- "--button-inactive-fgColor-rest",
162
- "--button-inactive-bgColor-rest",
163
- "--buttonCounter-default-bgColor-rest",
164
- "--buttonCounter-invisible-bgColor-rest",
165
- "--buttonCounter-primary-bgColor-rest",
166
- "--buttonCounter-outline-bgColor-rest",
167
- "--buttonCounter-outline-bgColor-hover",
168
- "--buttonCounter-outline-bgColor-disabled",
169
- "--buttonCounter-outline-fgColor-rest",
170
- "--buttonCounter-outline-fgColor-hover",
171
- "--buttonCounter-outline-fgColor-disabled",
172
- "--buttonCounter-danger-bgColor-hover",
173
- "--buttonCounter-danger-bgColor-disabled",
174
- "--buttonCounter-danger-bgColor-rest",
175
- "--buttonCounter-danger-fgColor-rest",
176
- "--buttonCounter-danger-fgColor-hover",
177
- "--buttonCounter-danger-fgColor-disabled",
178
- "--focus-outlineColor",
179
- "--menu-bgColor-active",
180
- "--overlay-bgColor",
181
- "--overlay-backdrop-bgColor",
182
- "--selectMenu-borderColor",
183
- "--selectMenu-bgColor-active",
184
- "--sideNav-bgColor-selected",
185
- "--skeletonLoader-bgColor",
186
- "--timelineBadge-bgColor",
187
- "--treeViewItem-leadingVisual-iconColor-rest",
188
- "--underlineNav-borderColor-active",
189
- "--underlineNav-borderColor-hover",
190
- "--underlineNav-iconColor-rest",
191
- "--fgColor-default",
192
- "--fgColor-muted",
193
- "--fgColor-onEmphasis",
194
- "--fgColor-onInverse",
195
- "--fgColor-disabled",
196
- "--fgColor-link",
197
- "--fgColor-link-onInverse",
198
- "--fgColor-neutral",
199
- "--fgColor-neutral-onInverse",
200
- "--fgColor-accent",
201
- "--fgColor-accent-onInverse",
202
- "--fgColor-success",
203
- "--fgColor-success-onInverse",
204
- "--fgColor-attention",
205
- "--fgColor-attention-onInverse",
206
- "--fgColor-severe",
207
- "--fgColor-severe-onInverse",
208
- "--fgColor-danger",
209
- "--fgColor-danger-onInverse",
210
- "--fgColor-open",
211
- "--fgColor-open-onInverse",
212
- "--fgColor-closed",
213
- "--fgColor-closed-onInverse",
214
- "--fgColor-done",
215
- "--fgColor-done-onInverse",
216
- "--fgColor-sponsors",
217
- "--fgColor-sponsors-onInverse",
218
- "--bgColor-default",
219
- "--bgColor-muted",
220
- "--bgColor-inset",
221
- "--bgColor-emphasis",
222
- "--bgColor-inverse",
223
- "--bgColor-disabled",
224
- "--bgColor-transparent",
225
- "--bgColor-neutral-muted",
226
- "--bgColor-neutral-emphasis",
227
- "--bgColor-accent-muted",
228
- "--bgColor-accent-emphasis",
229
- "--bgColor-success-muted",
230
- "--bgColor-success-emphasis",
231
- "--bgColor-attention-muted",
232
- "--bgColor-attention-emphasis",
233
- "--bgColor-severe-muted",
234
- "--bgColor-severe-emphasis",
235
- "--bgColor-danger-muted",
236
- "--bgColor-danger-emphasis",
237
- "--bgColor-open-muted",
238
- "--bgColor-open-emphasis",
239
- "--bgColor-closed-muted",
240
- "--bgColor-closed-emphasis",
241
- "--bgColor-done-muted",
242
- "--bgColor-done-emphasis",
243
- "--bgColor-sponsors-muted",
244
- "--bgColor-sponsors-emphasis",
245
- "--borderColor-default",
246
- "--borderColor-muted",
247
- "--borderColor-emphasis",
248
- "--borderColor-disabled",
249
- "--borderColor-transparent",
250
- "--borderColor-neutral-muted",
251
- "--borderColor-neutral-emphasis",
252
- "--borderColor-accent-muted",
253
- "--borderColor-accent-emphasis",
254
- "--borderColor-success-muted",
255
- "--borderColor-success-emphasis",
256
- "--borderColor-attention-muted",
257
- "--borderColor-attention-emphasis",
258
- "--borderColor-severe-muted",
259
- "--borderColor-severe-emphasis",
260
- "--borderColor-danger-muted",
261
- "--borderColor-danger-emphasis",
262
- "--borderColor-open-muted",
263
- "--borderColor-open-emphasis",
264
- "--borderColor-closed-muted",
265
- "--borderColor-closed-emphasis",
266
- "--borderColor-done-muted",
267
- "--borderColor-done-emphasis",
268
- "--borderColor-sponsors-muted",
269
- "--borderColor-sponsors-emphasis",
270
- "--color-ansi-black",
271
- "--color-ansi-black-bright",
272
- "--color-ansi-white",
273
- "--color-ansi-white-bright",
274
- "--color-ansi-gray",
275
- "--color-ansi-red",
276
- "--color-ansi-red-bright",
277
- "--color-ansi-green",
278
- "--color-ansi-green-bright",
279
- "--color-ansi-yellow",
280
- "--color-ansi-yellow-bright",
281
- "--color-ansi-blue",
282
- "--color-ansi-blue-bright",
283
- "--color-ansi-magenta",
284
- "--color-ansi-magenta-bright",
285
- "--color-ansi-cyan",
286
- "--color-ansi-cyan-bright",
287
- "--color-prettylights-syntax-comment",
288
- "--color-prettylights-syntax-constant",
289
- "--color-prettylights-syntax-constant-other-reference-link",
290
- "--color-prettylights-syntax-entity",
291
- "--color-prettylights-syntax-storage-modifier-import",
292
- "--color-prettylights-syntax-entity-tag",
293
- "--color-prettylights-syntax-keyword",
294
- "--color-prettylights-syntax-string",
295
- "--color-prettylights-syntax-variable",
296
- "--color-prettylights-syntax-brackethighlighter-unmatched",
297
- "--color-prettylights-syntax-brackethighlighter-angle",
298
- "--color-prettylights-syntax-invalid-illegal-text",
299
- "--color-prettylights-syntax-invalid-illegal-bg",
300
- "--color-prettylights-syntax-carriage-return-text",
301
- "--color-prettylights-syntax-carriage-return-bg",
302
- "--color-prettylights-syntax-string-regexp",
303
- "--color-prettylights-syntax-markup-list",
304
- "--color-prettylights-syntax-markup-heading",
305
- "--color-prettylights-syntax-markup-italic",
306
- "--color-prettylights-syntax-markup-bold",
307
- "--color-prettylights-syntax-markup-deleted-text",
308
- "--color-prettylights-syntax-markup-deleted-bg",
309
- "--color-prettylights-syntax-markup-inserted-text",
310
- "--color-prettylights-syntax-markup-inserted-bg",
311
- "--color-prettylights-syntax-markup-changed-text",
312
- "--color-prettylights-syntax-markup-changed-bg",
313
- "--color-prettylights-syntax-markup-ignored-text",
314
- "--color-prettylights-syntax-markup-ignored-bg",
315
- "--color-prettylights-syntax-meta-diff-range",
316
- "--color-prettylights-syntax-sublimelinter-gutter-mark",
317
- "--shadow-inset",
318
- "--shadow-resting-xsmall",
319
- "--shadow-resting-small",
320
- "--shadow-resting-medium",
321
- "--shadow-floating-small",
322
- "--shadow-floating-medium",
323
- "--shadow-floating-large",
324
- "--shadow-floating-xlarge",
325
- "--outline-focus"
326
- ]