mirror of
https://github.com/primer/css.git
synced 2024-11-22 10:49:41 +03:00
Removing the stylelint-todo custom plugin (#1618)
* Removing the stylelint-todo custom plugin * Revert change
This commit is contained in:
parent
612841f1bd
commit
122eb0ecd9
@ -71,52 +71,6 @@ If you get to this step you've helped contribute to a style guide that many of y
|
||||
[Please open an issue](#step-1-open-an-issue) if we can improve these guidelines and make following this process any easier.
|
||||
|
||||
|
||||
## Removing styles and variables
|
||||
|
||||
Removing styles and SCSS variables can be scary. How do you know if the thing you're deleting (or just planning to delete) isn't used in other projects? [Semantic versioning] provides us with an answer: We **don't** know, but we can use "major" version increments (from, say, `13.4.0` to `14.0.0`) to signal that the release includes potentially breaking changes. The rule is simple:
|
||||
|
||||
**Whenever we delete a CSS selector or SCSS variable, we will increment to the next major version.**
|
||||
|
||||
When planning to delete a CSS selector or SCSS variable, you should:
|
||||
|
||||
1. Add a [TODO@version comment](#primer-csstodo) above the line in question:
|
||||
|
||||
```scss
|
||||
// TODO@15.0.0: delete $some-unused-var
|
||||
$some-unused-var: 15px !default;
|
||||
```
|
||||
|
||||
1. Add it to [deprecations.js]:
|
||||
|
||||
```js
|
||||
const versionDeprecations = {
|
||||
'15.0.0': [
|
||||
{
|
||||
variables: ['$some-unused-var'],
|
||||
message: '$some-unused-var is unused, and has been deprecated.'
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
We have several checks and tools in place to help us plan, track, and catch both expected and unexpected removals of both CSS selectors and SCSS variables:
|
||||
|
||||
### `deprecations.js`
|
||||
[This file][deprecations.js] is where we document all of our current and _planned_ CSS selector and SCSS variable deprecations (removals), and is used to generate [deprecation data](../tools/deprecations) for other tools.
|
||||
|
||||
### `primer-css/TODO`
|
||||
[This stylelint rule][script/stylelint-todo.js] looks for comments in the form:
|
||||
|
||||
```scss
|
||||
// TODO@<version>: <message>
|
||||
```
|
||||
|
||||
and generates an error for each one whose `<version>` is less than or equal to the current version (in `package.json`).
|
||||
|
||||
Where `<version>` is the future version you'd like to compare against. Assuming that the correctly formatted comments exist already, violations of this stylelint rule can be used to generate a checklist of lines to remove in a future release.
|
||||
|
||||
See [the deprecation data docs](../tools/deprecations) for more information.
|
||||
|
||||
## Documentation structure
|
||||
|
||||
- Our documentation site for Primer CSS is built using [Doctocat](https://primer.style/doctocat) and deployed with [Now](https://zeit.co/now). Our site is built from the `docs` folder and uses [MDX](https://mdxjs.com) to render markdown.
|
||||
@ -154,4 +108,3 @@ To understand what choice to make, you'll need to understand semver and know if
|
||||
[semantic versioning]: https://semver.org
|
||||
[script/test-deprecations.js]: https://github.com/primer/css/tree/main/script/test-deprecations.js
|
||||
[deprecations.js]: https://github.com/primer/css/tree/main/deprecations.js
|
||||
[script/stylelint-todo.js]: https://github.com/primer/css/tree/main/script/stylelint-todo.js
|
||||
|
@ -1,37 +0,0 @@
|
||||
const semver = require('semver')
|
||||
const stylelint = require('stylelint')
|
||||
|
||||
const ruleName = 'primer-css/TODO'
|
||||
const pattern = /\bTODO@([^:]+):\s+(.+)$/
|
||||
|
||||
const messages = stylelint.utils.ruleMessages(ruleName, {
|
||||
rejected: message => message
|
||||
})
|
||||
|
||||
module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}) => {
|
||||
const {currentVersion} = options
|
||||
if (!currentVersion) {
|
||||
console.warn(`No "currentVersion" supplied to ${ruleName}; bailing`)
|
||||
return () => null
|
||||
}
|
||||
|
||||
let match
|
||||
return (root, result) => {
|
||||
root.walkComments(node => {
|
||||
if ((match = node.text.match(pattern))) {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const [substr, todoVersion, message] = match
|
||||
if (semver.lte(todoVersion, currentVersion)) {
|
||||
stylelint.utils.report({
|
||||
message: messages.rejected(
|
||||
`Unresolved TODO comment: "${message}" (expected to be resolved in "${todoVersion}")`
|
||||
),
|
||||
node,
|
||||
result,
|
||||
ruleName
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
@ -2,7 +2,7 @@ const currentVersion = process.env.PRIMER_VERSION || require('./package.json').v
|
||||
|
||||
module.exports = {
|
||||
extends: ['stylelint-config-primer'],
|
||||
plugins: ['stylelint-scss', './script/stylelint-todo.cjs'],
|
||||
plugins: ['stylelint-scss'],
|
||||
syntax: 'scss',
|
||||
ignoreFiles: ['src/fonts/**/*'],
|
||||
rules: {
|
||||
@ -13,7 +13,6 @@ module.exports = {
|
||||
'primer/spacing': true,
|
||||
'primer/typography': true,
|
||||
'primer/box-shadow': true,
|
||||
'primer-css/TODO': [true, {currentVersion, severity: 'error'}],
|
||||
'primer/no-undefined-vars': [true, {files: 'node_modules/@primer/primitives/dist/scss/colors*/*.scss'}]
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user