@atlaskit/eslint-plugin-design-system 10.3.0 → 10.4.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 10.4.0
+
+### Minor Changes
+
+-   [#103102](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103102)
+    [`3c920b0719af`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3c920b0719af) -
+    Add `use-latest-xcss-syntax` eslint rule.
+
+## 10.3.1
+
+### Patch Changes
+
+-   [#102908](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102908)
+    [`b08bb74e2894`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b08bb74e2894) -
+    Fixed an issue with the `use-tokens-typography` rule where font weights that were already using
+    a token could break the token matching logic and cause the font weight property to be removed.
+
 ## 10.3.0
 
 ### Minor Changes

package/README.md

@@ -79,6 +79,7 @@ module.exports = {
 | <a href="./src/rules/use-heading/README.md">use-heading</a>                                                                 | Encourage the usage of heading components.                                                                                                                                                                                                                                                                          |             | Yes     | Yes         |
 | <a href="./src/rules/use-heading-level-in-spotlight-card/README.md">use-heading-level-in-spotlight-card</a>                 | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context.                                                                                                                              | Yes         | Yes     |             |
 | <a href="./src/rules/use-href-in-link-item/README.md">use-href-in-link-item</a>                                             | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes         | Yes     | Yes         |
+| <a href="./src/rules/use-latest-xcss-syntax/README.md">use-latest-xcss-syntax</a>                                           | Enforces usage of space design tokens rather than hard-coded values in xcss.                                                                                                                                                                                                                                        | Yes         | Yes     |             |
 | <a href="./src/rules/use-popup-label/README.md">use-popup-label</a>                                                         | Encourages to provide accessible name for Atlassian Design System Popup component.                                                                                                                                                                                                                                  | 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         |

package/constellation/index/usage.mdx

@@ -42,6 +42,7 @@ This plugin contains rules that should be used when working with the
 | <a href="use-heading/usage">use-heading</a>                                                                 | Encourage the usage of heading components.                                                                                                                                                                                                                                                                          |             | Yes     | Yes         |
 | <a href="use-heading-level-in-spotlight-card/usage">use-heading-level-in-spotlight-card</a>                 | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context.                                                                                                                              | Yes         | Yes     |             |
 | <a href="use-href-in-link-item/usage">use-href-in-link-item</a>                                             | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes         | Yes     | Yes         |
+| <a href="use-latest-xcss-syntax/usage">use-latest-xcss-syntax</a>                                           | Enforces usage of space design tokens rather than hard-coded values in xcss.                                                                                                                                                                                                                                        | Yes         | Yes     |             |
 | <a href="use-popup-label/usage">use-popup-label</a>                                                         | Encourages to provide accessible name for Atlassian Design System Popup component.                                                                                                                                                                                                                                  | 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         |

package/constellation/use-latest-xcss-syntax/usage.mdx

@@ -0,0 +1,33 @@
+# use-latest-xcss-syntax
+
+## Description
+
+Soon, non-token values for the following properties will raise TypeScript errors. This rule prevents
+new violations from being written until blockers are resolved.
+
+## Examples
+
+### Incorrect
+
+```jsx
+const someStyles = xcss({
+  margin: '8px';
+          ^^^^^
+})
+```
+
+### Correct
+
+```jsx
+const someStyles = xcss({
+  margin: 'space.100';
+})
+```
+
+See the list of available space tokens on the
+[ADS website](https://atlassian.design/foundations/spacing#space-tokens).
+
+For Atlassians:
+
+-   See [go/xcss-spacing](https://go.atlassian.com/xcss-spacing) for context on why this is
+    happening, and how you can prepare.

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::0be7639a95bf4c9bbfe00154d8193477>>
+ * @codegen <<SignedSource::8453f9be2d12c65323a70743b71f7474>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -42,6 +42,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/use-heading': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
+    '@atlaskit/design-system/use-latest-xcss-syntax': 'warn',
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',

package/dist/cjs/presets/recommended.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::73a3666b244b58cc221eebcda071161d>>
+ * @codegen <<SignedSource::c67c53656bcdaedb72953c8026a01c24>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -32,6 +32,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
+    '@atlaskit/design-system/use-latest-xcss-syntax': 'warn',
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }

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

@@ -35,6 +35,7 @@ var _useDrawerLabel = _interopRequireDefault(require("./use-drawer-label"));
 var _useHeading = _interopRequireDefault(require("./use-heading"));
 var _useHeadingLevelInSpotlightCard = _interopRequireDefault(require("./use-heading-level-in-spotlight-card"));
 var _useHrefInLinkItem = _interopRequireDefault(require("./use-href-in-link-item"));
+var _useLatestXcssSyntax = _interopRequireDefault(require("./use-latest-xcss-syntax"));
 var _usePopupLabel = _interopRequireDefault(require("./use-popup-label"));
 var _usePrimitives = _interopRequireDefault(require("./use-primitives"));
 var _usePrimitivesText = _interopRequireDefault(require("./use-primitives-text"));
@@ -43,7 +44,7 @@ var _useTokensTypography = _interopRequireDefault(require("./use-tokens-typograp
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9b934590b0ff7880e962fa4dd73bdb0b>>
+ * @codegen <<SignedSource::5eacfe26cc2ae11b81dfad5719b90959>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -77,6 +78,7 @@ var _default = exports.default = {
   'use-heading': _useHeading.default,
   'use-heading-level-in-spotlight-card': _useHeadingLevelInSpotlightCard.default,
   'use-href-in-link-item': _useHrefInLinkItem.default,
+  'use-latest-xcss-syntax': _useLatestXcssSyntax.default,
   'use-popup-label': _usePopupLabel.default,
   'use-primitives': _usePrimitives.default,
   'use-primitives-text': _usePrimitivesText.default,

package/dist/cjs/rules/use-latest-xcss-syntax/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.noRawSpacingValues = exports.default = void 0;
+var _createRule = require("../utils/create-rule");
+var _transformers = require("./transformers");
+var noRawSpacingValues = exports.noRawSpacingValues = "Don't use non-token values in padding or margin. There is ongoing work to make this a TypeScript error. Once that happens, you will have to delete/refactor anyway. Atlassians: See https://go.atlassian.com/xcss-spacing for details.";
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'use-latest-xcss-syntax',
+    type: 'problem',
+    fixable: 'code',
+    hasSuggestions: false,
+    docs: {
+      description: 'Enforces usage of space design tokens rather than hard-coded values in xcss.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      noRawSpacingValues: noRawSpacingValues
+    }
+  },
+  create: function create(context) {
+    return {
+      'CallExpression[callee.name="xcss"] ObjectExpression Property': function CallExpressionCalleeNameXcssObjectExpressionProperty(node) {
+        return _transformers.StyleProperty.lint(node, {
+          context: context
+        });
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

package/dist/cjs/rules/use-latest-xcss-syntax/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-latest-xcss-syntax/transformers/style-property/index.js

@@ -0,0 +1,105 @@
+"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 _styleMap = require("./style-map");
+var _supported = _interopRequireDefault(require("./supported"));
+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;
+    var _StyleProperty$_check = StyleProperty._check(node, {
+        context: context
+      }),
+      success = _StyleProperty$_check.success,
+      ref = _StyleProperty$_check.ref;
+    if (!success) {
+      return;
+    }
+    context.report({
+      node: ref,
+      messageId: messageId
+    });
+  },
+  _check: function _check(node, _ref2) {
+    var context = _ref2.context;
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'Property')) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+    var importDeclarations = ast.Root.findImportsByModule(context.sourceCode.ast.body, '@atlaskit/primitives');
+    var isXcssImported = importDeclarations.some(function (importDeclaration) {
+      return ast.Import.containsNamedSpecifier(importDeclaration, 'xcss');
+    });
+    if (!isXcssImported) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+
+    /**
+     * Currently, we support values like:
+     * ```
+     * xcss({
+     *   margin: '8px', // value.type is Literal
+     * })
+     * ```
+     *
+     * More complex code, like:
+     * ```
+     * xcss({
+     *   margin: condition ? 'space.100' : 'space.200',
+     * })
+     * ```
+     * is too difficult to lint
+     */
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node.value, 'Literal')) {
+      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.includes(property)) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+    var value = ast.ObjectEntry.getValue(node);
+    if (typeof value !== 'string') {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+
+    // There are valid values to ignore, such as tokens, or `margin: auto`
+    if (_supported.default.values.ignore.includes(value)) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+    return {
+      success: true,
+      ref: node
+    };
+  }
+};

package/dist/cjs/rules/use-latest-xcss-syntax/transformers/style-property/style-map.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styleMap = void 0;
+var styleMap = exports.styleMap = ['margin-block-end', 'margin-block-start', 'margin-block', 'margin-bottom', 'margin-inline-end', 'margin-inline-start', 'margin-inline', 'margin-left', 'margin-right', 'margin-top', 'padding-block-end', 'padding-block-start', 'padding-block', 'padding-bottom', 'padding-inline-end', 'padding-inline-start', 'padding-inline', 'padding-left', 'padding-right', 'padding-top', 'margin', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginBottom', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'marginLeft', 'marginRight', 'marginTop', 'padding', 'paddingBlock', 'paddingBlockEnd', 'paddingBlockStart', 'paddingBottom', 'paddingInline', 'paddingInlineEnd', 'paddingInlineStart', 'paddingLeft', 'paddingRight', 'paddingTop'];

package/dist/cjs/rules/use-latest-xcss-syntax/transformers/style-property/supported.js

@@ -0,0 +1,13 @@
+"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',
+    // Currently the DST opinion is that 0 is valid. It doesn't need to be converted to `space.0`
+    '0', 'space.negative.025', 'space.negative.050', 'space.negative.075', 'space.negative.100', 'space.negative.150', 'space.negative.200', 'space.negative.250', 'space.negative.300', 'space.negative.400', 'space.025', 'space.050', 'space.075', 'space.100', 'space.150', 'space.200', 'space.250', 'space.300', 'space.400', 'space.500', 'space.600', 'space.800', 'space.1000']
+  }
+};

package/dist/cjs/rules/use-latest-xcss-syntax/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-latest-xcss-syntax/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/use-tokens-typography/transformers/style-object.js

@@ -44,6 +44,17 @@ var StyleObject = exports.StyleObject = {
     var fontWeightNode = _astNodes.Object.getEntryByPropertyName(node, 'fontWeight');
     var fontWeightRaw = fontWeightNode && (0, _utils.getValueForPropertyNode)(fontWeightNode, context);
 
+    // If fontWeightRaw is a token we find the token name and treat it like a raw value for simplicity.
+    // e.g. token('font.weight.bold', '700') ends up as '700' after this if-block.
+    // That way the token matching logic still runs and the font weight declaration can be removed and re-added after the main font token.
+    if (fontWeightRaw && typeof fontWeightRaw === 'string' && fontWeightRaw.includes('font.weight.')) {
+      var _fontWeightRaw$match;
+      var fontWeightTokenSuffix = ((_fontWeightRaw$match = fontWeightRaw.match(/font\.weight\.(\w*)/)) === null || _fontWeightRaw$match === void 0 ? void 0 : _fontWeightRaw$match[1]) || 'regular'; // ${token('font.weight.bold', '700')} -> 'bold'
+      if (Object.keys(_utils2.fontWeightMap).includes(fontWeightTokenSuffix)) {
+        fontWeightRaw = _utils2.fontWeightMap[fontWeightTokenSuffix];
+      }
+    }
+
     // If no fontWeight value exists, default to 400 to avoid matching with a bolder token resulting in a visual change
     var fontWeightValue = fontWeightRaw && (0, _utils.normaliseValue)('fontWeight', fontWeightRaw) || _utils2.defaultFontWeight;
     fontWeightValue = fontWeightValue.length === 3 ? fontWeightValue : _utils2.fontWeightMap[fontWeightValue] || _utils2.defaultFontWeight;

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::0be7639a95bf4c9bbfe00154d8193477>>
+ * @codegen <<SignedSource::8453f9be2d12c65323a70743b71f7474>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -36,6 +36,7 @@ export default {
     '@atlaskit/design-system/use-heading': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
+    '@atlaskit/design-system/use-latest-xcss-syntax': 'warn',
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::73a3666b244b58cc221eebcda071161d>>
+ * @codegen <<SignedSource::c67c53656bcdaedb72953c8026a01c24>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -26,6 +26,7 @@ export default {
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
+    '@atlaskit/design-system/use-latest-xcss-syntax': 'warn',
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }

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::9b934590b0ff7880e962fa4dd73bdb0b>>
+ * @codegen <<SignedSource::5eacfe26cc2ae11b81dfad5719b90959>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -33,6 +33,7 @@ import useDrawerLabel from './use-drawer-label';
 import useHeading from './use-heading';
 import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-card';
 import useHrefInLinkItem from './use-href-in-link-item';
+import useLatestXcssSyntax from './use-latest-xcss-syntax';
 import usePopupLabel from './use-popup-label';
 import usePrimitives from './use-primitives';
 import usePrimitivesText from './use-primitives-text';
@@ -70,6 +71,7 @@ export default {
   'use-heading': useHeading,
   'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,
   'use-href-in-link-item': useHrefInLinkItem,
+  'use-latest-xcss-syntax': useLatestXcssSyntax,
   'use-popup-label': usePopupLabel,
   'use-primitives': usePrimitives,
   'use-primitives-text': usePrimitivesText,

package/dist/es2019/rules/use-latest-xcss-syntax/index.js

@@ -0,0 +1,27 @@
+import { createLintRule } from '../utils/create-rule';
+import { StyleProperty } from './transformers';
+export const noRawSpacingValues = `Don't use non-token values in padding or margin. There is ongoing work to make this a TypeScript error. Once that happens, you will have to delete/refactor anyway. Atlassians: See https://go.atlassian.com/xcss-spacing for details.`;
+const rule = createLintRule({
+  meta: {
+    name: 'use-latest-xcss-syntax',
+    type: 'problem',
+    fixable: 'code',
+    hasSuggestions: false,
+    docs: {
+      description: 'Enforces usage of space design tokens rather than hard-coded values in xcss.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      noRawSpacingValues
+    }
+  },
+  create(context) {
+    return {
+      'CallExpression[callee.name="xcss"] ObjectExpression Property': node => StyleProperty.lint(node, {
+        context
+      })
+    };
+  }
+});
+export default rule;

package/dist/es2019/rules/use-latest-xcss-syntax/transformers/index.js

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

package/dist/es2019/rules/use-latest-xcss-syntax/transformers/style-property/index.js

@@ -0,0 +1,99 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import * as ast from '../../../../ast-nodes';
+import { styleMap } from './style-map';
+import supported from './supported';
+const messageId = 'noRawSpacingValues';
+export const StyleProperty = {
+  lint(node, {
+    context
+  }) {
+    const {
+      success,
+      ref
+    } = StyleProperty._check(node, {
+      context
+    });
+    if (!success) {
+      return;
+    }
+    context.report({
+      node: ref,
+      messageId
+    });
+  },
+  _check(node, {
+    context
+  }) {
+    if (!isNodeOfType(node, 'Property')) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+    const importDeclarations = ast.Root.findImportsByModule(context.sourceCode.ast.body, '@atlaskit/primitives');
+    const isXcssImported = importDeclarations.some(importDeclaration => {
+      return ast.Import.containsNamedSpecifier(importDeclaration, 'xcss');
+    });
+    if (!isXcssImported) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+
+    /**
+     * Currently, we support values like:
+     * ```
+     * xcss({
+     *   margin: '8px', // value.type is Literal
+     * })
+     * ```
+     *
+     * More complex code, like:
+     * ```
+     * xcss({
+     *   margin: condition ? 'space.100' : 'space.200',
+     * })
+     * ```
+     * is too difficult to lint
+     */
+    if (!isNodeOfType(node.value, 'Literal')) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+    const {
+      value: property
+    } = ast.ObjectEntry.getProperty(node);
+
+    // Bail if the property is not `padding`, `margin`, etc
+    if (!property || !styleMap.includes(property)) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+    const value = ast.ObjectEntry.getValue(node);
+    if (typeof value !== 'string') {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+
+    // There are valid values to ignore, such as tokens, or `margin: auto`
+    if (supported.values.ignore.includes(value)) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+    return {
+      success: true,
+      ref: node
+    };
+  }
+};

package/dist/es2019/rules/use-latest-xcss-syntax/transformers/style-property/style-map.js

@@ -0,0 +1 @@
+export const styleMap = ['margin-block-end', 'margin-block-start', 'margin-block', 'margin-bottom', 'margin-inline-end', 'margin-inline-start', 'margin-inline', 'margin-left', 'margin-right', 'margin-top', 'padding-block-end', 'padding-block-start', 'padding-block', 'padding-bottom', 'padding-inline-end', 'padding-inline-start', 'padding-inline', 'padding-left', 'padding-right', 'padding-top', 'margin', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginBottom', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'marginLeft', 'marginRight', 'marginTop', 'padding', 'paddingBlock', 'paddingBlockEnd', 'paddingBlockStart', 'paddingBottom', 'paddingInline', 'paddingInlineEnd', 'paddingInlineStart', 'paddingLeft', 'paddingRight', 'paddingTop'];

package/dist/es2019/rules/use-latest-xcss-syntax/transformers/style-property/supported.js

@@ -0,0 +1,7 @@
+export default {
+  values: {
+    ignore: ['auto', 'initial', 'inherit', 'unset', 'revert', 'revert-layer',
+    // Currently the DST opinion is that 0 is valid. It doesn't need to be converted to `space.0`
+    '0', 'space.negative.025', 'space.negative.050', 'space.negative.075', 'space.negative.100', 'space.negative.150', 'space.negative.200', 'space.negative.250', 'space.negative.300', 'space.negative.400', 'space.025', 'space.050', 'space.075', 'space.100', 'space.150', 'space.200', 'space.250', 'space.300', 'space.400', 'space.500', 'space.600', 'space.800', 'space.1000']
+  }
+};

package/dist/es2019/rules/use-latest-xcss-syntax/utils/index.js

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

package/dist/es2019/rules/use-latest-xcss-syntax/utils/is-string-or-number.js

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

package/dist/es2019/rules/use-tokens-typography/transformers/style-object.js

@@ -40,7 +40,18 @@ export const StyleObject = {
 
     // -- Font weight --
     const fontWeightNode = ASTObject.getEntryByPropertyName(node, 'fontWeight');
-    const fontWeightRaw = fontWeightNode && getValueForPropertyNode(fontWeightNode, context);
+    let fontWeightRaw = fontWeightNode && getValueForPropertyNode(fontWeightNode, context);
+
+    // If fontWeightRaw is a token we find the token name and treat it like a raw value for simplicity.
+    // e.g. token('font.weight.bold', '700') ends up as '700' after this if-block.
+    // That way the token matching logic still runs and the font weight declaration can be removed and re-added after the main font token.
+    if (fontWeightRaw && typeof fontWeightRaw === 'string' && fontWeightRaw.includes('font.weight.')) {
+      var _fontWeightRaw$match;
+      const fontWeightTokenSuffix = ((_fontWeightRaw$match = fontWeightRaw.match(/font\.weight\.(\w*)/)) === null || _fontWeightRaw$match === void 0 ? void 0 : _fontWeightRaw$match[1]) || 'regular'; // ${token('font.weight.bold', '700')} -> 'bold'
+      if (Object.keys(fontWeightMap).includes(fontWeightTokenSuffix)) {
+        fontWeightRaw = fontWeightMap[fontWeightTokenSuffix];
+      }
+    }
 
     // If no fontWeight value exists, default to 400 to avoid matching with a bolder token resulting in a visual change
     let fontWeightValue = fontWeightRaw && normaliseValue('fontWeight', fontWeightRaw) || defaultFontWeight;

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::0be7639a95bf4c9bbfe00154d8193477>>
+ * @codegen <<SignedSource::8453f9be2d12c65323a70743b71f7474>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -36,6 +36,7 @@ export default {
     '@atlaskit/design-system/use-heading': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
+    '@atlaskit/design-system/use-latest-xcss-syntax': 'warn',
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',

package/dist/esm/presets/recommended.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::73a3666b244b58cc221eebcda071161d>>
+ * @codegen <<SignedSource::c67c53656bcdaedb72953c8026a01c24>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -26,6 +26,7 @@ export default {
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
+    '@atlaskit/design-system/use-latest-xcss-syntax': 'warn',
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }