index.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. 'use strict';
  2. const isKeyframeSelector = require('../../utils/isKeyframeSelector');
  3. const isStandardSyntaxRule = require('../../utils/isStandardSyntaxRule');
  4. const isStandardSyntaxSelector = require('../../utils/isStandardSyntaxSelector');
  5. const parseSelector = require('../../utils/parseSelector');
  6. const report = require('../../utils/report');
  7. const resolveNestedSelector = require('postcss-resolve-nested-selector');
  8. const ruleMessages = require('../../utils/ruleMessages');
  9. const validateOptions = require('../../utils/validateOptions');
  10. const { isBoolean, isRegExp, isString } = require('../../utils/validateTypes');
  11. const ruleName = 'selector-class-pattern';
  12. const messages = ruleMessages(ruleName, {
  13. expected: (selectorValue, pattern) =>
  14. `Expected class selector ".${selectorValue}" to match pattern "${pattern}"`,
  15. });
  16. const meta = {
  17. url: 'https://stylelint.io/user-guide/rules/list/selector-class-pattern',
  18. };
  19. /** @type {import('stylelint').Rule} */
  20. const rule = (primary, secondaryOptions) => {
  21. return (root, result) => {
  22. const validOptions = validateOptions(
  23. result,
  24. ruleName,
  25. {
  26. actual: primary,
  27. possible: [isRegExp, isString],
  28. },
  29. {
  30. actual: secondaryOptions,
  31. possible: {
  32. resolveNestedSelectors: [isBoolean],
  33. },
  34. optional: true,
  35. },
  36. );
  37. if (!validOptions) {
  38. return;
  39. }
  40. /** @type {boolean} */
  41. const shouldResolveNestedSelectors =
  42. secondaryOptions && secondaryOptions.resolveNestedSelectors;
  43. /** @type {RegExp} */
  44. const normalizedPattern = isString(primary) ? new RegExp(primary) : primary;
  45. root.walkRules((ruleNode) => {
  46. const selector = ruleNode.selector;
  47. const selectors = ruleNode.selectors;
  48. if (!isStandardSyntaxRule(ruleNode)) {
  49. return;
  50. }
  51. if (selectors.some((s) => isKeyframeSelector(s))) {
  52. return;
  53. }
  54. // Only bother resolving selectors that have an interpolating &
  55. if (shouldResolveNestedSelectors && hasInterpolatingAmpersand(selector)) {
  56. for (const nestedSelector of resolveNestedSelector(selector, ruleNode)) {
  57. if (!isStandardSyntaxSelector(nestedSelector)) {
  58. continue;
  59. }
  60. parseSelector(nestedSelector, result, ruleNode, (s) => checkSelector(s, ruleNode));
  61. }
  62. } else {
  63. parseSelector(selector, result, ruleNode, (s) => checkSelector(s, ruleNode));
  64. }
  65. });
  66. /**
  67. * @param {import('postcss-selector-parser').Root} fullSelector
  68. * @param {import('postcss').Rule} ruleNode
  69. */
  70. function checkSelector(fullSelector, ruleNode) {
  71. fullSelector.walkClasses((classNode) => {
  72. const value = classNode.value;
  73. const sourceIndex = classNode.sourceIndex;
  74. if (normalizedPattern.test(value)) {
  75. return;
  76. }
  77. report({
  78. result,
  79. ruleName,
  80. message: messages.expected(value, primary),
  81. node: ruleNode,
  82. index: sourceIndex,
  83. });
  84. });
  85. }
  86. };
  87. };
  88. /**
  89. * An "interpolating ampersand" means an "&" used to interpolate
  90. * within another simple selector, rather than an "&" that
  91. * stands on its own as a simple selector.
  92. *
  93. * @param {string} selector
  94. * @returns {boolean}
  95. */
  96. function hasInterpolatingAmpersand(selector) {
  97. for (let i = 0, l = selector.length; i < l; i++) {
  98. if (selector[i] !== '&') {
  99. continue;
  100. }
  101. if (selector[i - 1] !== undefined && !isCombinator(selector[i - 1])) {
  102. return true;
  103. }
  104. if (selector[i + 1] !== undefined && !isCombinator(selector[i + 1])) {
  105. return true;
  106. }
  107. }
  108. return false;
  109. }
  110. /**
  111. * @param {string} x
  112. * @returns {boolean}
  113. */
  114. function isCombinator(x) {
  115. return /[\s+>~]/.test(x);
  116. }
  117. rule.ruleName = ruleName;
  118. rule.messages = messages;
  119. rule.meta = meta;
  120. module.exports = rule;