@atlaskit/eslint-plugin-design-system 9.2.4 → 9.3.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 9.3.0
+
+### Minor Changes
+
+- [#87586](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87586) [`47d9f5fb1b11`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/47d9f5fb1b11) - Added use-heading rule
+
+### Patch Changes
+
+- [#87476](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87476) [`af296d200ad2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/af296d200ad2) - Internal refactoring to use `getCreateLintRule` from `@atlaskit/eslint-utils`
+- Updated dependencies
+
+## 9.2.5
+
+### Patch Changes
+
+- [#87434](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87434) [`dda5ca94da13`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dda5ca94da13) - `use-primitives` - bail on dimension properties that have token call values.
+
 ## 9.2.4
 
 ### Patch Changes

package/README.md

@@ -74,6 +74,7 @@ module.exports = {
 | <a href="./src/rules/prefer-primitives/README.md">prefer-primitives</a>                                             | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule.                                                                                                                                    |             |         |             |
 | <a href="./src/rules/use-button-group-label/README.md">use-button-group-label</a>                                   | Ensures button groups are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                                | Yes         |         | Yes         |
 | <a href="./src/rules/use-drawer-label/README.md">use-drawer-label</a>                                               | Encourages to provide accessible name for Atlassian Design System Drawer component.                                                                                                                                                                                                                                 | Yes         |         | Yes         |
+| <a href="./src/rules/use-heading/README.md">use-heading</a>                                                         | Encourage the usage of heading components.                                                                                                                                                                                                                                                                          |             | Yes     | Yes         |
 | <a href="./src/rules/use-heading-level-in-spotlight-card/README.md">use-heading-level-in-spotlight-card</a>         | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context.                                                                                                                              | Yes         | Yes     |             |
 | <a href="./src/rules/use-href-in-link-item/README.md">use-href-in-link-item</a>                                     | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes         | Yes     | Yes         |
 | <a href="./src/rules/use-primitives/README.md">use-primitives</a>                                                   | Encourage the usage of primitives components.                                                                                                                                                                                                                                                                       |             | Yes     | Yes         |

package/constellation/index/usage.mdx

@@ -36,6 +36,7 @@ This plugin contains rules that should be used when working with the [Atlassian
 | <a href="prefer-primitives/usage">prefer-primitives</a>                                             | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule.                                                                                                                                    |             |         |             |
 | <a href="use-button-group-label/usage">use-button-group-label</a>                                   | Ensures button groups are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                                | Yes         |         | Yes         |
 | <a href="use-drawer-label/usage">use-drawer-label</a>                                               | Encourages to provide accessible name for Atlassian Design System Drawer component.                                                                                                                                                                                                                                 | Yes         |         | Yes         |
+| <a href="use-heading/usage">use-heading</a>                                                         | Encourage the usage of heading components.                                                                                                                                                                                                                                                                          |             | Yes     | Yes         |
 | <a href="use-heading-level-in-spotlight-card/usage">use-heading-level-in-spotlight-card</a>         | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context.                                                                                                                              | Yes         | Yes     |             |
 | <a href="use-href-in-link-item/usage">use-href-in-link-item</a>                                     | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes         | Yes     | Yes         |
 | <a href="use-primitives/usage">use-primitives</a>                                                   | Encourage the usage of primitives components.                                                                                                                                                                                                                                                                       |             | Yes     | Yes         |

package/constellation/use-heading/usage.mdx

@@ -0,0 +1,28 @@
+# use-heading
+
+Using primitives allows you to delete bespoke component code and replace it with ready made solutions made by the Atlassian Design System Team.
+
+## Examples
+
+This rule marks code as violations when it can be replaced 1:1 with a heading component.
+
+### Incorrect
+
+```jsx
+<div>
+  <h1>text</hi>
+  <p>content</p>
+</div>
+^^^^
+```
+
+### Correct
+
+```jsx
+<div>
+  <Heading size="xlarge">text</Heading>
+  <p>content</p>
+</div>
+```
+
+Currently, the rule is extremely defensive, only reporting on `h1`, `h2`, `h3`, `h4`, `h5` and `h6` elements that don't have any props outside of `key`, `id` and `data-testid`. We're only targeting instances that are the first child of their siblings.

package/dist/cjs/ast-nodes/root.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Root = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _import = require("./import");
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
 // Little bit unreadable, but better than duplicating the type
@@ -30,5 +31,36 @@ var Root = exports.Root = {
   },
   insertImport: function insertImport(root, data, fixer) {
     return fixer.insertTextBefore(root[0], "".concat((0, _eslintCodemodUtils.insertImportDeclaration)(data.module, data.specifiers), ";\n"));
+  },
+  upsertNamedImportDeclaration: function upsertNamedImportDeclaration(_ref, context, fixer) {
+    var module = _ref.module,
+      specifiers = _ref.specifiers;
+    // Find any imports that match the packageName
+    var root = context.getSourceCode().ast.body;
+    var importDeclarations = this.findImportsByModule(root, module);
+
+    // The named import doesn't exist yet, we can just insert a whole new one
+    if (importDeclarations.length === 0) {
+      return this.insertImport(root, {
+        module: module,
+        specifiers: specifiers
+      }, fixer);
+    }
+
+    // The import exists so, modify the existing one
+    return _import.Import.insertNamedSpecifiers(importDeclarations[0], specifiers, fixer);
+  },
+  upsertDefaultImportDeclaration: function upsertDefaultImportDeclaration(_ref2, context, fixer) {
+    var module = _ref2.module,
+      localName = _ref2.localName;
+    // Find any imports that match the packageName
+    var root = context.getSourceCode().ast.body;
+    var importDeclarations = this.findImportsByModule(root, module);
+
+    // The import already exist exist
+    if (importDeclarations.length > 0) {
+      return undefined;
+    }
+    return fixer.insertTextBefore(root[0], "import ".concat(localName, " from '").concat(module, "';\n"));
   }
 };

package/dist/cjs/presets/all.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d95217b658f807294de3c81123068bf1>>
+ * @codegen <<SignedSource::2e2cf6c0ecfe1b01f3eb24caa223f09e>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -37,6 +37,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
+    '@atlaskit/design-system/use-heading': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',

package/dist/cjs/rules/index.codegen.js

@@ -30,6 +30,7 @@ var _noUnsupportedDragAndDropLibraries = _interopRequireDefault(require("./no-un
 var _preferPrimitives = _interopRequireDefault(require("./prefer-primitives"));
 var _useButtonGroupLabel = _interopRequireDefault(require("./use-button-group-label"));
 var _useDrawerLabel = _interopRequireDefault(require("./use-drawer-label"));
+var _useHeading = _interopRequireDefault(require("./use-heading"));
 var _useHeadingLevelInSpotlightCard = _interopRequireDefault(require("./use-heading-level-in-spotlight-card"));
 var _useHrefInLinkItem = _interopRequireDefault(require("./use-href-in-link-item"));
 var _usePrimitives = _interopRequireDefault(require("./use-primitives"));
@@ -39,7 +40,7 @@ var _useTokensTypography = _interopRequireDefault(require("./use-tokens-typograp
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d1c25758089a050334359276ede0ca3a>>
+ * @codegen <<SignedSource::eb5c94901f711e67446ba88f0630bf76>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -68,6 +69,7 @@ var _default = exports.default = {
   'prefer-primitives': _preferPrimitives.default,
   'use-button-group-label': _useButtonGroupLabel.default,
   'use-drawer-label': _useDrawerLabel.default,
+  'use-heading': _useHeading.default,
   'use-heading-level-in-spotlight-card': _useHeadingLevelInSpotlightCard.default,
   'use-href-in-link-item': _useHrefInLinkItem.default,
   'use-primitives': _usePrimitives.default,

package/dist/cjs/rules/use-heading/config/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getConfig = void 0;
+var defaults = {
+  patterns: ['native-elements']
+};
+var getConfig = exports.getConfig = function getConfig(overrides) {
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
+  // start with an empty object, then merge in the defaults, then merge in overrides.
+  // The empty object is returned, as well as modified in place
+  return Object.assign({}, defaults, overrides);
+};

package/dist/cjs/rules/use-heading/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createRule = require("../utils/create-rule");
+var _config = require("./config");
+var _transformers = require("./transformers");
+var docsUrl = 'https://atlassian.design/components/heading';
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'use-heading',
+    type: 'suggestion',
+    fixable: 'code',
+    hasSuggestions: true,
+    docs: {
+      description: 'Encourage the usage of heading components.',
+      recommended: false,
+      severity: 'warn'
+    },
+    messages: {
+      preferHeading: "This element can be replaced with a \"Heading\" component. See ".concat(docsUrl, " for additional guidance.")
+    }
+  },
+  create: function create(context) {
+    var config = (0, _config.getConfig)(context.options[0]);
+    return {
+      // transforms <h1>...</h1> usages
+      'JSXElement[openingElement.name.name=/^h[0-6]$/]': function JSXElementOpeningElementNameNameH06$(node) {
+        return _transformers.NativeElements.lint(node, {
+          context: context,
+          config: config
+        });
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

package/dist/cjs/rules/use-heading/transformers/common.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedAttrs = void 0;
+exports.updateTestIdAttributeFix = updateTestIdAttributeFix;
+var ast = _interopRequireWildcard(require("../../../ast-nodes"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// Rename data-testid prop to testId if present
+function updateTestIdAttributeFix(node, fixer) {
+  var testIdAttr = ast.JSXElement.getAttributeByName(node, 'data-testid');
+  if (testIdAttr) {
+    return ast.JSXAttribute.updateName(testIdAttr, 'testId', fixer);
+  }
+}
+var allowedAttrs = exports.allowedAttrs = ['id', 'data-testid', 'key'];

package/dist/cjs/rules/use-heading/transformers/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "NativeElements", {
+  enumerable: true,
+  get: function get() {
+    return _nativeElements.NativeElements;
+  }
+});
+var _nativeElements = require("./native-elements");

package/dist/cjs/rules/use-heading/transformers/native-elements.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NativeElements = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var ast = _interopRequireWildcard(require("../../../ast-nodes"));
+var _common = require("./common");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+var tagSizeMap = {
+  h1: 'xlarge',
+  h2: 'large',
+  h3: 'medium',
+  h4: 'small',
+  h5: 'xsmall',
+  h6: 'xxsmall'
+};
+var NativeElements = exports.NativeElements = {
+  lint: function lint(node, _ref) {
+    var context = _ref.context,
+      config = _ref.config;
+    // Check whether all criteria needed to make a transformation are met
+    if (!NativeElements._check(node, {
+      context: context,
+      config: config
+    })) {
+      return;
+    }
+    context.report({
+      node: node,
+      messageId: 'preferHeading',
+      suggest: [{
+        desc: 'Convert to Heading',
+        fix: NativeElements._fix(node, {
+          context: context,
+          config: config
+        })
+      }]
+    });
+  },
+  _check: function _check(node, _ref2) {
+    var config = _ref2.config;
+    if (!config.patterns.includes('native-elements')) {
+      return false;
+    }
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
+      return false;
+    }
+    if (!node.parent) {
+      return false;
+    }
+    var elementName = ast.JSXElement.getName(node);
+    if (!Object.keys(tagSizeMap).includes(elementName)) {
+      return false;
+    }
+
+    // Element has to be first element of its siblings
+    if (!((0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'JSXElement') || (0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'JSXFragment'))) {
+      return false;
+    }
+    var siblings = ast.JSXElement.getChildren(node.parent);
+    if (siblings.length > 1) {
+      var _siblings$0$range, _node$range, _siblings$0$range2, _node$range2;
+      // Only report if element is first child element
+      if (((_siblings$0$range = siblings[0].range) === null || _siblings$0$range === void 0 ? void 0 : _siblings$0$range[0]) !== ((_node$range = node.range) === null || _node$range === void 0 ? void 0 : _node$range[0]) || ((_siblings$0$range2 = siblings[0].range) === null || _siblings$0$range2 === void 0 ? void 0 : _siblings$0$range2[1]) !== ((_node$range2 = node.range) === null || _node$range2 === void 0 ? void 0 : _node$range2[1])) {
+        return false;
+      }
+    }
+    if (!ast.JSXElement.hasAllowedAttrsOnly(node, _common.allowedAttrs)) {
+      return false;
+    }
+    return true;
+  },
+  _fix: function _fix(node, _ref3) {
+    var context = _ref3.context;
+    return function (fixer) {
+      // change to default import
+      var importFix = ast.Root.upsertDefaultImportDeclaration({
+        module: '@atlaskit/heading',
+        localName: 'Heading'
+      }, context, fixer);
+      var elementName = ast.JSXElement.getName(node);
+      var elementNameFixes = ast.JSXElement.updateName(node, 'Heading', fixer);
+      var size = tagSizeMap[elementName];
+      var asAttributeFix = ast.JSXElement.addAttribute(node, 'size', size, fixer);
+      var testAttributeFix = (0, _common.updateTestIdAttributeFix)(node, fixer);
+      return [importFix].concat((0, _toConsumableArray2.default)(elementNameFixes), [asAttributeFix, testAttributeFix]).filter(function (fix) {
+        return Boolean(fix);
+      }); // Some of the transformers can return arrays with undefined, so filter them out
+    };
+  }
+};

package/dist/cjs/rules/use-primitives/transformers/compiled-styled/index.js

@@ -15,7 +15,6 @@ var _convertJsxCallSite = require("./convert-jsx-call-site");
 var _convertStyledComponentCallToJsx = require("./convert-styled-component-call-to-jsx");
 var _findValidJsxUsageToTransform = require("./find-valid-jsx-usage-to-transform");
 var _findValidStyledComponentCall = require("./find-valid-styled-component-call");
-var _upsertImportDeclaration = require("./upsert-import-declaration");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /* eslint-disable @repo/internal/react/require-jsdoc */
@@ -105,7 +104,7 @@ var CompiledStyled = exports.CompiledStyled = {
       if (!calculatedStylesVariableName) {
         return [];
       }
-      var importFixes = (0, _upsertImportDeclaration.upsertImportDeclaration)({
+      var importFixes = ast.Root.upsertNamedImportDeclaration({
         module: '@atlaskit/primitives',
         specifiers: ['Box', 'xcss']
       }, context, fixer);

package/dist/cjs/rules/use-primitives/transformers/emotion-css/index.js

@@ -13,7 +13,6 @@ var _utils = require("../../utils");
 var _validateStyles = require("../../utils/validate-styles");
 var _cssToXcss = require("../css-to-xcss");
 var supported = _interopRequireWildcard(require("./supported"));
-var _upsertImportDeclaration = require("./upsert-import-declaration");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /* eslint-disable @repo/internal/react/require-jsdoc */
@@ -108,7 +107,7 @@ var EmotionCSS = exports.EmotionCSS = {
   _fix: function _fix(node, _ref3) {
     var context = _ref3.context;
     return function (fixer) {
-      var importFix = (0, _upsertImportDeclaration.upsertImportDeclaration)({
+      var importFix = ast.Root.upsertNamedImportDeclaration({
         module: '@atlaskit/primitives',
         specifiers: ['Box', 'xcss']
       }, context, fixer);

package/dist/cjs/rules/use-primitives/utils/validate-styles.js

@@ -46,6 +46,7 @@ var validateStyles = exports.validateStyles = function validateStyles(node, conf
     if (!property) {
       return false;
     }
+    var isDimensionProperty = !!_cssToXcss.supportedDimensionAttributesMap[property];
 
     // Currently, we handle values like `'8px'` (a 'Literal') or `token('space.100')` (a 'CallExpression')
     if ((0, _eslintCodemodUtils.isNodeOfType)(value, 'Literal')) {
@@ -60,8 +61,15 @@ var validateStyles = exports.validateStyles = function validateStyles(node, conf
       // If it's a function call, then make sure it's the `token` function (and we have `css-property-with-tokens` enabled)
 
       // Short-circuit when token calls are found but pattern is not enabled in config
-      if (isTokenCall(value) && !config.patterns.includes('css-property-with-tokens')) {
-        return false;
+      if (isTokenCall(value)) {
+        if (!config.patterns.includes('css-property-with-tokens')) {
+          return false;
+        }
+
+        // Don't attempt to convert `width: token('space.100') -> width: 'size.100'`
+        if (isDimensionProperty) {
+          return false;
+        }
       }
 
       // Bail if it's a function, but that function call is not `tokens('<token>')`
@@ -75,7 +83,6 @@ var validateStyles = exports.validateStyles = function validateStyles(node, conf
     // Bail if dimension property is found but pattern is not enabled in config
     // Note: We don't need to exhaustively re-check the key/value pair here. That's already been done above.
     // This is just to check wether 'dimension-properties' pattern is enabled and can be removed when the pattern is completely rolled out
-    var isDimensionProperty = !!_cssToXcss.supportedDimensionAttributesMap[property];
     if (isDimensionProperty && !config.patterns.includes('dimension-properties')) {
       return false;
     }

package/dist/cjs/rules/use-primitives-text/transformers/emphasis-elements.js

@@ -9,7 +9,6 @@ exports.EmphasisElements = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var ast = _interopRequireWildcard(require("../../../ast-nodes"));
-var _upsertImportDeclaration = require("../../use-primitives/transformers/emotion-css/upsert-import-declaration");
 var _common = require("./common");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -69,7 +68,7 @@ var EmphasisElements = exports.EmphasisElements = {
     var context = _ref3.context,
       config = _ref3.config;
     return function (fixer) {
-      var importFix = (0, _upsertImportDeclaration.upsertImportDeclaration)({
+      var importFix = ast.Root.upsertNamedImportDeclaration({
         module: '@atlaskit/primitives',
         specifiers: ['Text']
       }, context, fixer);

package/dist/cjs/rules/use-primitives-text/transformers/paragraph-elements.js

@@ -9,7 +9,6 @@ exports.ParagraphElements = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var ast = _interopRequireWildcard(require("../../../ast-nodes"));
-var _upsertImportDeclaration = require("../../use-primitives/transformers/emotion-css/upsert-import-declaration");
 var _common = require("./common");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -162,7 +161,7 @@ var ParagraphElements = exports.ParagraphElements = {
     var context = _ref3.context,
       config = _ref3.config;
     return function (fixer) {
-      var importFix = (0, _upsertImportDeclaration.upsertImportDeclaration)({
+      var importFix = ast.Root.upsertNamedImportDeclaration({
         module: '@atlaskit/primitives',
         specifiers: ['Text']
       }, context, fixer);
@@ -183,7 +182,7 @@ var ParagraphElements = exports.ParagraphElements = {
       if (!(0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'JSXElement') || !node.parent.closingElement) {
         return [];
       }
-      var importFix = (0, _upsertImportDeclaration.upsertImportDeclaration)({
+      var importFix = ast.Root.upsertNamedImportDeclaration({
         module: '@atlaskit/primitives',
         specifiers: ['Text', 'Stack']
       }, context, fixer);

package/dist/cjs/rules/use-primitives-text/transformers/span-elements.js

@@ -9,7 +9,6 @@ exports.SpanElements = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var ast = _interopRequireWildcard(require("../../../ast-nodes"));
-var _upsertImportDeclaration = require("../../use-primitives/transformers/emotion-css/upsert-import-declaration");
 var _common = require("./common");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -74,7 +73,7 @@ var SpanElements = exports.SpanElements = {
     var context = _ref3.context,
       config = _ref3.config;
     return function (fixer) {
-      var importFix = (0, _upsertImportDeclaration.upsertImportDeclaration)({
+      var importFix = ast.Root.upsertNamedImportDeclaration({
         module: '@atlaskit/primitives',
         specifiers: ['Text']
       }, context, fixer);

package/dist/cjs/rules/use-primitives-text/transformers/strong-elements.js

@@ -9,7 +9,6 @@ exports.StrongElements = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var ast = _interopRequireWildcard(require("../../../ast-nodes"));
-var _upsertImportDeclaration = require("../../use-primitives/transformers/emotion-css/upsert-import-declaration");
 var _common = require("./common");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -69,7 +68,7 @@ var StrongElements = exports.StrongElements = {
     var context = _ref3.context,
       config = _ref3.config;
     return function (fixer) {
-      var importFix = (0, _upsertImportDeclaration.upsertImportDeclaration)({
+      var importFix = ast.Root.upsertNamedImportDeclaration({
         module: '@atlaskit/primitives',
         specifiers: ['Text']
       }, context, fixer);

package/dist/cjs/rules/use-tokens-space/transformers/style-property/index.js

@@ -11,7 +11,6 @@ var ast = _interopRequireWildcard(require("../../../../ast-nodes"));
 var _utils = require("../../utils");
 var _styleMap = require("./style-map");
 var _supported = _interopRequireDefault(require("./supported"));
-var _upsertImportDeclaration = require("./upsert-import-declaration");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /* eslint-disable @repo/internal/react/require-jsdoc */
@@ -116,7 +115,7 @@ var StyleProperty = exports.StyleProperty = {
    */
   _fix: function _fix(ref, context) {
     return function (fixer) {
-      var importFix = (0, _upsertImportDeclaration.upsertImportDeclaration)({
+      var importFix = ast.Root.upsertNamedImportDeclaration({
         module: '@atlaskit/tokens',
         specifiers: ['token']
       }, context, fixer);

package/dist/cjs/rules/utils/create-rule.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createRule = exports.createLintRule = void 0;
 var _utils = require("@typescript-eslint/utils");
-// eslint-disable-next-line import/no-extraneous-dependencies
-
+var _createRule = require("@atlaskit/eslint-utils/create-rule");
 /**
  * We are moving to our own small abstraction to create a lint rule that we have the power
  * to change and mold to our own needs.
@@ -19,16 +18,14 @@ var _utils = require("@typescript-eslint/utils");
 var createRule = exports.createRule = _utils.ESLintUtils.RuleCreator(function (name) {
   return getRuleUrl(name);
 });
+
 /**
  * Tiny wrapped over the ESLint rule module type that ensures
  * there is a docs link to our ESLint plugin documentation page,
  * as well as improving type support.
  */
-var createLintRule = exports.createLintRule = function createLintRule(rule) {
-  rule.meta.docs.url = getRuleUrl(rule.meta.name);
-  return rule;
-};
+var createLintRule = exports.createLintRule = (0, _createRule.getCreateLintRule)(getRuleUrl);
 function getRuleUrl(ruleName) {
-  var name = ruleName.replace('/', '-'); // If it's a nested rule, ensure the url is clean and matches codegen/gatsby
+  var name = (0, _createRule.getPathSafeName)(ruleName);
   return "https://atlassian.design/components/eslint-plugin-design-system/".concat(name, "/usage");
 }

package/dist/es2019/ast-nodes/root.js

@@ -1,6 +1,7 @@
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
 import { hasImportDeclaration, insertImportDeclaration, isNodeOfType } from 'eslint-codemod-utils';
+import { Import } from './import';
 // Little bit unreadable, but better than duplicating the type
 
 export const Root = {
@@ -24,5 +25,38 @@ export const Root = {
   },
   insertImport(root, data, fixer) {
     return fixer.insertTextBefore(root[0], `${insertImportDeclaration(data.module, data.specifiers)};\n`);
+  },
+  upsertNamedImportDeclaration({
+    module,
+    specifiers
+  }, context, fixer) {
+    // Find any imports that match the packageName
+    const root = context.getSourceCode().ast.body;
+    const importDeclarations = this.findImportsByModule(root, module);
+
+    // The named import doesn't exist yet, we can just insert a whole new one
+    if (importDeclarations.length === 0) {
+      return this.insertImport(root, {
+        module,
+        specifiers
+      }, fixer);
+    }
+
+    // The import exists so, modify the existing one
+    return Import.insertNamedSpecifiers(importDeclarations[0], specifiers, fixer);
+  },
+  upsertDefaultImportDeclaration({
+    module,
+    localName
+  }, context, fixer) {
+    // Find any imports that match the packageName
+    const root = context.getSourceCode().ast.body;
+    const importDeclarations = this.findImportsByModule(root, module);
+
+    // The import already exist exist
+    if (importDeclarations.length > 0) {
+      return undefined;
+    }
+    return fixer.insertTextBefore(root[0], `import ${localName} from '${module}';\n`);
   }
 };

package/dist/es2019/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d95217b658f807294de3c81123068bf1>>
+ * @codegen <<SignedSource::2e2cf6c0ecfe1b01f3eb24caa223f09e>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -31,6 +31,7 @@ export default {
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
+    '@atlaskit/design-system/use-heading': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',