Validates classnames for any missing parenthesis mostly in calc() method with multiple vars
This stylelint plugin will validate against all css properties and check to be sure that all () are properly closed.especially in places where we do larger calc() operations along with var(). This is an example of one of those places.
For e.g:
.spectrum-ActionButton-hold {
inset-inline-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--mod-actionbutton-border-width, var(--spectrum-actionbutton-border-width)));
}
npm install stylelint-no-missing-parenthesis
yarn add stylelint-no-missing-parenthesis
In your stylelintrc.json add stylelint-no-missing-parenthesis to your plugins array and to your rules array like this:
plugins: ['stylelint-no-missing-parenthesis'],
rules: {
"custom-rule/no-missing-parenthesis": true,
}
Wrong: Throws a lint error here
.spectrum-Well-Component {
background-color : calc(var(--prefix-component-background-color), var(--prefix-component-background-color);
}
Correct:
.spectrum-Well-Component {
background-color : calc(var(--prefix-component-background-color), var(--prefix-component-background-color));
}