@atlaskit/eslint-plugin-design-system 8.37.2 → 8.38.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.38.0
+
+### Minor Changes
+
+- [#74844](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/74844) [`7c7b8a771792`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7c7b8a771792) - Created `use-tokens-space` lint rule to replace `ensure-design-token-usage` rule for space values.
+
+## 8.37.3
+
+### Patch Changes
+
+- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116) [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) - Upgrade Typescript from `4.9.5` to `5.4.2`
+
 ## 8.37.2
 
 ### Patch Changes

package/README.md

@@ -78,6 +78,7 @@ module.exports = {
 | <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         |
 | <a href="./src/rules/use-primitives-text/README.md">use-primitives-text</a>                                         | Encourage the usage of text components.                                                                                                                                                                                                                                                                             |             | Yes     | Yes         |
+| <a href="./src/rules/use-tokens-space/README.md">use-tokens-space</a>                                               | Enforces usage of space design tokens rather than hard-coded values.                                                                                                                                                                                                                                                |             | Yes     | Yes         |
 | <a href="./src/rules/use-tokens-typography/README.md">use-tokens-typography</a>                                     | Enforces usage of design tokens for typography properties rather than hard-coded values.                                                                                                                                                                                                                            |             | Yes     | Yes         |
 | <a href="./src/rules/use-visually-hidden/README.md">use-visually-hidden</a>                                         | Enforce usage of the visually hidden component.                                                                                                                                                                                                                                                                     | Yes         | Yes     |             |
 

package/constellation/index/usage.mdx

@@ -40,6 +40,7 @@ This plugin contains rules that should be used when working with the [Atlassian
 | <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         |
 | <a href="use-primitives-text/usage">use-primitives-text</a>                                         | Encourage the usage of text components.                                                                                                                                                                                                                                                                             |             | Yes     | Yes         |
+| <a href="use-tokens-space/usage">use-tokens-space</a>                                               | Enforces usage of space design tokens rather than hard-coded values.                                                                                                                                                                                                                                                |             | Yes     | Yes         |
 | <a href="use-tokens-typography/usage">use-tokens-typography</a>                                     | Enforces usage of design tokens for typography properties rather than hard-coded values.                                                                                                                                                                                                                            |             | Yes     | Yes         |
 | <a href="use-visually-hidden/usage">use-visually-hidden</a>                                         | Enforce usage of the visually hidden component.                                                                                                                                                                                                                                                                     | Yes         | Yes     |             |
 

package/constellation/use-tokens-space/usage.mdx

@@ -0,0 +1,30 @@
+# use-tokens-space
+
+## Examples
+
+This rule marks code as violations when a space token should be used. It will auto-fix values that can be mapped 1:1 with an ADS space token. Values that can't be mapped to a token will still be reported, however no auto-fix will happen.
+
+### Incorrect
+
+```jsx
+const someStyles = css({
+  padding: '8px';
+           ^^^^^
+})
+```
+
+### Correct
+
+```jsx
+import { token } from '@atlaskit/tokens'
+
+const someStyles = css({
+  padding: token('space.100');
+})
+```
+
+See the list of available space tokens on the [ADS website](https://atlassian.design/foundations/spacing#space-tokens).
+
+For Atlassians:
+
+- See the [Token Migration Guide](https://go.atlassian.com/space-token-migration) for instructions on how to migrate to tokens when a suggestion is not provided by the ESLint rule.

package/dist/cjs/ast-nodes/object-entry.js

@@ -5,7 +5,42 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ObjectEntry = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
 var ObjectEntry = exports.ObjectEntry = {
+  getProperty: function getProperty(node) {
+    if ((0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Identifier')) {
+      return {
+        type: 'Identifier',
+        value: node.key.name
+      };
+    }
+    if ((0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Literal') && node.key.value) {
+      return {
+        type: 'Literal',
+        value: node.key.value.toString()
+      };
+    }
+    return {
+      type: undefined,
+      value: undefined
+    };
+  },
+  getValue: function getValue(node) {
+    // The value is a number, like `-3`
+    if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'UnaryExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.value.argument, 'Literal') && node.value.argument.raw) {
+      if (node.value.operator === '-') {
+        return -1 * Number.parseInt(node.value.argument.raw);
+      }
+      return Number.parseInt(node.value.argument.raw);
+    }
+
+    // The value is a string, like `'4px'`
+    if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'Literal') && node.value.value) {
+      return node.value.value;
+    }
+    return undefined;
+  },
   deleteEntry: function deleteEntry(node, context, fixer) {
     var _lastToken;
     // context.getSourceCode() is deprecated in favour of context.sourceCode, however this returns undefined for some reason

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

@@ -105,5 +105,17 @@ var ASTObjectExpression = exports.Object = {
       key: (0, _eslintCodemodUtils.identifier)(key),
       value: (0, _eslintCodemodUtils.literal)(value)
     }).toString(), ", "));
+  },
+  recurse: function recurse(node, callback) {
+    node.properties.forEach(function (entry) {
+      // Call the callback first, in case the user wants to do something with SpreadElements
+      callback(entry);
+      if (!(0, _eslintCodemodUtils.isNodeOfType)(entry, 'Property')) {
+        return;
+      }
+      if ((0, _eslintCodemodUtils.isNodeOfType)(entry.value, 'ObjectExpression')) {
+        ASTObjectExpression.recurse(entry.value, callback);
+      }
+    });
   }
 };

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::d90c2cf5e100daf98915f9467f2e5663>>
+ * @codegen <<SignedSource::d95217b658f807294de3c81123068bf1>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -41,6 +41,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',
+    '@atlaskit/design-system/use-tokens-space': 'error',
     '@atlaskit/design-system/use-tokens-typography': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }

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

