index.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. 'use strict';
  2. const declarationValueIndex = require('../../utils/declarationValueIndex');
  3. const functionArgumentsSearch = require('../../utils/functionArgumentsSearch');
  4. const isStandardSyntaxValue = require('../../utils/isStandardSyntaxValue');
  5. const report = require('../../utils/report');
  6. const ruleMessages = require('../../utils/ruleMessages');
  7. const validateOptions = require('../../utils/validateOptions');
  8. const valueParser = require('postcss-value-parser');
  9. const vendor = require('../../utils/vendor');
  10. const ruleName = 'function-linear-gradient-no-nonstandard-direction';
  11. const messages = ruleMessages(ruleName, {
  12. rejected: 'Unexpected nonstandard direction',
  13. });
  14. const meta = {
  15. url: 'https://stylelint.io/user-guide/rules/list/function-linear-gradient-no-nonstandard-direction',
  16. };
  17. /**
  18. * @param {string} source
  19. * @param {boolean} withToPrefix
  20. */
  21. function isStandardDirection(source, withToPrefix) {
  22. const regexp = withToPrefix
  23. ? /^to (top|left|bottom|right)(?: (top|left|bottom|right))?$/
  24. : /^(top|left|bottom|right)(?: (top|left|bottom|right))?$/;
  25. const matches = source.match(regexp);
  26. if (!matches) {
  27. return false;
  28. }
  29. if (matches.length === 2) {
  30. return true;
  31. }
  32. // Cannot repeat side-or-corner, e.g. "to top top"
  33. if (matches.length === 3 && matches[1] !== matches[2]) {
  34. return true;
  35. }
  36. return false;
  37. }
  38. /** @type {import('stylelint').Rule} */
  39. const rule = (primary) => {
  40. return (root, result) => {
  41. const validOptions = validateOptions(result, ruleName, { actual: primary });
  42. if (!validOptions) {
  43. return;
  44. }
  45. root.walkDecls((decl) => {
  46. valueParser(decl.value).walk((valueNode) => {
  47. if (valueNode.type !== 'function') {
  48. return;
  49. }
  50. functionArgumentsSearch(
  51. valueParser.stringify(valueNode).toLowerCase(),
  52. /^(-webkit-|-moz-|-o-)?linear-gradient$/i,
  53. (expression, expressionIndex) => {
  54. const firstArg = expression.split(',')[0].trim();
  55. // If the first arg is not standard, return early
  56. if (!isStandardSyntaxValue(firstArg)) {
  57. return;
  58. }
  59. // If the first character is a number, we can assume the user intends an angle
  60. if (/[\d.]/.test(firstArg[0])) {
  61. if (/^[\d.]+(?:deg|grad|rad|turn)$/.test(firstArg)) {
  62. return;
  63. }
  64. complain();
  65. return;
  66. }
  67. // The first argument may not be a direction: it may be an angle,
  68. // or a color stop (in which case user gets default direction, "to bottom")
  69. // cf. https://drafts.csswg.org/css-images-3/#linear-gradient-syntax
  70. if (!/left|right|top|bottom/.test(firstArg)) {
  71. return;
  72. }
  73. const withToPrefix = !vendor.prefix(valueNode.value);
  74. if (!isStandardDirection(firstArg, withToPrefix)) {
  75. complain();
  76. }
  77. function complain() {
  78. report({
  79. message: messages.rejected,
  80. node: decl,
  81. index: declarationValueIndex(decl) + valueNode.sourceIndex + expressionIndex,
  82. result,
  83. ruleName,
  84. });
  85. }
  86. },
  87. );
  88. });
  89. });
  90. };
  91. };
  92. rule.ruleName = ruleName;
  93. rule.messages = messages;
  94. rule.meta = meta;
  95. module.exports = rule;