index.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. 'use strict';
  2. const isContextFunctionalPseudoClass = require('../../utils/isContextFunctionalPseudoClass');
  3. const isNonNegativeInteger = require('../../utils/isNonNegativeInteger');
  4. const isStandardSyntaxRule = require('../../utils/isStandardSyntaxRule');
  5. const optionsMatches = require('../../utils/optionsMatches');
  6. const parseSelector = require('../../utils/parseSelector');
  7. const report = require('../../utils/report');
  8. const resolvedNestedSelector = require('postcss-resolve-nested-selector');
  9. const ruleMessages = require('../../utils/ruleMessages');
  10. const validateOptions = require('../../utils/validateOptions');
  11. const { isRegExp, isString } = require('../../utils/validateTypes');
  12. const ruleName = 'selector-max-id';
  13. const messages = ruleMessages(ruleName, {
  14. expected: (selector, max) =>
  15. `Expected "${selector}" to have no more than ${max} ID ${max === 1 ? 'selector' : 'selectors'}`,
  16. });
  17. const meta = {
  18. url: 'https://stylelint.io/user-guide/rules/list/selector-max-id',
  19. };
  20. /** @type {import('stylelint').Rule} */
  21. const rule = (primary, secondaryOptions) => {
  22. return (root, result) => {
  23. const validOptions = validateOptions(
  24. result,
  25. ruleName,
  26. {
  27. actual: primary,
  28. possible: isNonNegativeInteger,
  29. },
  30. {
  31. actual: secondaryOptions,
  32. possible: {
  33. ignoreContextFunctionalPseudoClasses: [isString, isRegExp],
  34. },
  35. optional: true,
  36. },
  37. );
  38. if (!validOptions) {
  39. return;
  40. }
  41. /**
  42. * @param {import('postcss-selector-parser').Container<unknown>} selectorNode
  43. * @param {import('postcss').Rule} ruleNode
  44. */
  45. function checkSelector(selectorNode, ruleNode) {
  46. const count = selectorNode.reduce((total, childNode) => {
  47. // Only traverse inside actual selectors and context functional pseudo-classes that are not part of ignored functional pseudo-classes
  48. if (
  49. childNode.type === 'selector' ||
  50. (isContextFunctionalPseudoClass(childNode) &&
  51. !isIgnoredContextFunctionalPseudoClass(childNode))
  52. ) {
  53. checkSelector(childNode, ruleNode);
  54. }
  55. if (childNode.type === 'id') total += 1;
  56. return total;
  57. }, 0);
  58. if (selectorNode.type !== 'root' && selectorNode.type !== 'pseudo' && count > primary) {
  59. const selector = selectorNode.toString();
  60. report({
  61. ruleName,
  62. result,
  63. node: ruleNode,
  64. message: messages.expected(selector, primary),
  65. word: selector,
  66. });
  67. }
  68. }
  69. /**
  70. * @param {import('postcss-selector-parser').Node} node
  71. * @returns {boolean}
  72. */
  73. function isIgnoredContextFunctionalPseudoClass(node) {
  74. return (
  75. node.type === 'pseudo' &&
  76. optionsMatches(secondaryOptions, 'ignoreContextFunctionalPseudoClasses', node.value)
  77. );
  78. }
  79. root.walkRules((ruleNode) => {
  80. if (!isStandardSyntaxRule(ruleNode)) {
  81. return;
  82. }
  83. for (const selector of ruleNode.selectors) {
  84. for (const resolvedSelector of resolvedNestedSelector(selector, ruleNode)) {
  85. parseSelector(resolvedSelector, result, ruleNode, (container) =>
  86. checkSelector(container, ruleNode),
  87. );
  88. }
  89. }
  90. });
  91. };
  92. };
  93. rule.ruleName = ruleName;
  94. rule.messages = messages;
  95. rule.meta = meta;
  96. module.exports = rule;