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

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.37.3
+
+### Patch Changes
+
+- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116) [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) - Upgrade Typescript from `4.9.5` to `5.4.2`
+
+## 8.37.2
+
+### Patch Changes
+
+- [#80662](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80662) [`4833299b00d4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4833299b00d4) - For `no-css-tagged-template-expression` and `no-styled-tagged-template-expression`:
+
+  - When importing from Emotion, stop applying autofixer when the styles contain `!important`.
+  - When importing from any library, stop applying autofixer when a selector contains a tagged template interpolation (previously only styled-components).
+
+- [#81697](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81697) [`cf3483e7e87d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cf3483e7e87d) - Adding a missing `license` entry to the `package.json` for this package. This package was already licensed under `Apache-2.0` (see `LICENSE` file), so this change is not changing it's license.
+
 ## 8.37.1
 
 ### Patch Changes

package/dist/cjs/rules/use-primitives/utils/validate-styles.js

@@ -93,7 +93,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;
   }
@@ -104,7 +103,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 (_transformers.spaceTokenMap[fallback.value] !== token.value) {
       return false;
     }

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

@@ -43,12 +43,11 @@ var createNoTaggedTemplateExpressionRule = exports.createNoTaggedTemplateExpress
         if (!isUsage(node.tag, references, importSources)) {
           return;
         }
-        var isSC = (0, _isSupportedImport.isStyledComponents)(node.tag, references, importSources);
         context.report({
           messageId: messageId,
           node: node,
           fix: /*#__PURE__*/_regenerator.default.mark(function fix(fixer) {
-            var quasi, source, args, oldCode, withoutQuasi, newCode;
+            var quasi, source, args, oldCode, withoutQuasi, newCode, usesEmotion;
             return _regenerator.default.wrap(function fix$(_context) {
               while (1) switch (_context.prev = _context.next) {
                 case 0:
@@ -95,18 +94,28 @@ var createNoTaggedTemplateExpressionRule = exports.createNoTaggedTemplateExpress
                   }
                   return _context.abrupt("return");
                 case 16:
-                  if (!(isSC && /\$\{.*:[\s]*\{/.test(newCode) || /\$\{.*\(.*:[\s]*\{/.test(newCode))) {
-                    _context.next = 18;
+                  // For styles like `position: initial !important`,
+                  // Emotion can give typechecking errors when using object syntax
+                  // due to csstype being overly strict
+                  usesEmotion = (0, _isSupportedImport.isEmotion)(node.tag, references, importSources);
+                  if (!(usesEmotion && !!newCode.match(/!\s*important/gm))) {
+                    _context.next = 19;
                     break;
                   }
                   return _context.abrupt("return");
-                case 18:
-                  _context.next = 20;
+                case 19:
+                  if (!/\$\{.*:[\s]*\{/.test(newCode)) {
+                    _context.next = 21;
+                    break;
+                  }
+                  return _context.abrupt("return");
+                case 21:
+                  _context.next = 23;
                   return fixer.insertTextBefore(node, newCode);
-                case 20:
-                  _context.next = 22;
+                case 23:
+                  _context.next = 25;
                   return fixer.remove(node);
-                case 22:
+                case 25:
                 case "end":
                   return _context.stop();
               }

package/dist/cjs/rules/utils/is-supported-import.js

@@ -121,7 +121,9 @@ var isStyled = exports.isStyled = isSupportedImportWrapper('styled', ['styled-co
 var isImportedFrom = exports.isImportedFrom = function isImportedFrom(moduleName) {
   var exactMatch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   return function (nodeToCheck, referencesInScope, importSources) {
-    if (!importSources.includes(moduleName)) {
+    if (!importSources.some(function (importSource) {
+      return importSource === moduleName || !exactMatch && importSource.startsWith(moduleName);
+    })) {
       // Don't go through the trouble of checking the import sources does not include this
       // We'll assume this is skipped elsewhere.
       return false;

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/utils/create-no-tagged-template-expression-rule/index.js

@@ -1,7 +1,7 @@
 // Original source from Compiled https://github.com/atlassian-labs/compiled/blob/master/packages/eslint-plugin/src/utils/create-no-tagged-template-expression-rule/index.ts
 // eslint-disable-next-line import/no-extraneous-dependencies
 
-import { getImportSources, isStyledComponents } from '../is-supported-import';
+import { getImportSources, isEmotion } from '../is-supported-import';
 import { generate } from './generate';
 import { getTaggedTemplateExpressionOffset } from './get-tagged-template-expression-offset';
 import { toArguments } from './to-arguments';
@@ -35,7 +35,6 @@ export const createNoTaggedTemplateExpressionRule = (isUsage, messageId) => cont
       if (!isUsage(node.tag, references, importSources)) {
         return;
       }
-      const isSC = isStyledComponents(node.tag, references, importSources);
       context.report({
         messageId,
         node,
@@ -77,12 +76,22 @@ export const createNoTaggedTemplateExpressionRule = (isUsage, messageId) => cont
             return;
           }
 
-          // TODO: We might want to similarly disallow `styled.div({ color: props => props.color })` for SC as it's broken too (both type and functionality)
-          // Alternatively, autofix it to `styled.div(props => ({ color: props.color }))`?
-          if (isSC && /\$\{.*:[\s]*\{/.test(newCode) || /\$\{.*\(.*:[\s]*\{/.test(newCode)) {
+          // For styles like `position: initial !important`,
+          // Emotion can give typechecking errors when using object syntax
+          // due to csstype being overly strict
+          const usesEmotion = isEmotion(node.tag, references, importSources);
+          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 we find a variable in a selector when migrating `styled-components` code, we skip it.
-             * This is because `styled-components@3.x` does not support the syntax.
+             * If we find a variable in a selector, 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 an function call is actually a selector, and not a CSS block (see the third example).
              *
              * @examples
              * ```tsx
@@ -90,11 +99,21 @@ export const createNoTaggedTemplateExpressionRule = (isUsage, messageId) => cont
              *   & + ${Button} { color: red; }
              * `;
              * ```
-             *```tsx
+             *
+             * ```tsx
              * const Component = styled.div`
              *   ${mixin()} button { color: red; }
              * `;
              * ```
+             *
+             * ```tsx
+             * const styles = `&:active { color: blue; }`;
+             * const Component = styled.div`
+             *   ${styles} &:hover {
+             *     color: red;
+             *   }
+             * `;
+             * ```
              */
             return;
           }

package/dist/es2019/rules/utils/is-supported-import.js

@@ -110,7 +110,7 @@ export const isKeyframes = isSupportedImportWrapper('keyframes');
 // `styled` is also the explicit default of `styled-components` and `@emotion/styled`, so we also match on default imports generally
 export const isStyled = isSupportedImportWrapper('styled', ['styled-components', '@emotion/styled']);
 export const isImportedFrom = (moduleName, exactMatch = true) => (nodeToCheck, referencesInScope, importSources) => {
-  if (!importSources.includes(moduleName)) {
+  if (!importSources.some(importSource => importSource === moduleName || !exactMatch && importSource.startsWith(moduleName))) {
     // Don't go through the trouble of checking the import sources does not include this
     // We'll assume this is skipped elsewhere.
     return false;

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/utils/create-no-tagged-template-expression-rule/index.js

@@ -2,7 +2,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 // Original source from Compiled https://github.com/atlassian-labs/compiled/blob/master/packages/eslint-plugin/src/utils/create-no-tagged-template-expression-rule/index.ts
 // eslint-disable-next-line import/no-extraneous-dependencies
 
-import { getImportSources, isStyledComponents } from '../is-supported-import';
+import { getImportSources, isEmotion } from '../is-supported-import';
 import { generate } from './generate';
 import { getTaggedTemplateExpressionOffset } from './get-tagged-template-expression-offset';
 import { toArguments } from './to-arguments';
@@ -36,12 +36,11 @@ export var createNoTaggedTemplateExpressionRule = function createNoTaggedTemplat
         if (!isUsage(node.tag, references, importSources)) {
           return;
         }
-        var isSC = isStyledComponents(node.tag, references, importSources);
         context.report({
           messageId: messageId,
           node: node,
           fix: /*#__PURE__*/_regeneratorRuntime.mark(function fix(fixer) {
-            var quasi, source, args, oldCode, withoutQuasi, newCode;
+            var quasi, source, args, oldCode, withoutQuasi, newCode, usesEmotion;
             return _regeneratorRuntime.wrap(function fix$(_context) {
               while (1) switch (_context.prev = _context.next) {
                 case 0:
@@ -88,18 +87,28 @@ export var createNoTaggedTemplateExpressionRule = function createNoTaggedTemplat
                   }
                   return _context.abrupt("return");
                 case 16:
-                  if (!(isSC && /\$\{.*:[\s]*\{/.test(newCode) || /\$\{.*\(.*:[\s]*\{/.test(newCode))) {
-                    _context.next = 18;
+                  // For styles like `position: initial !important`,
+                  // Emotion can give typechecking errors when using object syntax
+                  // due to csstype being overly strict
+                  usesEmotion = isEmotion(node.tag, references, importSources);
+                  if (!(usesEmotion && !!newCode.match(/!\s*important/gm))) {
+                    _context.next = 19;
                     break;
                   }
                   return _context.abrupt("return");
-                case 18:
-                  _context.next = 20;
+                case 19:
+                  if (!/\$\{.*:[\s]*\{/.test(newCode)) {
+                    _context.next = 21;
+                    break;
+                  }
+                  return _context.abrupt("return");
+                case 21:
+                  _context.next = 23;
                   return fixer.insertTextBefore(node, newCode);
-                case 20:
-                  _context.next = 22;
+                case 23:
+                  _context.next = 25;
                   return fixer.remove(node);
-                case 22:
+                case 25:
                 case "end":
                   return _context.stop();
               }

package/dist/esm/rules/utils/is-supported-import.js

@@ -115,7 +115,9 @@ export var isStyled = isSupportedImportWrapper('styled', ['styled-components', '
 export var isImportedFrom = function isImportedFrom(moduleName) {
   var exactMatch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   return function (nodeToCheck, referencesInScope, importSources) {
-    if (!importSources.includes(moduleName)) {
+    if (!importSources.some(function (importSource) {
+      return importSource === moduleName || !exactMatch && importSource.startsWith(moduleName);
+    })) {
       // Don't go through the trouble of checking the import sources does not include this
       // We'll assume this is skipped elsewhere.
       return false;

package/dist/types/rules/index.codegen.d.ts

@@ -5,13 +5,13 @@ declare const _default: {
     'icon-label': import("eslint").Rule.RuleModule;
     'no-banned-imports': import("eslint").Rule.RuleModule;
     'no-css-tagged-template-expression': import("eslint").Rule.RuleModule;
-    'no-deprecated-apis': import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleModule<string, [{
+    'no-deprecated-apis': import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<string, [{
         deprecatedConfig: import("./utils/types").DeprecatedConfig;
-    }], import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleListener>;
+    }], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
     'no-deprecated-design-token-usage': import("eslint").Rule.RuleModule;
-    'no-deprecated-imports': import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleModule<string, [{
+    'no-deprecated-imports': import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<string, [{
         deprecatedConfig: import("./utils/types").DeprecatedConfig;
-    }], import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleListener>;
+    }], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
     'no-empty-styled-expression': import("eslint").Rule.RuleModule;
     'no-exported-css': import("eslint").Rule.RuleModule;
     'no-exported-keyframes': import("eslint").Rule.RuleModule;

package/dist/types/rules/use-visually-hidden/constants.d.ts

@@ -1,3 +1,3 @@
 export declare const IMPORT_NAME = "AKVisuallyHidden";
 export declare const VISUALLY_HIDDEN_SOURCE = "@atlaskit/visually-hidden";
-export declare const VISUALLY_HIDDEN_IMPORT: string;
+export declare const VISUALLY_HIDDEN_IMPORT = "import AKVisuallyHidden from '@atlaskit/visually-hidden';\n";

package/dist/types/rules/utils/create-rule.d.ts

@@ -9,7 +9,7 @@ import type { Rule } from 'eslint';
  * @private
  * @deprecated
  */
-export declare const createRule: <TOptions extends readonly unknown[], TMessageIds extends string, TRuleListener extends import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleListener = import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleListener>({ name, meta, ...rule }: Readonly<ESLintUtils.RuleWithMetaAndName<TOptions, TMessageIds, TRuleListener>>) => import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleModule<TMessageIds, TOptions, TRuleListener>;
+export declare const createRule: <TOptions extends readonly unknown[], TMessageIds extends string, TRuleListener extends import("@typescript-eslint/utils/dist/ts-eslint").RuleListener = import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>({ name, meta, ...rule }: Readonly<ESLintUtils.RuleWithMetaAndName<TOptions, TMessageIds, TRuleListener>>) => import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<TMessageIds, TOptions, TRuleListener>;
 export interface LintRule extends Omit<Rule.RuleModule, 'meta'> {
     /**
      * Including this for backwards compat moving from the typescript-eslint util.

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

@@ -5,17 +5,17 @@ declare const _default: {
     'icon-label': import("eslint").Rule.RuleModule;
     'no-banned-imports': import("eslint").Rule.RuleModule;
     'no-css-tagged-template-expression': import("eslint").Rule.RuleModule;
-    'no-deprecated-apis': import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleModule<string, [
+    'no-deprecated-apis': import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<string, [
         {
             deprecatedConfig: import("./utils/types").DeprecatedConfig;
         }
-    ], import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleListener>;
+    ], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
     'no-deprecated-design-token-usage': import("eslint").Rule.RuleModule;
-    'no-deprecated-imports': import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleModule<string, [
+    'no-deprecated-imports': import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<string, [
         {
             deprecatedConfig: import("./utils/types").DeprecatedConfig;
         }
-    ], import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleListener>;
+    ], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
     'no-empty-styled-expression': import("eslint").Rule.RuleModule;
     'no-exported-css': import("eslint").Rule.RuleModule;
     'no-exported-keyframes': import("eslint").Rule.RuleModule;

package/dist/types-ts4.5/rules/use-visually-hidden/constants.d.ts

@@ -1,3 +1,3 @@
 export declare const IMPORT_NAME = "AKVisuallyHidden";
 export declare const VISUALLY_HIDDEN_SOURCE = "@atlaskit/visually-hidden";
-export declare const VISUALLY_HIDDEN_IMPORT: string;
+export declare const VISUALLY_HIDDEN_IMPORT = "import AKVisuallyHidden from '@atlaskit/visually-hidden';\n";

package/dist/types-ts4.5/rules/utils/create-rule.d.ts

@@ -9,7 +9,7 @@ import type { Rule } from 'eslint';
  * @private
  * @deprecated
  */
-export declare const createRule: <TOptions extends readonly unknown[], TMessageIds extends string, TRuleListener extends import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleListener = import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleListener>({ name, meta, ...rule }: Readonly<ESLintUtils.RuleWithMetaAndName<TOptions, TMessageIds, TRuleListener>>) => import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleModule<TMessageIds, TOptions, TRuleListener>;
+export declare const createRule: <TOptions extends readonly unknown[], TMessageIds extends string, TRuleListener extends import("@typescript-eslint/utils/dist/ts-eslint").RuleListener = import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>({ name, meta, ...rule }: Readonly<ESLintUtils.RuleWithMetaAndName<TOptions, TMessageIds, TRuleListener>>) => import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<TMessageIds, TOptions, TRuleListener>;
 export interface LintRule extends Omit<Rule.RuleModule, 'meta'> {
     /**
      * Including this for backwards compat moving from the typescript-eslint util.

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@atlaskit/eslint-plugin-design-system",
   "description": "The essential plugin for use with the Atlassian Design System.",
-  "version": "8.37.1",
+  "version": "8.37.3",
   "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -63,7 +64,7 @@
     "ts-jest": "26.5.6",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "~4.9.5"
+    "typescript": "~5.4.2"
   },
   "scripts": {
     "ak-postbuild": "cp -r configs dist",
@@ -86,4 +87,4 @@
   },
   "homepage": "https://atlassian.design/components/eslint-plugin-design-system",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}