@atlaskit/eslint-plugin-platform 0.11.0 → 0.13.0

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

@@ -0,0 +1,186 @@
+import { outdent } from 'outdent';
+
+import { tester } from '../../../../__tests__/utils/_tester';
+import { expandBorderShorthand } from '../index';
+
+const valid_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 = [
+	['css', '@atlaskit/primitives'],
+	['css', '@emotion'],
+	['css', 'styled-components'],
+];
+
+tester.run('expand-border-shorthand', expandBorderShorthand, {
+	valid: [
+		...invalid_packages_calls_and_imports.map(([pkg, imp]) => ({
+			name: `incorrect packages (${pkg}, ${imp})`,
+			code: outdent`
+			import {${pkg}} from '${imp}';
+
+			const styles = ${pkg}({
+				border: '1px solid red',
+			});
+		`,
+		})),
+		{
+			name: 'references correct package',
+			code: outdent`
+			import {css} from '@compiled/react';
+
+			const styles = xcss({
+				border: '1px solid red',
+			});
+		`,
+		},
+		{
+			name: 'excluded values',
+			code: outdent`
+			import {css} from '@compiled/react';
+
+			const styles = css({
+				border: 'none',
+			});
+			const styles2 = css({
+				border: '0',
+			});
+			const styles3 = css({
+				border: 'unset',
+			});
+			const styles4 = css({
+				border: 'none !important',
+			});
+			const styles5 = css({
+				border: \`none\`,
+			});
+			const styles6 = css({
+				border: \`0\`,
+			});
+			const styles7 = css({
+				border: \`unset\`,
+			});
+			const styles8 = css({
+				border: \`none !important\`,
+			});
+			const styles9 = css({
+				border: 0,
+			});
+		`,
+		},
+		{
+			name: 'not using border shorthand',
+			code: outdent`
+			import {css} from '@compiled/react';
+
+			const styles = css({
+				borderTop: '2px solid green',
+				borderRight: '3px dashed orange',
+				borderBottom: '4px double purple',
+				borderLeft: '5px groove teal',
+			});
+			const styles2 = css({
+				borderWidth: '1px',
+				borderStyle: 'solid',
+				borderColor: 'black',
+			});
+		`,
+		},
+	],
+	invalid: [
+		...valid_packages_calls_and_imports.map(([pkg, call, imp]) => ({
+			name: `simple case (${call}, ${imp})`,
+			code: outdent`
+			import {${pkg}} from '${imp}';
+
+			const styles = ${call}({
+				border: '1px solid red',
+			});
+			const styles2 = ${call}({
+				border: '1px solid',
+			});
+			const styles3 = ${call}({
+				border: '1px',
+			});
+			`,
+			errors: Array.from(Array(3), () => ({ messageId: 'expandBorderShorthand' })),
+		})),
+		{
+			name: 'nested ObjectExpression',
+			code: outdent`
+			import {css} from '@compiled/react';
+			const styles = {
+				inverse: css({
+					border: '1px solid red',
+				}),
+			};
+		`,
+			errors: [{ messageId: 'expandBorderShorthand' }],
+		},
+		{
+			name: 'pseudo selector',
+			code: outdent`
+			import {css} from '@compiled/react';
+			const styles = css({
+				'&:hover': {
+					border: '1px solid red',
+					'&:hover': {
+						border: '1px solid red',
+					},
+				},
+				border: '1px solid red',
+			})
+		`,
+			errors: Array.from(Array(3), () => ({ messageId: 'expandBorderShorthand' })),
+		},
+		{
+			name: 'template string',
+			code: outdent`
+			import {css} from '@compiled/react';
+
+			const styles = css({
+				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\`,
+			})
+
+			const styles5 = css({
+				border: \`1px\`,
+			})
+
+			const styles6 = css({
+				border: \` \${token('red')}\`,
+			})
+		`,
+			errors: Array.from(Array(6), () => ({ messageId: 'expandBorderShorthand' })),
+		},
+		{
+			name: 'tokens',
+			code: outdent`
+			import {css} from '@compiled/react';
+			const styles = css({
+				border: token('color.border'),
+			})
+			const styles2 = css({
+				border: token('space.025', '2px'),
+			})
+		`,
+			errors: Array.from(Array(2), () => ({ messageId: 'expandBorderShorthand' })),
+		},
+	],
+});

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

@@ -0,0 +1,109 @@
+import type { Rule } from 'eslint';
+import type { Property, Node, ImportDeclaration, CallExpression } from 'estree';
+
+const EXCLUDED_VALUES = ['0', 'none', 'unset', 'none !important'];
+
+const findCallExpression = (node: Node & { parent?: Node }): CallExpression | null => {
+	const parent = node.parent;
+	if (!parent) {
+		return null;
+	}
+	if (parent.type === 'CallExpression') {
+		return parent;
+	}
+	return findCallExpression(parent);
+};
+
+const separateBorderProperties = (
+	borderString: string,
+	property: Property,
+	context: Rule.RuleContext,
+) => {
+	if (EXCLUDED_VALUES.includes(borderString)) {
+		return;
+	}
+
+	context.report({
+		node: property,
+		messageId: 'expandBorderShorthand',
+	});
+};
+
+// checks if the function that holds the border property is using an import package that this rule is targeting
+const isCompiledAPI = (importDeclaration: ImportDeclaration, callExpression: CallExpression) => {
+	let functionName;
+	if (callExpression.callee.type === 'Identifier') {
+		functionName = callExpression.callee.name;
+	} else if (callExpression.callee.type === 'MemberExpression') {
+		if (callExpression.callee.object.type === 'Identifier') {
+			functionName = callExpression.callee.object.name;
+		}
+	}
+	if (!functionName) {
+		return;
+	}
+
+	return importDeclaration.specifiers.some(
+		(specifier) => specifier.type === 'ImportSpecifier' && specifier.imported.name === functionName,
+	);
+};
+
+export const expandBorderShorthand: Rule.RuleModule = {
+	meta: {
+		docs: {
+			url: 'https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/platform/eslint-plugin/src/rules/compiled/expand-border-shorthand',
+		},
+		messages: {
+			expandBorderShorthand:
+				'Use borderColor, borderStyle, and borderWidth instead of border shorthand',
+		},
+		type: 'problem',
+	},
+	create(context) {
+		let importDeclaration: ImportDeclaration;
+		return {
+			'ImportDeclaration[source.value="@compiled/react"], ImportDeclaration[source.value="@atlaskit/css"]':
+				function (node: ImportDeclaration) {
+					importDeclaration = node;
+				},
+			'Property[key.name="border"]': function (node: Property) {
+				const callExpression = findCallExpression(node);
+				if (!callExpression) {
+					return;
+				}
+				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;
+								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);
+							}
+						} else if (node.value.type === 'CallExpression') {
+							context.report({
+								node,
+								messageId: 'expandBorderShorthand',
+							});
+						}
+					}
+				}
+			},
+		};
+	},
+};
+
+export default expandBorderShorthand;

package/src/rules/{ensure-valid-yarn-protocol-usage → ensure-valid-platform-yarn-protocol-usage}/__tests__/unit/rule.test.ts

@@ -3,7 +3,7 @@ import rule from '../../index';
 
 const cwd = process.cwd();
 
-describe('test ensure-valid-yarn-protocol-usage rule', () => {
+describe('test ensure-valid-platform-yarn-protocol-usage rule', () => {
 	tester.run('workspace protocol', rule, {
 		valid: [
 			// Workspace protocol is allowed in private packages as dependencies

package/src/rules/feature-gating/README.md

@@ -0,0 +1,8 @@
+### Notes
+
+- feature-gating/\* rules are copied from
+  [eslint-plugin-jira/rules/ff](https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/browse/jira/build-tools/eslint-plugin-jira/rules/ff)
+  with small variations as mentioned in this
+  [PR](https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/115546/overview)
+- these rules could be a WIP since they are still targeting JFE libraries- see
+  [discussion](https://atlassian.slack.com/archives/C026LTWFZ47/p1730776455371799?thread_ts=1730715221.742919&cid=C026LTWFZ47)

package/src/rules/{inline-usage → feature-gating/inline-usage}/__tests__/rule.test.tsx

@@ -1,5 +1,5 @@
 import outdent from 'outdent';
-import { tester } from '../../../__tests__/utils/_tester';
+import { tester } from '../../../../__tests__/utils/_tester';
 import rule from '../index';
 
 const options = ['ssOnly'];

package/src/rules/{no-alias → feature-gating/no-alias}/__tests__/rule.test.tsx

@@ -1,5 +1,5 @@
 import outdent from 'outdent';
-import { tester } from '../../../__tests__/utils/_tester';
+import { tester } from '../../../../__tests__/utils/_tester';
 import rule from '../index';
 
 tester.run('feature-flags/no-alias', rule, {

package/src/rules/{no-alias → feature-gating/no-alias}/index.tsx

@@ -3,7 +3,7 @@ import {
 	FEATURE_API_IMPORT_SOURCES,
 	FEATURE_MOCKS_IMPORT_SOURCES,
 	FEATURE_UTILS_IMPORT_SOURCES,
-} from '../constants';
+} from '../../constants';
 import { isIdentifierImportedFrom, type Node } from '../utils';
 
 const IMPORT_SOURCES = new Set([

package/src/rules/{no-module-level-eval → feature-gating/no-module-level-eval}/__tests__/test.tsx

@@ -1,5 +1,5 @@
 import outdent from 'outdent';
-import { tester } from '../../../__tests__/utils/_tester';
+import { tester } from '../../../../__tests__/utils/_tester';
 import rule from '../index';
 
 tester.run('feature-flags/no-module-level-eval', rule, {

package/src/rules/{no-module-level-eval-nav4 → feature-gating/no-module-level-eval-nav4}/__tests__/test.tsx

@@ -1,5 +1,5 @@
 import outdent from 'outdent';
-import { tester } from '../../../__tests__/utils/_tester';
+import { tester } from '../../../../__tests__/utils/_tester';
 import rule from '../index';
 
 tester.run('feature-flags/no-module-level-eval', rule, {

package/src/rules/{no-preconditioning → feature-gating/no-preconditioning}/__tests__/rule.test.tsx

@@ -1,5 +1,5 @@
 import outdent from 'outdent';
-import { tester } from '../../../__tests__/utils/_tester';
+import { tester } from '../../../../__tests__/utils/_tester';
 import rule from '../index';
 
 tester.run('feature-flags/no-preconditioning', rule, {

package/src/rules/{prefer-fg → feature-gating/prefer-fg}/__tests__/rule.test.tsx

@@ -1,5 +1,5 @@
 import outdent from 'outdent';
-import { tester } from '../../../__tests__/utils/_tester';
+import { tester } from '../../../../__tests__/utils/_tester';
 import rule from '../index';
 
 const errors = [{ messageId: 'autoFixImports' }, { messageId: 'preferFG' }];

package/src/rules/{prefer-fg → feature-gating/prefer-fg}/index.tsx

@@ -1,6 +1,6 @@
 import type { Rule } from 'eslint';
 
-import { FEATURE_API_IMPORT_SOURCES } from '../constants';
+import { FEATURE_API_IMPORT_SOURCES } from '../../constants';
 import { type Node } from '../utils';
 
 const validateUsage = (

package/src/rules/{static-feature-flags → feature-gating/static-feature-flags}/__tests__/test.tsx

@@ -1,5 +1,5 @@
 import outdent from 'outdent';
-import { tester } from '../../../__tests__/utils/_tester';
+import { tester } from '../../../../__tests__/utils/_tester';
 import rule from '../index';
 
 const errors = [{ messageId: 'FFLiteral' }];

package/src/rules/{static-feature-flags → feature-gating/static-feature-flags}/index.tsx

@@ -1,5 +1,5 @@
 import type { Rule } from 'eslint';
-import { FEATURE_API_IMPORT_SOURCES } from '../constants';
+import { FEATURE_API_IMPORT_SOURCES } from '../../constants';
 import { getDef, isIdentifierImportedFrom, type Node } from '../utils';
 
 const IMPORT_SOURCES = new Set([

package/src/rules/{use-recommended-utils → feature-gating/use-recommended-utils}/__tests__/rule.test.tsx

@@ -1,5 +1,5 @@
 import outdent from 'outdent';
-import { tester } from '../../../__tests__/utils/_tester';
+import { tester } from '../../../../__tests__/utils/_tester';
 import rule from '../index';
 
 tester.run('feature-flags/use-recommended-utils', rule, {

package/src/rules/{utils.tsx → feature-gating/utils.tsx}

@@ -1,4 +1,4 @@
-import { FEATURE_API_IMPORT_SOURCES } from './constants';
+import { FEATURE_API_IMPORT_SOURCES } from '../constants';
 import type { Rule, Scope } from 'eslint';
 
 export function isIdentifierImportedFrom(