Skip to content

Commit 930e5f2

Browse files
jonrohanjonrohan
authored
Stylelint fixes based on feedback (#479)
* Remove the border: none restriction * Ignore font-style problems * Adjust font rules * Remove deprecated context.fix * Remove unused vars * Create weak-walls-stare.md
1 parent c8bb2e8 commit 930e5f2

File tree

4 files changed

+48
-76
lines changed

4 files changed

+48
-76
lines changed

‎.changeset/weak-walls-stare.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
"@primer/stylelint-config": patch
3+
---
4+
5+
Stylelint fixes based on feedback:
6+
7+
- `font-style` should allow keywords, `italic, normal`
8+
- border should allow `none` https://stylelint.io/user-guide/rules/declaration-property-value-disallowed-list
9+
- Update autofix in typography to always replace with the first suggestion

‎__tests__/typography.js

+22-59
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,10 @@ testRule({
4343
code: '.x { font: var(--text-display-shorthand); }',
4444
description: 'CSS > Accepts font shorthand variables',
4545
},
46+
{
47+
code: '.x { font-style: italic; }',
48+
description: 'CSS > Ignores font-style property',
49+
},
4650
],
4751
reject: [
4852
// Font sizes
@@ -73,25 +77,15 @@ testRule({
7377
endColumn: 23,
7478
description: "CSS > Replaces '2.5rem' with 'var(--text-display-size)'.",
7579
},
76-
{
77-
code: '.x { font-size: 1.25rem; }',
78-
unfixable: true,
79-
message: messages.rejected('1.25rem', [{name: '--text-title-size-medium'}, {name: '--text-subtitle-size'}]),
80-
line: 1,
81-
column: 17,
82-
endColumn: 24,
83-
description: "CSS > Suggests list of variables to replace '1.25rem' with.",
84-
},
8580
// Font weights
8681
{
8782
code: '.x { font-weight: 500; }',
88-
unfixable: true,
89-
message: messages.rejected('500', [{name: '--base-text-weight-medium'}, {name: '--text-display-weight'}]),
83+
fixed: '.x { font-weight: var(--base-text-weight-medium); }',
84+
message: messages.rejected('500', {name: '--base-text-weight-medium'}),
9085
line: 1,
9186
column: 19,
9287
endColumn: 22,
93-
description:
94-
"CSS > Errors on font-weight of 500 and suggests '--base-text-weight-medium' or '--text-display-weight'.",
88+
description: "CSS > Errors on font-weight of 500 and suggests '--base-text-weight-medium'.",
9589
},
9690
{
9791
code: '.x { font-weight: 100; }',
@@ -104,18 +98,12 @@ testRule({
10498
},
10599
{
106100
code: '.x { font-weight: 800; }',
107-
unfixable: true,
108-
message: messages.rejected('800', [
109-
{name: '--base-text-weight-semibold'},
110-
{name: '--text-title-weight-large'},
111-
{name: '--text-title-weight-medium'},
112-
{name: '--text-title-weight-small'},
113-
]),
101+
fixed: '.x { font-weight: var(--base-text-weight-semibold); }',
102+
message: messages.rejected('800', {name: '--base-text-weight-semibold'}),
114103
line: 1,
115104
column: 19,
116105
endColumn: 22,
117-
description:
118-
"CSS > Errors on font-weight greater than 600 and suggests '--base-text-weight-semibold', '--text-title-weight-large', '--text-title-weight-medium', or '--text-title-weight-small'.",
106+
description: "CSS > Errors on font-weight greater than 600 and suggests '--base-text-weight-semibold'.",
119107
},
120108
{
121109
code: '.x { font-weight: lighter; }',
@@ -128,50 +116,30 @@ testRule({
128116
},
129117
{
130118
code: '.x { font-weight: bold; }',
131-
unfixable: true,
132-
message: messages.rejected('bold', [
133-
{name: '--base-text-weight-semibold'},
134-
{name: '--text-title-weight-large'},
135-
{name: '--text-title-weight-medium'},
136-
{name: '--text-title-weight-small'},
137-
]),
119+
fixed: '.x { font-weight: var(--base-text-weight-semibold); }',
120+
message: messages.rejected('bold', {name: '--base-text-weight-semibold'}),
138121
line: 1,
139122
column: 19,
140123
endColumn: 23,
141-
description:
142-
"CSS > Errors on 'bold' font-weight keyword and suggests '--base-text-weight-semibold', '--text-title-weight-large', '--text-title-weight-medium', or '--text-title-weight-small'.",
124+
description: "CSS > Errors on 'bold' font-weight keyword and suggests '--base-text-weight-semibold'.",
143125
},
144126
{
145127
code: '.x { font-weight: bolder; }',
146-
unfixable: true,
147-
message: messages.rejected('bolder', [
148-
{name: '--base-text-weight-semibold'},
149-
{name: '--text-title-weight-large'},
150-
{name: '--text-title-weight-medium'},
151-
{name: '--text-title-weight-small'},
152-
]),
128+
fixed: '.x { font-weight: var(--base-text-weight-semibold); }',
129+
message: messages.rejected('bolder', {name: '--base-text-weight-semibold'}),
153130
line: 1,
154131
column: 19,
155132
endColumn: 25,
156-
description:
157-
"CSS > Errors on 'bolder' font-weight keyword and suggests '--base-text-weight-semibold', '--text-title-weight-large', '--text-title-weight-medium', or '--text-title-weight-small'.",
133+
description: "CSS > Errors on 'bolder' font-weight keyword and suggests '--base-text-weight-semibold'.",
158134
},
159135
{
160136
code: '.x { font-weight: normal; }',
161-
unfixable: true,
162-
message: messages.rejected('normal', [
163-
{name: '--base-text-weight-normal'},
164-
{name: '--text-subtitle-weight'},
165-
{name: '--text-body-weight'},
166-
{name: '--text-caption-weight'},
167-
{name: '--text-codeBlock-weight'},
168-
{name: '--text-codeInline-weight'},
169-
]),
137+
fixed: '.x { font-weight: var(--base-text-weight-normal); }',
138+
message: messages.rejected('normal', {name: '--base-text-weight-normal'}),
170139
line: 1,
171140
column: 19,
172141
endColumn: 25,
173-
description:
174-
"CSS > Errors on 'normal' font-weight keyword and suggests '--base-text-weight-normal', '--text-subtitle-weight', '--text-body-weight', '--text-caption-weight', '--text-codeBlock-weight' or '--text-codeInline-weight'.",
142+
description: "CSS > Errors on 'normal' font-weight keyword and suggests '--base-text-weight-normal'.",
175143
},
176144
// Line heights
177145
{
@@ -194,17 +162,12 @@ testRule({
194162
},
195163
{
196164
code: '.x { line-height: 1.5; }',
197-
unfixable: true,
198-
message: messages.rejected('1.5', [
199-
{name: '--text-title-lineHeight-large'},
200-
{name: '--text-title-lineHeight-small'},
201-
{name: '--text-body-lineHeight-large'},
202-
]),
165+
fixed: '.x { line-height: var(--text-title-lineHeight-large); }',
166+
message: messages.rejected('1.5', {name: '--text-title-lineHeight-large'}),
203167
line: 1,
204168
column: 19,
205169
endColumn: 22,
206-
description:
207-
"CSS > Errors on '1.5' line-height and suggests '--text-title-lineHeight-large', '--text-title-lineHeight-small', or '--text-body-lineHeight-large'.",
170+
description: "CSS > Errors on '1.5' line-height and suggests '--text-title-lineHeight-large'.",
208171
},
209172
// Font family
210173
{

‎index.js

-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@ export default {
6565
'declaration-property-value-disallowed-list': {
6666
'/^transition/': ['/all/'],
6767
'/^background/': ['http:', 'https:'],
68-
'/^border/': ['none'],
6968
'/.+/': ['initial'],
7069
},
7170
'function-calc-no-unspaced-operator': true,

‎plugins/typography.js

+17-16
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const messages = ruleMessages(ruleName, {
2727

2828
const fontWeightKeywordMap = {
2929
normal: 400,
30-
bold: 600,
30+
bold: 700,
3131
bolder: 600,
3232
lighter: 300,
3333
}
@@ -72,7 +72,7 @@ for (const variable of variables) {
7272
}
7373

7474
/** @type {import('stylelint').Rule} */
75-
const ruleFunction = (primary, secondaryOptions, context) => {
75+
const ruleFunction = primary => {
7676
return (root, result) => {
7777
const validOptions = validateOptions(result, ruleName, {
7878
actual: primary,
@@ -85,7 +85,7 @@ const ruleFunction = (primary, secondaryOptions, context) => {
8585
root.walkDecls(declNode => {
8686
const {prop, value} = declNode
8787

88-
if (!propList.some(typographyProp => prop.startsWith(typographyProp))) return
88+
if (!propList.some(typographyProp => prop === typographyProp)) return
8989

9090
const problems = []
9191

@@ -142,25 +142,25 @@ const ruleFunction = (primary, secondaryOptions, context) => {
142142
return
143143
}
144144

145-
if (replacementTokens.length > 1) {
146-
return replacementTokens
147-
}
148-
149145
return replacementTokens[0]
150146
}
151147
const replacement = getReplacements()
152148
const fixable = replacement && !replacement.length
153-
154-
if (fixable && context.fix) {
155-
declNode.value = value.replace(value, `var(${replacement['name']})`)
156-
} else {
157-
problems.push({
158-
index: declarationValueIndex(declNode),
159-
endIndex: declarationValueIndex(declNode) + value.length,
160-
message: messages.rejected(value, replacement, prop),
161-
})
149+
let fixedValue = ''
150+
if (fixable) {
151+
fixedValue = value.replace(value, `var(${replacement['name']})`)
162152
}
163153

154+
problems.push({
155+
index: declarationValueIndex(declNode),
156+
endIndex: declarationValueIndex(declNode) + value.length,
157+
message: messages.rejected(value, replacement, prop),
158+
fix: () => {
159+
if (!fixable) return
160+
declNode.value = fixedValue
161+
},
162+
})
163+
164164
if (problems.length) {
165165
for (const err of problems) {
166166
report({
@@ -170,6 +170,7 @@ const ruleFunction = (primary, secondaryOptions, context) => {
170170
node: declNode,
171171
result,
172172
ruleName,
173+
fix: err.fix,
173174
})
174175
}
175176
}

0 commit comments

Comments
 (0)