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

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 10.18.0
+
+### Minor Changes
+
+- [#136089](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136089)
+  [`d0e47b2e03130`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d0e47b2e03130) -
+  Disallow wrapped tokens for typography properties in XCSS using the
+  `use-latest-xcss-syntax-typography` rule.
+
 ## 10.17.3
 
 ### Patch Changes

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

@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getConfig = void 0;
 var defaults = {
-  failSilently: false
+  failSilently: false,
+  patterns: ['restricted-property', 'wrapped-token-value']
 };
 var getConfig = exports.getConfig = function getConfig(overrides) {
   return Object.assign({}, defaults, overrides);

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

@@ -8,6 +8,7 @@ var _createRule = require("../utils/create-rule");
 var _errorBoundary = require("../utils/error-boundary");
 var _config = require("./config");
 var _linters = require("./linters");
+var typescriptErrorMessage = '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',
@@ -20,20 +21,36 @@ var rule = (0, _createRule.createLintRule)({
       severity: 'warn'
     },
     messages: {
-      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."
+      noRestrictedTypographyProperties: "Don't set '{{ property }}' on xcss as it allows invalid combinations of typography tokens. ".concat(typescriptErrorMessage),
+      noRestrictedTypographyPropertiesHeading: "Don't set '{{ property }}' on xcss in combination with 'font' heading tokens. ".concat(typescriptErrorMessage),
+      noWrappedTokenTypographyValues: "Don't wrap typography tokens in xcss. ".concat(typescriptErrorMessage)
     }
   },
   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|letterSpacing)/]': function CallExpressionCalleeNameXcssObjectExpressionPropertyIdentifierNameFontSizeLineHeightFontWeightLetterSpacing(node) {
