@atlaskit/eslint-plugin-platform 2.0.2 → 2.1.1

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

@@ -0,0 +1,400 @@
+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 = ['@emotion/react', '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}';
+			import {xcss} from '@atlaskit/primitives';
+
+			const styles = css({
+				${property}: token('space.200'),
+			});
+			const styles2 = xcss({
+				${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' }],
+		},
+		// Template literal containing expressions that is not token should only throw error with no autofix
+		{
+			name: `${property}: property value template string where it contains an expression that is not a token`,
+			code: outdent`
+			import {css} from '@compiled/react';
+			const styles = css({
+				${property}: \`\${token('space.100', '8px')} \${gridSize * 2}px\`,
+			});
+			const styles2 = css({
+				padding: \`\${DROPDOWN_HEADER_VERTICAL_PADDING} \${token('space.075','6px')} 
+					\${DROPDOWN_HEADER_VERTICAL_PADDING} \${token('space.200', '16px')}\`,
+			});
+			const styles3 = css({
+				${property}: \`\${token('space.050', '4px')} \${token('space.150', '12px')} \${token('space.150', '12px')} 
+					\${({ isSummaryView }: EditFormContentWrapperProps) =>
+					isSummaryView ? token('space.0', '0') : token('space.150', '12px')}\`,
+			});
+			`,
+			errors: Array.from(Array(3), () => ({ 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' })),
+		},
+		{
+			name: `${property}: property value includes newline and tab`,
+			code: outdent`
+			import {css} from '@compiled/react';
+			const styles = css({
+				${property}: \`\${token('space.100')} \${token('space.200')}
+					\${token('space.300')} \${token('space.400')}\`,
+			});
+			`,
+			output: outdent`
+			import {css} from '@compiled/react';
+			const styles = css({
+				${property}Top: token('space.100'),
+				${property}Right: token('space.200'),
+				${property}Bottom: token('space.300'),
+				${property}Left: token('space.400'),
+			});
+			`,
+			errors: [{ messageId: 'expandSpacingShorthand' }],
+		},
+		// TODO (AFB-1022): Resolve this failing test
+		// {
+		//  name: `${property}: styled components with prop input`,
+		//  code: outdent`
+		//  import { styled } from '@compiled/react';
+		//  const MenuOptionWrapper = styled.div<{ isDisabled: boolean }>({
+		//      '& button': ({ isDisabled }) => ({
+		//          ${property}: \`\${token('space.075', '6px')} \${token('space.200', '16px')}\`,
+		//      }),
+		//  });
+		//  `,
+		//  output: outdent`
+		//  import { styled } from '@compiled/react';
+		//  const MenuOptionWrapper = styled.div<{ isDisabled: boolean }>({
+		//      '& button': ({ isDisabled }) => ({
+		//          ${property}Top: token('space.075', '6px'),
+		//      ${property}Right: token('space.200', '16px'),
+		//      ${property}Bottom: token('space.075', '6px'),
+		//      ${property}Left: token('space.200', '16px'),
+		//      }),
+		//  });
+		//  `,
+		//  errors: [{ 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,195 @@
+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.trim().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;
+};
+
+// Check that all expressions in TemplateLiteral are token expressions
+// If true: create an autofix
+// If false: report violation without autofix
+const hasOnlyTokens = (templateLiteral: TemplateLiteral) => {
+	const expressions = templateLiteral.expressions;
+	return expressions.every((expr) => expr.type === 'CallExpression' && isTokenCallExpression(expr));
+};
+
+// 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')`
+		if (!hasOnlyTokens(node.value)) {
+			context.report({
+				node,
+				messageId: 'expandSpacingShorthand',
+				data: {
+					property: propertyShorthand,
+				},
+			});
+			return;
+		}
+		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/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();
 };
 

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": {