@atlaskit/eslint-plugin-platform 0.13.1 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/eslint-plugin-platform
 
+## 0.14.0
+
+### Minor Changes
+
+- [#173404](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/173404)
+  [`7818ef3312ccd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7818ef3312ccd) -
+  Eslint rule for expand-background-shorthand with token
+
 ## 0.13.1
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -16,5 +16,9 @@
         "../src/**/*.test.*",
         "../src/**/test.*"
     ],
-    "references": []
+    "references": [
+        {
+            "path": "../../../design-system/eslint-utils/afm-cc/tsconfig.json"
+        }
+    ]
 }

package/dist/cjs/index.js

@@ -30,6 +30,7 @@ var _preferFg = _interopRequireDefault(require("./rules/feature-gating/prefer-fg
 var _noAlias = _interopRequireDefault(require("./rules/feature-gating/no-alias"));
 var _useEntrypointsInExamples = _interopRequireDefault(require("./rules/use-entrypoints-in-examples"));
 var _useRecommendedUtils = _interopRequireDefault(require("./rules/feature-gating/use-recommended-utils"));
+var _expandBackgroundShorthand = _interopRequireDefault(require("./rules/compiled/expand-background-shorthand"));
 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; } // eslint-disable-next-line import/no-extraneous-dependencies
 var rules = exports.rules = {
@@ -42,6 +43,7 @@ var rules = exports.rules = {
   'ensure-valid-platform-yarn-protocol-usage': _ensureValidPlatformYarnProtocolUsage.default,
   'ensure-valid-bin-values': _ensureValidBinValues.default,
   'expand-border-shorthand': _expandBorderShorthand.default,
+  'expand-background-shorthand': _expandBackgroundShorthand.default,
   'no-duplicate-dependencies': _noDuplicateDependencies.default,
   'no-invalid-feature-flag-usage': _noInvalidFeatureFlagUsage.default,
   'no-pre-post-install-scripts': _noPrePostInstalls.default,
@@ -67,6 +69,7 @@ var commonConfig = {
   '@atlaskit/platform/no-module-level-eval-nav4': 'error',
   // Compiled: rules that are not included via `@compiled/recommended
   '@atlaskit/platform/expand-border-shorthand': 'warn',
+  '@atlaskit/platform/expand-background-shorthand': 'warn',
   '@compiled/jsx-pragma': ['error', {
     importSources: ['@atlaskit/css'],
     onlyRunIfImportingCompiled: true,

package/dist/cjs/rules/compiled/expand-background-shorthand/index.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.expandBackgroundShorthand = exports.default = void 0;
+var _isSupportedImport = require("@atlaskit/eslint-utils/is-supported-import");
+// Checks if the function that holds the border property is using an import package that this rule is targeting
+var isCompiledAPI = function isCompiledAPI(context) {
+  var importSources = (0, _isSupportedImport.getImportSources)(context);
+  var _context$getScope = context.getScope(),
+    references = _context$getScope.references;
+  var ancestors = context.getAncestors();
+  if (ancestors.some(function (ancestor) {
+    return ancestor.type === 'CallExpression' && ancestor.callee && ((0, _isSupportedImport.isCompiled)(ancestor.callee, references, importSources) || (0, _isSupportedImport.isAtlasKitCSS)(ancestor.callee, references, importSources));
+  })) {
+    return true;
+  }
+  return false;
+};
+
+// Checks if node is a call expression with identifier 'token'
+var isTokenCallExpression = function isTokenCallExpression(node) {
+  if (node.type === 'CallExpression') {
+    if (node.callee.type === 'Identifier' && node.callee.name === 'token') {
+      return true;
+    }
+  }
+  return false;
+};
+var expandBackgroundShorthand = exports.expandBackgroundShorthand = {
+  meta: {
+    docs: {
+      url: 'https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/platform/eslint-plugin/src/rules/compiled/expand-background-shorthand/'
+    },
+    messages: {
+      expandBackgroundShorthand: 'Use backgroundColor instead of background shorthand'
+    },
+    type: 'problem',
+    fixable: 'code'
+  },
+  create: function create(context) {
+    return {
+      'Property[key.name="background"]': function PropertyKeyNameBackground(node) {
+        if (isCompiledAPI(context) && isTokenCallExpression(node.value)) {
+          context.report({
+            node: node,
+            messageId: 'expandBackgroundShorthand',
+            fix: function fix(fixer) {
+              return fixer.replaceText(node.key, "backgroundColor");
+            }
+          });
+          return;
+        }
+      }
+    };
+  }
+};
+var _default = exports.default = expandBackgroundShorthand;

package/dist/es2019/index.js

@@ -24,6 +24,7 @@ import preferFG from './rules/feature-gating/prefer-fg';
 import noAlias from './rules/feature-gating/no-alias';
 import useEntrypointsInExamples from './rules/use-entrypoints-in-examples';
 import useRecommendedUtils from './rules/feature-gating/use-recommended-utils';
+import expandBackgroundShorthand from './rules/compiled/expand-background-shorthand';
 export const rules = {
   'ensure-feature-flag-registration': ensureFeatureFlagRegistration,
   'ensure-feature-flag-prefix': ensureFeatureFlagPrefix,
@@ -34,6 +35,7 @@ export const rules = {
   'ensure-valid-platform-yarn-protocol-usage': ensureValidPlatformYarnProtocolUsage,
   'ensure-valid-bin-values': ensureValidBinValues,
   'expand-border-shorthand': expandBorderShorthand,
+  'expand-background-shorthand': expandBackgroundShorthand,
   'no-duplicate-dependencies': noDuplicateDependencies,
   'no-invalid-feature-flag-usage': noInvalidFeatureFlagUsage,
   'no-pre-post-install-scripts': noPreAndPostInstallScripts,
@@ -59,6 +61,7 @@ const commonConfig = {
   '@atlaskit/platform/no-module-level-eval-nav4': 'error',
   // Compiled: rules that are not included via `@compiled/recommended
   '@atlaskit/platform/expand-border-shorthand': 'warn',
+  '@atlaskit/platform/expand-background-shorthand': 'warn',
   '@compiled/jsx-pragma': ['error', {
     importSources: ['@atlaskit/css'],
     onlyRunIfImportingCompiled: true,

package/dist/es2019/rules/compiled/expand-background-shorthand/index.js

@@ -0,0 +1,53 @@
+import { getImportSources, isCompiled, isAtlasKitCSS } from '@atlaskit/eslint-utils/is-supported-import';
+
+// Checks if the function that holds the border property is using an import package that this rule is targeting
+const isCompiledAPI = context => {
+  const importSources = getImportSources(context);
+  const {
+    references
+  } = context.getScope();
+  const ancestors = context.getAncestors();
+  if (ancestors.some(ancestor => ancestor.type === 'CallExpression' && ancestor.callee && (isCompiled(ancestor.callee, references, importSources) || isAtlasKitCSS(ancestor.callee, references, importSources)))) {
+    return true;
+  }
+  return false;
+};
+
+// Checks if node is a call expression with identifier 'token'
+const isTokenCallExpression = node => {
+  if (node.type === 'CallExpression') {
+    if (node.callee.type === 'Identifier' && node.callee.name === 'token') {
+      return true;
+    }
+  }
+  return false;
+};
+export const expandBackgroundShorthand = {
+  meta: {
+    docs: {
+      url: 'https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/platform/eslint-plugin/src/rules/compiled/expand-background-shorthand/'
+    },
+    messages: {
+      expandBackgroundShorthand: 'Use backgroundColor instead of background shorthand'
+    },
+    type: 'problem',
+    fixable: 'code'
+  },
+  create(context) {
+    return {
+      'Property[key.name="background"]': function (node) {
+        if (isCompiledAPI(context) && isTokenCallExpression(node.value)) {
+          context.report({
+            node,
+            messageId: 'expandBackgroundShorthand',
+            fix(fixer) {
+              return fixer.replaceText(node.key, `backgroundColor`);
+            }
+          });
+          return;
+        }
+      }
+    };
+  }
+};
+export default expandBackgroundShorthand;

package/dist/esm/index.js

@@ -27,6 +27,7 @@ import preferFG from './rules/feature-gating/prefer-fg';
 import noAlias from './rules/feature-gating/no-alias';
 import useEntrypointsInExamples from './rules/use-entrypoints-in-examples';
 import useRecommendedUtils from './rules/feature-gating/use-recommended-utils';
+import expandBackgroundShorthand from './rules/compiled/expand-background-shorthand';
 export var rules = {
   'ensure-feature-flag-registration': ensureFeatureFlagRegistration,
   'ensure-feature-flag-prefix': ensureFeatureFlagPrefix,
@@ -37,6 +38,7 @@ export var rules = {
   'ensure-valid-platform-yarn-protocol-usage': ensureValidPlatformYarnProtocolUsage,
   'ensure-valid-bin-values': ensureValidBinValues,
   'expand-border-shorthand': expandBorderShorthand,
+  'expand-background-shorthand': expandBackgroundShorthand,
   'no-duplicate-dependencies': noDuplicateDependencies,
   'no-invalid-feature-flag-usage': noInvalidFeatureFlagUsage,
   'no-pre-post-install-scripts': noPreAndPostInstallScripts,
@@ -62,6 +64,7 @@ var commonConfig = {
   '@atlaskit/platform/no-module-level-eval-nav4': 'error',
   // Compiled: rules that are not included via `@compiled/recommended
   '@atlaskit/platform/expand-border-shorthand': 'warn',
+  '@atlaskit/platform/expand-background-shorthand': 'warn',
   '@compiled/jsx-pragma': ['error', {
     importSources: ['@atlaskit/css'],
     onlyRunIfImportingCompiled: true,

package/dist/esm/rules/compiled/expand-background-shorthand/index.js

@@ -0,0 +1,54 @@
+import { getImportSources, isCompiled, isAtlasKitCSS } from '@atlaskit/eslint-utils/is-supported-import';
+
+// Checks if the function that holds the border property is using an import package that this rule is targeting
+var isCompiledAPI = function isCompiledAPI(context) {
+  var importSources = getImportSources(context);
+  var _context$getScope = context.getScope(),
+    references = _context$getScope.references;
+  var ancestors = context.getAncestors();
+  if (ancestors.some(function (ancestor) {
+    return ancestor.type === 'CallExpression' && ancestor.callee && (isCompiled(ancestor.callee, references, importSources) || isAtlasKitCSS(ancestor.callee, references, importSources));
+  })) {
+    return true;
+  }
+  return false;
+};
+
+// Checks if node is a call expression with identifier 'token'
+var isTokenCallExpression = function isTokenCallExpression(node) {
+  if (node.type === 'CallExpression') {
+    if (node.callee.type === 'Identifier' && node.callee.name === 'token') {
+      return true;
+    }
+  }
+  return false;
+};
+export var expandBackgroundShorthand = {
+  meta: {
+    docs: {
+      url: 'https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/platform/eslint-plugin/src/rules/compiled/expand-background-shorthand/'
+    },
+    messages: {
+      expandBackgroundShorthand: 'Use backgroundColor instead of background shorthand'
+    },
+    type: 'problem',
+    fixable: 'code'
+  },
+  create: function create(context) {
+    return {
+      'Property[key.name="background"]': function PropertyKeyNameBackground(node) {
+        if (isCompiledAPI(context) && isTokenCallExpression(node.value)) {
+          context.report({
+            node: node,
+            messageId: 'expandBackgroundShorthand',
+            fix: function fix(fixer) {
+              return fixer.replaceText(node.key, "backgroundColor");
+            }
+          });
+          return;
+        }
+      }
+    };
+  }
+};
+export default expandBackgroundShorthand;

package/dist/types/index.d.ts

@@ -9,6 +9,7 @@ export declare const rules: {
     'ensure-valid-platform-yarn-protocol-usage': import("eslint").Rule.RuleModule;
     'ensure-valid-bin-values': import("eslint").Rule.RuleModule;
     'expand-border-shorthand': import("eslint").Rule.RuleModule;
+    'expand-background-shorthand': import("eslint").Rule.RuleModule;
     'no-duplicate-dependencies': import("eslint").Rule.RuleModule;
     'no-invalid-feature-flag-usage': import("eslint").Rule.RuleModule;
     'no-pre-post-install-scripts': import("eslint").Rule.RuleModule;
@@ -46,6 +47,7 @@ export declare const configs: {
             '@atlaskit/platform/ensure-atlassian-team': string;
             '@atlaskit/platform/no-module-level-eval-nav4': string;
             '@atlaskit/platform/expand-border-shorthand': string;
+            '@atlaskit/platform/expand-background-shorthand': string;
             '@compiled/jsx-pragma': (string | {
                 importSources: string[];
                 onlyRunIfImportingCompiled: boolean;
@@ -63,6 +65,7 @@ export declare const configs: {
             '@atlaskit/platform/ensure-atlassian-team': string;
             '@atlaskit/platform/no-module-level-eval-nav4': string;
             '@atlaskit/platform/expand-border-shorthand': string;
+            '@atlaskit/platform/expand-background-shorthand': string;
             '@compiled/jsx-pragma': (string | {
                 importSources: string[];
                 onlyRunIfImportingCompiled: boolean;

package/dist/types/rules/compiled/expand-background-shorthand/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+export declare const expandBackgroundShorthand: Rule.RuleModule;
+export default expandBackgroundShorthand;

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

@@ -9,6 +9,7 @@ export declare const rules: {
     'ensure-valid-platform-yarn-protocol-usage': import("eslint").Rule.RuleModule;
     'ensure-valid-bin-values': import("eslint").Rule.RuleModule;
     'expand-border-shorthand': import("eslint").Rule.RuleModule;
+    'expand-background-shorthand': import("eslint").Rule.RuleModule;
     'no-duplicate-dependencies': import("eslint").Rule.RuleModule;
     'no-invalid-feature-flag-usage': import("eslint").Rule.RuleModule;
     'no-pre-post-install-scripts': import("eslint").Rule.RuleModule;
@@ -46,6 +47,7 @@ export declare const configs: {
             '@atlaskit/platform/ensure-atlassian-team': string;
             '@atlaskit/platform/no-module-level-eval-nav4': string;
             '@atlaskit/platform/expand-border-shorthand': string;
+            '@atlaskit/platform/expand-background-shorthand': string;
             '@compiled/jsx-pragma': (string | {
                 importSources: string[];
                 onlyRunIfImportingCompiled: boolean;
@@ -63,6 +65,7 @@ export declare const configs: {
             '@atlaskit/platform/ensure-atlassian-team': string;
             '@atlaskit/platform/no-module-level-eval-nav4': string;
             '@atlaskit/platform/expand-border-shorthand': string;
+            '@atlaskit/platform/expand-background-shorthand': string;
             '@compiled/jsx-pragma': (string | {
                 importSources: string[];
                 onlyRunIfImportingCompiled: boolean;

package/dist/types-ts4.5/rules/compiled/expand-background-shorthand/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+export declare const expandBackgroundShorthand: Rule.RuleModule;
+export default expandBackgroundShorthand;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@atlaskit/eslint-plugin-platform",
 	"description": "The essential plugin for use with Atlassian frontend platform tools",
-	"version": "0.13.1",
+	"version": "0.14.0",
 	"author": "Atlassian Pty Ltd",
 	"atlassian": {
 		"team": "Build Infra",
@@ -31,6 +31,7 @@
 		".": "./src/index.tsx"
 	},
 	"dependencies": {
+		"@atlaskit/eslint-utils": "^1.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@manypkg/find-root": "^1.1.0",
 		"fuse.js": "^6.6.2",

package/src/index.tsx

@@ -24,6 +24,7 @@ import preferFG from './rules/feature-gating/prefer-fg';
 import noAlias from './rules/feature-gating/no-alias';
 import useEntrypointsInExamples from './rules/use-entrypoints-in-examples';
 import useRecommendedUtils from './rules/feature-gating/use-recommended-utils';
+import expandBackgroundShorthand from './rules/compiled/expand-background-shorthand';
 
 export const rules = {
 	'ensure-feature-flag-registration': ensureFeatureFlagRegistration,
@@ -35,6 +36,7 @@ export const rules = {
 	'ensure-valid-platform-yarn-protocol-usage': ensureValidPlatformYarnProtocolUsage,
 	'ensure-valid-bin-values': ensureValidBinValues,
 	'expand-border-shorthand': expandBorderShorthand,
+	'expand-background-shorthand': expandBackgroundShorthand,
 	'no-duplicate-dependencies': noDuplicateDependencies,
 	'no-invalid-feature-flag-usage': noInvalidFeatureFlagUsage,
 	'no-pre-post-install-scripts': noPreAndPostInstallScripts,
@@ -61,6 +63,7 @@ const commonConfig = {
 	'@atlaskit/platform/no-module-level-eval-nav4': 'error',
 	// Compiled: rules that are not included via `@compiled/recommended
 	'@atlaskit/platform/expand-border-shorthand': 'warn',
+	'@atlaskit/platform/expand-background-shorthand': 'warn',
 	'@compiled/jsx-pragma': [
 		'error',
 		{

package/src/rules/compiled/expand-background-shorthand/README.md

@@ -0,0 +1,23 @@
+# `expand-background-shorthand`
+
+This ESLint rule enforces the expansion of the CSS `background` shorthand property into
+its longhand equivalent `backgroundColor`, where the `background`'s value is an Atlassian
+Design System color token and the function call originates from `@compiled/react` or `@atlaskit/css`.
+
+## Rule details
+
+👎 Examples of **incorrect** code for this rule:
+
+```js
+const styles = css({
+	background: token('color.background.neutral.hovered'),
+});
+```
+
+👍 Examples of **correct** code for this rule:
+
+```js
+const styles = css({
+	backgroundColor: token('color.background.neutral.hovered'),
+});
+```

package/src/rules/compiled/expand-background-shorthand/__tests__/rule.test.ts

@@ -0,0 +1,160 @@
+import { outdent } from 'outdent';
+import { tester } from '../../../../__tests__/utils/_tester';
+import { expandBackgroundShorthand } from '../index';
+
+const included_packages_calls_and_imports = [
+	['css', 'css', '@atlaskit/css'],
+	['css', 'css', '@compiled/react'],
+	['styled', 'styled.div', '@compiled/react'],
+];
+const exempt_packages_calls_and_imports = [
+	['css', '@atlaskit/primitives'],
+	['css', '@emotion'],
+	['css', 'styled-components'],
+	['xcss', '@atlaskit/primitives'],
+];
+tester.run('expand-border-shorthand', expandBackgroundShorthand, {
+	valid: [
+		...exempt_packages_calls_and_imports.map(([pkg, imp]) => ({
+			name: `do not have to handle non-Compiled packages (${pkg}, ${imp})`,
+			code: outdent`
+			import {${pkg}} from '${imp}';
+			const styles = ${pkg}({
+				background: token('color.background.accent.gray.subtlest')
+			});
+		`,
+		})),
+		{
+			name: 'no background shorthand',
+			code: outdent`
+			import {css} from '@compiled/react';
+			const styles = css({
+				backgroundColor: token('color.background.neutral.hovered'),
+			});
+			const styles2 = css({
+				backgroundColor: token('color.border', colors.N40),
+			});
+			const styles3 = css({
+				backgroundColor: token('color.background.inverse.subtle', '#00000029'),
+			});
+			const styles4 = css({
+				backgroundColor: token('color.background.brand.bold', 'lightblue'),
+			});
+			`,
+		},
+		// Other background shorthands that do not have token is out of scope for now
+		{
+			name: 'background shorthand without token',
+			code: outdent`
+			import {css} from '@compiled/react';
+			const styles = css({
+				background: 'transparent'
+			});
+			const styles2 = css({
+				background: url(image.png)
+			});
+			const styles3 = css({
+				background: 0
+			});
+			`,
+		},
+		// Usages of token within a template string are not used, so ESLint rule does not handle this case
+		{
+			name: 'background shorthand in a template literal as string text',
+			code: outdent`
+			import {css} from '@compiled/react';
+			const styles = css({
+				background: \`token('color.background.brand.bold', 'lightblue')\`,
+			});
+			`,
+		},
+		{
+			name: 'background as key in cssMap call (cssMap, @compiled/react)',
+			code: outdent`
+			import { cssMap } from '@compiled/react';
+			const colorMap = cssMap({
+				background: {
+					color: token('some.token')
+				},
+				foreground: {
+					color: token('some.other.token')
+				},
+			});
+			`,
+		},
+	],
+	invalid: [
+		...included_packages_calls_and_imports.map(([pkg, call, imp]) => ({
+			name: `simple case (${call}, ${imp})`,
+			code: outdent`
+			import {${pkg}} from '${imp}';
+			const styles = ${call}({
+				background: token('color.background.accent.gray.subtlest'),
+			});
+			`,
+			output: outdent`
+			import {${pkg}} from '${imp}';
+			const styles = ${call}({
+				backgroundColor: token('color.background.accent.gray.subtlest'),
+			});
+            `,
+			errors: [{ messageId: 'expandBackgroundShorthand' }],
+		})),
+		{
+			name: `simple case (styled, @compiled/react)`,
+			code: outdent`
+			import { styled } from '@compiled/react';
+			const Button = styled.div({
+				paddingTop: '10px',
+			});
+			const StyledButton = styled(Button)({
+				background: token('elevation.surface', colors.N0),
+			});
+			`,
+			output: outdent`
+			import { styled } from '@compiled/react';
+			const Button = styled.div({
+				paddingTop: '10px',
+			});
+			const StyledButton = styled(Button)({
+				backgroundColor: token('elevation.surface', colors.N0),
+			});
+            `,
+			errors: [{ messageId: 'expandBackgroundShorthand' }],
+		},
+		{
+			name: `simple case (cssMap, @compiled/react)`,
+			code: outdent`
+			import { cssMap } from '@compiled/react';
+			const backgroundMap = cssMap({
+				firstBackground: { background: token('some.token') },
+				secondBackground: { background: token('some.other.token') },
+			});
+			`,
+			output: outdent`
+			import { cssMap } from '@compiled/react';
+			const backgroundMap = cssMap({
+				firstBackground: { backgroundColor: token('some.token') },
+				secondBackground: { backgroundColor: token('some.other.token') },
+			});
+            `,
+			errors: Array.from(Array(2), () => ({ messageId: 'expandBackgroundShorthand' })),
+		},
+		{
+			name: `compiled import with alias`,
+			code: outdent`
+			import { styled as styled2 } from '@compiled/react';
+			const style = styled2.span({
+				background: token('color.background.neutral.subtle', '#fff'),
+			});
+			`,
+			output: outdent`
+			import { styled as styled2 } from '@compiled/react';
+			const style = styled2.span({
+				backgroundColor: token('color.background.neutral.subtle', '#fff'),
+			});
+            `,
+			errors: [{ messageId: 'expandBackgroundShorthand' }],
+		},
+	],
+});

package/src/rules/compiled/expand-background-shorthand/index.tsx

@@ -0,0 +1,67 @@
+import type { Rule } from 'eslint';
+import type { Property, Node } from 'estree';
+import {
+	getImportSources,
+	isCompiled,
+	isAtlasKitCSS,
+} from '@atlaskit/eslint-utils/is-supported-import';
+
+// Checks if the function that holds the border property is using an import package that this rule is targeting
+const isCompiledAPI = (context: Rule.RuleContext): boolean => {
+	const importSources = getImportSources(context);
+	const { references } = context.getScope();
+	const ancestors = context.getAncestors();
+	if (
+		ancestors.some(
+			(ancestor) =>
+				ancestor.type === 'CallExpression' &&
+				ancestor.callee &&
+				(isCompiled(ancestor.callee, references, importSources) ||
+					isAtlasKitCSS(ancestor.callee, references, importSources)),
+		)
+	) {
+		return true;
+	}
+	return false;
+};
+
+// Checks if node is a call expression with identifier 'token'
+const isTokenCallExpression = (node: Node) => {
+	if (node.type === 'CallExpression') {
+		if (node.callee.type === 'Identifier' && node.callee.name === 'token') {
+			return true;
+		}
+	}
+	return false;
+};
+
+export const expandBackgroundShorthand: Rule.RuleModule = {
+	meta: {
+		docs: {
+			url: 'https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/platform/eslint-plugin/src/rules/compiled/expand-background-shorthand/',
+		},
+		messages: {
+			expandBackgroundShorthand: 'Use backgroundColor instead of background shorthand',
+		},
+		type: 'problem',
+		fixable: 'code',
+	},
+	create(context) {
+		return {
+			'Property[key.name="background"]': function (node: Property) {
+				if (isCompiledAPI(context) && isTokenCallExpression(node.value)) {
+					context.report({
+						node,
+						messageId: 'expandBackgroundShorthand',
+						fix(fixer) {
+							return fixer.replaceText(node.key, `backgroundColor`);
+						},
+					});
+					return;
+				}
+			},
+		};
+	},
+};
+
+export default expandBackgroundShorthand;

package/tsconfig.dev.json

@@ -34,7 +34,7 @@
 	},
 	"references": [
 		{
-			"path": "tsconfig.app.json"
+			"path": "./tsconfig.app.json"
 		}
 	],
 	"files": []