index.js 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. 'use strict';
  2. const isContextFunctionalPseudoClass = require('../../utils/isContextFunctionalPseudoClass');
  3. const isNonNegativeInteger = require('../../utils/isNonNegativeInteger');
  4. const isStandardSyntaxRule = require('../../utils/isStandardSyntaxRule');
  5. const parseSelector = require('../../utils/parseSelector');
  6. const report = require('../../utils/report');
  7. const resolvedNestedSelector = require('postcss-resolve-nested-selector');
  8. const ruleMessages = require('../../utils/ruleMessages');
  9. const validateOptions = require('../../utils/validateOptions');
  10. const ruleName = 'selector-max-compound-selectors';
  11. const messages = ruleMessages(ruleName, {
  12. expected: (selector, max) =>
  13. `Expected "${selector}" to have no more than ${max} compound ${
  14. max === 1 ? 'selector' : 'selectors'
  15. }`,
  16. });
  17. const meta = {
  18. url: 'https://stylelint.io/user-guide/rules/list/selector-max-compound-selectors',
  19. };
  20. /** @type {import('stylelint').Rule} */
  21. const rule = (primary) => {
  22. return (root, result) => {
  23. const validOptions = validateOptions(result, ruleName, {
  24. actual: primary,
  25. possible: isNonNegativeInteger,
  26. });
  27. if (!validOptions) {
  28. return;
  29. }
  30. /**
  31. * Finds actual selectors in selectorNode object and checks them.
  32. *
  33. * @param {import('postcss-selector-parser').Container<unknown>} selectorNode
  34. * @param {import('postcss').Rule} ruleNode
  35. */
  36. function checkSelector(selectorNode, ruleNode) {
  37. let compoundCount = 1;
  38. selectorNode.each((childNode) => {
  39. // Only traverse inside actual selectors and context functional pseudo-classes
  40. if (childNode.type === 'selector' || isContextFunctionalPseudoClass(childNode)) {
  41. checkSelector(childNode, ruleNode);
  42. }
  43. // Compound selectors are separated by combinators, so increase count when meeting one
  44. if (childNode.type === 'combinator') {
  45. compoundCount++;
  46. }
  47. });
  48. if (
  49. selectorNode.type !== 'root' &&
  50. selectorNode.type !== 'pseudo' &&
  51. compoundCount > primary
  52. ) {
  53. const selector = selectorNode.toString();
  54. report({
  55. ruleName,
  56. result,
  57. node: ruleNode,
  58. message: messages.expected(selector, primary),
  59. word: selector,
  60. });
  61. }
  62. }
  63. root.walkRules((ruleNode) => {
  64. if (!isStandardSyntaxRule(ruleNode)) {
  65. return;
  66. }
  67. // Using `.selectors` gets us each selector if there is a comma separated set
  68. for (const selector of ruleNode.selectors) {
  69. for (const resolvedSelector of resolvedNestedSelector(selector, ruleNode)) {
  70. // Process each resolved selector with `checkSelector` via postcss-selector-parser
  71. parseSelector(resolvedSelector, result, ruleNode, (s) => checkSelector(s, ruleNode));
  72. }
  73. }
  74. });
  75. };
  76. };
  77. rule.ruleName = ruleName;
  78. rule.messages = messages;
  79. rule.meta = meta;
  80. module.exports = rule;