@atlaskit/eslint-plugin-design-system 9.1.0 → 9.2.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 9.2.1
+
+### Patch Changes
+
+- [#85899](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/85899) [`4ee3baaad3b7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4ee3baaad3b7) - Loosen our final autofix check to just ignore all interpolated keys or properties in general for all `no-*-tagged-template-expression` rules as they may result in broken code in some edge-cases.
+
+## 9.2.0
+
+### Minor Changes
+
+- [#84330](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84330) [`391be0d8e414`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/391be0d8e414) - - `prefer-primitives`: This rule is now deprecated. Please use `use-primitives` instead.
+  - `ensure-design-token-usage/preview`: This rule is now deprecated. Please use `use-tokens-space` instead.
+
 ## 9.1.0
 
 ### Minor Changes

package/dist/cjs/rules/ensure-design-token-usage-preview/index.js

@@ -6,25 +6,31 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _ensureDesignTokenUsage = require("../ensure-design-token-usage");
 var _ruleMeta = _interopRequireDefault(require("../ensure-design-token-usage/rule-meta"));
 var _createRule = require("../utils/create-rule");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var defaultConfig = {
-  domains: ['spacing'],
-  applyImport: true,
-  shouldEnforceFallbacks: false
-};
 var rule = (0, _createRule.createLintRule)({
   meta: _objectSpread(_objectSpread({}, _ruleMeta.default), {}, {
     name: 'ensure-design-token-usage/preview',
+    deprecated: true,
+    replacedBy: ['@atlaskit/design-system/use-tokens-space'],
     docs: _objectSpread(_objectSpread({}, _ruleMeta.default.docs), {}, {
       description: 'Enforces usage of pre-release design tokens rather than hard-coded values.',
       recommended: false,
       severity: 'warn'
     })
   }),
-  create: (0, _ensureDesignTokenUsage.createWithConfig)(defaultConfig)
+  create: function create() {
+    /**
+     * We can't just outright delete the ESLint rule, since:
+     * ```
+     * // eslint-disable @eslint-plugin/design-system/ensure-design-token-usage/preview
+     * ```
+     * will cause CI to fail if the rule definition doesn't exist. So, instead
+     * we can change the implementation of the rule so that it never reports.
+     */
+    return {};
+  }
 });
 var _default = exports.default = rule;

package/dist/cjs/rules/prefer-primitives/index.js

@@ -4,17 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _createRule = require("../utils/create-rule");
-var _utils = require("./utils");
-// eslint-disable-next-line import/no-extraneous-dependencies
-
 var primitiveDocsUrl = 'https://go.atlassian.com/dst-prefer-primitives';
 var rule = (0, _createRule.createLintRule)({
   meta: {
     name: 'prefer-primitives',
     type: 'suggestion',
     hasSuggestions: false,
+    deprecated: true,
+    replacedBy: ['@atlaskit/design-system/use-primitives'],
     docs: {
       description: 'Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule.',
       recommended: false,
@@ -24,84 +22,16 @@ var rule = (0, _createRule.createLintRule)({
       preferPrimitives: "This \"{{element}}\" may be able to be replaced with a primitive component. See ".concat(primitiveDocsUrl, " for guidance.")
     }
   },
-  create: function create(context) {
-    return {
-      // Look for HTML elements - <div>, <span>
-      // Look for styled calls/templates - styled.div(...), styled.span`...`
-      JSXOpeningElement: function JSXOpeningElement(node) {
-        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXOpeningElement')) {
-          return;
-        }
-        if (!(0, _eslintCodemodUtils.isNodeOfType)(node.name, 'JSXIdentifier')) {
-          return;
-        }
-        var suggest = (0, _utils.shouldSuggest)(node === null || node === void 0 ? void 0 : node.parent);
-        if (suggest) {
-          context.report({
-            node: node,
-            messageId: 'preferPrimitives',
-            data: {
-              element: node.name.name
-            }
-          });
-        }
-      },
-      // styled.x`` | styled2.x`` | styled.div()
-      'MemberExpression[object.name="styled"],MemberExpression[object.name="styled2"]': function MemberExpressionObjectNameStyledMemberExpressionObjectNameStyled2(node) {
-        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'MemberExpression')) {
-          return;
-        }
-
-        // styled.div``
-        if ((0, _eslintCodemodUtils.isNodeOfType)(node.property, 'Identifier')) {
-          if (_utils.validPrimitiveElements.has(node.property.name)) {
-            var styledIdentifier = node.object.name;
-            var elementName = node.property.name;
-
-            // Including the `styled.` portion in the message to help makers understand it's not just the `div` element that should be replaced
-            var reportName = "".concat(styledIdentifier, ".").concat(elementName); // styled.div
-
-            context.report({
-              node: node,
-              messageId: 'preferPrimitives',
-              data: {
-                element: reportName
-              }
-            });
-          }
-        }
-      },
-      // styled(X)``
-      'CallExpression[callee.name="styled"]': function CallExpressionCalleeNameStyled(node) {
-        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression')) {
-          return;
-        }
-
-        // styled('div')`` - We only care about 'div'/'span', ignore extending other components
-        if ((0, _eslintCodemodUtils.isNodeOfType)(node.arguments[0], 'Literal')) {
-          var argValue = node.arguments[0].raw;
-          if (typeof argValue === 'string') {
-            var suggest = _utils.validPrimitiveElements.has(argValue.replaceAll("'", '') // argValue will have '' around the element name, strip it out for this test
-            );
-            if (suggest) {
-              var styledIdentifier = node.callee.name;
-              var elementName = argValue;
-
-              // Including the `styled()` portion in the message to help makers understand it's not just the `div` element that should be replaced
-              var reportName = "".concat(styledIdentifier, "(").concat(elementName, ")"); // styled('div')
-
-              context.report({
-                node: node,
-                messageId: 'preferPrimitives',
-                data: {
-                  element: reportName
-                }
-              });
-            }
-          }
-        }
-      }
-    };
+  create: function create() {
+    /**
+     * We can't just outright delete the ESLint rule, since:
+     * ```
+     * // eslint-disable @eslint-plugin/design-system/prefer-primitives
+     * ```
+     * will cause CI to fail if the rule definition doesn't exist. So, instead
+     * we can change the implementation of the rule so that it never reports.
+     */
+    return {};
   }
 });
 var _default = exports.default = rule;

package/dist/cjs/rules/utils/create-no-tagged-template-expression-rule/index.js

@@ -104,7 +104,7 @@ var createNoTaggedTemplateExpressionRule = exports.createNoTaggedTemplateExpress
                   }
                   return _context.abrupt("return");
                 case 19:
