A set of StyleLInt rules for your code craftsmanship
Yarn
yarn add -D stylelint @pedalboard/stylelint-plugin-craftsmanlint
NPM
npm install -D stylelint @pedalboard/stylelint-plugin-craftsmanlint
This rule checks that certain CSS properties reside only in files they are allowed to be in.
Allowing a certain CSS property to be in specific files:
For example, let's say you'd like the font-family property to only be allowed in the my-css-file.css file. This means that any other file which holds this CSS property will cause the linter to fail.
You would then set the rule like this (in your .stylelintrc.json )
{
"plugins": ["@pedalboard/stylelint-plugin-craftsmanlint"],
"rules": {
"stylelint-plugin-craftsmanlint/props-in-files": [
{
"font-family": {
"allowed": ["my-css-file.css"]
}
},
{
"severity": "error"
}
]
}
}Forbid a certain CSS property from residing in specific files:
You can also have it work the opposite way buy declaring which files should not contain a certain CSS property. In this case, you would change the "allowed" to "forbidden":
{
"plugins": ["@pedalboard/stylelint-plugin-craftsmanlint"],
"rules": {
"stylelint-plugin-craftsmanlint/props-in-files": [
{
"font-family": {
"forbidden": ["my-css-file.css"]
}
},
{
"severity": "error"
}
]
}
}This means that the font-family CSS property cannot be in the my-css-file.css file.
Both "forbidden" an "allowed" support an Array of files but also a reserved keyword
["all"]to enforce the rule on all inspected files.
Allowing or forbidding a certain CSS property with a certain value to reside in files:
You can add a value field to the rule, which then allows you to go deeper and inspect the property's value. In the next example you can make sure that you forbid only font-family: Arial; in all the files. Any other value to the font-family will be ok:
module.exports = {
"plugins": ["@pedalboard/stylelint-plugin-craftsmanlint"],
"rules": {
"stylelint-plugin-craftsmanlint/props-in-files": [
{
"font-family": {
"valueRegex": /^Arial$/,
"forbidden": ["all"]
}
},
{
"severity": "error"
}
]
}
}When the rule is defined in a .stylelintrc.js file.
If your rule is defined in a JSON format, then you can pass a string as the regex, without the forward slashes, like so:
"font-family": {
"valueRegex": "^Arial$",
"forbidden": ["all"]
}