@@ -34,11 +34,12 @@ var _useHeadingLevelInSpotlightCard = _interopRequireDefault(require("./use-head
 var _useHrefInLinkItem = _interopRequireDefault(require("./use-href-in-link-item"));
 var _usePrimitives = _interopRequireDefault(require("./use-primitives"));
 var _usePrimitivesText = _interopRequireDefault(require("./use-primitives-text"));
+var _useTokensSpace = _interopRequireDefault(require("./use-tokens-space"));
 var _useTokensTypography = _interopRequireDefault(require("./use-tokens-typography"));
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c283cd7ede5e813a9119cd707d339273>>
+ * @codegen <<SignedSource::d1c25758089a050334359276ede0ca3a>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -71,6 +72,7 @@ var _default = exports.default = {
   'use-href-in-link-item': _useHrefInLinkItem.default,
   'use-primitives': _usePrimitives.default,
   'use-primitives-text': _usePrimitivesText.default,
+  'use-tokens-space': _useTokensSpace.default,
   'use-tokens-typography': _useTokensTypography.default,
   'use-visually-hidden': _useVisuallyHidden.default
 };

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

@@ -93,7 +93,6 @@ var isTokenCall = function isTokenCall(node) {
     return false;
   }
   var token = ast.FunctionCall.getArgumentAtPos(node, 0);
-  var fallback = ast.FunctionCall.getArgumentAtPos(node, 1);
   if (!token || token.type !== 'Literal') {
     return false;
   }
@@ -104,7 +103,17 @@ var isTokenCall = function isTokenCall(node) {
   }
 
   // Not all `token()` calls have a fall back. This is fine, but if there is a fallback, make sure it's the same as the fallback xcss will use
-  if (fallback && fallback.type === 'Literal') {
+  if (node.arguments.length === 2) {
+    var fallback = ast.FunctionCall.getArgumentAtPos(node, 1);
+
+    // `getArgumentAtPos` is only able to understand `Literal` and `ObjectExpression` statements
+    // If there are 2 args, but `fallback` is undefined, then the fallback is something wild, like `token('space.100, `${gridSize * rem(3)`})`
+    if (!fallback) {
+      return false;
+    }
+    if (fallback.type !== 'Literal') {
+      return false;
+    }
     if (_transformers.spaceTokenMap[fallback.value] !== token.value) {
       return false;
     }

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

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createRule = require("../utils/create-rule");
+var _transformers = require("./transformers");
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'use-tokens-space',
+    type: 'problem',
+    fixable: 'code',
+    hasSuggestions: true,
+    docs: {
+      description: 'Enforces usage of space design tokens rather than hard-coded values.',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      noRawSpacingValues: 'The use of spacing primitives or tokens is preferred over the direct application of spacing properties.'
+    }
+  },
+  create: function create(context) {
+    return {
+      'CallExpression[callee.name="css"] ObjectExpression Property': function CallExpressionCalleeNameCssObjectExpressionProperty(node) {
+        return _transformers.StyleProperty.lint(node, {
+          context: context
+        });
+      },
+      'CallExpression[callee.name="keyframes"] ObjectExpression Property': function CallExpressionCalleeNameKeyframesObjectExpressionProperty(node) {
+        return _transformers.StyleProperty.lint(node, {
+          context: context
+        });
+      },
+      'CallExpression[callee.name="cssMap"] ObjectExpression Property': function CallExpressionCalleeNameCssMapObjectExpressionProperty(node) {
+        return _transformers.StyleProperty.lint(node, {
+          context: context
+        });
+      },
+      'CallExpression[callee.object.name=styled] ObjectExpression Property': function CallExpressionCalleeObjectNameStyledObjectExpressionProperty(node) {
+        return _transformers.StyleProperty.lint(node, {
+          context: context
+        });
+      },
+      'CallExpression[callee.object.name=styled2] ObjectExpression Property': function CallExpressionCalleeObjectNameStyled2ObjectExpressionProperty(node) {
+        return _transformers.StyleProperty.lint(node, {
+          context: context
+        });
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "StyleProperty", {
+  enumerable: true,
+  get: function get() {
+    return _styleProperty.StyleProperty;
+  }
+});
+var _styleProperty = require("./style-property");

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

@@ -0,0 +1,130 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyleProperty = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+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 */
+
+var messageId = 'noRawSpacingValues';
+var StyleProperty = exports.StyleProperty = {
+  lint: function lint(node, _ref) {
+    var context = _ref.context;
+    // Check whether all criteria needed to make a transformation are met
+    var _StyleProperty$_check = StyleProperty._check(node),
+      success = _StyleProperty$_check.success,
+      ref = _StyleProperty$_check.ref;
+    if (!success) {
+      return;
+    }
+    context.report({
+      node: ref.node.value,
+      messageId: messageId,
+      fix: ref.token ? StyleProperty._fix(ref, context) : undefined
+    });
+  },
+  _check: function _check(node) {
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'Property')) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+
+    /**
+     * Currently, we support values like:
+     * ```
+     * {
+     *   padding: '8px', // value.type is Literal
+     *   margin: -8, // value.type is UnaryExpression
+     * }
+     * ```
+     */
+    if (!((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'Literal') || (0, _eslintCodemodUtils.isNodeOfType)(node.value, 'UnaryExpression'))) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+    var _ast$ObjectEntry$getP = ast.ObjectEntry.getProperty(node),
+      property = _ast$ObjectEntry$getP.value;
+
+    // Bail if the property is not `padding`, `margin`, etc
+    if (!property || !_styleMap.styleMap[property]) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+    var value = ast.ObjectEntry.getValue(node);
+
+    // This is mainly useful as a type guard, so the checks after don't have to have duplicate checks for other types.
+    if (!(0, _utils.isStringOrNumber)(value)) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+
+    // ignore CSS vars. See: https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/74844/overview?commentId=6741571
+    if (value.toString().startsWith('var(')) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+
+    // There are valid values to ignore, such as `margin: auto`
+    if (_supported.default.values.ignore.includes(value)) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+
+    // Don't report on stuff like `padding: '8px 16px'`.
+    // We may iterate to handle values like this in future.
+    if (value.toString().includes(' ')) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+    var ref = {
+      node: node,
+      token: _styleMap.styleMap[property][value],
+      fallback: value
+    };
+    return {
+      success: true,
+      ref: ref
+    };
+  },
+  /**
+   * All required validation steps have been taken care of before this
+   * transformer is called, so it just goes ahead providing all necessary fixes
+   */
+  _fix: function _fix(ref, context) {
+    return function (fixer) {
+      var importFix = (0, _upsertImportDeclaration.upsertImportDeclaration)({
+        module: '@atlaskit/tokens',
+        specifiers: ['token']
+      }, context, fixer);
+      var tokenCall = ref.fallback ? "token('".concat(ref.token, "', '").concat(ref.fallback, "')") : "token('".concat(ref.token, "')");
+      var tokenFix = fixer.replaceText(ref.node.value, tokenCall);
+      return [importFix, tokenFix].filter(function (fix) {
+        return Boolean(fix);
+      }); // Some of the transformers can return arrays with undefined, so filter them out
+    };
+  }
+};

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

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styleMap = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _tokenMap;
+// TODO: https://product-fabric.atlassian.net/browse/DSP-16054
+var tokenMap = (_tokenMap = {
+  '-2px': 'space.negative.025',
+  '-4px': 'space.negative.050',
+  '-6px': 'space.negative.075',
+  '-8px': 'space.negative.100',
+  '-12px': 'space.negative.150',
+  '-16px': 'space.negative.200',
+  '-20px': 'space.negative.250',
+  '-24px': 'space.negative.300',
+  '-32px': 'space.negative.400'
+}, (0, _defineProperty2.default)(_tokenMap, -2, 'space.negative.025'), (0, _defineProperty2.default)(_tokenMap, -4, 'space.negative.050'), (0, _defineProperty2.default)(_tokenMap, -6, 'space.negative.075'), (0, _defineProperty2.default)(_tokenMap, -8, 'space.negative.100'), (0, _defineProperty2.default)(_tokenMap, -12, 'space.negative.150'), (0, _defineProperty2.default)(_tokenMap, -16, 'space.negative.200'), (0, _defineProperty2.default)(_tokenMap, -20, 'space.negative.250'), (0, _defineProperty2.default)(_tokenMap, -24, 'space.negative.300'), (0, _defineProperty2.default)(_tokenMap, -32, 'space.negative.400'), (0, _defineProperty2.default)(_tokenMap, '2px', 'space.025'), (0, _defineProperty2.default)(_tokenMap, '4px', 'space.050'), (0, _defineProperty2.default)(_tokenMap, '6px', 'space.075'), (0, _defineProperty2.default)(_tokenMap, '8px', 'space.100'), (0, _defineProperty2.default)(_tokenMap, '12px', 'space.150'), (0, _defineProperty2.default)(_tokenMap, '16px', 'space.200'), (0, _defineProperty2.default)(_tokenMap, '20px', 'space.250'), (0, _defineProperty2.default)(_tokenMap, '24px', 'space.300'), (0, _defineProperty2.default)(_tokenMap, '32px', 'space.400'), (0, _defineProperty2.default)(_tokenMap, '40px', 'space.500'), (0, _defineProperty2.default)(_tokenMap, '48px', 'space.600'), (0, _defineProperty2.default)(_tokenMap, '64px', 'space.800'), (0, _defineProperty2.default)(_tokenMap, '80px', 'space.1000'), (0, _defineProperty2.default)(_tokenMap, 2, 'space.025'), (0, _defineProperty2.default)(_tokenMap, 4, 'space.050'), (0, _defineProperty2.default)(_tokenMap, 6, 'space.075'), (0, _defineProperty2.default)(_tokenMap, 8, 'space.100'), (0, _defineProperty2.default)(_tokenMap, 12, 'space.150'), (0, _defineProperty2.default)(_tokenMap, 16, 'space.200'), (0, _defineProperty2.default)(_tokenMap, 20, 'space.250'), (0, _defineProperty2.default)(_tokenMap, 24, 'space.300'), (0, _defineProperty2.default)(_tokenMap, 32, 'space.400'), (0, _defineProperty2.default)(_tokenMap, 40, 'space.500'), (0, _defineProperty2.default)(_tokenMap, 48, 'space.600'), (0, _defineProperty2.default)(_tokenMap, 64, 'space.800'), (0, _defineProperty2.default)(_tokenMap, 80, 'space.1000'), (0, _defineProperty2.default)(_tokenMap, '-0.125rem', 'space.negative.025'), (0, _defineProperty2.default)(_tokenMap, '-0.25rem', 'space.negative.050'), (0, _defineProperty2.default)(_tokenMap, '-0.375rem', 'space.negative.075'), (0, _defineProperty2.default)(_tokenMap, '-0.5rem', 'space.negative.100'), (0, _defineProperty2.default)(_tokenMap, '-0.75rem', 'space.negative.150'), (0, _defineProperty2.default)(_tokenMap, '-1rem', 'space.negative.200'), (0, _defineProperty2.default)(_tokenMap, '-1.25rem', 'space.negative.250'), (0, _defineProperty2.default)(_tokenMap, '-1.5rem', 'space.negative.300'), (0, _defineProperty2.default)(_tokenMap, '-2rem', 'space.negative.400'), (0, _defineProperty2.default)(_tokenMap, '0.125rem', 'space.025'), (0, _defineProperty2.default)(_tokenMap, '0.25rem', 'space.050'), (0, _defineProperty2.default)(_tokenMap, '0.375rem', 'space.075'), (0, _defineProperty2.default)(_tokenMap, '0.5rem', 'space.100'), (0, _defineProperty2.default)(_tokenMap, '0.75rem', 'space.150'), (0, _defineProperty2.default)(_tokenMap, '1rem', 'space.200'), (0, _defineProperty2.default)(_tokenMap, '1.25rem', 'space.250'), (0, _defineProperty2.default)(_tokenMap, '1.5rem', 'space.300'), (0, _defineProperty2.default)(_tokenMap, '2rem', 'space.400'), (0, _defineProperty2.default)(_tokenMap, '2.5rem', 'space.500'), (0, _defineProperty2.default)(_tokenMap, '3rem', 'space.600'), (0, _defineProperty2.default)(_tokenMap, '4rem', 'space.800'), (0, _defineProperty2.default)(_tokenMap, '5rem', 'space.1000'), (0, _defineProperty2.default)(_tokenMap, '-0.125em', 'space.negative.025'), (0, _defineProperty2.default)(_tokenMap, '-0.25em', 'space.negative.050'), (0, _defineProperty2.default)(_tokenMap, '-0.375em', 'space.negative.075'), (0, _defineProperty2.default)(_tokenMap, '-0.5em', 'space.negative.100'), (0, _defineProperty2.default)(_tokenMap, '-0.75em', 'space.negative.150'), (0, _defineProperty2.default)(_tokenMap, '-1em', 'space.negative.200'), (0, _defineProperty2.default)(_tokenMap, '-1.25em', 'space.negative.250'), (0, _defineProperty2.default)(_tokenMap, '-1.5em', 'space.negative.300'), (0, _defineProperty2.default)(_tokenMap, '-2em', 'space.negative.400'), (0, _defineProperty2.default)(_tokenMap, '0.125em', 'space.025'), (0, _defineProperty2.default)(_tokenMap, '0.25em', 'space.050'), (0, _defineProperty2.default)(_tokenMap, '0.375em', 'space.075'), (0, _defineProperty2.default)(_tokenMap, '0.5em', 'space.100'), (0, _defineProperty2.default)(_tokenMap, '0.75em', 'space.150'), (0, _defineProperty2.default)(_tokenMap, '1em', 'space.200'), (0, _defineProperty2.default)(_tokenMap, '1.25em', 'space.250'), (0, _defineProperty2.default)(_tokenMap, '1.5em', 'space.300'), (0, _defineProperty2.default)(_tokenMap, '2em', 'space.400'), (0, _defineProperty2.default)(_tokenMap, '2.5em', 'space.500'), (0, _defineProperty2.default)(_tokenMap, '3em', 'space.600'), (0, _defineProperty2.default)(_tokenMap, '4em', 'space.800'), (0, _defineProperty2.default)(_tokenMap, '5em', 'space.1000'), _tokenMap);
+var styleMap = exports.styleMap = {
+  'column-gap': tokenMap,
+  columnGap: tokenMap,
+  gap: tokenMap,
+  'grid-column-gap': tokenMap,
+  'grid-row-gap': tokenMap,
+  gridColumnGap: tokenMap,
+  gridRowGap: tokenMap,
+  'margin-block-end': tokenMap,
+  'margin-block-start': tokenMap,
+  'margin-block': tokenMap,
+  'margin-bottom': tokenMap,
+  'margin-inline-end': tokenMap,
+  'margin-inline-start': tokenMap,
+  'margin-inline': tokenMap,
+  'margin-left': tokenMap,
+  'margin-right': tokenMap,
+  'margin-top': tokenMap,
+  'outline-offset': tokenMap,
+  outlineOffset: tokenMap,
+  'padding-block-end': tokenMap,
+  'padding-block-start': tokenMap,
+  'padding-block': tokenMap,
+  'padding-bottom': tokenMap,
+  'padding-inline-end': tokenMap,
+  'padding-inline-start': tokenMap,
+  'padding-inline': tokenMap,
+  'padding-left': tokenMap,
+  'padding-right': tokenMap,
+  'padding-top': tokenMap,
+  'row-gap': tokenMap,
+  rowGap: tokenMap,
+  margin: tokenMap,
+  marginBlock: tokenMap,
+  marginBlockEnd: tokenMap,
+  marginBlockStart: tokenMap,
+  marginBottom: tokenMap,
+  marginInline: tokenMap,
+  marginInlineEnd: tokenMap,
+  marginInlineStart: tokenMap,
+  marginLeft: tokenMap,
+  marginRight: tokenMap,
+  marginTop: tokenMap,
+  padding: tokenMap,
+  paddingBlock: tokenMap,
+  paddingBlockEnd: tokenMap,
+  paddingBlockStart: tokenMap,
+  paddingBottom: tokenMap,
+  paddingInline: tokenMap,
+  paddingInlineEnd: tokenMap,
+  paddingInlineStart: tokenMap,
+  paddingLeft: tokenMap,
+  paddingRight: tokenMap,
+  paddingTop: tokenMap
+  // bottom: tokenMap,
+  // left: tokenMap,
+  // right: tokenMap,
+  // top: tokenMap,
+};

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  values: {
+    ignore: ['auto', 'initial', 'inherit', 'unset', 'revert', 'revert-layer', 'none',
+    // outline-offset can be set to none
+    // Currently the DST opinion is that 0 is valid. It doesn't need to be converted to `space.0`
+    0, '0', '0px', '0em', '0rem']
+  }
+};

package/dist/cjs/rules/use-tokens-space/transformers/style-property/upsert-import-declaration.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.upsertImportDeclaration = void 0;
+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; }
+/**
+ * Currently this is defined here because it's not very general purpose.
+ * If we were to move this to `ast-nodes`, half the implementation would be in `Root`,
+ * and the other half would be in `Import`.
+ *
+ * TODO: Refactor and move to `ast-nodes`
+ *
+ * Note: It does not handle default imports, namespace imports, or aliased imports.
+ */
+var upsertImportDeclaration = exports.upsertImportDeclaration = function upsertImportDeclaration(_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 = ast.Root.findImportsByModule(root, module);
+
+  // The import doesn't exist yet, we can just insert a whole new one
+  if (importDeclarations.length === 0) {
+    return ast.Root.insertImport(root, {
+      module: module,
+      specifiers: specifiers
+    }, fixer);
+  }
+
+  // The import exists so, modify the existing one
+  return ast.Import.insertNamedSpecifiers(importDeclarations[0], specifiers, fixer);
+};

package/dist/cjs/rules/use-tokens-space/utils/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "isStringOrNumber", {
+  enumerable: true,
+  get: function get() {
+    return _isStringOrNumber.isStringOrNumber;
+  }
+});
+var _isStringOrNumber = require("./is-string-or-number");

