Skip to content

Commit

Permalink
New rule: safegaurd display color tokens (#388)
Browse files Browse the repository at this point in the history
* add temp rule to safegaurd display colors

* add a test for typography

* Create cyan-bugs-cross.md
  • Loading branch information
langermank authored Mar 19, 2024
1 parent e08fb07 commit 43b1066
Show file tree
Hide file tree
Showing 5 changed files with 96 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .changeset/cyan-bugs-cross.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/stylelint-config": patch
---

New rule: safegaurd alpha `display` color tokens
3 changes: 3 additions & 0 deletions __tests__/__fixtures__/color-vars.scss
Original file line number Diff line number Diff line change
Expand Up @@ -277,5 +277,8 @@
--color-calendar-graph-day-L3-border: rgba(27, 31, 35, 0.06);
--color-calendar-graph-day-L2-border: rgba(27, 31, 35, 0.06);
--color-calendar-graph-day-L1-border: rgba(27, 31, 35, 0.06);
--display-blue-fgColor: blue;
--display-blue-bgColor-muted: blue;
--display-yellow-bgColor-emphasis: yellow;
}
}
34 changes: 34 additions & 0 deletions __tests__/no-display-colors.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
const path = require('path')
const {messages, ruleName} = require('../plugins/no-display-colors')

// eslint-disable-next-line no-undef
testRule({
plugins: ['./plugins/no-display-colors.js'],
ruleName,
config: [
true,
{
files: [path.join(__dirname, '__fixtures__/color-vars.scss')],
},
],

accept: [
{code: '.x { color: var(--fgColor-accent); }'},
{code: '.x { line-height: var(--text-display-lineHeight); }'},
],

reject: [
{
code: '.x { color: var(--display-blue-fgColor); }',
message: messages.rejected('--display-blue-fgColor'),
line: 1,
column: 6,
},
{
code: '.x { color: var(--display-yellow-bgColor-emphasis); }',
message: messages.rejected('--display-yellow-bgColor-emphasis'),
line: 1,
column: 6,
},
],
})
1 change: 1 addition & 0 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ module.exports = {
'./plugins/typography',
'./plugins/utilities',
'./plugins/new-color-vars-have-fallback',
'./plugins/no-display-colors',
],
rules: {
'alpha-value-notation': 'number',
Expand Down
53 changes: 53 additions & 0 deletions plugins/no-display-colors.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
const stylelint = require('stylelint')
const matchAll = require('string.prototype.matchall')

const ruleName = 'primer/no-display-colors'
const messages = stylelint.utils.ruleMessages(ruleName, {
rejected: varName => `${varName} is in alpha and should be used with caution with approval from the Primer team`,
})

// Match CSS variable references (e.g var(--display-blue-fgColor))
// eslint-disable-next-line no-useless-escape
const variableReferenceRegex = /var\(([^\),]+)(,.*)?\)/g

module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}) => {
if (!enabled) {
return noop
}

const {verbose = false} = options
// eslint-disable-next-line no-console
const log = verbose ? (...args) => console.warn(...args) : noop

// Keep track of declarations we've already seen
const seen = new WeakMap()

return (root, result) => {
root.walkRules(rule => {
rule.walkDecls(decl => {
if (seen.has(decl)) {
return
} else {
seen.set(decl, true)
}

for (const [, variableName] of matchAll(decl.value, variableReferenceRegex)) {
log(`Found variable reference ${variableName}`)
if (variableName.match(/^--display-.*/)) {
stylelint.utils.report({
message: messages.rejected(variableName),
node: decl,
result,
ruleName,
})
}
}
})
})
}
})

function noop() {}

module.exports.ruleName = ruleName
module.exports.messages = messages

0 comments on commit 43b1066

Please sign in to comment.