How to use @hint/utils-css - 8 common examples
To help you get started, we’ve selected a few @hint/utils-css examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
webhintio / hint / packages / hint-css-prefix-order / src / hint.ts View on Github 
const validatePair = (pair: Partial): boolean => {
// Valid if only prefixed or only unprefixed versions exist.
if (!pair.lastPrefixed || !pair.unprefixed) {
return false;
}
const prefixedLocation = getCSSLocationFromNode(pair.lastPrefixed) || { column: 0, line: 0 };
const unprefixedLocation = getCSSLocationFromNode(pair.unprefixed) || { column: 0, line: 0 };
// Valid if last prefixed line is before unprefixed line.
if (prefixedLocation.line < unprefixedLocation.line) {
return false;
}
// Invalid if last prefixed line is after unprefixed line.
if (prefixedLocation.line > unprefixedLocation.line) {
return true;
}
// Both are on the same line: valid only if last prefixed column is first.
return prefixedLocation.column > unprefixedLocation.column;
};const validatePair = (pair: Partial): boolean => {
// Valid if only prefixed or only unprefixed versions exist.
if (!pair.lastPrefixed || !pair.unprefixed) {
return false;
}
const prefixedLocation = getCSSLocationFromNode(pair.lastPrefixed) || { column: 0, line: 0 };
const unprefixedLocation = getCSSLocationFromNode(pair.unprefixed) || { column: 0, line: 0 };
// Valid if last prefixed line is before unprefixed line.
if (prefixedLocation.line < unprefixedLocation.line) {
return false;
}
// Invalid if last prefixed line is after unprefixed line.
if (prefixedLocation.line > unprefixedLocation.line) {
return true;
}
// Both are on the same line: valid only if last prefixed column is first.
return prefixedLocation.column > unprefixedLocation.column;
};const report = ({ feature, formatFeature, isValue, node, unsupported }: ReportData) => {
const alternatives = formatAlternatives(context.language, unsupported, formatFeature);
const message = [
getMessage('featureNotSupported', context.language, [feature, joinBrowsers(unsupported)]),
...alternatives
].join(' ');
const codeSnippet = getCSSCodeSnippet(node);
const location = getCSSLocationFromNode(node, { isValue });
const severity = alternatives.length ? Severity.error : Severity.warning;
context.report(
resource,
message,
{
codeLanguage: 'css',
codeSnippet,
element,
location,
severity
});
};ast.walkRules((rule) => {
const selectors = rule.selectors;
for (const selector of selectors) {
const matchingElements = element.ownerDocument.querySelectorAll(selector);
const matchingElementsOutsideParentSVG = matchingElements.filter(isOutsideParentSVG(parentSVG));
if (matchingElementsOutsideParentSVG.length) {
const message = formatRuleMessage(matchingElementsOutsideParentSVG.length);
const location = getCSSLocationFromNode(rule);
const codeSnippet = getCSSCodeSnippet(rule);
context.report(resource, message, {
codeLanguage: 'css',
codeSnippet,
element,
location,
severity: Severity.error
});
let maxReportsPerCSSRule = Infinity;
if (context.hintOptions && context.hintOptions.maxReportsPerCSSRule !== undefined) {
maxReportsPerCSSRule = context.hintOptions.maxReportsPerCSSRule;
}ast.walkRules((rule) => {
for (const invalidPair of validateRule(rule)) {
const message = formatMessage(invalidPair);
const isValue = invalidPair.lastPrefixed.prop === invalidPair.unprefixed.prop;
const location = getCSSLocationFromNode(invalidPair.unprefixed, { isValue });
const codeSnippet = getFullCSSCodeSnippet(invalidPair.unprefixed);
const severity = Severity.warning;
context.report(
resource,
message,
{ codeLanguage: 'css', codeSnippet, element, location, severity });
}
});
});ast.walkRules((rule) => {
const selectors = rule.selectors;
for (const selector of selectors) {
const matchingElements = element.ownerDocument.querySelectorAll(selector);
const matchingElementsOutsideParentSVG = matchingElements.filter(isOutsideParentSVG(parentSVG));
if (matchingElementsOutsideParentSVG.length) {
const message = formatRuleMessage(matchingElementsOutsideParentSVG.length);
const location = getCSSLocationFromNode(rule);
const codeSnippet = getCSSCodeSnippet(rule);
context.report(resource, message, {
codeLanguage: 'css',
codeSnippet,
element,
location,
severity: Severity.error
});
let maxReportsPerCSSRule = Infinity;
if (context.hintOptions && context.hintOptions.maxReportsPerCSSRule !== undefined) {
maxReportsPerCSSRule = context.hintOptions.maxReportsPerCSSRule;
}
for (let i = 0; (i < matchingElementsOutsideParentSVG.length && i < maxReportsPerCSSRule); i++) {const report = ({ feature, formatFeature, isValue, node, unsupported }: ReportData) => {
const alternatives = formatAlternatives(context.language, unsupported, formatFeature);
const message = [
getMessage('featureNotSupported', context.language, [feature, joinBrowsers(unsupported)]),
...alternatives
].join(' ');
const codeSnippet = getCSSCodeSnippet(node);
const location = getCSSLocationFromNode(node, { isValue });
const severity = alternatives.length ? Severity.error : Severity.warning;
context.report(
resource,
message,
{
codeLanguage: 'css',
codeSnippet,
element,
location,
severity
});
};ast.walkRules((rule) => {
for (const invalidPair of validateRule(rule)) {
const message = formatMessage(invalidPair);
const isValue = invalidPair.lastPrefixed.prop === invalidPair.unprefixed.prop;
const location = getCSSLocationFromNode(invalidPair.unprefixed, { isValue });
const codeSnippet = getFullCSSCodeSnippet(invalidPair.unprefixed);
const severity = Severity.warning;
context.report(
resource,
message,
{ codeLanguage: 'css', codeSnippet, element, location, severity });
}
});
});
