@atlaskit/eslint-plugin-design-system 11.2.0 → 11.3.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 11.3.0
+
+### Minor Changes
+
+- [#175432](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/175432)
+  [`0a1070983ac76`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0a1070983ac76) -
+  `use-tokens-typography` rule now reports on `fontWeight` used with raw values (e.g. 600, 'bold').
+  If a matching token is found, a fix is suggested. This rule is disabled by default but can be
+  enabled under the name `font-weight`.
+
+### Patch Changes
+
+- [#173274](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/173274)
+  [`fd5bac37c73ba`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fd5bac37c73ba) -
+  Fix eslint type error.
+
 ## 11.2.0
 
 ### Minor Changes

package/dist/cjs/rules/use-tokens-typography/config/index.js

@@ -26,7 +26,8 @@ var ruleSchema = exports.ruleSchema = {
 var defaultConfig = {
   failSilently: false,
   shouldEnforceFallbacks: false,
-  enableUnsafeAutofix: false
+  enableUnsafeAutofix: false,
+  patterns: ['style-object']
 };
 var getConfig = exports.getConfig = function getConfig(overrides) {
   return Object.assign({}, defaultConfig, overrides);

package/dist/cjs/rules/use-tokens-typography/index.js

@@ -7,18 +7,26 @@ exports.default = void 0;
 var _createRule = require("../utils/create-rule");
 var _errorBoundary = require("../utils/error-boundary");
 var _config = require("./config");
+var _fontWeight = require("./transformers/font-weight");
 var _styleObject = require("./transformers/style-object");
 var create = function create(context) {
   var config = (0, _config.getConfig)(context.options[0]);
-  return {
-    // const styles = css({ fontSize: '14px, ... }), styled.div({ fontSize: 14, ... })
-    ObjectExpression: (0, _errorBoundary.errorBoundary)(function (node) {
+  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
       });
-    }, config)
-  };
+    },
+    // const styles = css({ fontWeight: 600, 'bold', ... })
+    'ObjectExpression > Property > Identifier[name=/fontWeight/]': function ObjectExpressionPropertyIdentifierNameFontWeight(node) {
+      return _fontWeight.FontWeight.lint(node, {
+        context: context,
+        config: config
+      });
+    }
+  }, config);
 };
 var rule = (0, _createRule.createLintRule)({
   meta: {
@@ -32,7 +40,8 @@ var rule = (0, _createRule.createLintRule)({
       severity: 'warn'
     },
     messages: {
-      noRawTypographyValues: 'Typography primitives or tokens should be used instead of hard-coded values.\n\n@meta <<{{payload}}>>.\n\nNOTE: Using tokens with the `fontSize` property is invalid. Any `font.heading` or `font.body` tokens must use the CSS `font` property.'
+      noRawTypographyValues: 'Typography primitives or tokens should be used instead of hard-coded values.\n\n@meta <<{{payload}}>>.\n\nNOTE: 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.'
     },
     schema: _config.ruleSchema
   },

package/dist/cjs/rules/use-tokens-typography/transformers/font-weight.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FontWeight = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _astNodes = require("../../../ast-nodes");
+var _utils = require("../../ensure-design-token-usage/utils");
+var _isNode = require("../../utils/is-node");
+var _utils2 = require("../utils");
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+var FontWeight = exports.FontWeight = {
+  lint: function lint(node, _ref) {
+    var context = _ref.context,
+      config = _ref.config;
+    // To force the correct node type
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'Identifier')) {
+      return;
+    }
+
+    // Check whether all criteria needed to make a transformation are met
+    var success = FontWeight._check(node, {
+      context: context,
+      config: config
+    });
+    if (success) {
+      return context.report({
+        node: node,
+        messageId: 'noRawFontWeightValues',
+        fix: FontWeight._fix(node, context)
+      });
+    }
+  },
+  _check: function _check(node, _ref2) {
+    var context = _ref2.context,
+      config = _ref2.config;
+    if (!config.patterns.includes('font-weight')) {
+      return false;
+    }
+    if (!(0, _isNode.isDecendantOfStyleBlock)(node) && !(0, _isNode.isDecendantOfType)(node, 'JSXExpressionContainer')) {
+      return false;
+    }
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'Property')) {
+      return false;
+    }
+    var fontWeightValue = (0, _utils.getValueForPropertyNode)(node.parent, context);
+    if (typeof fontWeightValue === 'string' && fontWeightValue.includes('font.weight.')) {
+      return false;
+    }
+    return true;
+  },
+  _fix: function _fix(node, context) {
+    return function (fixer) {
+      var _findFontWeightTokenF;
+      var fixes = [];
+
+      // -- Type assertions to force the correct node type --
+
+      if (!(0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'Property')) {
+        return [];
+      }
+      if (!(0, _eslintCodemodUtils.isNodeOfType)(node.parent.value, 'Literal')) {
+        return [];
+      }
+      if (!node.parent.value.raw) {
+        return [];
+      }
+
+      // -- Fix: Replace raw value with token --
+
+      var matchingToken = (_findFontWeightTokenF = (0, _utils2.findFontWeightTokenForValue)(node.parent.value.raw)) === null || _findFontWeightTokenF === void 0 ? void 0 : _findFontWeightTokenF.tokenName;
+      if (!matchingToken) {
+        return [];
+      }
+      var fontWeightValueFix = fixer.replaceText(node.parent.value, "token('".concat(matchingToken, "')"));
+      fixes.push(fontWeightValueFix);
+
+      // -- Fix: Add import if it doesn't exist --
+
+      var body = context.sourceCode.ast.body;
+      var tokensImportDeclarations = _astNodes.Root.findImportsByModule(body, '@atlaskit/tokens');
+
+      // If there is more than one `@atlaskit/tokens` import, then it becomes difficult to determine which import to transform
+      if (tokensImportDeclarations.length > 1) {
+        return fixes;
+      }
+      var tokensImportDeclaration = tokensImportDeclarations[0];
+      if (!tokensImportDeclaration) {
+        fixes.push((0, _utils2.insertTokensImport)(body, fixer));
+      }
+      return fixes;
+    };
+  }
+};

