@primer/stylelint-config 13.4.2 → 13.5.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.
Files changed (5) hide show
  1. package/dist/index.cjs +32 -2
  2. package/dist/index.mjs +32 -2
  3. package/package.json +2 -2
  4. package/plugins/borders.js +28 -1
  5. package/plugins/box-shadow.js +4 -1
package/dist/index.cjs CHANGED
@@ -86,6 +86,8 @@ const {
86
86
 
87
87
  const ruleName$6 = 'primer/borders';
88
88
  const messages$6 = ruleMessages$4(ruleName$6, {
89
+ recommendAlternative: (token, recommended) =>
90
+ `Consider using '${recommended}' instead of '${token}'. https://primer.style/foundations/primitives/size#border`,
89
91
  rejected: (value, replacement, propName) => {
90
92
  if (propName && propName.includes('radius') && value.includes('borderWidth')) {
91
93
  return `Border radius variables can not be used for border widths`
@@ -119,7 +121,7 @@ const borderShorthand = prop =>
119
121
  for (const variable of variables$3) {
120
122
  const name = variable['name'];
121
123
 
122
- if (name.includes('borderWidth')) {
124
+ if (name.includes('borderWidth') && name !== '--borderWidth-default') {
123
125
  const value = variable['values']
124
126
  .pop()
125
127
  .replace(/max|\(|\)/g, '')
@@ -226,6 +228,19 @@ const ruleFunction$4 = primary => {
226
228
  if (checkForVariable(sizes$1, node.value)) {
227
229
  return
228
230
  }
231
+ // Accept borderWidth-default but warn to use borderWidth-thin
232
+ if (/--borderWidth-default\b/.test(node.value)) {
233
+ report$4({
234
+ index: nodeFieldIndices_cjs.declarationValueIndex(declNode) + node.sourceIndex,
235
+ endIndex: nodeFieldIndices_cjs.declarationValueIndex(declNode) + node.sourceIndex + node.value.length,
236
+ message: messages$6.recommendAlternative('--borderWidth-default', '--borderWidth-thin'),
237
+ node: declNode,
238
+ result,
239
+ ruleName: ruleName$6,
240
+ severity: 'warning',
241
+ });
242
+ return
243
+ }
229
244
  // Check for composite border variables on border shorthand
230
245
  if (borderShorthand(prop) && checkForVariable(compositeBorders, node.value)) {
231
246
  return
@@ -234,6 +249,18 @@ const ruleFunction$4 = primary => {
234
249
 
235
250
  if (prop.includes('radius')) {
236
251
  if (checkForVariable(radii, node.value)) {
252
+ // Warn when using borderRadius-default, recommend borderRadius-medium
253
+ if (/--borderRadius-default\b/.test(node.value)) {
254
+ report$4({
255
+ index: nodeFieldIndices_cjs.declarationValueIndex(declNode) + node.sourceIndex,
256
+ endIndex: nodeFieldIndices_cjs.declarationValueIndex(declNode) + node.sourceIndex + node.value.length,
257
+ message: messages$6.recommendAlternative('--borderRadius-default', '--borderRadius-medium'),
258
+ node: declNode,
259
+ result,
260
+ ruleName: ruleName$6,
261
+ severity: 'warning',
262
+ });
263
+ }
237
264
  return
238
265
  }
239
266
  }
@@ -331,7 +358,10 @@ const ruleFunction$3 = primary => {
331
358
  return
332
359
  }
333
360
 
334
- const replacement = validValues.find(variable => variable.values.includes(value));
361
+ const normalizedValue = value.replace(/\b0px\b/g, '0');
362
+ const replacement = validValues.find(
363
+ variable => variable.values.includes(value) || variable.values.includes(normalizedValue),
364
+ );
335
365
  let fix = undefined;
336
366
  if (replacement) {
337
367
  fix = () => {
package/dist/index.mjs CHANGED
@@ -83,6 +83,8 @@ const {
83
83
 
84
84
  const ruleName$6 = 'primer/borders';
85
85
  const messages$6 = ruleMessages$4(ruleName$6, {
86
+ recommendAlternative: (token, recommended) =>
87
+ `Consider using '${recommended}' instead of '${token}'. https://primer.style/foundations/primitives/size#border`,
86
88
  rejected: (value, replacement, propName) => {
87
89
  if (propName && propName.includes('radius') && value.includes('borderWidth')) {
88
90
  return `Border radius variables can not be used for border widths`
@@ -116,7 +118,7 @@ const borderShorthand = prop =>
116
118
  for (const variable of variables$3) {
117
119
  const name = variable['name'];
118
120
 
119
- if (name.includes('borderWidth')) {
121
+ if (name.includes('borderWidth') && name !== '--borderWidth-default') {
120
122
  const value = variable['values']
121
123
  .pop()
122
124
  .replace(/max|\(|\)/g, '')
@@ -223,6 +225,19 @@ const ruleFunction$4 = primary => {
223
225
  if (checkForVariable(sizes$1, node.value)) {
224
226
  return
225
227
  }
228
+ // Accept borderWidth-default but warn to use borderWidth-thin
229
+ if (/--borderWidth-default\b/.test(node.value)) {
230
+ report$4({
231
+ index: declarationValueIndex(declNode) + node.sourceIndex,
232
+ endIndex: declarationValueIndex(declNode) + node.sourceIndex + node.value.length,
233
+ message: messages$6.recommendAlternative('--borderWidth-default', '--borderWidth-thin'),
234
+ node: declNode,
235
+ result,
236
+ ruleName: ruleName$6,
237
+ severity: 'warning',
238
+ });
239
+ return
240
+ }
226
241
  // Check for composite border variables on border shorthand
227
242
  if (borderShorthand(prop) && checkForVariable(compositeBorders, node.value)) {
228
243
  return
@@ -231,6 +246,18 @@ const ruleFunction$4 = primary => {
231
246
 
232
247
  if (prop.includes('radius')) {
233
248
  if (checkForVariable(radii, node.value)) {
249
+ // Warn when using borderRadius-default, recommend borderRadius-medium
250
+ if (/--borderRadius-default\b/.test(node.value)) {
251
+ report$4({
252
+ index: declarationValueIndex(declNode) + node.sourceIndex,
253
+ endIndex: declarationValueIndex(declNode) + node.sourceIndex + node.value.length,
254
+ message: messages$6.recommendAlternative('--borderRadius-default', '--borderRadius-medium'),
255
+ node: declNode,
256
+ result,
257
+ ruleName: ruleName$6,
258
+ severity: 'warning',
259
+ });
260
+ }
234
261
  return
235
262
  }
236
263
  }
@@ -328,7 +355,10 @@ const ruleFunction$3 = primary => {
328
355
  return
329
356
  }
330
357
 
331
- const replacement = validValues.find(variable => variable.values.includes(value));
358
+ const normalizedValue = value.replace(/\b0px\b/g, '0');
359
+ const replacement = validValues.find(
360
+ variable => variable.values.includes(value) || variable.values.includes(normalizedValue),
361
+ );
332
362
  let fix = undefined;
333
363
  if (replacement) {
334
364
  fix = () => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/stylelint-config",
3
- "version": "13.4.2",
3
+ "version": "13.5.0",
4
4
  "description": "Sharable stylelint config used by GitHub's CSS",
5
5
  "author": "GitHub, Inc.",
6
6
  "license": "MIT",
@@ -58,7 +58,7 @@
58
58
  "@changesets/changelog-github": "^0.5.0",
59
59
  "@changesets/cli": "2.29.8",
60
60
  "@github/prettier-config": "^0.0.6",
61
- "@primer/primitives": "^11.4.0",
61
+ "@primer/primitives": "^11.5.0",
62
62
  "@rollup/plugin-commonjs": "^29.0.0",
63
63
  "@rollup/plugin-json": "^6.1.0",
64
64
  "@rollup/plugin-node-resolve": "^16.0.3",
package/plugins/borders.js CHANGED
@@ -10,6 +10,8 @@ const {
10
10
 
11
11
  export const ruleName = 'primer/borders'
12
12
  export const messages = ruleMessages(ruleName, {
13
+ recommendAlternative: (token, recommended) =>
14
+ `Consider using '${recommended}' instead of '${token}'. https://primer.style/foundations/primitives/size#border`,
13
15
  rejected: (value, replacement, propName) => {
14
16
  if (propName && propName.includes('radius') && value.includes('borderWidth')) {
15
17
  return `Border radius variables can not be used for border widths`
@@ -43,7 +45,7 @@ const borderShorthand = prop =>
43
45
  for (const variable of variables) {
44
46
  const name = variable['name']
45
47
 
46
- if (name.includes('borderWidth')) {
48
+ if (name.includes('borderWidth') && name !== '--borderWidth-default') {
47
49
  const value = variable['values']
48
50
  .pop()
49
51
  .replace(/max|\(|\)/g, '')
@@ -150,6 +152,19 @@ const ruleFunction = primary => {
150
152
  if (checkForVariable(sizes, node.value)) {
151
153
  return
152
154
  }
155
+ // Accept borderWidth-default but warn to use borderWidth-thin
156
+ if (/--borderWidth-default\b/.test(node.value)) {
157
+ report({
158
+ index: declarationValueIndex(declNode) + node.sourceIndex,
159
+ endIndex: declarationValueIndex(declNode) + node.sourceIndex + node.value.length,
160
+ message: messages.recommendAlternative('--borderWidth-default', '--borderWidth-thin'),
161
+ node: declNode,
162
+ result,
163
+ ruleName,
164
+ severity: 'warning',
165
+ })
166
+ return
167
+ }
153
168
  // Check for composite border variables on border shorthand
154
169
  if (borderShorthand(prop) && checkForVariable(compositeBorders, node.value)) {
155
170
  return
@@ -158,6 +173,18 @@ const ruleFunction = primary => {
158
173
 
159
174
  if (prop.includes('radius')) {
160
175
  if (checkForVariable(radii, node.value)) {
176
+ // Warn when using borderRadius-default, recommend borderRadius-medium
177
+ if (/--borderRadius-default\b/.test(node.value)) {
178
+ report({
179
+ index: declarationValueIndex(declNode) + node.sourceIndex,
180
+ endIndex: declarationValueIndex(declNode) + node.sourceIndex + node.value.length,
181
+ message: messages.recommendAlternative('--borderRadius-default', '--borderRadius-medium'),
182
+ node: declNode,
183
+ result,
184
+ ruleName,
185
+ severity: 'warning',
186
+ })
187
+ }
161
188
  return
162
189
  }
163
190
  }
package/plugins/box-shadow.js CHANGED
@@ -59,7 +59,10 @@ const ruleFunction = primary => {
59
59
  return
60
60
  }
61
61
 
62
- const replacement = validValues.find(variable => variable.values.includes(value))
62
+ const normalizedValue = value.replace(/\b0px\b/g, '0')
63
+ const replacement = validValues.find(
64
+ variable => variable.values.includes(value) || variable.values.includes(normalizedValue),
65
+ )
63
66
  let fix = undefined
64
67
  if (replacement) {
65
68
  fix = () => {