@atlaskit/eslint-plugin-platform 2.7.0 → 2.7.1

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

@@ -1,448 +0,0 @@
-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(),
-			});
-			`,
-		},
-		// 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')}\`,
-			});
-			const styles4 = css({
-				${property}: \`\${token('space.100', '8px')} -\${gridSize}px 0\`,
-			});
-			`,
-		},
-	];
-};
-
-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' }],
-		},
-		// Strings that are not valid property values should not be autofixed (e.g. !important)
-		{
-			name: `${property}: Don't autofix if not able to handle all the string values, e.g !important`,
-			code: outdent`
-			import {css} from '@compiled/react';
-			const styles = css({
-				${property}: \`0 \${token('space.200', '16px')} !important\`,
-			});
-			`,
-			errors: [{ messageId: 'expandSpacingShorthand' }],
-		},
-		{
-			name: `${property}: Autofix if able to handle all string values`,
-			code: outdent`
-			import {css} from '@compiled/react';
-			const styles = css({
-				${property}: \`0 auto \${token('space.300', '24px')}\`,
-			});
-			`,
-			output: outdent`
-			import {css} from '@compiled/react';
-			const styles = css({
-				${property}Top: 0,
-				${property}Right: 'auto',
-				${property}Bottom: token('space.300', '24px'),
-				${property}Left: 'auto',
-			});
-			`,
-			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' })),
-		},
-		{
-			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')}\`,
-			});
-			const styles2 = css({
-				paddingBottom: token('space.050', '4px'),
-				'&& > span': {
-					padding: \`\${token('space.100', '8px')} \${token('space.150', '12px')} 7px
-					\${token('space.150', '12px')}\`,
-				},
-			});
-			`,
-			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'),
-			});
-			const styles2 = css({
-				paddingBottom: token('space.050', '4px'),
-				'&& > span': {
-					paddingTop: token('space.100', '8px'),
-				paddingRight: token('space.150', '12px'),
-				paddingBottom: '7px',
-				paddingLeft: token('space.150', '12px'),
-				},
-			});
-			`,
-			errors: Array.from(Array(2), () => ({ 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

@@ -1,240 +0,0 @@
-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 splitQuasis = cookedQuasi.split(' ');
-				splitQuasis.forEach((str) => {
-					str = str.trim().replace("'", '');
-					if (str.length > 0) {
-						propertyValues.push(isNaN(Number(str)) ? `'${str}'` : str);
-					}
-				});
-			}
-		}
-		if (i < expressions.length) {
-			const expr = getSourceCode(context).getText(expressions[i]);
-			propertyValues.push(expr);
-		}
-	}
-	return propertyValues;
-};
-
-/**
- * Checks if the parsed property values are valid; values that we shouldn't handle with the fixer:
- * 1. At least one expression in TemplateLiteral is not a token expression
- * 2. Do not contain a token
- * 3. Have length that are not in the range [1, 4] for different spacing directions
- * 		- No more than 4 to exclude additional values such as `!important`
- * 4. Includes `calc(...)`
- * Then, the rule will return with no error
- * @param propertyValues property values parsed as list of strings
- * @returns boolean
- */
-const isPropertyValueExempted = (templateLiteral: TemplateLiteral, propertyValues: string[]) => {
-	const expressions = templateLiteral.expressions;
-	if (!expressions.every((expr) => expr.type === 'CallExpression' && isTokenCallExpression(expr))) {
-		return true;
-	}
-	if (!propertyValues.some((str) => str.includes('token('))) {
-		return true;
-	}
-	if (propertyValues.length < 1 || propertyValues.length > 4) {
-		return true;
-	}
-	if (propertyValues.some((str) => str.includes('calc('))) {
-		return true;
-	}
-	return false;
-};
-
-/**
- *  Checks if the parsed property values are invalid (i.e. rule violation thrown) and autofix required. Cases are when
- *  property values must have a format which includes -> e.g. 2, '2(rem|em|px)', auto, initial, inherit, token(...)
- *  The rule will return with error and provide a fix
- * @param templateLiteral TemplateLiteral AST Node
- * @param propertyValues property values parsed as list of strings
- * @returns boolean
- */
-const isPropertyValuesInvalidFix = (propertyValues: string[]) => {
-	for (const propValue of propertyValues) {
-		if (propValue === '0') {
-			continue;
-		}
-		if (['auto', 'initial', 'inherit'].includes(propValue.slice(1, -1))) {
-			continue;
-		}
-		if (/^token\(.*\)$/.test(propValue)) {
-			continue;
-		}
-		if (/^['"]\d+(\.\d+)?((rem)|(em)|(px))['"]$/.test(propValue)) {
-			continue;
-		}
-		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') {
-		const propertyValues = parseTemplateLiteral(node.value, context);
-		if (isPropertyValueExempted(node.value, propertyValues)) {
-			// Valid, so no error should be thrown
-			return;
-		}
-		if (isPropertyValuesInvalidFix(propertyValues)) {
-			// Invalid, so error should be thrown and fix provided
-			context.report({
-				node,
-				messageId: 'expandSpacingShorthand',
-				data: {
-					property: propertyShorthand,
-				},
-				fix(fixer) {
-					return expandSpacingProperties({
-						context,
-						node,
-						propertyValues,
-						fixer,
-						propertyShorthand,
-					});
-				},
-			});
-		} else {
-			context.report({
-				node,
-				messageId: 'expandSpacingShorthand',
-				data: {
-					property: propertyShorthand,
-				},
-			});
-			return;
-		}
-	} 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/constants.tsx

@@ -1,20 +0,0 @@
-// List of libraries that we maintain or have worked on
-// - eg `@atlaskit/feature-gate-js-client` shouldn't be included in here
-export const FEATURE_API_IMPORT_SOURCES = new Set([
-	'@atlassian/jira-feature-flagging',
-	'@atlassian/jira-feature-flagging-using-meta',
-	'@atlassian/jira-feature-gating',
-	'@atlassian/jira-feature-experiments',
-	'@atlaskit/platform-feature-flags',
-]);
-
-export const FEATURE_MOCKS_IMPORT_SOURCES = new Set([
-	'@atlassian/jira-feature-flagging-mocks',
-	'@atlassian/jira-feature-gates-test-mocks',
-	'@atlassian/jira-feature-gates-storybook-mocks',
-]);
-
-export const FEATURE_UTILS_IMPORT_SOURCES = new Set([
-	'@atlassian/jira-feature-flagging-utils',
-	'@atlassian/jira-feature-gate-component',
-]);