-        return _linters.BannedProperty.lint(node, {
-          context: context
+        return _linters.RestrictedProperty.lint(node, {
+          context: context,
+          config: config
         });
       },
       'CallExpression[callee.name="xcss"] ObjectExpression > Property > Literal[value=/(fontSize|lineHeight|fontWeight|letterSpacing)/]': function CallExpressionCalleeNameXcssObjectExpressionPropertyLiteralValueFontSizeLineHeightFontWeightLetterSpacing(node) {
-        return _linters.BannedProperty.lint(node, {
-          context: context
+        return _linters.RestrictedProperty.lint(node, {
+          context: context,
+          config: config
+        });
+      },
+      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Identifier[name=/(font|fontFamily|fontWeight)/]': function CallExpressionCalleeNameXcssObjectExpressionPropertyIdentifierNameFontFontFamilyFontWeight(node) {
+        return _linters.WrappedTokenValue.lint(node, {
+          context: context,
+          config: config
+        });
+      },
+      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Literal[value=/(font|fontFamily|fontWeight)/]': function CallExpressionCalleeNameXcssObjectExpressionPropertyLiteralValueFontFontFamilyFontWeight(node) {
+        return _linters.WrappedTokenValue.lint(node, {
+          context: context,
+          config: config
         });
       }
     }, config);

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -3,10 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "BannedProperty", {
+Object.defineProperty(exports, "RestrictedProperty", {
   enumerable: true,
   get: function get() {
-    return _bannedProperty.BannedProperty;
+    return _restrictedProperty.RestrictedProperty;
   }
 });
-var _bannedProperty = require("./banned-property");
+Object.defineProperty(exports, "WrappedTokenValue", {
+  enumerable: true,
+  get: function get() {
+    return _wrappedTokenValue.WrappedTokenValue;
+  }
+});
+var _restrictedProperty = require("./restricted-property");
+var _wrappedTokenValue = require("./wrapped-token-value");

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

@@ -3,15 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BannedProperty = void 0;
+exports.RestrictedProperty = void 0;
 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 = {
+var RestrictedProperty = exports.RestrictedProperty = {
   lint: function lint(node, _ref) {
-    var context = _ref.context;
-    if (BannedProperty._check(node)) {
+    var context = _ref.context,
+      config = _ref.config;
+    if (RestrictedProperty._check(node, {
+      context: context,
+      config: config
+    })) {
       var property = 'fontSize, lineHeight, fontWeight or letterSpacing';
       if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'Identifier')) {
         property = node.name;
@@ -20,14 +24,19 @@ var BannedProperty = exports.BannedProperty = {
       }
       context.report({
         node: node,
-        messageId: 'noUnsafeTypographyProperties',
+        messageId: property === 'fontWeight' ? 'noRestrictedTypographyPropertiesHeading' : 'noRestrictedTypographyProperties',
         data: {
           property: property
         }
       });
     }
   },
-  _check: function _check(node) {
+  _check: function _check(node, _ref2) {
+    var config = _ref2.config;
+    if (!config.patterns.includes('restricted-property')) {
+      return false;
+    }
+
     // 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')) {
@@ -35,11 +44,22 @@ var BannedProperty = exports.BannedProperty = {
           _step;
         try {
           for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var _property$value$value;
             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;
-              }
+            // Only looking for heading token on `font` property
+            var isFontProperty = (0, _eslintCodemodUtils.isNodeOfType)(property, 'Property') && ((0, _eslintCodemodUtils.isNodeOfType)(property.key, 'Literal') && property.key.value === 'font' || (0, _eslintCodemodUtils.isNodeOfType)(property.key, 'Identifier') && property.key.name === 'font');
+            if (!isFontProperty) {
+              continue;
+            }
+
+            // Checking for heading token string, for example xcss({ font: 'font.heading.medium' })
+            if ((0, _eslintCodemodUtils.isNodeOfType)(property.value, 'Literal') && typeof property.value.value === 'string' && (_property$value$value = property.value.value) !== null && _property$value$value !== void 0 && _property$value$value.startsWith('font.heading')) {
+              return true;
+            }
+
+            // Checking for wrapped heading token, for example xcss({ font: token('font.heading.medium') })
+            if ((0, _eslintCodemodUtils.isNodeOfType)(property.value, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(property.value.callee, 'Identifier') && property.value.callee.name === 'token' && (0, _eslintCodemodUtils.isNodeOfType)(property.value.arguments[0], 'Literal') && typeof property.value.arguments[0].value === 'string' && property.value.arguments[0].value.startsWith('font.heading')) {
+              return true;
             }
           }
         } catch (err) {

package/dist/cjs/rules/use-latest-xcss-syntax-typography/linters/wrapped-token-value.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WrappedTokenValue = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+var messageId = 'noWrappedTokenTypographyValues';
+var WrappedTokenValue = exports.WrappedTokenValue = {
+  lint: function lint(node, _ref) {
+    var context = _ref.context,
+      config = _ref.config;
+    if (WrappedTokenValue._check(node, {
+      context: context,
+      config: config
+    })) {
+      context.report({
+        node: node,
+        messageId: messageId,
+        fix: WrappedTokenValue._fix(node)
+      });
+    }
+  },
+  _check: function _check(node, _ref2) {
+    var config = _ref2.config;
+    if (!config.patterns.includes('wrapped-token-value')) {
+      return false;
+    }
+    if ((0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'Property') && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.value, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.value.callee, 'Identifier') && node.parent.value.callee.name === 'token' && node.parent.value.arguments.length >= 1) {
+      return true;
+    }
+    return false;
+  },
+  _fix: function _fix(node) {
+    return function (fixer) {
+      var wrappedTokenFix;
+      if ((0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'Property') && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.value, 'CallExpression') && node.parent.value.arguments.length >= 1) {
+        var firstArg = node.parent.value.arguments[0];
+        if ((0, _eslintCodemodUtils.isNodeOfType)(firstArg, 'Literal') && typeof firstArg.value === 'string') {
+          wrappedTokenFix = fixer.replaceText(node.parent.value, "'".concat(firstArg.value, "'"));
+        }
+      }
+      return [wrappedTokenFix].filter(function (fix) {
+        return Boolean(fix);
+      }); // Some of the transformers can return arrays with undefined, so filter them out
+    };
+  }
+};

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

@@ -1,5 +1,6 @@
 const defaults = {
-  failSilently: false
+  failSilently: false,
+  patterns: ['restricted-property', 'wrapped-token-value']
 };
 export const getConfig = overrides => {
   return Object.assign({}, defaults, overrides);

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

@@ -1,7 +1,8 @@
 import { createLintRule } from '../utils/create-rule';
 import { errorBoundary } from '../utils/error-boundary';
 import { getConfig } from './config';
-import { BannedProperty } from './linters';
+import { RestrictedProperty, WrappedTokenValue } from './linters';
+const typescriptErrorMessage = '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',
@@ -14,17 +15,29 @@ const rule = createLintRule({
       severity: 'warn'
     },
     messages: {
-      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.`
+      noRestrictedTypographyProperties: `Don't set '{{ property }}' on xcss as it allows invalid combinations of typography tokens. ${typescriptErrorMessage}`,
+      noRestrictedTypographyPropertiesHeading: `Don't set '{{ property }}' on xcss in combination with 'font' heading tokens. ${typescriptErrorMessage}`,
+      noWrappedTokenTypographyValues: `Don't wrap typography tokens in xcss. ${typescriptErrorMessage}`
     }
   },
   create(context) {
     const config = getConfig(context.options[0]);
     return errorBoundary({
-      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Identifier[name=/(fontSize|lineHeight|fontWeight|letterSpacing)/]': node => BannedProperty.lint(node, {
-        context
+      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Identifier[name=/(fontSize|lineHeight|fontWeight|letterSpacing)/]': node => RestrictedProperty.lint(node, {
+        context,
+        config
       }),
-      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Literal[value=/(fontSize|lineHeight|fontWeight|letterSpacing)/]': node => BannedProperty.lint(node, {
-        context
+      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Literal[value=/(fontSize|lineHeight|fontWeight|letterSpacing)/]': node => RestrictedProperty.lint(node, {
+        context,
+        config
+      }),
+      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Identifier[name=/(font|fontFamily|fontWeight)/]': node => WrappedTokenValue.lint(node, {
+        context,
+        config
+      }),
+      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Literal[value=/(font|fontFamily|fontWeight)/]': node => WrappedTokenValue.lint(node, {
+        context,
+        config
       })
     }, config);
   }

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

@@ -0,0 +1 @@
+export {};

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

@@ -1 +1,2 @@
-export { BannedProperty } from './banned-property';
+export { RestrictedProperty } from './restricted-property';
+export { WrappedTokenValue } from './wrapped-token-value';

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

@@ -0,0 +1,61 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+export const RestrictedProperty = {
+  lint(node, {
+    context,
+    config
+  }) {
+    if (RestrictedProperty._check(node, {
+      context,
+      config
+    })) {
+      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: property === 'fontWeight' ? 'noRestrictedTypographyPropertiesHeading' : 'noRestrictedTypographyProperties',
+        data: {
+          property
+        }
+      });
+    }
+  },
+  _check(node, {
+    config
+  }) {
+    if (!config.patterns.includes('restricted-property')) {
+      return false;
+    }
+
+    // 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) {
+          var _property$value$value;
+          // Only looking for heading token on `font` property
+          const isFontProperty = isNodeOfType(property, 'Property') && (isNodeOfType(property.key, 'Literal') && property.key.value === 'font' || isNodeOfType(property.key, 'Identifier') && property.key.name === 'font');
+          if (!isFontProperty) {
+            continue;
+          }
+
+          // Checking for heading token string, for example xcss({ font: 'font.heading.medium' })
+          if (isNodeOfType(property.value, 'Literal') && typeof property.value.value === 'string' && (_property$value$value = property.value.value) !== null && _property$value$value !== void 0 && _property$value$value.startsWith('font.heading')) {
+            return true;
+          }
+
+          // Checking for wrapped heading token, for example xcss({ font: token('font.heading.medium') })
+          if (isNodeOfType(property.value, 'CallExpression') && isNodeOfType(property.value.callee, 'Identifier') && property.value.callee.name === 'token' && isNodeOfType(property.value.arguments[0], 'Literal') && typeof property.value.arguments[0].value === 'string' && property.value.arguments[0].value.startsWith('font.heading')) {
+            return true;
+          }
+        }
+      }
+      return false;
+    }
+    return true;
+  }
+};

package/dist/es2019/rules/use-latest-xcss-syntax-typography/linters/wrapped-token-value.js