-                  if (!/\$\{.*:[\s]*\{/.test(newCode)) {
+                  if (!/\$\{.*:/.test(newCode)) {
                     _context.next = 21;
                     break;
                   }

package/dist/es2019/rules/ensure-design-token-usage-preview/index.js

@@ -1,15 +1,11 @@
-import { createWithConfig } from '../ensure-design-token-usage';
 import ruleMeta from '../ensure-design-token-usage/rule-meta';
 import { createLintRule } from '../utils/create-rule';
-const defaultConfig = {
-  domains: ['spacing'],
-  applyImport: true,
-  shouldEnforceFallbacks: false
-};
 const rule = createLintRule({
   meta: {
     ...ruleMeta,
     name: 'ensure-design-token-usage/preview',
+    deprecated: true,
+    replacedBy: ['@atlaskit/design-system/use-tokens-space'],
     docs: {
       ...ruleMeta.docs,
       description: 'Enforces usage of pre-release design tokens rather than hard-coded values.',
@@ -17,6 +13,16 @@ const rule = createLintRule({
       severity: 'warn'
     }
   },
-  create: createWithConfig(defaultConfig)
+  create() {
+    /**
+     * We can't just outright delete the ESLint rule, since:
+     * ```
+     * // eslint-disable @eslint-plugin/design-system/ensure-design-token-usage/preview
+     * ```
+     * will cause CI to fail if the rule definition doesn't exist. So, instead
+     * we can change the implementation of the rule so that it never reports.
+     */
+    return {};
+  }
 });
 export default rule;

package/dist/es2019/rules/prefer-primitives/index.js

@@ -1,14 +1,12 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-
-import { isNodeOfType } from 'eslint-codemod-utils';
 import { createLintRule } from '../utils/create-rule';
-import { shouldSuggest, validPrimitiveElements } from './utils';
 const primitiveDocsUrl = 'https://go.atlassian.com/dst-prefer-primitives';
 const rule = createLintRule({
   meta: {
     name: 'prefer-primitives',
     type: 'suggestion',
     hasSuggestions: false,
+    deprecated: true,
+    replacedBy: ['@atlaskit/design-system/use-primitives'],
     docs: {
       description: 'Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule.',
       recommended: false,
@@ -18,85 +16,16 @@ const rule = createLintRule({
       preferPrimitives: `This "{{element}}" may be able to be replaced with a primitive component. See ${primitiveDocsUrl} for guidance.`
     }
   },
-  create(context) {
-    return {
-      // Look for HTML elements - <div>, <span>
-      // Look for styled calls/templates - styled.div(...), styled.span`...`
-
-      JSXOpeningElement(node) {
-        if (!isNodeOfType(node, 'JSXOpeningElement')) {
-          return;
-        }
-        if (!isNodeOfType(node.name, 'JSXIdentifier')) {
-          return;
-        }
-        const suggest = shouldSuggest(node === null || node === void 0 ? void 0 : node.parent);
-        if (suggest) {
-          context.report({
-            node: node,
-            messageId: 'preferPrimitives',
-            data: {
-              element: node.name.name
-            }
-          });
-        }
-      },
-      // styled.x`` | styled2.x`` | styled.div()
-      'MemberExpression[object.name="styled"],MemberExpression[object.name="styled2"]': node => {
-        if (!isNodeOfType(node, 'MemberExpression')) {
-          return;
-        }
-
-        // styled.div``
-        if (isNodeOfType(node.property, 'Identifier')) {
-          if (validPrimitiveElements.has(node.property.name)) {
-            const styledIdentifier = node.object.name;
-            const elementName = node.property.name;
-
-            // Including the `styled.` portion in the message to help makers understand it's not just the `div` element that should be replaced
-            const reportName = `${styledIdentifier}.${elementName}`; // styled.div
-
-            context.report({
-              node: node,
-              messageId: 'preferPrimitives',
-              data: {
-                element: reportName
-              }
-            });
-          }
-        }
-      },
-      // styled(X)``
-      'CallExpression[callee.name="styled"]': node => {
-        if (!isNodeOfType(node, 'CallExpression')) {
-          return;
-        }
-
-        // styled('div')`` - We only care about 'div'/'span', ignore extending other components
-        if (isNodeOfType(node.arguments[0], 'Literal')) {
-          const argValue = node.arguments[0].raw;
-          if (typeof argValue === 'string') {
-            const suggest = validPrimitiveElements.has(argValue.replaceAll(`'`, '') // argValue will have '' around the element name, strip it out for this test
-            );
-            if (suggest) {
-              const styledIdentifier = node.callee.name;
-              const elementName = argValue;
-
-              // Including the `styled()` portion in the message to help makers understand it's not just the `div` element that should be replaced
-              const reportName = `${styledIdentifier}(${elementName})`; // styled('div')
-
-              context.report({
-                node: node,
-                messageId: 'preferPrimitives',
-                data: {
-                  element: reportName
-                }
-              });
-            }
-          }
-        }
-      }
-    };
+  create() {
+    /**
+     * We can't just outright delete the ESLint rule, since:
+     * ```
+     * // eslint-disable @eslint-plugin/design-system/prefer-primitives
+     * ```
+     * will cause CI to fail if the rule definition doesn't exist. So, instead
+     * we can change the implementation of the rule so that it never reports.
+     */
+    return {};
   }
 });
 export default rule;

package/dist/es2019/rules/utils/create-no-tagged-template-expression-rule/index.js

@@ -83,15 +83,14 @@ export const createNoTaggedTemplateExpressionRule = (isUsage, messageId) => cont
           if (usesEmotion && !!newCode.match(/!\s*important/gm)) {
             return;
           }
-
-          // For styled-components, we might also want to similarly disallow or autofix `styled.div({ color: props => props.color })` as it's broken too (both type and functionality). This is tracked in https://product-fabric.atlassian.net/browse/USS-26.
-          if (/\$\{.*:[\s]*\{/.test(newCode)) {
+          if (/\$\{.*:/.test(newCode)) {
             /**
-             * If we find a variable in a selector, we skip it. There are two reasons:
-             *
+             * If we find a variable in a property at all, we skip it. There are two reasons:
              * - `styled-components@3.x` does not support variables in a selector (see the first example).
+             * - We cannot guarantee that the contents of a mixin will ever be valid as a property or selector (which in tagged template expressions don't have to even be called).
+             * - It's not uncommon we just get this parsing wrong altogether…
              *
-             * - We cannot guarantee that the contents of an function call is actually a selector, and not a CSS block (see the third example).
+             * // TODO: In this case, we _might_ want to convert this into a suggestion to support manual remediation, some of those code isn't bad, or it can be manually made safe…
              *
              * @examples
              * ```tsx
@@ -103,6 +102,7 @@ export const createNoTaggedTemplateExpressionRule = (isUsage, messageId) => cont
              * ```tsx
              * const Component = styled.div`
              *   ${mixin()} button { color: red; }
+             *   ${mixin} button { color: red; }
              * `;
              * ```
              *

package/dist/esm/rules/ensure-design-token-usage-preview/index.js

@@ -1,23 +1,29 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { createWithConfig } from '../ensure-design-token-usage';
 import ruleMeta from '../ensure-design-token-usage/rule-meta';
 import { createLintRule } from '../utils/create-rule';
-var defaultConfig = {
-  domains: ['spacing'],
-  applyImport: true,
-  shouldEnforceFallbacks: false
-};
 var rule = createLintRule({
   meta: _objectSpread(_objectSpread({}, ruleMeta), {}, {
     name: 'ensure-design-token-usage/preview',
+    deprecated: true,
+    replacedBy: ['@atlaskit/design-system/use-tokens-space'],
     docs: _objectSpread(_objectSpread({}, ruleMeta.docs), {}, {
       description: 'Enforces usage of pre-release design tokens rather than hard-coded values.',
       recommended: false,
       severity: 'warn'
     })
   }),
-  create: createWithConfig(defaultConfig)
+  create: function create() {
+    /**
+     * We can't just outright delete the ESLint rule, since:
+     * ```
+     * // eslint-disable @eslint-plugin/design-system/ensure-design-token-usage/preview
+     * ```
+     * will cause CI to fail if the rule definition doesn't exist. So, instead
+     * we can change the implementation of the rule so that it never reports.
+     */
+    return {};
+  }
 });
 export default rule;

package/dist/esm/rules/prefer-primitives/index.js

@@ -1,14 +1,12 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-
-import { isNodeOfType } from 'eslint-codemod-utils';
 import { createLintRule } from '../utils/create-rule';
-import { shouldSuggest, validPrimitiveElements } from './utils';
 var primitiveDocsUrl = 'https://go.atlassian.com/dst-prefer-primitives';
 var rule = createLintRule({
   meta: {
     name: 'prefer-primitives',
     type: 'suggestion',
     hasSuggestions: false,
+    deprecated: true,
+    replacedBy: ['@atlaskit/design-system/use-primitives'],
     docs: {
       description: 'Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule.',
       recommended: false,
@@ -18,84 +16,16 @@ var rule = createLintRule({
       preferPrimitives: "This \"{{element}}\" may be able to be replaced with a primitive component. See ".concat(primitiveDocsUrl, " for guidance.")
     }
   },
-  create: function create(context) {
-    return {
-      // Look for HTML elements - <div>, <span>
-      // Look for styled calls/templates - styled.div(...), styled.span`...`
-      JSXOpeningElement: function JSXOpeningElement(node) {
-        if (!isNodeOfType(node, 'JSXOpeningElement')) {
-          return;
-        }
-        if (!isNodeOfType(node.name, 'JSXIdentifier')) {
-          return;
-        }
-        var suggest = shouldSuggest(node === null || node === void 0 ? void 0 : node.parent);
-        if (suggest) {
-          context.report({
-            node: node,
-            messageId: 'preferPrimitives',
-            data: {
-              element: node.name.name
-            }
-          });
-        }
-      },
-      // styled.x`` | styled2.x`` | styled.div()
-      'MemberExpression[object.name="styled"],MemberExpression[object.name="styled2"]': function MemberExpressionObjectNameStyledMemberExpressionObjectNameStyled2(node) {
-        if (!isNodeOfType(node, 'MemberExpression')) {
-          return;
-        }
-
-        // styled.div``
-        if (isNodeOfType(node.property, 'Identifier')) {
-          if (validPrimitiveElements.has(node.property.name)) {
-            var styledIdentifier = node.object.name;
-            var elementName = node.property.name;
-
-            // Including the `styled.` portion in the message to help makers understand it's not just the `div` element that should be replaced
-            var reportName = "".concat(styledIdentifier, ".").concat(elementName); // styled.div
-
-            context.report({
-              node: node,
-              messageId: 'preferPrimitives',
-              data: {
-                element: reportName
-              }
-            });
-          }
-        }
-      },
-      // styled(X)``
-      'CallExpression[callee.name="styled"]': function CallExpressionCalleeNameStyled(node) {
-        if (!isNodeOfType(node, 'CallExpression')) {
-          return;
-        }
-
-        // styled('div')`` - We only care about 'div'/'span', ignore extending other components
-        if (isNodeOfType(node.arguments[0], 'Literal')) {
-          var argValue = node.arguments[0].raw;
-          if (typeof argValue === 'string') {
-            var suggest = validPrimitiveElements.has(argValue.replaceAll("'", '') // argValue will have '' around the element name, strip it out for this test
-            );
-            if (suggest) {
-              var styledIdentifier = node.callee.name;
-              var elementName = argValue;
-
-              // Including the `styled()` portion in the message to help makers understand it's not just the `div` element that should be replaced
-              var reportName = "".concat(styledIdentifier, "(").concat(elementName, ")"); // styled('div')
-
-              context.report({
-                node: node,
-                messageId: 'preferPrimitives',
-                data: {
-                  element: reportName
-                }
-              });
-            }
-          }
-        }
-      }
-    };
+  create: function create() {
+    /**
+     * We can't just outright delete the ESLint rule, since:
+     * ```
+     * // eslint-disable @eslint-plugin/design-system/prefer-primitives
+     * ```
+     * will cause CI to fail if the rule definition doesn't exist. So, instead
+     * we can change the implementation of the rule so that it never reports.
+     */
+    return {};
   }
 });
 export default rule;

package/dist/esm/rules/utils/create-no-tagged-template-expression-rule/index.js

@@ -97,7 +97,7 @@ export var createNoTaggedTemplateExpressionRule = function createNoTaggedTemplat
                   }
                   return _context.abrupt("return");
                 case 19:
-                  if (!/\$\{.*:[\s]*\{/.test(newCode)) {
+                  if (!/\$\{.*:/.test(newCode)) {
                     _context.next = 21;
                     break;
                   }

package/dist/types/rules/prefer-primitives/index.d.ts

@@ -1,3 +1,2 @@
-import type { Rule } from 'eslint';
-declare const rule: Rule.RuleModule;
+declare const rule: import("eslint").Rule.RuleModule;
 export default rule;

package/dist/types-ts4.5/rules/prefer-primitives/index.d.ts

@@ -1,3 +1,2 @@
-import type { Rule } from 'eslint';
-declare const rule: Rule.RuleModule;
+declare const rule: import("eslint").Rule.RuleModule;
 export default rule;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/eslint-plugin-design-system",
   "description": "The essential plugin for use with the Atlassian Design System.",
-  "version": "9.1.0",
+  "version": "9.2.1",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "publishConfig": {