How to use the utils function from stylelint

stylelint.utils is a collection of utility functions that can be used to write custom linting rules for CSS and other stylesheet languages using the stylelint framework.

How does stylelint.utils work?

stylelint.utils provides a set of utility functions that can be used within custom linting rules for CSS and other stylesheet languages to perform common tasks such as parsing and processing selectors, checking property values, and manipulating nodes in the abstract syntax tree (AST).

These functions can be imported and used in custom rule definitions to help with tasks such as traversing the AST, checking for specific patterns in code, and creating helpful error messages.

By using these utility functions, developers can more easily create custom rules that conform to their specific style guide, which can improve code consistency and maintainability.

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
const utils = require("stylelint").utils;

module.exports = utils.ruleMessages("my-rule", {
  expected: (selector) => `Expected ${selector} to have a specific property.`,
  rejected: (selector) => `Unexpected ${selector} with invalid value.`,
});

module.exports = function (options, result) {
  return (root, postcssResult) => {
    const validOptions = utils.validateOptions(postcssResult, "my-rule", {
      actual: options,
      possible: {
        prop: ["color", "font-size"],
      },
    });

    if (!validOptions) {
      return;
    }

    root.walkDecls((decl) => {
      if (decl.prop !== options.prop) {
        return;
      }

      const value = decl.value.trim();

      if (value === "invalid") {
        const message = utils.ruleMessages.rejected(decl.prop);
        utils.report({
          message,
          node: decl,
          result,
          ruleName: "my-rule",
        });
      } else if (value === "valid") {
        // do nothing, property is valid
      } else {
        const message = utils.ruleMessages.expected(decl.prop);
        utils.report({
          message,
          node: decl,
          result,
          ruleName: "my-rule",
        });
      }
    });
  };
};

In this example, we use stylelint.utils to create a custom linting rule that checks whether a specific property in a stylesheet is set to an expected value. We use the utils.ruleMessages function to define error messages that will be displayed if the property value does not meet our expectations. Next, we define our custom linting rule, which accepts options for the property name and a list of valid values. We use utils.validateOptions to validate the options passed to our rule and ensure that they conform to our expected format. We then traverse the AST of the stylesheet using root.walkDecls and check each declaration against our expected property and value. If the value is invalid, we use utils.report to generate an error message using the rejected message defined earlier. If the value is not one of our expected values, we use utils.report to generate an error message using the expected message defined earlier. By using stylelint.utils in this way, we can easily create custom linting rules that conform to our specific style guide and help ensure consistent code quality.