@atlaskit/eslint-plugin-design-system 10.17.2 → 10.17.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 10.17.3
+
+### Patch Changes
+
+- [#134533](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/134533)
+  [`729d2ac5a7b41`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/729d2ac5a7b41) -
+  Disallow letter spacing and disallow font weight only when heading font token is used for
+  `use-latest-xcss-syntax-typography` rule.
+
 ## 10.17.2
 
 ### Patch Changes

package/dist/cjs/rules/use-latest-xcss-syntax-typography/index.js

@@ -3,12 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.error = exports.default = void 0;
+exports.default = void 0;
 var _createRule = require("../utils/create-rule");
 var _errorBoundary = require("../utils/error-boundary");
 var _config = require("./config");
 var _linters = require("./linters");
-var error = exports.error = "Don't set fontSize, lineHeight, fontWeight properties on xcss. They are unsafe as they allow invalid combinations of typography tokens. There is ongoing work to make this a TypeScript error. Once that happens, you will have to delete/refactor anyway.";
 var rule = (0, _createRule.createLintRule)({
   meta: {
     name: 'use-latest-xcss-syntax-typography',
@@ -21,18 +20,18 @@ var rule = (0, _createRule.createLintRule)({
       severity: 'warn'
     },
     messages: {
-      noUnsafeTypographyProperties: error
+      noUnsafeTypographyProperties: "Don't set '{{ property }}' on xcss. They are unsafe as they allow invalid combinations of typography tokens. There is ongoing work to make this a TypeScript error. Once that happens, you will have to delete/refactor anyway."
     }
   },
   create: function create(context) {
     var config = (0, _config.getConfig)(context.options[0]);
     return (0, _errorBoundary.errorBoundary)({
-      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Identifier[name=/(fontSize|lineHeight|fontWeight)/]': function CallExpressionCalleeNameXcssObjectExpressionPropertyIdentifierNameFontSizeLineHeightFontWeight(node) {
+      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Identifier[name=/(fontSize|lineHeight|fontWeight|letterSpacing)/]': function CallExpressionCalleeNameXcssObjectExpressionPropertyIdentifierNameFontSizeLineHeightFontWeightLetterSpacing(node) {
         return _linters.BannedProperty.lint(node, {
           context: context
         });
       },
-      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Literal[value=/(fontSize|lineHeight|fontWeight)/]': function CallExpressionCalleeNameXcssObjectExpressionPropertyLiteralValueFontSizeLineHeightFontWeight(node) {
+      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Literal[value=/(fontSize|lineHeight|fontWeight|letterSpacing)/]': function CallExpressionCalleeNameXcssObjectExpressionPropertyLiteralValueFontSizeLineHeightFontWeightLetterSpacing(node) {
         return _linters.BannedProperty.lint(node, {
           context: context
         });

package/dist/cjs/rules/use-latest-xcss-syntax-typography/linters/banned-property/index.js

@@ -4,15 +4,52 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BannedProperty = void 0;
-/* eslint-disable @repo/internal/react/require-jsdoc */
-
-var messageId = 'noUnsafeTypographyProperties';
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } /* eslint-disable @repo/internal/react/require-jsdoc */
 var BannedProperty = exports.BannedProperty = {
   lint: function lint(node, _ref) {
     var context = _ref.context;
-    context.report({
-      node: node,
-      messageId: messageId
-    });
+    if (BannedProperty._check(node)) {
+      var property = 'fontSize, lineHeight, fontWeight or letterSpacing';
+      if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'Identifier')) {
+        property = node.name;
+      } else if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'Literal')) {
+        property = String(node.value);
+      }
+      context.report({
+        node: node,
+        messageId: 'noUnsafeTypographyProperties',
+        data: {
+          property: property
+        }
+      });
+    }
+  },
+  _check: function _check(node) {
+    // Prevent font weight being used in combination with heading tokens
+    if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'Identifier') && node.name === 'fontWeight' || (0, _eslintCodemodUtils.isNodeOfType)(node, 'Literal') && node.value === 'fontWeight') {
+      if ((0, _eslintCodemodUtils.isNodeOfType)(node.parent.parent, 'ObjectExpression')) {
+        var _iterator = _createForOfIteratorHelper(node.parent.parent.properties),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var property = _step.value;
+            if ((0, _eslintCodemodUtils.isNodeOfType)(property, 'Property') && (0, _eslintCodemodUtils.isNodeOfType)(property.value, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(property.value.callee, 'Identifier') && (0, _eslintCodemodUtils.isNodeOfType)(property.value.arguments[0], 'Literal')) {
+              if (property.value.callee.name === 'token' && typeof property.value.arguments[0].value === 'string' && property.value.arguments[0].value.includes('font.heading')) {
+                return true;
+              }
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      }
+      return false;
+    }
+    return true;
   }
 };

package/dist/es2019/rules/use-latest-xcss-syntax-typography/index.js

@@ -2,7 +2,6 @@ import { createLintRule } from '../utils/create-rule';
 import { errorBoundary } from '../utils/error-boundary';
 import { getConfig } from './config';
 import { BannedProperty } from './linters';
-export const error = `Don't set fontSize, lineHeight, fontWeight properties on xcss. They are unsafe as they allow invalid combinations of typography tokens. There is ongoing work to make this a TypeScript error. Once that happens, you will have to delete/refactor anyway.`;
 const rule = createLintRule({
   meta: {
     name: 'use-latest-xcss-syntax-typography',
@@ -15,16 +14,16 @@ const rule = createLintRule({
       severity: 'warn'
     },
     messages: {
-      noUnsafeTypographyProperties: error
+      noUnsafeTypographyProperties: `Don't set '{{ property }}' on xcss. They are unsafe as they allow invalid combinations of typography tokens. There is ongoing work to make this a TypeScript error. Once that happens, you will have to delete/refactor anyway.`
     }
   },
   create(context) {
     const config = getConfig(context.options[0]);
     return errorBoundary({
-      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Identifier[name=/(fontSize|lineHeight|fontWeight)/]': node => BannedProperty.lint(node, {
+      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Identifier[name=/(fontSize|lineHeight|fontWeight|letterSpacing)/]': node => BannedProperty.lint(node, {
         context
       }),
-      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Literal[value=/(fontSize|lineHeight|fontWeight)/]': node => BannedProperty.lint(node, {
+      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Literal[value=/(fontSize|lineHeight|fontWeight|letterSpacing)/]': node => BannedProperty.lint(node, {
         context
       })
     }, config);

package/dist/es2019/rules/use-latest-xcss-syntax-typography/linters/banned-property/index.js

@@ -1,13 +1,40 @@
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
-const messageId = 'noUnsafeTypographyProperties';
+import { isNodeOfType } from 'eslint-codemod-utils';
 export const BannedProperty = {
   lint(node, {
     context
   }) {
-    context.report({
-      node,
-      messageId
-    });
+    if (BannedProperty._check(node)) {
+      let property = 'fontSize, lineHeight, fontWeight or letterSpacing';
+      if (isNodeOfType(node, 'Identifier')) {
+        property = node.name;
+      } else if (isNodeOfType(node, 'Literal')) {
+        property = String(node.value);
+      }
+      context.report({
+        node,
+        messageId: 'noUnsafeTypographyProperties',
+        data: {
+          property
+        }
+      });
+    }
+  },
+  _check(node) {
+    // Prevent font weight being used in combination with heading tokens
+    if (isNodeOfType(node, 'Identifier') && node.name === 'fontWeight' || isNodeOfType(node, 'Literal') && node.value === 'fontWeight') {
+      if (isNodeOfType(node.parent.parent, 'ObjectExpression')) {
+        for (const property of node.parent.parent.properties) {
+          if (isNodeOfType(property, 'Property') && isNodeOfType(property.value, 'CallExpression') && isNodeOfType(property.value.callee, 'Identifier') && isNodeOfType(property.value.arguments[0], 'Literal')) {
+            if (property.value.callee.name === 'token' && typeof property.value.arguments[0].value === 'string' && property.value.arguments[0].value.includes('font.heading')) {
+              return true;
+            }
+          }
+        }
+      }
+      return false;
+    }
+    return true;
   }
 };

package/dist/esm/rules/use-latest-xcss-syntax-typography/index.js

@@ -2,7 +2,6 @@ import { createLintRule } from '../utils/create-rule';
 import { errorBoundary } from '../utils/error-boundary';
 import { getConfig } from './config';
 import { BannedProperty } from './linters';
-export var error = "Don't set fontSize, lineHeight, fontWeight properties on xcss. They are unsafe as they allow invalid combinations of typography tokens. There is ongoing work to make this a TypeScript error. Once that happens, you will have to delete/refactor anyway.";
 var rule = createLintRule({
   meta: {
     name: 'use-latest-xcss-syntax-typography',
@@ -15,18 +14,18 @@ var rule = createLintRule({
       severity: 'warn'
     },
     messages: {
-      noUnsafeTypographyProperties: error
+      noUnsafeTypographyProperties: "Don't set '{{ property }}' on xcss. They are unsafe as they allow invalid combinations of typography tokens. There is ongoing work to make this a TypeScript error. Once that happens, you will have to delete/refactor anyway."
     }
   },
   create: function create(context) {
     var config = getConfig(context.options[0]);
     return errorBoundary({
-      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Identifier[name=/(fontSize|lineHeight|fontWeight)/]': function CallExpressionCalleeNameXcssObjectExpressionPropertyIdentifierNameFontSizeLineHeightFontWeight(node) {
+      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Identifier[name=/(fontSize|lineHeight|fontWeight|letterSpacing)/]': function CallExpressionCalleeNameXcssObjectExpressionPropertyIdentifierNameFontSizeLineHeightFontWeightLetterSpacing(node) {
         return BannedProperty.lint(node, {
           context: context
         });
       },
-      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Literal[value=/(fontSize|lineHeight|fontWeight)/]': function CallExpressionCalleeNameXcssObjectExpressionPropertyLiteralValueFontSizeLineHeightFontWeight(node) {
+      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Literal[value=/(fontSize|lineHeight|fontWeight|letterSpacing)/]': function CallExpressionCalleeNameXcssObjectExpressionPropertyLiteralValueFontSizeLineHeightFontWeightLetterSpacing(node) {
         return BannedProperty.lint(node, {
           context: context
         });

package/dist/esm/rules/use-latest-xcss-syntax-typography/linters/banned-property/index.js

@@ -1,12 +1,51 @@
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
-var messageId = 'noUnsafeTypographyProperties';
+import { isNodeOfType } from 'eslint-codemod-utils';
 export var BannedProperty = {
   lint: function lint(node, _ref) {
     var context = _ref.context;
-    context.report({
-      node: node,
-      messageId: messageId
-    });
+    if (BannedProperty._check(node)) {
+      var property = 'fontSize, lineHeight, fontWeight or letterSpacing';
+      if (isNodeOfType(node, 'Identifier')) {
+        property = node.name;
+      } else if (isNodeOfType(node, 'Literal')) {
+        property = String(node.value);
+      }
+      context.report({
+        node: node,
+        messageId: 'noUnsafeTypographyProperties',
+        data: {
+          property: property
+        }
+      });
+    }
+  },
+  _check: function _check(node) {
+    // Prevent font weight being used in combination with heading tokens
+    if (isNodeOfType(node, 'Identifier') && node.name === 'fontWeight' || isNodeOfType(node, 'Literal') && node.value === 'fontWeight') {
+      if (isNodeOfType(node.parent.parent, 'ObjectExpression')) {
+        var _iterator = _createForOfIteratorHelper(node.parent.parent.properties),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var property = _step.value;
+            if (isNodeOfType(property, 'Property') && isNodeOfType(property.value, 'CallExpression') && isNodeOfType(property.value.callee, 'Identifier') && isNodeOfType(property.value.arguments[0], 'Literal')) {
+              if (property.value.callee.name === 'token' && typeof property.value.arguments[0].value === 'string' && property.value.arguments[0].value.includes('font.heading')) {
+                return true;
+              }
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      }
+      return false;
+    }
+    return true;
   }
 };

package/dist/types/rules/use-latest-xcss-syntax-typography/index.d.ts

@@ -1,4 +1,3 @@
 import type { Rule } from 'eslint';
-export declare const error = "Don't set fontSize, lineHeight, fontWeight properties on xcss. They are unsafe as they allow invalid combinations of typography tokens. There is ongoing work to make this a TypeScript error. Once that happens, you will have to delete/refactor anyway.";
 declare const rule: Rule.RuleModule;
 export default rule;

package/dist/types/rules/use-latest-xcss-syntax-typography/linters/banned-property/index.d.ts

@@ -3,4 +3,5 @@ export declare const BannedProperty: {
     lint(node: Rule.Node, { context }: {
         context: Rule.RuleContext;
     }): void;
+    _check(node: Rule.Node): boolean;
 };

package/dist/types-ts4.5/rules/use-latest-xcss-syntax-typography/index.d.ts

@@ -1,4 +1,3 @@
 import type { Rule } from 'eslint';
-export declare const error = "Don't set fontSize, lineHeight, fontWeight properties on xcss. They are unsafe as they allow invalid combinations of typography tokens. There is ongoing work to make this a TypeScript error. Once that happens, you will have to delete/refactor anyway.";
 declare const rule: Rule.RuleModule;
 export default rule;

package/dist/types-ts4.5/rules/use-latest-xcss-syntax-typography/linters/banned-property/index.d.ts

@@ -3,4 +3,5 @@ export declare const BannedProperty: {
     lint(node: Rule.Node, { context }: {
         context: Rule.RuleContext;
     }): void;
+    _check(node: Rule.Node): boolean;
 };

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": "10.17.2",
+	"version": "10.17.3",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
 	"publishConfig": {
@@ -17,7 +17,10 @@
 			"name": "ESLint plugin",
 			"category": "Tooling"
 		},
-		"runReact18": true
+		"runReact18": true,
+		"toolingLabels": [
+			"linting"
+		]
 	},
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"main": "dist/cjs/index.js",