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.
|
[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
|
## 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.
|
- 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
|
[semantic versioning]: https://semver.org
|
||||||
[script/test-deprecations.js]: https://github.com/primer/css/tree/main/script/test-deprecations.js
|
[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
|
[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 = {
|
module.exports = {
|
||||||
extends: ['stylelint-config-primer'],
|
extends: ['stylelint-config-primer'],
|
||||||
plugins: ['stylelint-scss', './script/stylelint-todo.cjs'],
|
plugins: ['stylelint-scss'],
|
||||||
syntax: 'scss',
|
syntax: 'scss',
|
||||||
ignoreFiles: ['src/fonts/**/*'],
|
ignoreFiles: ['src/fonts/**/*'],
|
||||||
rules: {
|
rules: {
|
||||||
@ -13,7 +13,6 @@ module.exports = {
|
|||||||
'primer/spacing': true,
|
'primer/spacing': true,
|
||||||
'primer/typography': true,
|
'primer/typography': true,
|
||||||
'primer/box-shadow': 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'}]
|
'primer/no-undefined-vars': [true, {files: 'node_modules/@primer/primitives/dist/scss/colors*/*.scss'}]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user