@atlaskit/eslint-plugin-design-system/dist/esm/rules/use-tokens-typography/index.js

The essential plugin for use with the Atlassian Design System.

import { createLintRule } from '../utils/create-lint-rule';
import { errorBoundary } from '../utils/error-boundary';
import { getConfig } from './config/get-config';
import { ruleSchema } from './config/rule-schema';
import { BannedProperties } from './transformers/banned-properties';
import { FontFamily } from './transformers/font-family';
import { FontWeight } from './transformers/font-weight';
import { RestrictedCapitalisation } from './transformers/restricted-capitalisation';
import { StyleObject } from './transformers/style-object';
import { UntokenizedProperties } from './transformers/untokenized-properties';
var create = function create(context) {
  // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
  var config = getConfig(context.options[0]);
  return errorBoundary({
    // const styles = css({ fontSize: '14px', ... }), styled.div({ fontSize: 14, ... })
    ObjectExpression: function ObjectExpression(node) {
      return StyleObject.lint(node, {
        context: context,
        config: config
      });
    },
    // const styles = css({ fontWeight: 600, 'bold', ... })
    'ObjectExpression > Property > Identifier[name=/^fontWeight$/]': function ObjectExpression__Property__IdentifierName_FontWeight$_(node) {
      return FontWeight.lint(node.parent, {
        context: context,
        config: config
      });
    },
    // const styles = css({ fontFamily: 'Arial, sans-serif', ... })
    'ObjectExpression > Property > Identifier[name=/^fontFamily$/]': function ObjectExpression__Property__IdentifierName_FontFamily$_(node) {
      return FontFamily.lint(node.parent, {
        context: context,
        config: config
      });
    },
    // const styles = css({ font: 'bold 36px Helvetica, Arial', ... })
    'ObjectExpression > Property > Identifier[name=/^font$/]': function ObjectExpression__Property__IdentifierName_Font$_(node) {
      return UntokenizedProperties.lint(node.parent, {
        context: context,
        config: config
      });
    },
    // const styles = css({ lineHeight: 1.2, letterSpacing: 0.003, ... })
    'ObjectExpression > Property > Identifier[name=/^(lineHeight|letterSpacing)$/]': function ObjectExpression__Property__IdentifierName_LineHeightLetterSpacing$_(node) {
      return BannedProperties.lint(node.parent, {
        context: context,
        config: config
      });
    },
    // const styles = css({ textTransform: 'uppercase', ... })
    'ObjectExpression > Property > Identifier[name=/^textTransform$/]': function ObjectExpression__Property__IdentifierName_TextTransform$_(node) {
      return RestrictedCapitalisation.lint(node.parent, {
        context: context,
        config: config
      });
    }
  }, config);
};
var rule = createLintRule({
  meta: {
    name: 'use-tokens-typography',
    type: 'suggestion',
    fixable: 'code',
    hasSuggestions: true,
    docs: {
      description: 'Enforces usage of design tokens for typography properties rather than hard-coded values.',
      recommended: true,
      severity: 'warn'
    },
    messages: {
      noRawTypographyValues: 'Typography primitives or tokens should be used instead of hard-coded values.',
      noFontSizeTypographyToken: 'Using tokens with the `fontSize` property is invalid. Any `font.heading` or `font.body` tokens must use the CSS `font` property.',
      noRawFontWeightValues: 'Font weight tokens should be used instead of hard-coded values.',
      noRawFontFamilyValues: 'Font family tokens should be used instead of hard-coded values.',
      noUntokenizedProperties: 'Use typography tokens for `{{property}}`.',
      noBannedProperties: 'Do not use `{{property}}`. Typography tokens automatically specify `{{property}}` alongside font size and font weight.',
      noRestrictedCapitalisation: "Avoid using ALL CAPS as it reduces readability and is bad for accessibility."
    },
    schema: ruleSchema
  },
  create: create
});
export default rule;