index.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports["default"] = rule;
  6. exports.units = exports.ruleName = exports.meta = exports.messages = void 0;
  7. var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
  8. var _stylelint = require("stylelint");
  9. var _utils = require("../../utils");
  10. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
  11. var ruleName = (0, _utils.namespace)("dimension-no-non-numeric-values");
  12. exports.ruleName = ruleName;
  13. var messages = _stylelint.utils.ruleMessages(ruleName, {
  14. rejected: function rejected(unit) {
  15. return "Expected \"$value * 1".concat(unit, "\" instead of \"#{$value}").concat(unit, "\". Consider writing \"value\" in terms of ").concat(unit, " originally.");
  16. }
  17. });
  18. exports.messages = messages;
  19. var meta = {
  20. url: (0, _utils.ruleUrl)(ruleName)
  21. };
  22. exports.meta = meta;
  23. var units = [
  24. // Font-relative lengths:
  25. // https://www.w3.org/TR/css-values-4/#font-relative-lengths
  26. "em", "ex", "cap", "ch", "ic", "rem", "lh", "rlh",
  27. // Viewport-relative lengths:
  28. // https://www.w3.org/TR/css-values-4/#viewport-relative-lengths
  29. "vw", "vh", "vi", "vb", "vmin", "vmax",
  30. // Absolute lengths:
  31. // https://www.w3.org/TR/css-values-4/#absolute-lengths
  32. "cm", "mm", "Q", "in", "pc", "pt", "px",
  33. // Angle units:
  34. // https://www.w3.org/TR/css-values-4/#angles
  35. "deg", "grad", "rad", "turn",
  36. // Duration units:
  37. // https://www.w3.org/TR/css-values-4/#time
  38. "s", "ms",
  39. // Frequency units:
  40. // https://www.w3.org/TR/css-values-4/#frequency
  41. "Hz", "kHz",
  42. // Resolution units:
  43. // https://www.w3.org/TR/css-values-4/#resolution
  44. "dpi", "dpcm", "dppx", "x",
  45. // Flexible lengths:
  46. // https://www.w3.org/TR/css-grid-1/#fr-unit
  47. "fr"];
  48. exports.units = units;
  49. function rule(primary) {
  50. return function (root, result) {
  51. var validOptions = _stylelint.utils.validateOptions(result, ruleName, {
  52. actual: primary
  53. });
  54. if (!validOptions) {
  55. return;
  56. }
  57. root.walkDecls(function (decl) {
  58. (0, _postcssValueParser["default"])(decl.value).walk(function (node) {
  59. // All words are non-quoted, while strings are quoted.
  60. // If quoted, it's probably a deliberate non-numeric dimension.
  61. if (node.type !== "word") {
  62. return;
  63. }
  64. if (!isInterpolated(node.value)) {
  65. return;
  66. }
  67. var regex = new RegExp("#{[$a-z_0-9 +-]*}(".concat(units.join("|"), ");?"));
  68. var matchUnit = decl.value.match(regex);
  69. if (!matchUnit) {
  70. return;
  71. }
  72. var unit = matchUnit[1];
  73. var offset = decl.value.indexOf(unit);
  74. _stylelint.utils.report({
  75. ruleName: ruleName,
  76. result: result,
  77. message: messages.rejected(unit),
  78. index: (0, _utils.declarationValueIndex)(decl) + offset,
  79. node: decl
  80. });
  81. });
  82. });
  83. };
  84. }
  85. rule.ruleName = ruleName;
  86. rule.messages = messages;
  87. rule.meta = meta;
  88. function isInterpolated(value) {
  89. var _boolean = false;
  90. // ValueParser breaks up interpolation with math into multiple, fragmented
  91. // segments (#{$value, +, 2}px). The easiest way to detect this is to look for a fragmented
  92. // interpolated section.
  93. if (value.match(/^#{\$[a-z]*$/)) {
  94. return true;
  95. }
  96. units.forEach(function (unit) {
  97. var regex = new RegExp("^#{[$a-z_0-9 +-]*}".concat(unit, ";?$"));
  98. if (value.match(regex)) {
  99. _boolean = true;
  100. }
  101. });
  102. return _boolean;
  103. }