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

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-primitives/utils/validate-styles.js

@@ -86,7 +86,6 @@ const isTokenCall = node => {
     return false;
   }
   const token = ast.FunctionCall.getArgumentAtPos(node, 0);
-  const fallback = ast.FunctionCall.getArgumentAtPos(node, 1);
   if (!token || token.type !== 'Literal') {
     return false;
   }
@@ -97,7 +96,17 @@ const 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) {
+    const 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 (spaceTokenMap[fallback.value] !== token.value) {
       return false;
     }

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

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

@@ -0,0 +1,152 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-16054
+const 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',
+  [-2]: 'space.negative.025',
+  [-4]: 'space.negative.050',
+  [-6]: 'space.negative.075',
+  [-8]: 'space.negative.100',
+  [-12]: 'space.negative.150',
+  [-16]: 'space.negative.200',
+  [-20]: 'space.negative.250',
+  [-24]: 'space.negative.300',
+  [-32]: 'space.negative.400',
+  // '0px': 'space.0', // Don't map 0 to match the implementation of `ensure-design-token-usage`
+  '2px': 'space.025',
+  '4px': 'space.050',
+  '6px': 'space.075',
+  '8px': 'space.100',
+  '12px': 'space.150',
+  '16px': 'space.200',
+  '20px': 'space.250',
+  '24px': 'space.300',
+  '32px': 'space.400',
+  '40px': 'space.500',
+  '48px': 'space.600',
+  '64px': 'space.800',
+  '80px': 'space.1000',
+  // 0: 'space.0', // Don't map 0 to match the implementation of `ensure-design-token-usage`
+  2: 'space.025',
+  4: 'space.050',
+  6: 'space.075',
+  8: 'space.100',
+  12: 'space.150',
+  16: 'space.200',
+  20: 'space.250',
+  24: 'space.300',
+  32: 'space.400',
+  40: 'space.500',
+  48: 'space.600',
+  64: 'space.800',
+  80: 'space.1000',
+  '-0.125rem': 'space.negative.025',
+  '-0.25rem': 'space.negative.050',
+  '-0.375rem': 'space.negative.075',
+  '-0.5rem': 'space.negative.100',
+  '-0.75rem': 'space.negative.150',
+  '-1rem': 'space.negative.200',
+  '-1.25rem': 'space.negative.250',
+  '-1.5rem': 'space.negative.300',
+  '-2rem': 'space.negative.400',
+  '0.125rem': 'space.025',
+  '0.25rem': 'space.050',
+  '0.375rem': 'space.075',
+  '0.5rem': 'space.100',
+  '0.75rem': 'space.150',
+  '1rem': 'space.200',
+  '1.25rem': 'space.250',
+  '1.5rem': 'space.300',
+  '2rem': 'space.400',
+  '2.5rem': 'space.500',
+  '3rem': 'space.600',
+  '4rem': 'space.800',
+  '5rem': 'space.1000',
+  '-0.125em': 'space.negative.025',
+  '-0.25em': 'space.negative.050',
+  '-0.375em': 'space.negative.075',
+  '-0.5em': 'space.negative.100',
+  '-0.75em': 'space.negative.150',
+  '-1em': 'space.negative.200',
+  '-1.25em': 'space.negative.250',
+  '-1.5em': 'space.negative.300',
+  '-2em': 'space.negative.400',
+  '0.125em': 'space.025',
+  '0.25em': 'space.050',
+  '0.375em': 'space.075',
+  '0.5em': 'space.100',
+  '0.75em': 'space.150',
+  '1em': 'space.200',
+  '1.25em': 'space.250',
+  '1.5em': 'space.300',
+  '2em': 'space.400',
+  '2.5em': 'space.500',
+  '3em': 'space.600',
+  '4em': 'space.800',
+  '5em': 'space.1000'
+};
+export const 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/es2019/rules/use-tokens-space/transformers/style-property/supported.js

@@ -0,0 +1,8 @@
+export 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/es2019/rules/use-tokens-space/transformers/style-property/upsert-import-declaration.js

@@ -0,0 +1,30 @@
+import * as ast from '../../../../ast-nodes';
+
+/**
+ * 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.
+ */
+export const upsertImportDeclaration = ({
+  module,
+  specifiers
+}, context, fixer) => {
+  // Find any imports that match the packageName
+  const root = context.getSourceCode().ast.body;
+  const 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,
+      specifiers
+    }, fixer);
+  }
+
+  // The import exists so, modify the existing one
+  return ast.Import.insertNamedSpecifiers(importDeclarations[0], specifiers, fixer);
+};

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

@@ -0,0 +1 @@
+export { isStringOrNumber } from './is-string-or-number';

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

@@ -0,0 +1,3 @@
+export const isStringOrNumber = value => {
+  return typeof value === 'string' || typeof value === 'number';
+};

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

@@ -1,5 +1,40 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
 import { isNodeOfType } from 'eslint-codemod-utils';
-var ObjectEntry = {
+export var ObjectEntry = {
+  getProperty: function 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: function 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: function 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 @@ var ObjectEntry = {
       return node.key.name;
     }
   }
-};
-export { ObjectEntry };
+};

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

@@ -99,6 +99,18 @@ var ASTObjectExpression = {
       key: identifier(key),
       value: 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 (!isNodeOfType(entry, 'Property')) {
+        return;
+      }
+      if (isNodeOfType(entry.value, 'ObjectExpression')) {
+        ASTObjectExpression.recurse(entry.value, callback);
+      }
+    });
   }
 };
 export { ASTObjectExpression as Object };

package/dist/esm/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/esm/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/esm/rules/use-primitives/utils/validate-styles.js

@@ -84,7 +84,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;
   }
@@ -95,7 +94,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 (spaceTokenMap[fallback.value] !== token.value) {
       return false;
     }

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

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

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

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