index.js 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. 'use strict';
  2. const mediaParser = require('postcss-media-query-parser').default;
  3. const { rangeTypeMediaFeatureNames } = require('../../reference/mediaFeatures.js');
  4. const atRuleParamIndex = require('../../utils/atRuleParamIndex');
  5. const isRangeContextMediaFeature = require('../../utils/isRangeContextMediaFeature');
  6. const isStandardSyntaxMediaFeatureName = require('../../utils/isStandardSyntaxMediaFeatureName');
  7. const report = require('../../utils/report');
  8. const ruleMessages = require('../../utils/ruleMessages');
  9. const validateOptions = require('../../utils/validateOptions');
  10. const ruleName = 'media-feature-range-notation';
  11. const messages = ruleMessages(ruleName, {
  12. expected: (primary) => `Expected "${primary}" media feature range notation`,
  13. });
  14. const meta = {
  15. url: 'https://stylelint.io/user-guide/rules/media-feature-range-notation',
  16. };
  17. /** @type {import('stylelint').Rule} */
  18. const rule = (primary) => {
  19. return (root, result) => {
  20. const validOptions = validateOptions(result, ruleName, {
  21. actual: primary,
  22. possible: ['prefix', 'context'],
  23. });
  24. if (!validOptions) {
  25. return;
  26. }
  27. root.walkAtRules(/^media$/i, (atRule) => {
  28. mediaParser(atRule.params).walk(/^media-feature$/i, ({ parent, value }) => {
  29. if (!isStandardSyntaxMediaFeatureName(value)) return;
  30. if (!isRangeContextMediaFeature(value) && isInBooleanContext(parent)) return;
  31. if (!isRangeContextMediaFeature(value) && !isRangeTypeMediaFeature(value)) return;
  32. if (primary === 'prefix' && isPrefixedRangeMediaFeature(value)) return;
  33. if (primary === 'context' && isRangeContextMediaFeature(value)) return;
  34. const index = atRuleParamIndex(atRule) + parent.sourceIndex;
  35. const endIndex = index + parent.value.length;
  36. report({
  37. message: messages.expected(primary),
  38. node: atRule,
  39. index,
  40. endIndex,
  41. result,
  42. ruleName,
  43. });
  44. });
  45. });
  46. };
  47. };
  48. /**
  49. * @param {string} mediaFeature
  50. */
  51. function isPrefixedRangeMediaFeature(mediaFeature) {
  52. return mediaFeature.startsWith('min-') || mediaFeature.startsWith('max-');
  53. }
  54. /**
  55. * @param {string} mediaFeature
  56. */
  57. function isRangeTypeMediaFeature(mediaFeature) {
  58. const unprefixedMediaFeature = mediaFeature.replace(/^(?:min|max)-/, '');
  59. return rangeTypeMediaFeatureNames.has(unprefixedMediaFeature);
  60. }
  61. /**
  62. * @param {import('postcss-media-query-parser').Node} mediaFeatureExpressionNode
  63. */
  64. function isInBooleanContext({ nodes }) {
  65. return nodes && nodes.length === 1;
  66. }
  67. rule.ruleName = ruleName;
  68. rule.messages = messages;
  69. rule.meta = meta;
  70. module.exports = rule;