249 lines
6.4 KiB
JavaScript
249 lines
6.4 KiB
JavaScript
'use strict';
|
|
|
|
const declarationValueIndex = require('../../utils/declarationValueIndex');
|
|
const getDeclarationValue = require('../../utils/getDeclarationValue');
|
|
const getDimension = require('../../utils/getDimension');
|
|
const isCounterIncrementCustomIdentValue = require('../../utils/isCounterIncrementCustomIdentValue');
|
|
const isCounterResetCustomIdentValue = require('../../utils/isCounterResetCustomIdentValue');
|
|
const isStandardSyntaxValue = require('../../utils/isStandardSyntaxValue');
|
|
const {
|
|
animationNameKeywords,
|
|
animationShorthandKeywords,
|
|
camelCaseKeywords,
|
|
fontFamilyKeywords,
|
|
fontShorthandKeywords,
|
|
gridAreaKeywords,
|
|
gridColumnKeywords,
|
|
gridRowKeywords,
|
|
listStyleShorthandKeywords,
|
|
listStyleTypeKeywords,
|
|
systemColorsKeywords,
|
|
} = require('../../reference/keywords');
|
|
const optionsMatches = require('../../utils/optionsMatches');
|
|
const report = require('../../utils/report');
|
|
const ruleMessages = require('../../utils/ruleMessages');
|
|
const validateOptions = require('../../utils/validateOptions');
|
|
const valueParser = require('postcss-value-parser');
|
|
const { isBoolean, isRegExp, isString } = require('../../utils/validateTypes');
|
|
|
|
const ruleName = 'value-keyword-case';
|
|
|
|
const messages = ruleMessages(ruleName, {
|
|
expected: (actual, expected) => `Expected "${actual}" to be "${expected}"`,
|
|
});
|
|
|
|
const meta = {
|
|
url: 'https://stylelint.io/user-guide/rules/value-keyword-case',
|
|
fixable: true,
|
|
};
|
|
|
|
// Operators are interpreted as "words" by the value parser, so we want to make sure to ignore them.
|
|
const ignoredCharacters = new Set(['+', '-', '/', '*', '%']);
|
|
const gridRowProps = new Set(['grid-row', 'grid-row-start', 'grid-row-end']);
|
|
const gridColumnProps = new Set(['grid-column', 'grid-column-start', 'grid-column-end']);
|
|
|
|
const mapLowercaseKeywordsToCamelCase = new Map();
|
|
|
|
for (const func of camelCaseKeywords) {
|
|
mapLowercaseKeywordsToCamelCase.set(func.toLowerCase(), func);
|
|
}
|
|
|
|
/** @type {import('stylelint').Rule} */
|
|
const rule = (primary, secondaryOptions, context) => {
|
|
return (root, result) => {
|
|
const validOptions = validateOptions(
|
|
result,
|
|
ruleName,
|
|
{
|
|
actual: primary,
|
|
possible: ['lower', 'upper'],
|
|
},
|
|
{
|
|
actual: secondaryOptions,
|
|
possible: {
|
|
ignoreProperties: [isString, isRegExp],
|
|
ignoreKeywords: [isString, isRegExp],
|
|
ignoreFunctions: [isString, isRegExp],
|
|
camelCaseSvgKeywords: [isBoolean],
|
|
},
|
|
optional: true,
|
|
},
|
|
);
|
|
|
|
if (!validOptions) {
|
|
return;
|
|
}
|
|
|
|
root.walkDecls((decl) => {
|
|
const prop = decl.prop;
|
|
const propLowerCase = decl.prop.toLowerCase();
|
|
const value = decl.value;
|
|
|
|
if (!isStandardSyntaxValue(value)) return;
|
|
|
|
const parsed = valueParser(getDeclarationValue(decl));
|
|
|
|
let needFix = false;
|
|
|
|
parsed.walk((node) => {
|
|
const keyword = node.value;
|
|
const valueLowerCase = keyword.toLowerCase();
|
|
|
|
// Ignore system colors
|
|
if (systemColorsKeywords.has(valueLowerCase)) {
|
|
return;
|
|
}
|
|
|
|
// Ignore keywords within `url` and `var` function
|
|
if (
|
|
node.type === 'function' &&
|
|
(valueLowerCase === 'url' ||
|
|
valueLowerCase === 'var' ||
|
|
valueLowerCase === 'counter' ||
|
|
valueLowerCase === 'counters' ||
|
|
valueLowerCase === 'attr')
|
|
) {
|
|
return false;
|
|
}
|
|
|
|
// ignore keywords within ignoreFunctions functions
|
|
|
|
if (
|
|
node.type === 'function' &&
|
|
optionsMatches(secondaryOptions, 'ignoreFunctions', keyword)
|
|
) {
|
|
return false;
|
|
}
|
|
|
|
const { unit } = getDimension(node);
|
|
|
|
// Ignore css variables, and hex values, and math operators, and sass interpolation
|
|
if (
|
|
node.type !== 'word' ||
|
|
!isStandardSyntaxValue(keyword) ||
|
|
value.includes('#') ||
|
|
ignoredCharacters.has(keyword) ||
|
|
unit
|
|
) {
|
|
return;
|
|
}
|
|
|
|
if (
|
|
propLowerCase === 'animation' &&
|
|
!animationShorthandKeywords.has(valueLowerCase) &&
|
|
!animationNameKeywords.has(valueLowerCase)
|
|
) {
|
|
return;
|
|
}
|
|
|
|
if (propLowerCase === 'animation-name' && !animationNameKeywords.has(valueLowerCase)) {
|
|
return;
|
|
}
|
|
|
|
if (
|
|
propLowerCase === 'font' &&
|
|
!fontShorthandKeywords.has(valueLowerCase) &&
|
|
!fontFamilyKeywords.has(valueLowerCase)
|
|
) {
|
|
return;
|
|
}
|
|
|
|
if (propLowerCase === 'font-family' && !fontFamilyKeywords.has(valueLowerCase)) {
|
|
return;
|
|
}
|
|
|
|
if (
|
|
propLowerCase === 'counter-increment' &&
|
|
isCounterIncrementCustomIdentValue(valueLowerCase)
|
|
) {
|
|
return;
|
|
}
|
|
|
|
if (propLowerCase === 'counter-reset' && isCounterResetCustomIdentValue(valueLowerCase)) {
|
|
return;
|
|
}
|
|
|
|
if (gridRowProps.has(propLowerCase) && !gridRowKeywords.has(valueLowerCase)) {
|
|
return;
|
|
}
|
|
|
|
if (gridColumnProps.has(propLowerCase) && !gridColumnKeywords.has(valueLowerCase)) {
|
|
return;
|
|
}
|
|
|
|
if (propLowerCase === 'grid-area' && !gridAreaKeywords.has(valueLowerCase)) {
|
|
return;
|
|
}
|
|
|
|
if (
|
|
propLowerCase === 'list-style' &&
|
|
!listStyleShorthandKeywords.has(valueLowerCase) &&
|
|
!listStyleTypeKeywords.has(valueLowerCase)
|
|
) {
|
|
return;
|
|
}
|
|
|
|
if (propLowerCase === 'list-style-type' && !listStyleTypeKeywords.has(valueLowerCase)) {
|
|
return;
|
|
}
|
|
|
|
if (optionsMatches(secondaryOptions, 'ignoreKeywords', keyword)) {
|
|
return;
|
|
}
|
|
|
|
if (optionsMatches(secondaryOptions, 'ignoreProperties', prop)) {
|
|
return;
|
|
}
|
|
|
|
const keywordLowerCase = keyword.toLocaleLowerCase();
|
|
let expectedKeyword = null;
|
|
|
|
/** @type {boolean} */
|
|
const camelCaseSvgKeywords =
|
|
(secondaryOptions && secondaryOptions.camelCaseSvgKeywords) || false;
|
|
|
|
if (
|
|
primary === 'lower' &&
|
|
mapLowercaseKeywordsToCamelCase.has(keywordLowerCase) &&
|
|
camelCaseSvgKeywords
|
|
) {
|
|
expectedKeyword = mapLowercaseKeywordsToCamelCase.get(keywordLowerCase);
|
|
} else if (primary === 'lower') {
|
|
expectedKeyword = keyword.toLowerCase();
|
|
} else {
|
|
expectedKeyword = keyword.toUpperCase();
|
|
}
|
|
|
|
if (keyword === expectedKeyword) {
|
|
return;
|
|
}
|
|
|
|
if (context.fix) {
|
|
needFix = true;
|
|
node.value = expectedKeyword;
|
|
|
|
return;
|
|
}
|
|
|
|
report({
|
|
message: messages.expected,
|
|
messageArgs: [keyword, expectedKeyword],
|
|
node: decl,
|
|
index: declarationValueIndex(decl) + node.sourceIndex,
|
|
result,
|
|
ruleName,
|
|
});
|
|
});
|
|
|
|
if (context.fix && needFix) {
|
|
decl.value = parsed.toString();
|
|
}
|
|
});
|
|
};
|
|
};
|
|
|
|
rule.ruleName = ruleName;
|
|
rule.messages = messages;
|
|
rule.meta = meta;
|
|
module.exports = rule;
|