@atlaskit/eslint-plugin-platform 2.6.0 → 2.7.1

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

@@ -1,211 +0,0 @@
-import { outdent } from 'outdent';
-
-import { tester } from '../../../../__tests__/utils/_tester';
-import { expandBorderShorthand } 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'],
-];
-
-tester.run('expand-border-shorthand', expandBorderShorthand, {
-	valid: [
-		...exempt_packages_calls_and_imports.map(([pkg, imp]) => ({
-			name: `handle only Compiled APIs (${pkg}, ${imp})`,
-			code: outdent`
-			import {${pkg}} from '${imp}';
-
-			const styles = ${pkg}({
-				border: '1px solid red',
-			});
-		`,
-		})),
-		{
-			name: 'CallExpression matches with imported API',
-			code: outdent`
-			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',
-			});
-		`,
-		},
-		{
-			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,
-			});
-			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',
-			});
-		`,
-		},
-		{
-			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',
-			});
-		`,
-		},
-		{
-			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: [
-		...included_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 styles4 = css({
-				border: \`1px red\`,
-			})
-
-			const styles5 = css({
-				border: \`1px\`,
-			})
-		`,
-			errors: Array.from(Array(3), () => ({ 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' })),
-		},
-		{
-			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

@@ -1,103 +0,0 @@
-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;
-	}
-	if (borderString.includes('var(--')) {
-		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.local.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) {
-							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.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/compiled/expand-spacing-shorthand/README.md

@@ -1,38 +0,0 @@
-# `expand-spacing-shorthand`
-
-This ESLint rule enforces the expansion of the CSS `padding` and `margin` shorthand properties into
-its longhand equivalent `{spacing}Top`, `{spacing}Right`, `{spacing}Bottom`, `{spacing}Left`, where 
-the property's value is either an Atlassian Design System token or a template literal which contains
-a 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({
-	padding: token('space.200'),
-});
-
-const styles = css({
-	margin: `${token('space.100')} 0 2px`,
-});
-```
-
-👍 Examples of **correct** code for this rule:
-
-```js
-const styles = css({
-	paddingTop: token('space.200'),
-    paddingRight: token('space.200'),
-    paddingBottom: token('space.200'),
-    paddingLeft: token('space.200'),
-});
-
-const styles = css({
-	marginTop: token('space.100'),
-    marginRight: 0,
-    marginBottom: '2px',
-    marginLeft: 0,
-});
-```