package/dist/cjs/rules/use-tokens-space/utils/is-string-or-number.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isStringOrNumber = void 0;
+var isStringOrNumber = exports.isStringOrNumber = function isStringOrNumber(value) {
+  return typeof value === 'string' || typeof value === 'number';
+};

package/dist/es2019/ast-nodes/object-entry.js

@@ -1,5 +1,40 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
 import { isNodeOfType } from 'eslint-codemod-utils';
-const ObjectEntry = {
+export const ObjectEntry = {
+  getProperty(node) {
+    if (isNodeOfType(node.key, 'Identifier')) {
+      return {
+        type: 'Identifier',
+        value: node.key.name
+      };
+    }
+    if (isNodeOfType(node.key, 'Literal') && node.key.value) {
+      return {
+        type: 'Literal',
+        value: node.key.value.toString()
+      };
+    }
+    return {
+      type: undefined,
+      value: undefined
+    };
+  },
+  getValue(node) {
+    // The value is a number, like `-3`
+    if (isNodeOfType(node.value, 'UnaryExpression') && isNodeOfType(node.value.argument, 'Literal') && node.value.argument.raw) {
+      if (node.value.operator === '-') {
+        return -1 * Number.parseInt(node.value.argument.raw);
+      }
+      return Number.parseInt(node.value.argument.raw);
+    }
+
+    // The value is a string, like `'4px'`
+    if (isNodeOfType(node.value, 'Literal') && node.value.value) {
+      return node.value.value;
+    }
+    return undefined;
+  },
   deleteEntry(node, context, fixer) {
     var _lastToken;
     // context.getSourceCode() is deprecated in favour of context.sourceCode, however this returns undefined for some reason
@@ -31,5 +66,4 @@ const ObjectEntry = {
       return node.key.name;
     }
   }
-};
-export { ObjectEntry };
+};

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

@@ -99,6 +99,18 @@ const ASTObjectExpression = {
       key: identifier(key),
       value: literal(value)
     }).toString()}, `);
+  },
+  recurse(node, callback) {
+    node.properties.forEach(entry => {
+      // Call the callback first, in case the user wants to do something with SpreadElements
+      callback(entry);
+      if (!isNodeOfType(entry, 'Property')) {
+        return;
+      }
+      if (isNodeOfType(entry.value, 'ObjectExpression')) {
+        ASTObjectExpression.recurse(entry.value, callback);
+      }
+    });
   }
 };
 export { ASTObjectExpression as Object };

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::d90c2cf5e100daf98915f9467f2e5663>>
+ * @codegen <<SignedSource::d95217b658f807294de3c81123068bf1>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -35,6 +35,7 @@ export default {
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',
+    '@atlaskit/design-system/use-tokens-space': 'error',
     '@atlaskit/design-system/use-tokens-typography': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }