@atlaskit/eslint-plugin-platform 0.13.1 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/eslint-plugin-platform
 
+## 1.0.0
+
+### Major Changes
+
+- [#168864](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/168864)
+  [`49e4510bd86d3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/49e4510bd86d3) -
+  update eslint rule 'expand-border-properties' from warn to error
+
+## 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,
@@ -66,7 +68,8 @@ var commonConfig = {
   '@atlaskit/platform/ensure-atlassian-team': 'error',
   '@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-border-shorthand': 'error',
+  '@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/cjs/rules/compiled/expand-border-shorthand/index.js

@@ -19,6 +19,9 @@ var separateBorderProperties = function separateBorderProperties(borderString, p
   if (EXCLUDED_VALUES.includes(borderString)) {
     return;
   }
+  if (borderString.includes('var(--')) {
+    return;
+  }
   context.report({
     node: property,
     messageId: 'expandBorderShorthand'
@@ -39,7 +42,7 @@ var isCompiledAPI = function isCompiledAPI(importDeclaration, callExpression) {
     return;
   }
   return importDeclaration.specifiers.some(function (specifier) {
-    return specifier.type === 'ImportSpecifier' && specifier.imported.name === functionName;
+    return specifier.type === 'ImportSpecifier' && specifier.local.name === functionName;
   });
 };
 var expandBorderShorthand = exports.expandBorderShorthand = {
@@ -66,21 +69,11 @@ var expandBorderShorthand = exports.expandBorderShorthand = {
         if (importDeclaration) {
           if (isCompiledAPI(importDeclaration, callExpression)) {
             if (node.value.type === 'Literal' && node.value.value !== null) {
-              if (typeof node.value.value === 'string') {
-                var borderString = node.value.value;
+              var borderString = typeof node.value.value === 'string' ? node.value.value : node.value.raw;
+              if (borderString) {
                 separateBorderProperties(borderString, node, context);
-              } else if (node.value.raw) {
-                var _borderString = node.value.raw;
-                separateBorderProperties(_borderString, node, context);
               }
             } else if (node.value.type === 'TemplateLiteral') {
-              if (node.value.quasis.length > 1 || node.value.expressions.length > 0) {
-                context.report({
-                  node: node,
-                  messageId: 'expandBorderShorthand'
-                });
-                return;
-              }
               if (node.value.quasis.length === 1 && node.value.quasis[0].value.cooked) {
                 var borderQuasis = node.value.quasis[0].value.cooked;
                 separateBorderProperties(borderQuasis, node, context);

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,
@@ -58,7 +60,8 @@ const commonConfig = {
   '@atlaskit/platform/ensure-atlassian-team': 'error',
   '@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-border-shorthand': 'error',
+  '@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/es2019/rules/compiled/expand-border-shorthand/index.js

@@ -13,6 +13,9 @@ const separateBorderProperties = (borderString, property, context) => {
   if (EXCLUDED_VALUES.includes(borderString)) {
     return;
   }
+  if (borderString.includes('var(--')) {
+    return;
+  }
   context.report({
     node: property,
     messageId: 'expandBorderShorthand'
@@ -32,7 +35,7 @@ const isCompiledAPI = (importDeclaration, callExpression) => {
   if (!functionName) {
     return;
   }
-  return importDeclaration.specifiers.some(specifier => specifier.type === 'ImportSpecifier' && specifier.imported.name === functionName);
+  return importDeclaration.specifiers.some(specifier => specifier.type === 'ImportSpecifier' && specifier.local.name === functionName);
 };
 export const expandBorderShorthand = {
   meta: {
@@ -58,21 +61,11 @@ export const expandBorderShorthand = {
         if (importDeclaration) {
           if (isCompiledAPI(importDeclaration, callExpression)) {
             if (node.value.type === 'Literal' && node.value.value !== null) {
-              if (typeof node.value.value === 'string') {
-                const borderString = node.value.value;
-                separateBorderProperties(borderString, node, context);
-              } else if (node.value.raw) {
-                const borderString = node.value.raw;
+              const borderString = typeof node.value.value === 'string' ? node.value.value : node.value.raw;
+              if (borderString) {
                 separateBorderProperties(borderString, node, context);
               }
             } else if (node.value.type === 'TemplateLiteral') {
-              if (node.value.quasis.length > 1 || node.value.expressions.length > 0) {
-                context.report({
-                  node,
-                  messageId: 'expandBorderShorthand'
-                });
-                return;
-              }
               if (node.value.quasis.length === 1 && node.value.quasis[0].value.cooked) {
                 const borderQuasis = node.value.quasis[0].value.cooked;
                 separateBorderProperties(borderQuasis, node, context);

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,
@@ -61,7 +63,8 @@ var commonConfig = {
   '@atlaskit/platform/ensure-atlassian-team': 'error',
   '@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-border-shorthand': 'error',
+  '@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/esm/rules/compiled/expand-border-shorthand/index.js

@@ -13,6 +13,9 @@ var separateBorderProperties = function separateBorderProperties(borderString, p
   if (EXCLUDED_VALUES.includes(borderString)) {
     return;
   }
+  if (borderString.includes('var(--')) {
+    return;
+  }
   context.report({
     node: property,
     messageId: 'expandBorderShorthand'
@@ -33,7 +36,7 @@ var isCompiledAPI = function isCompiledAPI(importDeclaration, callExpression) {
     return;
   }
   return importDeclaration.specifiers.some(function (specifier) {
-    return specifier.type === 'ImportSpecifier' && specifier.imported.name === functionName;
+    return specifier.type === 'ImportSpecifier' && specifier.local.name === functionName;
   });
 };
 export var expandBorderShorthand = {
@@ -60,21 +63,11 @@ export var expandBorderShorthand = {
         if (importDeclaration) {
           if (isCompiledAPI(importDeclaration, callExpression)) {
             if (node.value.type === 'Literal' && node.value.value !== null) {
-              if (typeof node.value.value === 'string') {
-                var borderString = node.value.value;
+              var borderString = typeof node.value.value === 'string' ? node.value.value : node.value.raw;
+              if (borderString) {
                 separateBorderProperties(borderString, node, context);
-              } else if (node.value.raw) {
-                var _borderString = node.value.raw;
-                separateBorderProperties(_borderString, node, context);
               }
             } else if (node.value.type === 'TemplateLiteral') {
-              if (node.value.quasis.length > 1 || node.value.expressions.length > 0) {
-                context.report({
-                  node: node,
-                  messageId: 'expandBorderShorthand'
-                });
-                return;
-              }
               if (node.value.quasis.length === 1 && node.value.quasis[0].value.cooked) {
                 var borderQuasis = node.value.quasis[0].value.cooked;
                 separateBorderProperties(borderQuasis, node, context);

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": "1.0.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,
@@ -60,7 +62,8 @@ const commonConfig = {
 	'@atlaskit/platform/ensure-atlassian-team': 'error',
 	'@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-border-shorthand': 'error',
+	'@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/src/rules/compiled/expand-border-shorthand/README.md

@@ -1,6 +1,6 @@
 # `shorthand-property-sorting`
 
-This ESLint rule enforces the expansion of CSS `border` shorthand property, into it's longhand
+This ESLint rule enforces the expansion of CSS `border` shorthand property, into its longhand
 equivalents `borderStyle`, `borderWidth`, `borderColor`, for packages that originates from
 `@compiled/react`, and `@atlaskit/css`.
 

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

@@ -3,15 +3,13 @@ import { outdent } from 'outdent';
 import { tester } from '../../../../__tests__/utils/_tester';
 import { expandBorderShorthand } from '../index';
 
-const valid_packages_calls_and_imports = [
+const included_packages_calls_and_imports = [
 	['css', 'css', '@atlaskit/css'],
 	['css', 'css', '@compiled/react'],
 	['styled', 'styled.div', '@compiled/react'],
-	['cssMap', 'cssMap', '@atlaskit/css'],
-	['cssMap', 'cssMap', '@compiled/react'],
 ];
 
-const invalid_packages_calls_and_imports = [
+const exempt_packages_calls_and_imports = [
 	['css', '@atlaskit/primitives'],
 	['css', '@emotion'],
 	['css', 'styled-components'],
@@ -19,8 +17,8 @@ const invalid_packages_calls_and_imports = [
 
 tester.run('expand-border-shorthand', expandBorderShorthand, {
 	valid: [
-		...invalid_packages_calls_and_imports.map(([pkg, imp]) => ({
-			name: `incorrect packages (${pkg}, ${imp})`,
+		...exempt_packages_calls_and_imports.map(([pkg, imp]) => ({
+			name: `handle only Compiled APIs (${pkg}, ${imp})`,
 			code: outdent`
 			import {${pkg}} from '${imp}';
 
@@ -30,13 +28,18 @@ tester.run('expand-border-shorthand', expandBorderShorthand, {
 		`,
 		})),
 		{
-			name: 'references correct package',
+			name: 'CallExpression matches with imported API',
 			code: outdent`
-			import {css} from '@compiled/react';
+			import { styled } from 'styled-components';
+			import { styled as styled2, css as compiledCSS, jsx } from '@compiled/react';
 
 			const styles = xcss({
 				border: '1px solid red',
 			});
+
+			const styles2 = styled.div({
+				border: '1px solid red',
+			});
 		`,
 		},
 		{
@@ -71,6 +74,17 @@ tester.run('expand-border-shorthand', expandBorderShorthand, {
 			const styles9 = css({
 				border: 0,
 			});
+			const styles10 = css({
+				border: 'var(--icon-border)',
+			});
+			const styles11 = css({
+				border: \`\${(props: { border?: boolean }) =>
+					props.border ? \`1px solid \${token('color.border.disabled', colors.N30)}\` : 'none'}\`,
+			});
+			const styles12 = css({
+				border: (props: { border?: boolean }) =>
+					props.border ? token('color.border.disabled', colors.N30) : 'none',
+			});
 		`,
 		},
 		{
@@ -91,9 +105,20 @@ tester.run('expand-border-shorthand', expandBorderShorthand, {
 			});
 		`,
 		},
+		{
+			name: 'cssMap case where border is assigned an ObjectExpression',
+			code: outdent`
+			import { cssMap } from '@compiled/react';
+
+			const borderStyleMap = cssMap({
+				none: { borderStyle: 'none' },
+				border: { borderStyle: 'solid' },
+			});
+		`,
+		},
 	],
 	invalid: [
-		...valid_packages_calls_and_imports.map(([pkg, call, imp]) => ({
+		...included_packages_calls_and_imports.map(([pkg, call, imp]) => ({
 			name: `simple case (${call}, ${imp})`,
 			code: outdent`
 			import {${pkg}} from '${imp}';
@@ -147,14 +172,6 @@ tester.run('expand-border-shorthand', expandBorderShorthand, {
 				border: \`1px solid red\`,
 			})
 
-			const styles2 = css({
-				border: \`1px solid \${token('red')}\`,
-			})
-
-			const styles3 = css({
-				border: \`1px \${solid} red\`,
-			})
-
 			const styles4 = css({
 				border: \`1px red\`,
 			})
@@ -162,12 +179,8 @@ tester.run('expand-border-shorthand', expandBorderShorthand, {
 			const styles5 = css({
 				border: \`1px\`,
 			})
-
-			const styles6 = css({
-				border: \` \${token('red')}\`,
-			})
 		`,
-			errors: Array.from(Array(6), () => ({ messageId: 'expandBorderShorthand' })),
+			errors: Array.from(Array(3), () => ({ messageId: 'expandBorderShorthand' })),
 		},
 		{
 			name: 'tokens',
@@ -182,5 +195,17 @@ tester.run('expand-border-shorthand', expandBorderShorthand, {
 		`,
 			errors: Array.from(Array(2), () => ({ messageId: 'expandBorderShorthand' })),
 		},
+		{
+			name: 'cssMap case where border is assigned an a Literal',
+			code: outdent`
+			import { cssMap } from '@compiled/react';
+
+			const borderStyleMap = cssMap({
+				none: { border: 'none' },
+				solid: { border: '1px solid blue' },
+			});
+			`,
+			errors: [{ messageId: 'expandBorderShorthand' }],
+		},
 	],
 });

package/src/rules/compiled/expand-border-shorthand/index.ts

@@ -22,6 +22,9 @@ const separateBorderProperties = (
 	if (EXCLUDED_VALUES.includes(borderString)) {
 		return;
 	}
+	if (borderString.includes('var(--')) {
+		return;
+	}
 
 	context.report({
 		node: property,
@@ -44,7 +47,7 @@ const isCompiledAPI = (importDeclaration: ImportDeclaration, callExpression: Cal
 	}
 
 	return importDeclaration.specifiers.some(
-		(specifier) => specifier.type === 'ImportSpecifier' && specifier.imported.name === functionName,
+		(specifier) => specifier.type === 'ImportSpecifier' && specifier.local.name === functionName,
 	);
 };
 
@@ -74,21 +77,12 @@ export const expandBorderShorthand: Rule.RuleModule = {
 				if (importDeclaration) {
 					if (isCompiledAPI(importDeclaration, callExpression)) {
 						if (node.value.type === 'Literal' && node.value.value !== null) {
-							if (typeof node.value.value === 'string') {
-								const borderString = node.value.value;
-								separateBorderProperties(borderString, node, context);
-							} else if (node.value.raw) {
-								const borderString = node.value.raw;
+							const borderString =
+								typeof node.value.value === 'string' ? node.value.value : node.value.raw;
+							if (borderString) {
 								separateBorderProperties(borderString, node, context);
 							}
 						} else if (node.value.type === 'TemplateLiteral') {
-							if (node.value.quasis.length > 1 || node.value.expressions.length > 0) {
-								context.report({
-									node,
-									messageId: 'expandBorderShorthand',
-								});
-								return;
-							}
 							if (node.value.quasis.length === 1 && node.value.quasis[0].value.cooked) {
 								const borderQuasis: string = node.value.quasis[0].value.cooked;
 								separateBorderProperties(borderQuasis, node, context);

package/tsconfig.dev.json

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