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

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 9.0.0
+
+### Major Changes
+
+- [#83454](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83454) [`be8b7ad6ff8e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/be8b7ad6ff8e) - Remove name autofixer from `consistent-css-prop-usage`. Variables for css / xcss / cssMap functions will no longer be required to end with "Styles".
+
+  [BREAKING] Some rule options have been changed:
+
+  - `fixNamesOnly` and `autoFixNames` have been removed, as there is no longer an autofixer that enforces variable names.
+    - If you use `fixNamesOnly: true`, we recommend switching to using `autoFix: false`.
+    - Users of the `autoFixNames` option should remove this from their configuration.
+  - `autoFix` option has been added. This controls whether the remaining autofixers should run or not (e.g. hoisting `css` function calls, wrapping objects in `css` function calls), and is `true` by default.
+
+## 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

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/consistent-css-prop-usage/usage.mdx

@@ -16,7 +16,6 @@ This rule checks for the following cases:
 - Styles must be defined in the same file as their usage, and not be imported.
 - Styles should not contain spread operators (e.g. `css({ ...spreadStyles })`).
 - Styles must all be defined at the top of the file, or at the bottom of the file.
-- Styles must be in a variable whose name ends in `styles` (or `Styles`).
 
 This rule also has an autofixer that enforces and fixes the code (where practical) to meet the above requirements.
 
@@ -81,7 +80,7 @@ function Button({ children }) {
 
 ### Correct
 
-**Using the css() function to create a style object that follows the naming convention (ends in Styles) and passing it as a variable into the css={...} JSX attribute.**
+**Using the css() function to create a style object and passing it as a variable into the css={...} JSX attribute.**
 
 With the following options turned on:
 
@@ -181,23 +180,8 @@ Whether to exclude `css` attributes of React components from being affected by t
 
 This is `false` by default.
 
-### autoFixNames
+### autoFix
 
-When set to `true`, this rule will _turn on_ an autofixer that adds `Styles` at the end of existing style variables.
-
-```tsx
-//    vvvvv will be renamed to `myCssStyles`
-const myCss = { color: 'blue' };
-```
-
-Note that when hoisting styles, the name of the newly created style variable follows its own naming scheme (`styles`, `styles_1`, `styles_2`, ...) and is not affected by the value of `autoFixNames`.
+When set to `true`, this rule will turn on the autofixer. Set this to `false` if you do not want the autofixers to run.
 
 This is `true` by default.
-
-### fixNamesOnly
-
-When set to `true`, this rule will _turn off_ all autofixers other than the autofixer adding `Styles` to the end of existing style variables (which is controlled by `autoFixNames`). In other words, styles will no longer be hoisted and styles will no longer be wrapped in a `css`/`xcss` function call.
-
-This is `false` by default.
-
-If `autoFixNames` is `false` and `fixNamesOnly` is `true`, all autofixers will be turned off.

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/consistent-css-prop-usage/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -40,6 +39,18 @@ var getProgramNode = function getProgramNode(expression) {
   }
   return expression.parent;
 };
+var isDeclaredInsideComponent = function 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.
+  var 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;
+};
 var JSXExpressionLinter = /*#__PURE__*/function () {
   // File-level tracking of styles hoisted from the cssAtTopOfModule/cssAtBottomOfModule fixers.
 
@@ -119,13 +130,13 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
         });
         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: function fix(fixer) {
-            if (_this.configuration.fixNamesOnly) {
+            if (!_this.configuration.autoFix) {
               return [];
             }
             return _this.fixCssNotInModuleScope(fixer, identifier, false);
@@ -147,7 +158,7 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
             node: identifier,
             messageId: 'cssObjectTypeOnly',
             fix: function fix(fixer) {
-              if (_this.configuration.fixNamesOnly) {
+              if (!_this.configuration.autoFix) {
                 return [];
               }
               return _this.addCssFunctionCall(fixer, identifier.parent);
@@ -323,10 +334,11 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
         // The last value is the bottom of the file
         fixerNodePlacement = programNode.body[programNode.body.length - 1];
       } else {
+        var _ref3;
         // Place after the last ImportDeclaration
-        fixerNodePlacement = programNode.body.length === 1 ? programNode.body[0] : programNode.body.find(function (node) {
+        fixerNodePlacement = (_ref3 = programNode.body.length === 1 ? programNode.body[0] : programNode.body.find(function (node) {
           return node.type !== 'ImportDeclaration';
-        });
+        })) !== null && _ref3 !== void 0 ? _ref3 : fixerNodePlacement;
       }
       var moduleString;
       var fixes = [];
@@ -410,7 +422,7 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
             node: expression,
             messageId: this.configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule',
             fix: function fix(fixer) {
-              if (_this3.configuration.fixNamesOnly) {
+              if (!_this3.configuration.autoFix) {
                 return [];
               }
 
@@ -455,8 +467,7 @@ var defaultConfig = {
   cssImportSource: _isSupportedImport.CSS_IN_JS_IMPORTS.compiled,
   xcssImportSource: _isSupportedImport.CSS_IN_JS_IMPORTS.atlaskitPrimitives,
   excludeReactComponents: false,
-  fixNamesOnly: false,
-  autoFixNames: true
+  autoFix: true
 };
 var rule = (0, _createRule.createLintRule)({
   meta: {
@@ -475,8 +486,7 @@ var rule = (0, _createRule.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',
@@ -500,10 +510,7 @@ var rule = (0, _createRule.createLintRule)({
         excludeReactComponents: {
           type: 'boolean'
         },
-        autoFixNames: {
-          type: 'boolean'
-        },
-        fixNamesOnly: {
+        autoFix: {
           type: 'boolean'
         }
       },
@@ -511,80 +518,41 @@ var rule = (0, _createRule.createLintRule)({
     }]
   },
   create: function create(context) {
-    var _ref3;
     var mergedConfig = (0, _assign.default)({}, defaultConfig, context.options[0]);
-    var declarationSuffix = 'Styles';
-    var callSelectorFunctions = [].concat((0, _toConsumableArray2.default)(mergedConfig.cssFunctions), ['cssMap']);
-    var callSelector = callSelectorFunctions.map(function (fn) {
-      return "CallExpression[callee.name=".concat(fn, "]");
-    }).join(',');
-    return _ref3 = {}, (0, _defineProperty2.default)(_ref3, callSelector, function (node) {
-      if (node.parent.type !== 'VariableDeclarator') {
-        // We aren't interested in these that don't have a parent.
-        return;
-      }
-      var 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: function fix(fixer) {
-          var _context$getScope$var;
-          var identifierName = identifier.type === 'Identifier' ? identifier.name : '';
-          var references = ((_context$getScope$var = context.getScope().variables.find(function (varb) {
-            return varb.name === identifierName;
-          })) === null || _context$getScope$var === void 0 ? void 0 : _context$getScope$var.references) || [];
-          var newIdentifierName = "".concat(identifierName
-          // Remove "Style" if it is already defined.
-          .replace(/Style$/, '')).concat(declarationSuffix);
-          return references.filter(function (ref) {
-            return ref.identifier.name === identifierName;
-          }).map(function (ref) {
-            if (ref.identifier.parent && ref.identifier.parent.shorthand) {
-              return fixer.replaceText(ref.identifier, "".concat(identifierName, ": ").concat(newIdentifierName));
-            }
-            return fixer.replaceText(ref.identifier, newIdentifierName);
-          });
-        }
-      });
-    }), (0, _defineProperty2.default)(_ref3, "JSXAttribute", function JSXAttribute(nodeOriginal) {
-      var node = nodeOriginal;
-      var name = node.name,
-        value = node.value;
-      if (mergedConfig.excludeReactComponents && node.parent.type === 'JSXOpeningElement') {
-        // e.g. <item.before />
-        if (node.parent.name.type === 'JSXMemberExpression') {
-          return;
-        }
-        // e.g. <div />, <MenuItem />
-        if (node.parent.name.type === 'JSXIdentifier' && !isDOMElementName(node.parent.name.name)) {
-          return;
-        }
-      }
-      if (name.type === 'JSXIdentifier' && mergedConfig.cssFunctions.includes(name.name)) {
-        // When not a jsx expression. For eg. css=""
-        if ((value === null || value === void 0 ? void 0 : value.type) !== 'JSXExpressionContainer') {
-          context.report({
-            node: node,
-            messageId: mergedConfig.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule'
-          });
-          return;
+    return {
+      JSXAttribute: function JSXAttribute(nodeOriginal) {
+        var node = nodeOriginal;
+        var name = node.name,
+          value = node.value;
+        if (mergedConfig.excludeReactComponents && node.parent.type === 'JSXOpeningElement') {
+          // e.g. <item.before />
+          if (node.parent.name.type === 'JSXMemberExpression') {
+            return;
+          }
+          // e.g. <div />, <MenuItem />
+          if (node.parent.name.type === 'JSXIdentifier' && !isDOMElementName(node.parent.name.name)) {
+            return;
+          }
         }
-        if (value.expression.type === 'JSXEmptyExpression') {
-          // e.g. the comment in
-          //      <div css={/* Hello there */} />
-          return;
+        if (name.type === 'JSXIdentifier' && mergedConfig.cssFunctions.includes(name.name)) {
+          // When not a jsx expression. For eg. css=""
+          if ((value === null || value === void 0 ? void 0 : value.type) !== 'JSXExpressionContainer') {
+            context.report({
+              node: node,
+              messageId: mergedConfig.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule'
+            });
+            return;
+          }
+          if (value.expression.type === 'JSXEmptyExpression') {
+            // e.g. the comment in
+            //      <div css={/* Hello there */} />
+            return;
+          }
+          var linter = new JSXExpressionLinter(context, name.name, mergedConfig, value.expression);
+          linter.run();
         }
-        var linter = new JSXExpressionLinter(context, name.name, mergedConfig, value.expression);
-        linter.run();
       }
-    }), _ref3;
+    };
   }
 });
 var _default = exports.default = rule;

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-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
+    };
+  }
+};