@@ -0,0 +1,44 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+const messageId = 'noWrappedTokenTypographyValues';
+export const WrappedTokenValue = {
+  lint(node, {
+    context,
+    config
+  }) {
+    if (WrappedTokenValue._check(node, {
+      context,
+      config
+    })) {
+      context.report({
+        node,
+        messageId,
+        fix: WrappedTokenValue._fix(node)
+      });
+    }
+  },
+  _check(node, {
+    config
+  }) {
+    if (!config.patterns.includes('wrapped-token-value')) {
+      return false;
+    }
+    if (isNodeOfType(node.parent, 'Property') && isNodeOfType(node.parent.value, 'CallExpression') && isNodeOfType(node.parent.value.callee, 'Identifier') && node.parent.value.callee.name === 'token' && node.parent.value.arguments.length >= 1) {
+      return true;
+    }
+    return false;
+  },
+  _fix(node) {
+    return fixer => {
+      let wrappedTokenFix;
+      if (isNodeOfType(node.parent, 'Property') && isNodeOfType(node.parent.value, 'CallExpression') && node.parent.value.arguments.length >= 1) {
+        const firstArg = node.parent.value.arguments[0];
+        if (isNodeOfType(firstArg, 'Literal') && typeof firstArg.value === 'string') {
+          wrappedTokenFix = fixer.replaceText(node.parent.value, `'${firstArg.value}'`);
+        }
+      }
+      return [wrappedTokenFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
+    };
+  }
+};

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

@@ -1,5 +1,6 @@
 var defaults = {
-  failSilently: false
+  failSilently: false,
+  patterns: ['restricted-property', 'wrapped-token-value']
 };
 export var getConfig = function getConfig(overrides) {
   return Object.assign({}, defaults, overrides);

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

@@ -1,7 +1,8 @@
 import { createLintRule } from '../utils/create-rule';
 import { errorBoundary } from '../utils/error-boundary';
 import { getConfig } from './config';
-import { BannedProperty } from './linters';
+import { RestrictedProperty, WrappedTokenValue } from './linters';
+var typescriptErrorMessage = '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',
@@ -14,20 +15,36 @@ var rule = createLintRule({
       severity: 'warn'
     },
     messages: {
-      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."
+      noRestrictedTypographyProperties: "Don't set '{{ property }}' on xcss as it allows invalid combinations of typography tokens. ".concat(typescriptErrorMessage),
+      noRestrictedTypographyPropertiesHeading: "Don't set '{{ property }}' on xcss in combination with 'font' heading tokens. ".concat(typescriptErrorMessage),
+      noWrappedTokenTypographyValues: "Don't wrap typography tokens in xcss. ".concat(typescriptErrorMessage)
     }
   },
   create: function create(context) {
     var config = getConfig(context.options[0]);
     return errorBoundary({
       'CallExpression[callee.name="xcss"] ObjectExpression > Property > Identifier[name=/(fontSize|lineHeight|fontWeight|letterSpacing)/]': function CallExpressionCalleeNameXcssObjectExpressionPropertyIdentifierNameFontSizeLineHeightFontWeightLetterSpacing(node) {
-        return BannedProperty.lint(node, {
-          context: context
+        return RestrictedProperty.lint(node, {
+          context: context,
+          config: config
         });
       },
       'CallExpression[callee.name="xcss"] ObjectExpression > Property > Literal[value=/(fontSize|lineHeight|fontWeight|letterSpacing)/]': function CallExpressionCalleeNameXcssObjectExpressionPropertyLiteralValueFontSizeLineHeightFontWeightLetterSpacing(node) {
-        return BannedProperty.lint(node, {
-          context: context
+        return RestrictedProperty.lint(node, {
+          context: context,
+          config: config
+        });
+      },
+      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Identifier[name=/(font|fontFamily|fontWeight)/]': function CallExpressionCalleeNameXcssObjectExpressionPropertyIdentifierNameFontFontFamilyFontWeight(node) {
+        return WrappedTokenValue.lint(node, {
+          context: context,
+          config: config
+        });
+      },
+      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Literal[value=/(font|fontFamily|fontWeight)/]': function CallExpressionCalleeNameXcssObjectExpressionPropertyLiteralValueFontFontFamilyFontWeight(node) {
+        return WrappedTokenValue.lint(node, {
+          context: context,
+          config: config
         });
       }
     }, config);

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

@@ -0,0 +1 @@
+export {};

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

@@ -1 +1,2 @@
-export { BannedProperty } from './banned-property';
+export { RestrictedProperty } from './restricted-property';
+export { WrappedTokenValue } from './wrapped-token-value';

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

@@ -4,10 +4,14 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
 import { isNodeOfType } from 'eslint-codemod-utils';
-export var BannedProperty = {
+export var RestrictedProperty = {
   lint: function lint(node, _ref) {
-    var context = _ref.context;
-    if (BannedProperty._check(node)) {
+    var context = _ref.context,
+      config = _ref.config;
+    if (RestrictedProperty._check(node, {
+      context: context,
+      config: config
+    })) {
       var property = 'fontSize, lineHeight, fontWeight or letterSpacing';
       if (isNodeOfType(node, 'Identifier')) {
         property = node.name;
@@ -16,14 +20,19 @@ export var BannedProperty = {
       }
       context.report({
         node: node,
-        messageId: 'noUnsafeTypographyProperties',
+        messageId: property === 'fontWeight' ? 'noRestrictedTypographyPropertiesHeading' : 'noRestrictedTypographyProperties',
         data: {
           property: property
         }
       });
     }
   },
-  _check: function _check(node) {
+  _check: function _check(node, _ref2) {
+    var config = _ref2.config;
+    if (!config.patterns.includes('restricted-property')) {
+      return false;
+    }
+
     // 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')) {
@@ -31,11 +40,22 @@ export var BannedProperty = {
           _step;
         try {
           for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var _property$value$value;
             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;
-              }
+            // Only looking for heading token on `font` property
+            var isFontProperty = isNodeOfType(property, 'Property') && (isNodeOfType(property.key, 'Literal') && property.key.value === 'font' || isNodeOfType(property.key, 'Identifier') && property.key.name === 'font');
+            if (!isFontProperty) {
+              continue;
+            }
+
+            // Checking for heading token string, for example xcss({ font: 'font.heading.medium' })
+            if (isNodeOfType(property.value, 'Literal') && typeof property.value.value === 'string' && (_property$value$value = property.value.value) !== null && _property$value$value !== void 0 && _property$value$value.startsWith('font.heading')) {
+              return true;
+            }
+
+            // Checking for wrapped heading token, for example xcss({ font: token('font.heading.medium') })
+            if (isNodeOfType(property.value, 'CallExpression') && isNodeOfType(property.value.callee, 'Identifier') && property.value.callee.name === 'token' && isNodeOfType(property.value.arguments[0], 'Literal') && typeof property.value.arguments[0].value === 'string' && property.value.arguments[0].value.startsWith('font.heading')) {
+              return true;
             }
           }
         } catch (err) {

package/dist/esm/rules/use-latest-xcss-syntax-typography/linters/wrapped-token-value.js

@@ -0,0 +1,44 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+var messageId = 'noWrappedTokenTypographyValues';
+export var WrappedTokenValue = {
+  lint: function lint(node, _ref) {
+    var context = _ref.context,
+      config = _ref.config;
+    if (WrappedTokenValue._check(node, {
+      context: context,
+      config: config
+    })) {
+      context.report({
+        node: node,
+        messageId: messageId,
+        fix: WrappedTokenValue._fix(node)
+      });
+    }
+  },
+  _check: function _check(node, _ref2) {
+    var config = _ref2.config;
+    if (!config.patterns.includes('wrapped-token-value')) {
+      return false;
+    }
+    if (isNodeOfType(node.parent, 'Property') && isNodeOfType(node.parent.value, 'CallExpression') && isNodeOfType(node.parent.value.callee, 'Identifier') && node.parent.value.callee.name === 'token' && node.parent.value.arguments.length >= 1) {
+      return true;
+    }
+    return false;
+  },
+  _fix: function _fix(node) {
+    return function (fixer) {
+      var wrappedTokenFix;
+      if (isNodeOfType(node.parent, 'Property') && isNodeOfType(node.parent.value, 'CallExpression') && node.parent.value.arguments.length >= 1) {
+        var firstArg = node.parent.value.arguments[0];
+        if (isNodeOfType(firstArg, 'Literal') && typeof firstArg.value === 'string') {
+          wrappedTokenFix = fixer.replaceText(node.parent.value, "'".concat(firstArg.value, "'"));
+        }
+      }
+      return [wrappedTokenFix].filter(function (fix) {
+        return Boolean(fix);
+      }); // Some of the transformers can return arrays with undefined, so filter them out
+    };
+  }
+};

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

@@ -1,4 +1,7 @@
+type Pattern = 'restricted-property' | 'wrapped-token-value';
 export interface RuleConfig {
     failSilently: boolean;
+    patterns: Pattern[];
 }
 export declare const getConfig: (overrides: Partial<RuleConfig>) => RuleConfig;
+export {};

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

@@ -0,0 +1,6 @@
+import type { Rule } from 'eslint';
+import { type RuleConfig } from '../config';
+export type MetaData = {
+    context: Rule.RuleContext;
+    config: RuleConfig;
+};

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

@@ -1 +1,2 @@
-export { BannedProperty } from './banned-property';
+export { RestrictedProperty } from './restricted-property';
+export { WrappedTokenValue } from './wrapped-token-value';

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

@@ -0,0 +1,6 @@
+import type { Rule } from 'eslint';
+import { type MetaData } from './common';
+export declare const RestrictedProperty: {
+    lint(node: Rule.Node, { context, config }: MetaData): void;
+    _check(node: Rule.Node, { config }: MetaData): boolean;
+};

package/dist/types/rules/use-latest-xcss-syntax-typography/linters/wrapped-token-value.d.ts

@@ -0,0 +1,7 @@
+import type { Rule } from 'eslint';
+import { type MetaData } from './common';
+export declare const WrappedTokenValue: {
+    lint(node: Rule.Node, { context, config }: MetaData): void;
+    _check(node: Rule.Node, { config }: MetaData): boolean;
+    _fix(node: Rule.Node): Rule.ReportFixer;
+};

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

@@ -1,4 +1,7 @@
+type Pattern = 'restricted-property' | 'wrapped-token-value';
 export interface RuleConfig {
     failSilently: boolean;
+    patterns: Pattern[];
 }
 export declare const getConfig: (overrides: Partial<RuleConfig>) => RuleConfig;
+export {};

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

@@ -0,0 +1,6 @@
+import type { Rule } from 'eslint';
+import { type RuleConfig } from '../config';
+export type MetaData = {
+    context: Rule.RuleContext;
+    config: RuleConfig;
+};

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

@@ -1 +1,2 @@
-export { BannedProperty } from './banned-property';
+export { RestrictedProperty } from './restricted-property';
+export { WrappedTokenValue } from './wrapped-token-value';

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

@@ -0,0 +1,6 @@
+import type { Rule } from 'eslint';
+import { type MetaData } from './common';
+export declare const RestrictedProperty: {
+    lint(node: Rule.Node, { context, config }: MetaData): void;
+    _check(node: Rule.Node, { config }: MetaData): boolean;
+};

package/dist/types-ts4.5/rules/use-latest-xcss-syntax-typography/linters/wrapped-token-value.d.ts

@@ -0,0 +1,7 @@
+import type { Rule } from 'eslint';
+import { type MetaData } from './common';
+export declare const WrappedTokenValue: {
+    lint(node: Rule.Node, { context, config }: MetaData): void;
+    _check(node: Rule.Node, { config }: MetaData): boolean;
+    _fix(node: Rule.Node): Rule.ReportFixer;
+};

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.3",
+	"version": "10.18.0",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
 	"publishConfig": {
@@ -9,10 +9,6 @@
 	},
 	"atlassian": {
 		"team": "Design System Team",
-		"releaseModel": "continuous",
-		"productPushConsumption": [
-			"jira"
-		],
 		"website": {
 			"name": "ESLint plugin",
 			"category": "Tooling"

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

@@ -1,40 +0,0 @@
-/* eslint-disable @repo/internal/react/require-jsdoc */
-
-import { isNodeOfType } from 'eslint-codemod-utils';
-export const BannedProperty = {
-  lint(node, {
-    context
-  }) {
-    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/types/rules/use-latest-xcss-syntax-typography/linters/banned-property/index.d.ts

@@ -1,7 +0,0 @@
-import type { Rule } from 'eslint';
-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/linters/banned-property/index.d.ts

@@ -1,7 +0,0 @@
-import type { Rule } from 'eslint';
-export declare const BannedProperty: {
-    lint(node: Rule.Node, { context }: {
-        context: Rule.RuleContext;
-    }): void;
-    _check(node: Rule.Node): boolean;
-};