index.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. 'use strict';
  2. const atRuleParamIndex = require('../../utils/atRuleParamIndex');
  3. const declarationValueIndex = require('../../utils/declarationValueIndex');
  4. const getDimension = require('../../utils/getDimension');
  5. const isStandardSyntaxAtRule = require('../../utils/isStandardSyntaxAtRule');
  6. const isStandardSyntaxDeclaration = require('../../utils/isStandardSyntaxDeclaration');
  7. const { units } = require('../../reference/units');
  8. const mediaParser = require('postcss-media-query-parser').default;
  9. const optionsMatches = require('../../utils/optionsMatches');
  10. const report = require('../../utils/report');
  11. const ruleMessages = require('../../utils/ruleMessages');
  12. const validateOptions = require('../../utils/validateOptions');
  13. const valueParser = require('postcss-value-parser');
  14. const vendor = require('../../utils/vendor');
  15. const { isRegExp, isString, assert } = require('../../utils/validateTypes');
  16. const { isAtRule } = require('../../utils/typeGuards');
  17. const ruleName = 'unit-no-unknown';
  18. const messages = ruleMessages(ruleName, {
  19. rejected: (unit) => `Unexpected unknown unit "${unit}"`,
  20. });
  21. const meta = {
  22. url: 'https://stylelint.io/user-guide/rules/unit-no-unknown',
  23. };
  24. /** @type {import('stylelint').Rule} */
  25. const rule = (primary, secondaryOptions) => {
  26. return (root, result) => {
  27. const validOptions = validateOptions(
  28. result,
  29. ruleName,
  30. { actual: primary },
  31. {
  32. actual: secondaryOptions,
  33. possible: {
  34. ignoreUnits: [isString, isRegExp],
  35. ignoreFunctions: [isString, isRegExp],
  36. },
  37. optional: true,
  38. },
  39. );
  40. if (!validOptions) {
  41. return;
  42. }
  43. /**
  44. * @template {import('postcss').AtRule | import('postcss').Declaration} T
  45. * @param {T} node
  46. * @param {string} value
  47. * @param {(node: T) => number} getIndex
  48. * @returns {void}
  49. */
  50. function check(node, value, getIndex) {
  51. // make sure multiplication operations (*) are divided - not handled
  52. // by postcss-value-parser
  53. value = value.replace(/\*/g, ',');
  54. const parsedValue = valueParser(value);
  55. parsedValue.walk((valueNode) => {
  56. // Ignore wrong units within `url` function
  57. // and within functions listed in the `ignoreFunctions` option
  58. if (
  59. valueNode.type === 'function' &&
  60. (valueNode.value.toLowerCase() === 'url' ||
  61. optionsMatches(secondaryOptions, 'ignoreFunctions', valueNode.value))
  62. ) {
  63. return false;
  64. }
  65. const { number, unit } = getDimension(valueNode);
  66. if (!number || !unit) {
  67. return;
  68. }
  69. if (optionsMatches(secondaryOptions, 'ignoreUnits', unit)) {
  70. return;
  71. }
  72. if (units.has(unit.toLowerCase()) && unit.toLowerCase() !== 'x') {
  73. return;
  74. }
  75. if (unit.toLowerCase() === 'x') {
  76. if (
  77. isAtRule(node) &&
  78. node.name === 'media' &&
  79. node.params.toLowerCase().includes('resolution')
  80. ) {
  81. let ignoreUnit = false;
  82. mediaParser(node.params).walk((mediaNode, _i, mediaNodes) => {
  83. const lastMediaNode = mediaNodes[mediaNodes.length - 1];
  84. if (
  85. mediaNode.value.toLowerCase().includes('resolution') &&
  86. lastMediaNode &&
  87. lastMediaNode.sourceIndex === valueNode.sourceIndex
  88. ) {
  89. ignoreUnit = true;
  90. return false;
  91. }
  92. });
  93. if (ignoreUnit) {
  94. return;
  95. }
  96. }
  97. if (node.type === 'decl') {
  98. if (node.prop.toLowerCase() === 'image-resolution') {
  99. return;
  100. }
  101. if (/^(?:-webkit-)?image-set[\s(]/i.test(value)) {
  102. const imageSet = parsedValue.nodes.find(
  103. (n) => vendor.unprefixed(n.value) === 'image-set',
  104. );
  105. assert(imageSet);
  106. assert('nodes' in imageSet);
  107. const imageSetLastNode = imageSet.nodes[imageSet.nodes.length - 1];
  108. assert(imageSetLastNode);
  109. const imageSetValueLastIndex = imageSetLastNode.sourceIndex;
  110. if (imageSetValueLastIndex >= valueNode.sourceIndex) {
  111. return;
  112. }
  113. }
  114. }
  115. }
  116. const index = getIndex(node);
  117. report({
  118. index: index + valueNode.sourceIndex + number.length,
  119. endIndex: index + valueNode.sourceEndIndex,
  120. message: messages.rejected(unit),
  121. node,
  122. result,
  123. ruleName,
  124. });
  125. });
  126. }
  127. root.walkAtRules(/^media$/i, (atRule) => {
  128. if (!isStandardSyntaxAtRule(atRule)) {
  129. return;
  130. }
  131. check(atRule, atRule.params, atRuleParamIndex);
  132. });
  133. root.walkDecls((decl) => {
  134. if (!isStandardSyntaxDeclaration(decl)) {
  135. return;
  136. }
  137. check(decl, decl.value, declarationValueIndex);
  138. });
  139. };
  140. };
  141. rule.ruleName = ruleName;
  142. rule.messages = messages;
  143. rule.meta = meta;
  144. module.exports = rule;