css-vars.cjs

// eslint-disable-next-line node/no-unpublished-require
const stylelint = require('stylelint');

const ruleName = 'css-vars';
const messages = stylelint.utils.ruleMessages(ruleName, {
  undefinedCssVar: variable => `Expected variable to be defined: ${variable}`,
});

const regex = /--[\w-]+/g;
const definedVars = new Set();

const plugin = stylelint.createPlugin(ruleName, isEnabled => (root, result) => {
  if (!isEnabled) {
    return;
  }

  root.walkDecls(decl => {
    if (decl.prop.startsWith('--')) {
      definedVars.add(decl.prop);
    }
  });

  root.walkDecls(decl => {
    const matches = decl.value.match(regex) || [];

    if (matches.length === 0) {
      return;
    }

    matches.forEach(cssVar => {
      if (!definedVars.has(cssVar)) {
        stylelint.utils.report({
          message: messages.undefinedCssVar(cssVar),
          node: decl,
          result,
          ruleName,
        });
      }
    });
  });
});

module.exports = plugin;

module.exports.ruleName = ruleName;

module.exports.messages = messages;