@atlaskit/eslint-plugin-design-system 8.37.3 → 9.0.0

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/cjs/rules/utils/is-supported-import.js

@@ -3,7 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isStyledComponents = exports.isStyled = exports.isKeyframes = exports.isImportedFrom = exports.isEmotion = exports.isCxFunction = exports.isCssMap = exports.isCss = exports.isCompiled = exports.getImportSources = exports.DEFAULT_IMPORT_SOURCES = exports.CSS_IN_JS_IMPORTS = void 0;
+exports.isXcss = exports.isStyledComponents = exports.isStyled = exports.isKeyframes = exports.isImportedFrom = exports.isEmotion = exports.isCxFunction = exports.isCssMap = exports.isCss = exports.isCompiled = exports.getImportSources = exports.DEFAULT_IMPORT_SOURCES = exports.CSS_IN_JS_IMPORTS = void 0;
+// This should be kept in sync with
+// packages/design-system/eslint-plugin-ui-styling-standard/src/rules/utils/is-supported-import.tsx
+// whenever possible.
+//
+// TODO: would having an @atlassian/eslint-plugin-design-system-common
+// package be useful?
+
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 var CSS_IN_JS_IMPORTS = exports.CSS_IN_JS_IMPORTS = {
@@ -118,10 +125,12 @@ var isCssMap = exports.isCssMap = isSupportedImportWrapper('cssMap');
 var isKeyframes = exports.isKeyframes = isSupportedImportWrapper('keyframes');
 // `styled` is also the explicit default of `styled-components` and `@emotion/styled`, so we also match on default imports generally
 var isStyled = exports.isStyled = isSupportedImportWrapper('styled', ['styled-components', '@emotion/styled']);
+var isXcss = exports.isXcss = isSupportedImportWrapper('xcss');
 var isImportedFrom = exports.isImportedFrom = function isImportedFrom(moduleName) {
   var exactMatch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  return function (nodeToCheck, referencesInScope, importSources) {
-    if (!importSources.some(function (importSource) {
+  return function (nodeToCheck, referencesInScope) {
+    var importSources = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    if (importSources && !importSources.some(function (importSource) {
       return importSource === moduleName || !exactMatch && importSource.startsWith(moduleName);
     })) {
       // Don't go through the trouble of checking the import sources does not include this

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'
   }

package/dist/es2019/rules/consistent-css-prop-usage/index.js

@@ -24,6 +24,18 @@ const getProgramNode = expression => {
   }
   return expression.parent;
 };
+const isDeclaredInsideComponent = expression => {
+  // These nodes imply that there is a distinct own scope (function scope / block scope),
+  // and so the presence of them means that expression was not defined in the module scope.
+  const NOT_MODULE_SCOPE = ['ArrowFunctionExpression', 'BlockStatement', 'ClassDeclaration', 'FunctionExpression'];
+  while (expression.type !== 'Program') {
+    if (NOT_MODULE_SCOPE.includes(expression.type)) {
+      return true;
+    }
+    expression = expression.parent;
+  }
+  return false;
+};
 class JSXExpressionLinter {
   // File-level tracking of styles hoisted from the cssAtTopOfModule/cssAtBottomOfModule fixers.
 
@@ -92,13 +104,13 @@ class JSXExpressionLinter {
       });
       return;
     }
-    if (identifier.parent.parent.parent.type !== 'Program') {
+    if (isDeclaredInsideComponent(identifier)) {
       // When variable is declared inside the component
       this.context.report({
         node: sourceIdentifier,
         messageId: this.configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule',
         fix: fixer => {
-          if (this.configuration.fixNamesOnly) {
+          if (!this.configuration.autoFix) {
             return [];
           }
           return this.fixCssNotInModuleScope(fixer, identifier, false);
@@ -120,7 +132,7 @@ class JSXExpressionLinter {
           node: identifier,
           messageId: 'cssObjectTypeOnly',
           fix: fixer => {
-            if (this.configuration.fixNamesOnly) {
+            if (!this.configuration.autoFix) {
               return [];
             }
             return this.addCssFunctionCall(fixer, identifier.parent);
@@ -285,8 +297,9 @@ class JSXExpressionLinter {
       // The last value is the bottom of the file
       fixerNodePlacement = programNode.body[programNode.body.length - 1];
     } else {
+      var _ref;
       // Place after the last ImportDeclaration
-      fixerNodePlacement = programNode.body.length === 1 ? programNode.body[0] : programNode.body.find(node => node.type !== 'ImportDeclaration');
+      fixerNodePlacement = (_ref = programNode.body.length === 1 ? programNode.body[0] : programNode.body.find(node => node.type !== 'ImportDeclaration')) !== null && _ref !== void 0 ? _ref : fixerNodePlacement;
     }
     let moduleString;
     let fixes = [];
@@ -363,7 +376,7 @@ class JSXExpressionLinter {
           node: expression,
           messageId: this.configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule',
           fix: fixer => {
-            if (this.configuration.fixNamesOnly) {
+            if (!this.configuration.autoFix) {
               return [];
             }
 
@@ -404,8 +417,7 @@ const defaultConfig = {
   cssImportSource: CSS_IN_JS_IMPORTS.compiled,
   xcssImportSource: CSS_IN_JS_IMPORTS.atlaskitPrimitives,
   excludeReactComponents: false,
-  fixNamesOnly: false,
-  autoFixNames: true
+  autoFix: true
 };
 const rule = createLintRule({
   meta: {
@@ -424,8 +436,7 @@ const rule = createLintRule({
       cssObjectTypeOnly: `Create styles using objects passed to a css function call, e.g. \`css({ textAlign: 'center'; })\`.`,
       cssInModule: `Imported styles should not be used; instead define in the module, import a component, or use a design token.`,
       cssArrayStylesOnly: `Compose styles with an array on the css prop instead of using object spread.`,
-      noMemberExpressions: `Styles should be a regular variable (e.g. 'buttonStyles'), not a member of an object (e.g. 'myObject.styles').`,
-      shouldEndInStyles: 'Declared styles should end in "styles".'
+      noMemberExpressions: `Styles should be a regular variable (e.g. 'buttonStyles'), not a member of an object (e.g. 'myObject.styles').`
     },
     schema: [{
       type: 'object',
@@ -449,10 +460,7 @@ const rule = createLintRule({
         excludeReactComponents: {
           type: 'boolean'
         },
-        autoFixNames: {
-          type: 'boolean'
-        },
-        fixNamesOnly: {
+        autoFix: {
           type: 'boolean'
         }
       },
@@ -461,42 +469,7 @@ const rule = createLintRule({
   },
   create(context) {
     const mergedConfig = assign({}, defaultConfig, context.options[0]);
-    const declarationSuffix = 'Styles';
-    const callSelectorFunctions = [...mergedConfig.cssFunctions, 'cssMap'];
-    const callSelector = callSelectorFunctions.map(fn => `CallExpression[callee.name=${fn}]`).join(',');
     return {
-      [callSelector]: node => {
-        if (node.parent.type !== 'VariableDeclarator') {
-          // We aren't interested in these that don't have a parent.
-          return;
-        }
-        const identifier = node.parent.id;
-        if (identifier.type === 'Identifier' && (identifier.name.endsWith(declarationSuffix) || identifier.name.startsWith(declarationSuffix.toLowerCase()) || identifier.name === declarationSuffix.toLowerCase())) {
-          // Already prefixed! Nothing to do.
-          return;
-        }
-        if (!mergedConfig.autoFixNames) {
-          return;
-        }
-        context.report({
-          node: identifier,
-          messageId: 'shouldEndInStyles',
-          fix: fixer => {
-            var _context$getScope$var;
-            const identifierName = identifier.type === 'Identifier' ? identifier.name : '';
-            const references = ((_context$getScope$var = context.getScope().variables.find(varb => varb.name === identifierName)) === null || _context$getScope$var === void 0 ? void 0 : _context$getScope$var.references) || [];
-            const newIdentifierName = `${identifierName
-            // Remove "Style" if it is already defined.
-            .replace(/Style$/, '')}${declarationSuffix}`;
-            return references.filter(ref => ref.identifier.name === identifierName).map(ref => {
-              if (ref.identifier.parent && ref.identifier.parent.shorthand) {
-                return fixer.replaceText(ref.identifier, `${identifierName}: ${newIdentifierName}`);
-              }
-              return fixer.replaceText(ref.identifier, newIdentifierName);
-            });
-          }
-        });
-      },
       JSXAttribute(nodeOriginal) {
         const node = nodeOriginal;
         const {

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

@@ -1,6 +1,6 @@
 /**
  * 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
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -32,6 +32,7 @@ import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-car
 import useHrefInLinkItem from './use-href-in-link-item';
 import usePrimitives from './use-primitives';
 import usePrimitivesText from './use-primitives-text';
+import useTokensSpace from './use-tokens-space';
 import useTokensTypography from './use-tokens-typography';
 import useVisuallyHidden from './use-visually-hidden';
 export default {
@@ -64,6 +65,7 @@ export default {
   'use-href-in-link-item': useHrefInLinkItem,
   'use-primitives': usePrimitives,
   'use-primitives-text': usePrimitivesText,
+  'use-tokens-space': useTokensSpace,
   'use-tokens-typography': useTokensTypography,
   'use-visually-hidden': useVisuallyHidden
 };

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

@@ -0,0 +1,38 @@
+import { createLintRule } from '../utils/create-rule';
+import { StyleProperty } from './transformers';
+const rule = 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(context) {
+    return {
+      'CallExpression[callee.name="css"] ObjectExpression Property': node => StyleProperty.lint(node, {
+        context
+      }),
+      'CallExpression[callee.name="keyframes"] ObjectExpression Property': node => StyleProperty.lint(node, {
+        context
+      }),
+      'CallExpression[callee.name="cssMap"] ObjectExpression Property': node => StyleProperty.lint(node, {
+        context
+      }),
+      'CallExpression[callee.object.name=styled] ObjectExpression Property': node => StyleProperty.lint(node, {
+        context
+      }),
+      'CallExpression[callee.object.name=styled2] ObjectExpression Property': node => StyleProperty.lint(node, {
+        context
+      })
+    };
+  }
+});
+export default rule;

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

@@ -0,0 +1 @@
+export { StyleProperty } from './style-property';

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

@@ -0,0 +1,121 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import * as ast from '../../../../ast-nodes';
+import { isStringOrNumber } from '../../utils';
+import { styleMap } from './style-map';
+import supported from './supported';
+import { upsertImportDeclaration } from './upsert-import-declaration';
+const messageId = 'noRawSpacingValues';
+export const StyleProperty = {
+  lint(node, {
+    context
+  }) {
+    // Check whether all criteria needed to make a transformation are met
+    const {
+      success,
+      ref
+    } = StyleProperty._check(node);
+    if (!success) {
+      return;
+    }
+    context.report({
+      node: ref.node.value,
+      messageId,
+      fix: ref.token ? StyleProperty._fix(ref, context) : undefined
+    });
+  },
+  _check(node) {
+    if (!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 (!(isNodeOfType(node.value, 'Literal') || isNodeOfType(node.value, 'UnaryExpression'))) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+    const {
+      value: property
+    } = ast.ObjectEntry.getProperty(node);
+
+    // Bail if the property is not `padding`, `margin`, etc
+    if (!property || !styleMap[property]) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+    const 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 (!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.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
+      };
+    }
+    const ref = {
+      node,
+      token: styleMap[property][value],
+      fallback: value
+    };
+    return {
+      success: true,
+      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(ref, context) {
+    return fixer => {
+      const importFix = upsertImportDeclaration({
+        module: '@atlaskit/tokens',
+        specifiers: ['token']
+      }, context, fixer);
+      const tokenCall = ref.fallback ? `token('${ref.token}', '${ref.fallback}')` : `token('${ref.token}')`;
+      const tokenFix = fixer.replaceText(ref.node.value, tokenCall);
+      return [importFix, tokenFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
+    };
+  }
+};