@atlaskit/eslint-plugin-platform 2.0.1 → 2.1.0

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

@@ -0,0 +1,344 @@
+import { outdent } from 'outdent';
+import { tester } from '../../../../__tests__/utils/_tester';
+import { expandSpacingShorthand } from '../index';
+
+const included_compiled_libraries = [
+	'@compiled/react', 
+	'@atlaskit/css'
+];
+const exempt_libraries = [
+	'@atlaskit/primitives', 
+	'@emotion', 
+	'styled-components', 
+];
+
+const validTestCases = (property: string) => {
+	return [
+		...exempt_libraries.map((imp) => ({
+			name: `${property}: do not have to handle non-compiled packages (${imp})`,
+			code: outdent`
+			import {css} from '${imp}';
+			const styles = css({
+				${property}: token('space.200'),
+			});
+		`,
+		})),
+		{
+			name: `${property}: no spacing shorthand`,
+			code: outdent`
+			import {css} from '@compiled/react';
+			const styles = css({
+				${property}Top: token('space.200'),
+				${property}Bottom: token('space.200'),
+				${property}Left: token('space.200'),
+				${property}Right: token('space.200'),
+			});
+			`,
+		},
+		{
+			name: `${property}: do not have to handle plain string values`,
+			code: outdent`
+			import {css} from '@compiled/react';
+			const styles = css({
+				${property}: '0 auto',
+			});
+			`,
+		},
+		{
+			name: `${property}: do not handle dynamic style`,
+			code: outdent`
+			import {css} from '@compiled/react';
+			const styles = css({
+				${property}: ({ isCompact }) => \`\${isCompact ? token('space.050', '4px') : token('space.075', '6px')}\`
+			});
+			`,
+		},
+		{
+			name: `${property}: do not handle calc(...) as value`,
+			code: outdent`
+			import {css} from '@compiled/react';
+			const styles = css({
+				${property}: \`calc(var(--preview-block-width) + \${token('space.200', '16px')})\`,
+			});
+			`,
+		},
+		{
+			name: `${property}: do not handle template literal if no token(...) in the expressions`,
+			code: outdent`
+			import {css} from '@compiled/react';
+			const styles = css({
+				${property}: \`0px 2\`,
+			});
+			`,
+		},
+		{
+			name: `${property}: do not handle where value is a function call which is not a token`,
+			code: outdent`
+			import { css } from '@compiled/react';
+			import { functionCall } from 'somewhere';
+			const styles = css({
+				${property}: functionCall(),
+			});
+			`,
+		},
+	];
+};
+
+const invalidTestCases = (property: string) => {
+	return [
+		// Value of spacing property is plain token() call
+		...included_compiled_libraries.map((imp) => ({
+			name: `expand ${property} with value as token: (${imp})`,
+			code: outdent`
+			import {css} from '${imp}';
+			const styles = css({
+				${property}: token('space.200'),
+			});
+			`,
+			output: outdent`
+			import {css} from '${imp}';
+			const styles = css({
+				${property}Top: token('space.200'),
+				${property}Right: token('space.200'),
+				${property}Bottom: token('space.200'),
+				${property}Left: token('space.200'),
+			});
+			`,
+			errors: [{ messageId: 'expandSpacingShorthand' }],
+		})),
+		// Value of spacing property is a template string
+		...included_compiled_libraries.map((imp) => ({
+			name: `${property}: template string case (one value) (${imp})`,
+			code: outdent`
+			import {css} from '${imp}';
+			const styles = css({
+				${property}: \`\${token('space.200')}\`,
+			});
+			`,
+			output: outdent`
+			import {css} from '${imp}';
+			const styles = css({
+				${property}Top: token('space.200'),
+				${property}Right: token('space.200'),
+				${property}Bottom: token('space.200'),
+				${property}Left: token('space.200'),
+			});
+			`,
+			errors: [{ messageId: 'expandSpacingShorthand' }],
+		})),
+		...included_compiled_libraries.map((imp) => ({
+			name: `${property}: template string case (two values) (${imp})`,
+			code: outdent`
+			import {css} from '${imp}';
+			const styles = css({
+				${property}: \`\${token('space.100')} 0\`,
+			});
+			`,
+			output: outdent`
+			import {css} from '${imp}';
+			const styles = css({
+				${property}Top: token('space.100'),
+				${property}Right: 0,
+				${property}Bottom: token('space.100'),
+				${property}Left: 0,
+			});
+			`,
+			errors: [{ messageId: 'expandSpacingShorthand' }],
+		})),
+		...included_compiled_libraries.map((imp) => ({
+			name: `${property}: template string case (three values) (${imp})`,
+			code: outdent`
+			import {css} from '${imp}';
+			const styles = css({
+				${property}: \`\${token('space.100')} 0 2px\`,
+			});
+			`,
+			output: outdent`
+			import {css} from '${imp}';
+			const styles = css({
+				${property}Top: token('space.100'),
+				${property}Right: 0,
+				${property}Bottom: '2px',
+				${property}Left: 0,
+			});
+			`,
+			errors: [{ messageId: 'expandSpacingShorthand' }],
+		})),
+		...included_compiled_libraries.map((imp) => ({
+			name: `${property}: template string case (four values) (${imp})`,
+			code: outdent`
+			import {css} from '${imp}';
+			const styles = css({
+				${property}: \`\${token('space.100')} 0 0px 12px\`,
+			});
+			const styles2 = css({
+				${property}: \`\${token('space.100')} \${token('space.200')} \${token('space.300')} \${token('space.400')}\`,
+			});
+			`,
+			output: outdent`
+			import {css} from '${imp}';
+			const styles = css({
+				${property}Top: token('space.100'),
+				${property}Right: 0,
+				${property}Bottom: '0px',
+				${property}Left: '12px',
+			});
+			const styles2 = css({
+				${property}Top: token('space.100'),
+				${property}Right: token('space.200'),
+				${property}Bottom: token('space.300'),
+				${property}Left: token('space.400'),
+			});
+			`,
+			errors: Array.from(Array(2), () => ({ messageId: 'expandSpacingShorthand' })),
+		})),
+		{
+			name: `${property}: compiled import (styled.div, @compiled/react)`,
+			code: outdent`
+			import { styled } from '@compiled/react';
+			const styledDiv = styled.div({
+				${property}: \`0 \${token('space.100', '8px')} 0 0\`,
+			});
+			`,
+			output: outdent`
+			import { styled } from '@compiled/react';
+			const styledDiv = styled.div({
+				${property}Top: 0,
+				${property}Right: token('space.100', '8px'),
+				${property}Bottom: 0,
+				${property}Left: 0,
+			});
+			`,
+			errors: [{ messageId: 'expandSpacingShorthand' }],
+		},
+		{
+			name: `${property}: compiled import (cssMap, @compiled/react)`,
+			code: outdent`
+			import { cssMap } from '@compiled/react';
+			const backgroundMap = cssMap({
+				firstDiv: { ${property}: token('space.100') },
+				secondDiv: { ${property}: token('space.100') },
+			});
+			`,
+			output: outdent`
+			import { cssMap } from '@compiled/react';
+			const backgroundMap = cssMap({
+				firstDiv: { ${property}Top: token('space.100'),
+				${property}Right: token('space.100'),
+				${property}Bottom: token('space.100'),
+				${property}Left: token('space.100') },
+				secondDiv: { ${property}Top: token('space.100'),
+				${property}Right: token('space.100'),
+				${property}Bottom: token('space.100'),
+				${property}Left: token('space.100') },
+			});
+			`,
+			errors: Array.from(Array(2), () => ({ messageId: 'expandSpacingShorthand' })),
+		},
+		{
+			name: `${property}: compiled import with alias`,
+			code: outdent`
+			import { styled as styled2 } from '@compiled/react';
+			const style = styled2.span({
+				${property}: \`0 \${token('space.100', '8px')} 0 0\`,
+			});
+			`,
+			output: outdent`
+			import { styled as styled2 } from '@compiled/react';
+			const style = styled2.span({
+				${property}Top: 0,
+				${property}Right: token('space.100', '8px'),
+				${property}Bottom: 0,
+				${property}Left: 0,
+			});
+			`,
+			errors: [{ messageId: 'expandSpacingShorthand' }],
+		},
+		// Miscellaneous
+		{
+			name: `${property}: new property should not be created if existing property already exists`,
+			code: outdent`
+			import {css} from '@compiled/react';
+			const styles = css({
+				${property}: token('space.100'),
+				${property}Top: token('space.200'),
+			});
+			`,
+			output: outdent`
+			import {css} from '@compiled/react';
+			const styles = css({
+				${property}Top: token('space.200'),
+				${property}Right: token('space.100'),
+				${property}Bottom: token('space.100'),
+				${property}Left: token('space.100'),
+			});
+			`,
+			errors: [{ messageId: 'expandSpacingShorthand' }],
+		},
+		{
+			name: `${property}: property with nested selectors`,
+			code: outdent`
+			import {css} from '@compiled/react';
+			const styles = css({
+				${property}: token('space.100'),
+				'.some-selector': {
+					${property}Top: token('space.200'),
+				}
+			});
+			const styles2 = css({
+				${property}Top: token('space.100'),
+				'.some-selector': {
+					${property}: token('space.200'),
+				}
+			});
+			const styles3 = css({
+				'.some-selector': {
+					${property}: token('space.200'),
+					${property}Top: token('space.100'),
+				}
+			});
+			`,
+			output: outdent`
+			import {css} from '@compiled/react';
+			const styles = css({
+				${property}Top: token('space.100'),
+				${property}Right: token('space.100'),
+				${property}Bottom: token('space.100'),
+				${property}Left: token('space.100'),
+				'.some-selector': {
+					${property}Top: token('space.200'),
+				}
+			});
+			const styles2 = css({
+				${property}Top: token('space.100'),
+				'.some-selector': {
+					${property}Top: token('space.200'),
+				${property}Right: token('space.200'),
+				${property}Bottom: token('space.200'),
+				${property}Left: token('space.200'),
+				}
+			});
+			const styles3 = css({
+				'.some-selector': {
+					${property}Top: token('space.100'),
+				${property}Right: token('space.200'),
+				${property}Bottom: token('space.200'),
+				${property}Left: token('space.200'),
+				}
+			});
+			`,
+			errors: Array.from(Array(3), () => ({ messageId: 'expandSpacingShorthand' })),
+		},
+	];
+};
+
+tester.run('expand-spacing-shorthand', expandSpacingShorthand, {
+	valid: [
+		...validTestCases('padding'),
+		...validTestCases('margin'),
+	],
+	invalid: [
+		...invalidTestCases('padding'),
+		...invalidTestCases('margin'),
+	],
+});

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

@@ -0,0 +1,150 @@
+import type { Rule } from 'eslint';
+import type { Property, Node, TemplateLiteral, CallExpression } from 'estree';
+import { getSourceCode } from '../../util/context-compat';
+import { isCompiledAPI } from '../../util/compiled-utils';
+
+const spacingPos = ["Top", "Right", "Bottom", "Left"] as const;
+
+interface ExpandSpacingPropertiesType {
+	context: Rule.RuleContext, 
+	node: Property & { parent?: Node }, 
+	propertyValues: string[], 
+	fixer: Rule.RuleFixer,
+	propertyShorthand: string,
+};
+
+// Checks if node is a call expression with identifier 'token'
+const isTokenCallExpression = (node: CallExpression) => {
+	if (node.callee.type === 'Identifier' && node.callee.name === 'token') {
+		return true;
+	}
+	return false;
+};
+
+// Given a TemplateLiteral node, returns the value of the spacing property as an array of strings
+// e.g. `0 ${token('a')} ${token('b')}` -> ['0', 'token('a')', 'token('b')']
+const parseTemplateLiteral = (templateLiteral: TemplateLiteral, context: Rule.RuleContext) => {
+	const expressions = templateLiteral.expressions;
+	const quasis = templateLiteral.quasis;
+
+	let propertyValues: string[] = [];
+	for (let i = 0; i < expressions.length || i < quasis.length; i++) {
+		if (i < quasis.length) {	
+			const cookedQuasi = quasis[i].value.cooked;
+			if (cookedQuasi) {
+				const splitQuasi = cookedQuasi.split(" ").filter(str => str.length > 0);
+				splitQuasi.forEach(str => {
+					propertyValues.push(isNaN(Number(str)) ? `'${str}'` : str);
+				});
+			}
+		}
+		if (i < expressions.length) {
+			const expr = getSourceCode(context).getText(expressions[i]);
+			propertyValues.push(expr);
+		}
+	}
+	return propertyValues;
+};
+
+const checkValidPropertyValues = (propertyValues: string[]) => {
+	if (!propertyValues.some(str => str.includes("token("))) { return false; }
+	if (propertyValues.length < 1 || propertyValues.length > 4) { return false; }
+	if (propertyValues.some(str => str.includes("calc("))) { return false; }
+	return true;
+}
+
+// To fix spacing shorthands, given a list of spacing property values, expands the spacing property and adds autofix fixes
+const expandSpacingProperties = ({ context, node, propertyValues, fixer, propertyShorthand }: ExpandSpacingPropertiesType)  => {
+	const [top, right = top, bottom = top, left = right] = propertyValues;
+	const spacing: string[] = [top, right, bottom, left];
+
+	const fixes: Rule.Fix[] = [];
+
+	const parentNode = node.parent;
+	if (parentNode && parentNode.type === 'ObjectExpression') {
+		for (var prop of parentNode.properties) {
+			if (prop.type !== 'Property') { continue; }
+			if (prop.key.type === 'Identifier' && prop.range && prop.key.name !== `${propertyShorthand}`) {
+				for (let i = 0; i < spacing.length; i++) {
+					if (prop.key.name === `${propertyShorthand}${spacingPos[i]}`) {
+						let [start, end] = prop.range;
+						// Remove the entire line for the duplicate property
+						while (getSourceCode(context).text[end] !== "\n") {
+							end += 1;
+						}
+						while (getSourceCode(context).text[start] !== "\n") {
+							start -= 1;
+						}
+						spacing[i] = getSourceCode(context).getText(prop.value);
+						fixes.push(fixer.removeRange([start, end]));
+						break;
+					}
+				}
+			}
+		}
+	}
+	
+	fixes.push(fixer.insertTextAfter(node, `${propertyShorthand}Top: ${spacing[0]},\n`));
+	fixes.push(fixer.insertTextAfter(node, `\t${propertyShorthand}Right: ${spacing[1]},\n`));
+	fixes.push(fixer.insertTextAfter(node, `\t${propertyShorthand}Bottom: ${spacing[2]},\n`));
+	fixes.push(fixer.insertTextAfter(node, `\t${propertyShorthand}Left: ${spacing[3]}`));
+	fixes.push(fixer.remove(node));
+	return fixes;
+};
+
+const executeExpandSpacingRule = (context: Rule.RuleContext, node: Property, propertyShorthand: string) => {
+	if (!isCompiledAPI(context, node)) { return; }
+	if (node.value.type === 'TemplateLiteral') {
+		// Value of spacing property is a TemplateLiteral type that contains a token, e.g. padding: `0 token('a')`
+		const propertyValues = parseTemplateLiteral(node.value, context);
+		if (!checkValidPropertyValues(propertyValues)) { return; }
+		context.report({
+			node,
+			messageId: 'expandSpacingShorthand',
+			data: {
+				property: propertyShorthand,
+			},
+			fix(fixer) {
+				return expandSpacingProperties({context, node, propertyValues, fixer, propertyShorthand});
+			},
+		});
+	} else if (node.value.type === 'CallExpression' && isTokenCallExpression(node.value)) {
+		// Value of spacing property is a token CallExpression type, e.g. margin: token('space.100', '8px')
+		const propertyValues = [ getSourceCode(context).getText(node.value) ];
+		context.report({
+			node,
+			messageId: 'expandSpacingShorthand',
+			data: {
+				property: propertyShorthand,
+			},
+			fix(fixer) {
+				return expandSpacingProperties({context, node, propertyValues, fixer, propertyShorthand});
+			},
+		});
+	}
+}
+
+export const expandSpacingShorthand: Rule.RuleModule = {
+	meta: {
+		docs: {
+			url: 'https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/platform/eslint-plugin/src/rules/compiled/expand-spacing-shorthand/',
+		},
+		messages: {
+			expandSpacingShorthand: 'Use {{ property }}Top, {{ property }}Right, {{ property }}Bottom and {{ property }}Left instead of {{ property }} shorthand',
+		},
+		type: 'problem',
+		fixable: 'code',
+	},
+	create(context) {
+		return {
+			'Property[key.name="padding"]': function (node: Property) {
+				executeExpandSpacingRule(context, node, 'padding');
+			},
+			'Property[key.name="margin"]': function (node: Property) {
+				executeExpandSpacingRule(context, node, 'margin');
+			},
+		};
+	},
+};
+
+export default expandSpacingShorthand;

