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

The essential plugin for use with the Atlassian Design System.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _createLintRule = require("../utils/create-lint-rule");
var _errorBoundary = require("../utils/error-boundary");
var _getConfig = require("./config/get-config");
var _ruleSchema = require("./config/rule-schema");
var _bannedProperties = require("./transformers/banned-properties");
var _fontFamily = require("./transformers/font-family");
var _fontWeight = require("./transformers/font-weight");
var _restrictedCapitalisation = require("./transformers/restricted-capitalisation");
var _styleObject = require("./transformers/style-object");
var _untokenizedProperties = require("./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 = (0, _getConfig.getConfig)(context.options[0]);
  return (0, _errorBoundary.errorBoundary)({
    // const styles = css({ fontSize: '14px', ... }), styled.div({ fontSize: 14, ... })
    ObjectExpression: function ObjectExpression(node) {
      return _styleObject.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.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.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.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.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.RestrictedCapitalisation.lint(node.parent, {
        context: context,
        config: config
      });
    }
  }, config);
};
var rule = (0, _createLintRule.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.ruleSchema
  },
  create: create
});
var _default = exports.default = rule;