@dnb/eufemia/plugins/eslint/rules/no-deprecated-color-variables.js

DNB Eufemia Design System UI Library

const COLOR_VARIABLE_REGEX = /--color-[a-z0-9-]+/g;
const DESIGN_TOKENS_GUIDE_URL = 'https://eufemia.dnb.no/uilib/usage/customisation/theming/design-tokens/guide/';
const reportMatches = (context, node, text) => {
  if (typeof text !== 'string') {
    return;
  }
  const matches = text.match(COLOR_VARIABLE_REGEX);
  if (!(matches !== null && matches !== void 0 && matches.length)) {
    return;
  }
  for (const variable of new Set(matches)) {
    context.report({
      node,
      messageId: 'deprecatedColorVariable',
      data: {
        variable
      }
    });
  }
};

export default {
  meta: {
    type: 'suggestion',
    docs: {
      description: 'Warn when deprecated --color-* CSS variables are used in JavaScript and TypeScript code',
      url: DESIGN_TOKENS_GUIDE_URL
    },
    messages: {
      deprecatedColorVariable: 'Deprecated CSS color variable "{{ variable }}" detected. Use a design token instead; the correct replacement depends on context.'
    },
    schema: []
  },
  create(context) {
    return {
      Literal(node) {
        if (typeof node.value === 'string') {
          reportMatches(context, node, node.value);
        }
      },
      TemplateElement(node) {
        reportMatches(context, node, node.value.raw);
      },
      JSXText(node) {
        reportMatches(context, node, node.value);
      }
    };
  }
};
//# sourceMappingURL=no-deprecated-color-variables.js.map