package/src/rules/util/__tests__/context-compat.test.ts

@@ -1,9 +1,67 @@
 import type { Rule, Scope, SourceCode } from 'eslint';
 import type { Node } from 'estree';
 
-import { getScope } from '../context-compat';
+import { getAncestors, getScope } from '../context-compat';
 
 describe('context-compat', () => {
+	describe('getAncestors', () => {
+		let context: Rule.RuleContext;
+		let node: Node;
+		let sourceCode: SourceCode;
+		let ancestors: Node[];
+
+		beforeEach(() => {
+			node = {} as Node;
+			ancestors = [];
+			sourceCode = {
+				getAncestors: jest.fn().mockReturnValue(ancestors),
+			} as unknown as SourceCode;
+		});
+
+		it('should return ancestor nodes from context.sourceCode.getAncestors if available', () => {
+			context = {
+				sourceCode,
+			} as unknown as Rule.RuleContext;
+
+			const result = getAncestors(context, node);
+			expect(result).toBe(ancestors);
+			expect(sourceCode.getAncestors).toHaveBeenCalledWith(node);
+		});
+
+		it('should return ancestors from context.getSourceCode().getAncestors if context.sourceCode is not available', () => {
+			context = {
+				getSourceCode: jest.fn().mockReturnValue(sourceCode),
+			} as unknown as Rule.RuleContext;
+
+			const result = getAncestors(context, node);
+			expect(result).toBe(ancestors);
+			expect(context.getSourceCode).toHaveBeenCalled();
+			expect(sourceCode.getAncestors).toHaveBeenCalledWith(node);
+		});
+
+		it('should return scope from context.getAncestors if neither context.sourceCode nor context.getSourceCode().getAncestors is available', () => {
+			context = {
+				getSourceCode: jest.fn().mockReturnValue({}),
+				getAncestors: jest.fn().mockReturnValue(ancestors),
+			} as unknown as Rule.RuleContext;
+
+			const result = getAncestors(context, node);
+			expect(result).toBe(ancestors);
+			expect(context.getAncestors).toHaveBeenCalled();
+		});
+
+		it('should return scope from context.getAncestors if context.sourceCode does not have getAncestors', () => {
+			context = {
+				sourceCode: {},
+				getAncestors: jest.fn().mockReturnValue(ancestors),
+			} as unknown as Rule.RuleContext;
+
+			const result = getAncestors(context, node);
+			expect(result).toBe(ancestors);
+			expect(context.getAncestors).toHaveBeenCalled();
+		});
+	});
+
 	describe('getScope', () => {
 		let context: Rule.RuleContext;
 		let node: Node;

package/src/rules/util/compiled-utils.ts

@@ -0,0 +1,27 @@
+import type { Node } from 'estree';
+import { getAncestors, getScope } from './context-compat';
+import type { Rule } from 'eslint';
+import {
+	getImportSources,
+	isCompiled,
+	isAtlasKitCSS,
+} from '@atlaskit/eslint-utils/is-supported-import';
+
+// Checks if the function that holds the property is using a Compiled import package that this rule is targeting
+export const isCompiledAPI = (context: Rule.RuleContext, node: Node): boolean => {
+	const importSources = getImportSources(context);
+	const { references } = getScope(context, node);
+	const ancestors = getAncestors(context, node);
+	if (
+		ancestors.some(
+			(ancestor) =>
+				ancestor.type === 'CallExpression' &&
+				ancestor.callee &&
+				(isCompiled(ancestor.callee, references, importSources) ||
+					isAtlasKitCSS(ancestor.callee, references, importSources)),
+		)
+	) {
+		return true;
+	}
+	return false;
+};

package/src/rules/util/context-compat.ts

@@ -12,7 +12,7 @@ import type { Node } from 'estree';
  * `context.getSourceCode()` is deprecated in v8 and removed in v9.
  * @param context - The ESLint rule context
  */
-const getSourceCode = (context: Rule.RuleContext): SourceCode => {
+export const getSourceCode = (context: Rule.RuleContext): SourceCode => {
 	return context.sourceCode ?? context.getSourceCode();
 };
 
@@ -20,9 +20,22 @@ const getSourceCode = (context: Rule.RuleContext): SourceCode => {
  * A compatibility layer to support older versions of ESLint.
  * `context.sourceCode.getScope()` is the preferred way to access Scope, as
  * `context.getScope()` was removed in v9.
+ * https://eslint.org/blog/2023/09/preparing-custom-rules-eslint-v9/#context.getscope()
  * @param context - The ESLint rule context
  * @param node - The node to get the scope for
  */
 export const getScope = (context: Rule.RuleContext, node: Node): Scope.Scope => {
 	return getSourceCode(context)?.getScope?.(node) ?? context.getScope();
 };
+
+/**
+ * A compatibility layer to support older versions of ESLint.
+ * `context.sourceCode.getAncestors()` is the preferred way to access Ancestors, as
+ * `context.getScope()` was removed in v9.
+ * https://eslint.org/blog/2023/09/preparing-custom-rules-eslint-v9/#context.getancestors()
+ * @param context - The ESLint rule context
+ * @param node - The node to get the scope for
+ */
+export const getAncestors = (context: Rule.RuleContext, node: Node): Node[] => {
+	return getSourceCode(context)?.getAncestors?.(node) ?? context.getAncestors();
+};

package/tsconfig.app.json

@@ -27,7 +27,6 @@
 		"**/codemods/**/*.tsx"
 	],
 	"compilerOptions": {
-		"baseUrl": "./",
 		"lib": ["ES2021.String"],
 		"composite": true,
 		"outDir": "../../../tsDist/@atlaskit__eslint-plugin-platform/app"

package/tsconfig.dev.json

@@ -27,7 +27,6 @@
 	],
 	"exclude": ["./dist/**/*", "./build/**/*", "./node_modules/**/*"],
 	"compilerOptions": {
-		"baseUrl": "./",
 		"lib": ["ES2021.String"],
 		"composite": true,
 		"outDir": "../../../tsDist/@atlaskit__eslint-plugin-platform/dev"

package/tsconfig.json

@@ -12,7 +12,6 @@
     "scripts"
   ],
   "compilerOptions": {
-    "baseUrl": "./",
     "lib": ["ES2021.String"]
   },
   "ts-node": {