package/dist/cjs/rules/use-tokens-typography/transformers/style-object.js

@@ -204,6 +204,11 @@ var StyleObject = exports.StyleObject = {
   _check: function _check(node, _ref2) {
     var context = _ref2.context,
       config = _ref2.config;
+    if (!config.patterns.includes('style-object')) {
+      return {
+        success: false
+      };
+    }
     if (!(0, _isNode.isDecendantOfStyleBlock)(node) && !(0, _isNode.isDecendantOfType)(node, 'JSXExpressionContainer')) {
       return {
         success: false

package/dist/cjs/rules/use-tokens-typography/utils.js

@@ -99,6 +99,12 @@ var fontWeightTokens = exports.fontWeightTokens = _tokensRaw.typographyAdg3.filt
   };
 });
 function findFontWeightTokenForValue(fontWeight) {
+  if (fontWeight === "'normal'") {
+    fontWeight = '400';
+  }
+  if (fontWeight === "'bold'") {
+    fontWeight = '700';
+  }
   return fontWeightTokens.find(function (token) {
     return token.tokenValue === fontWeight;
   });

package/dist/es2019/rules/use-tokens-typography/config/index.js

@@ -20,7 +20,8 @@ export const ruleSchema = {
 const defaultConfig = {
   failSilently: false,
   shouldEnforceFallbacks: false,
-  enableUnsafeAutofix: false
+  enableUnsafeAutofix: false,
+  patterns: ['style-object']
 };
 export const getConfig = overrides => {
   return Object.assign({}, defaultConfig, overrides);

package/dist/es2019/rules/use-tokens-typography/index.js

@@ -1,16 +1,22 @@
 import { createLintRule } from '../utils/create-rule';
 import { errorBoundary } from '../utils/error-boundary';
 import { getConfig, ruleSchema } from './config';
+import { FontWeight } from './transformers/font-weight';
 import { StyleObject } from './transformers/style-object';
 const create = context => {
   const config = getConfig(context.options[0]);
-  return {
-    // const styles = css({ fontSize: '14px, ... }), styled.div({ fontSize: 14, ... })
-    ObjectExpression: errorBoundary(node => StyleObject.lint(node, {
+  return errorBoundary({
+    // const styles = css({ fontSize: '14px', ... }), styled.div({ fontSize: 14, ... })
+    ObjectExpression: node => StyleObject.lint(node, {
       context,
       config
-    }), config)
-  };
+    }),
+    // const styles = css({ fontWeight: 600, 'bold', ... })
+    'ObjectExpression > Property > Identifier[name=/fontWeight/]': node => FontWeight.lint(node, {
+      context,
+      config
+    })
+  }, config);
 };
 const rule = createLintRule({
   meta: {
@@ -24,7 +30,8 @@ const rule = createLintRule({
       severity: 'warn'
     },
     messages: {
-      noRawTypographyValues: 'Typography primitives or tokens should be used instead of hard-coded values.\n\n@meta <<{{payload}}>>.\n\nNOTE: Using tokens with the `fontSize` property is invalid. Any `font.heading` or `font.body` tokens must use the CSS `font` property.'
+      noRawTypographyValues: 'Typography primitives or tokens should be used instead of hard-coded values.\n\n@meta <<{{payload}}>>.\n\nNOTE: 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.'
     },
     schema: ruleSchema
   },

package/dist/es2019/rules/use-tokens-typography/transformers/font-weight.js

@@ -0,0 +1,92 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { Root } from '../../../ast-nodes';
+import { getValueForPropertyNode } from '../../ensure-design-token-usage/utils';
+import { isDecendantOfStyleBlock, isDecendantOfType } from '../../utils/is-node';
+import { findFontWeightTokenForValue, insertTokensImport } from '../utils';
+export const FontWeight = {
+  lint(node, {
+    context,
+    config
+  }) {
+    // To force the correct node type
+    if (!isNodeOfType(node, 'Identifier')) {
+      return;
+    }
+
+    // Check whether all criteria needed to make a transformation are met
+    const success = FontWeight._check(node, {
+      context,
+      config
+    });
+    if (success) {
+      return context.report({
+        node,
+        messageId: 'noRawFontWeightValues',
+        fix: FontWeight._fix(node, context)
+      });
+    }
+  },
+  _check(node, {
+    context,
+    config
+  }) {
+    if (!config.patterns.includes('font-weight')) {
+      return false;
+    }
+    if (!isDecendantOfStyleBlock(node) && !isDecendantOfType(node, 'JSXExpressionContainer')) {
+      return false;
+    }
+    if (!isNodeOfType(node.parent, 'Property')) {
+      return false;
+    }
+    const fontWeightValue = getValueForPropertyNode(node.parent, context);
+    if (typeof fontWeightValue === 'string' && fontWeightValue.includes('font.weight.')) {
+      return false;
+    }
+    return true;
+  },
+  _fix(node, context) {
+    return fixer => {
+      var _findFontWeightTokenF;
+      const fixes = [];
+
+      // -- Type assertions to force the correct node type --
+
+      if (!isNodeOfType(node.parent, 'Property')) {
+        return [];
+      }
+      if (!isNodeOfType(node.parent.value, 'Literal')) {
+        return [];
+      }
+      if (!node.parent.value.raw) {
+        return [];
+      }
+
+      // -- Fix: Replace raw value with token --
+
+      const matchingToken = (_findFontWeightTokenF = findFontWeightTokenForValue(node.parent.value.raw)) === null || _findFontWeightTokenF === void 0 ? void 0 : _findFontWeightTokenF.tokenName;
+      if (!matchingToken) {
+        return [];
+      }
+      const fontWeightValueFix = fixer.replaceText(node.parent.value, `token('${matchingToken}')`);
+      fixes.push(fontWeightValueFix);
+
+      // -- Fix: Add import if it doesn't exist --
+
+      const body = context.sourceCode.ast.body;
+      const tokensImportDeclarations = Root.findImportsByModule(body, '@atlaskit/tokens');
+
+      // If there is more than one `@atlaskit/tokens` import, then it becomes difficult to determine which import to transform
+      if (tokensImportDeclarations.length > 1) {
+        return fixes;
+      }
+      const tokensImportDeclaration = tokensImportDeclarations[0];
+      if (!tokensImportDeclaration) {
+        fixes.push(insertTokensImport(body, fixer));
+      }
+      return fixes;
+    };
+  }
+};

package/dist/es2019/rules/use-tokens-typography/transformers/style-object.js

@@ -198,6 +198,11 @@ export const StyleObject = {
     context,
     config
   }) {
+    if (!config.patterns.includes('style-object')) {
+      return {
+        success: false
+      };
+    }
     if (!isDecendantOfStyleBlock(node) && !isDecendantOfType(node, 'JSXExpressionContainer')) {
       return {
         success: false

package/dist/es2019/rules/use-tokens-typography/utils.js

@@ -48,6 +48,12 @@ export const fontWeightTokens = typographyTokens.filter(token => token.attribute
   };
 });
 export function findFontWeightTokenForValue(fontWeight) {
+  if (fontWeight === "'normal'") {
+    fontWeight = '400';
+  }
+  if (fontWeight === "'bold'") {
+    fontWeight = '700';
+  }
   return fontWeightTokens.find(token => token.tokenValue === fontWeight);
 }
 export const fontWeightMap = {

package/dist/esm/rules/use-tokens-typography/config/index.js

@@ -20,7 +20,8 @@ export var ruleSchema = {
 var defaultConfig = {
   failSilently: false,
   shouldEnforceFallbacks: false,
-  enableUnsafeAutofix: false
+  enableUnsafeAutofix: false,
+  patterns: ['style-object']
 };
 export var getConfig = function getConfig(overrides) {
   return Object.assign({}, defaultConfig, overrides);

package/dist/esm/rules/use-tokens-typography/index.js

@@ -1,18 +1,26 @@
 import { createLintRule } from '../utils/create-rule';
 import { errorBoundary } from '../utils/error-boundary';
 import { getConfig, ruleSchema } from './config';
+import { FontWeight } from './transformers/font-weight';
 import { StyleObject } from './transformers/style-object';
 var create = function create(context) {
   var config = getConfig(context.options[0]);
-  return {
-    // const styles = css({ fontSize: '14px, ... }), styled.div({ fontSize: 14, ... })
-    ObjectExpression: errorBoundary(function (node) {
+  return errorBoundary({
+    // const styles = css({ fontSize: '14px', ... }), styled.div({ fontSize: 14, ... })
+    ObjectExpression: function ObjectExpression(node) {
       return StyleObject.lint(node, {
         context: context,
         config: config
       });
-    }, config)
-  };
+    },
+    // const styles = css({ fontWeight: 600, 'bold', ... })
+    'ObjectExpression > Property > Identifier[name=/fontWeight/]': function ObjectExpressionPropertyIdentifierNameFontWeight(node) {
+      return FontWeight.lint(node, {
+        context: context,
+        config: config
+      });
+    }
+  }, config);
 };
 var rule = createLintRule({
   meta: {
@@ -26,7 +34,8 @@ var rule = createLintRule({
       severity: 'warn'
     },
     messages: {
-      noRawTypographyValues: 'Typography primitives or tokens should be used instead of hard-coded values.\n\n@meta <<{{payload}}>>.\n\nNOTE: Using tokens with the `fontSize` property is invalid. Any `font.heading` or `font.body` tokens must use the CSS `font` property.'
+      noRawTypographyValues: 'Typography primitives or tokens should be used instead of hard-coded values.\n\n@meta <<{{payload}}>>.\n\nNOTE: 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.'
     },
     schema: ruleSchema
   },

package/dist/esm/rules/use-tokens-typography/transformers/font-weight.js

@@ -0,0 +1,90 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { Root } from '../../../ast-nodes';
+import { getValueForPropertyNode } from '../../ensure-design-token-usage/utils';
+import { isDecendantOfStyleBlock, isDecendantOfType } from '../../utils/is-node';
+import { findFontWeightTokenForValue, insertTokensImport } from '../utils';
+export var FontWeight = {
+  lint: function lint(node, _ref) {
+    var context = _ref.context,
+      config = _ref.config;
+    // To force the correct node type
+    if (!isNodeOfType(node, 'Identifier')) {
+      return;
+    }
+
+    // Check whether all criteria needed to make a transformation are met
+    var success = FontWeight._check(node, {
+      context: context,
+      config: config
+    });
+    if (success) {
+      return context.report({
+        node: node,
+        messageId: 'noRawFontWeightValues',
+        fix: FontWeight._fix(node, context)
+      });
+    }
+  },
+  _check: function _check(node, _ref2) {
+    var context = _ref2.context,
+      config = _ref2.config;
+    if (!config.patterns.includes('font-weight')) {
+      return false;
+    }
+    if (!isDecendantOfStyleBlock(node) && !isDecendantOfType(node, 'JSXExpressionContainer')) {
+      return false;
+    }
+    if (!isNodeOfType(node.parent, 'Property')) {
+      return false;
+    }
+    var fontWeightValue = getValueForPropertyNode(node.parent, context);
+    if (typeof fontWeightValue === 'string' && fontWeightValue.includes('font.weight.')) {
+      return false;
+    }
+    return true;
+  },
+  _fix: function _fix(node, context) {
+    return function (fixer) {
+      var _findFontWeightTokenF;
+      var fixes = [];
+
+      // -- Type assertions to force the correct node type --
+
+      if (!isNodeOfType(node.parent, 'Property')) {
+        return [];
+      }
+      if (!isNodeOfType(node.parent.value, 'Literal')) {
+        return [];
+      }
+      if (!node.parent.value.raw) {
+        return [];
+      }
+
+      // -- Fix: Replace raw value with token --
+
+      var matchingToken = (_findFontWeightTokenF = findFontWeightTokenForValue(node.parent.value.raw)) === null || _findFontWeightTokenF === void 0 ? void 0 : _findFontWeightTokenF.tokenName;
+      if (!matchingToken) {
+        return [];
+      }
+      var fontWeightValueFix = fixer.replaceText(node.parent.value, "token('".concat(matchingToken, "')"));
+      fixes.push(fontWeightValueFix);
+
+      // -- Fix: Add import if it doesn't exist --
+
+      var body = context.sourceCode.ast.body;
+      var tokensImportDeclarations = Root.findImportsByModule(body, '@atlaskit/tokens');
+
+      // If there is more than one `@atlaskit/tokens` import, then it becomes difficult to determine which import to transform
+      if (tokensImportDeclarations.length > 1) {
+        return fixes;
+      }
+      var tokensImportDeclaration = tokensImportDeclarations[0];
+      if (!tokensImportDeclaration) {
+        fixes.push(insertTokensImport(body, fixer));
+      }
+      return fixes;
+    };
+  }
+};

package/dist/esm/rules/use-tokens-typography/transformers/style-object.js

@@ -199,6 +199,11 @@ export var StyleObject = {
   _check: function _check(node, _ref2) {
     var context = _ref2.context,
       config = _ref2.config;
+    if (!config.patterns.includes('style-object')) {
+      return {
+        success: false
+      };
+    }
     if (!isDecendantOfStyleBlock(node) && !isDecendantOfType(node, 'JSXExpressionContainer')) {
       return {
         success: false

package/dist/esm/rules/use-tokens-typography/utils.js

@@ -78,6 +78,12 @@ export var fontWeightTokens = typographyTokens.filter(function (token) {
   };
 });
 export function findFontWeightTokenForValue(fontWeight) {
+  if (fontWeight === "'normal'") {
+    fontWeight = '400';
+  }
+  if (fontWeight === "'bold'") {
+    fontWeight = '700';
+  }
   return fontWeightTokens.find(function (token) {
     return token.tokenValue === fontWeight;
   });

package/dist/types/rules/use-tokens-typography/config/index.d.ts

@@ -1,8 +1,11 @@
 import { type JSONSchema4 } from '@typescript-eslint/utils/dist/json-schema';
+type Pattern = 'style-object' | 'font-weight';
 export type RuleConfig = {
     failSilently: boolean;
     shouldEnforceFallbacks: boolean;
     enableUnsafeAutofix: boolean;
+    patterns: Pattern[];
 };
 export declare const ruleSchema: JSONSchema4;
 export declare const getConfig: (overrides: Partial<RuleConfig>) => RuleConfig;
+export {};

package/dist/types/rules/use-tokens-typography/transformers/font-weight.d.ts

@@ -0,0 +1,13 @@
+import type { Rule } from 'eslint';
+import { Identifier } from 'eslint-codemod-utils';
+import { type RuleConfig } from '../config';
+interface MetaData {
+    context: Rule.RuleContext;
+    config: RuleConfig;
+}
+export declare const FontWeight: {
+    lint(node: Rule.Node, { context, config }: MetaData): void;
+    _check(node: Identifier & Rule.NodeParentExtension, { context, config }: MetaData): boolean;
+    _fix(node: Identifier & Rule.NodeParentExtension, context: Rule.RuleContext): (fixer: Rule.RuleFixer) => Rule.Fix[];
+};
+export {};

package/dist/types-ts4.5/rules/use-tokens-typography/config/index.d.ts

@@ -1,8 +1,11 @@
 import { type JSONSchema4 } from '@typescript-eslint/utils/dist/json-schema';
+type Pattern = 'style-object' | 'font-weight';
 export type RuleConfig = {
     failSilently: boolean;
     shouldEnforceFallbacks: boolean;
     enableUnsafeAutofix: boolean;
+    patterns: Pattern[];
 };
 export declare const ruleSchema: JSONSchema4;
 export declare const getConfig: (overrides: Partial<RuleConfig>) => RuleConfig;
+export {};

package/dist/types-ts4.5/rules/use-tokens-typography/transformers/font-weight.d.ts

@@ -0,0 +1,13 @@
+import type { Rule } from 'eslint';
+import { Identifier } from 'eslint-codemod-utils';
+import { type RuleConfig } from '../config';
+interface MetaData {
+    context: Rule.RuleContext;
+    config: RuleConfig;
+}
+export declare const FontWeight: {
+    lint(node: Rule.Node, { context, config }: MetaData): void;
+    _check(node: Identifier & Rule.NodeParentExtension, { context, config }: MetaData): boolean;
+    _fix(node: Identifier & Rule.NodeParentExtension, context: Rule.RuleContext): (fixer: Rule.RuleFixer) => Rule.Fix[];
+};
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
 	"description": "The essential plugin for use with the Atlassian Design System.",
-	"version": "11.2.0",
+	"version": "11.3.0",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
 	"publishConfig": {