index.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. 'use strict';
  2. const {
  3. MediaFeatureName,
  4. MediaFeatureRangeNameValue,
  5. isMediaFeature,
  6. isMediaFeaturePlain,
  7. isMediaFeatureRange,
  8. } = require('@csstools/media-query-list-parser');
  9. const { TokenNode } = require('@csstools/css-parser-algorithms');
  10. const { TokenType } = require('@csstools/css-tokenizer');
  11. const atRuleParamIndex = require('../../utils/atRuleParamIndex');
  12. const parseMediaQuery = require('../../utils/parseMediaQuery');
  13. const report = require('../../utils/report');
  14. const ruleMessages = require('../../utils/ruleMessages');
  15. const validateOptions = require('../../utils/validateOptions');
  16. const { rangeTypeMediaFeatureNames } = require('../../reference/mediaFeatures');
  17. const ruleName = 'media-feature-range-notation';
  18. const messages = ruleMessages(ruleName, {
  19. expected: (primary) => `Expected "${primary}" media feature range notation`,
  20. });
  21. const meta = {
  22. url: 'https://stylelint.io/user-guide/rules/media-feature-range-notation',
  23. fixable: true,
  24. };
  25. /** @type {import('stylelint').Rule} */
  26. const rule = (primary, _secondaryOptions, context) => {
  27. return (root, result) => {
  28. const validOptions = validateOptions(result, ruleName, {
  29. actual: primary,
  30. possible: ['prefix', 'context'],
  31. });
  32. if (!validOptions) {
  33. return;
  34. }
  35. root.walkAtRules(/^media$/i, (atRule) => {
  36. const mediaQueryList = parseMediaQuery(atRule, result);
  37. let hasFixes = false;
  38. mediaQueryList.forEach((mediaQuery) => {
  39. mediaQuery.walk((entry) => {
  40. const node = entry.node;
  41. // Only look at plain and range notation media features
  42. if (!isMediaFeatureRange(node) && !isMediaFeaturePlain(node)) return;
  43. // Expected plain notation and received plain notation
  44. if (primary === 'prefix' && isMediaFeaturePlain(node)) return;
  45. // Expected range notation and received range notation
  46. if (primary === 'context' && isMediaFeatureRange(node)) return;
  47. const featureName = node.getName();
  48. const unprefixedMediaFeature = featureName.replace(/^(?:min|max)-/i, '');
  49. if (!rangeTypeMediaFeatureNames.has(unprefixedMediaFeature)) return;
  50. if (context.fix && primary === 'context' && isMediaFeaturePlain(node)) {
  51. const parent = entry.parent;
  52. if (!isMediaFeature(parent)) return;
  53. hasFixes = true;
  54. /** @type {import('@csstools/css-tokenizer').TokenDelim} */
  55. const operator = /^min-/i.test(featureName)
  56. ? [TokenType.Delim, '>', -1, -1, { value: '>' }]
  57. : [TokenType.Delim, '<', -1, -1, { value: '<' }];
  58. parent.feature = new MediaFeatureRangeNameValue(
  59. new MediaFeatureName(
  60. new TokenNode([
  61. TokenType.Ident,
  62. unprefixedMediaFeature,
  63. -1,
  64. -1,
  65. { value: unprefixedMediaFeature },
  66. ]),
  67. node.name.before,
  68. node.name.after.length > 0
  69. ? node.name.after
  70. : [[TokenType.Whitespace, ' ', -1, -1, undefined]],
  71. ),
  72. [operator, [TokenType.Delim, '=', -1, -1, { value: '=' }]],
  73. node.value,
  74. );
  75. return;
  76. }
  77. const tokens = node.tokens();
  78. const firstToken = tokens[0];
  79. const lastToken = tokens[tokens.length - 1];
  80. let startIndex = 0;
  81. let endIndex = atRule.params.length;
  82. if (firstToken && lastToken) {
  83. startIndex = firstToken[2];
  84. endIndex = lastToken[3];
  85. }
  86. const atRuleIndex = atRuleParamIndex(atRule);
  87. report({
  88. message: messages.expected,
  89. messageArgs: [primary],
  90. node: atRule,
  91. index: atRuleIndex + startIndex - 1,
  92. endIndex: atRuleIndex + endIndex + 1 + 1,
  93. result,
  94. ruleName,
  95. });
  96. });
  97. });
  98. if (hasFixes) {
  99. const expectedMediaQueryList = mediaQueryList
  100. .map((mediaQuery) => mediaQuery.toString())
  101. .join(',');
  102. if (expectedMediaQueryList === atRule.params) return;
  103. atRule.params = expectedMediaQueryList;
  104. }
  105. });
  106. };
  107. };
  108. rule.ruleName = ruleName;
  109. rule.messages = messages;
  110. rule.meta = meta;
  111. module.exports = rule;