css:
.fontSize11{ font-size: calc(var(--font-scale, 1 ) * 11px); }
In our project, we are using the above format for font-size in CSS. Some people in our team are not following the above format. To keep consistency someone suggested me to use eslint-config-stylelint to create a custom rule so it can be caught during development. I don't have experience with build tools and linters. I'll appreciate if someone can help me with it. Thanks
You can use Stylelint's built-in declaration-property-value-allowed-list
rule to enforce a specific pattern for the value of a property, rather than create a custom rule.
By using an regular expression, you can ensure that the value of the font-size
property matches the calc(var(--font-size, 1) * XXpx)
pattern:
{
"rules": {
"declaration-property-value-allowed-list": {
"font-size": ["/calc\\(var\\(--font-scale, 1\\) \\* \\d+px\\)/"]
}
}
}
(There may be a cleaner way to write that regular expression.)
If you're just getting started with Stylelint, you'll want to extend official standard config in your config. Your complete Stylelint configuration should look like:
{
"extends": ["stylelint-config-standard"],
"rules": {
"declaration-property-value-allowed-list": {
"font-size": ["/calc\\(var\\(--font-scale, 1\\) \\* \\d+px\\)/"]
}
}
}
To keep consistency someone suggested me to use eslint-config-stylelint to create a custom rule
Stylelint and ESLint are different tools. You should use:
(eslint-config-stylelint
is an internal package used by the Stylelint team to lint their JavaScript code. It's not intended for public consumption.)