@atlaskit/eslint-plugin-platform 0.7.2 → 0.7.4

package/src/rules/ensure-valid-emotion-css-prop/__tests__/unit/rule.test.ts

@@ -1,142 +0,0 @@
-import { tester } from '../../../../__tests__/utils/_tester';
-import rule from '../../index';
-
-describe('test ensure-valid-emotion-css-prop', () => {
-	tester.run('ensure-valid-emotion-css-prop', rule, {
-		valid: [
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx, css } from '@emotion/react';
-				const styles = css({ opacity: 0.5 });
-			  const Component = () => <div css={styles} />;`,
-				filename: 'src/index.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx, css } from '@emotion/react';
-				const styles = css({ opacity: 0.5 });
-			  const Component = () => <div css={[styles, { color: 'red' }]} />;`,
-				filename: 'src/index.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx } from '@emotion/react';
-			  const Component = () => <div />;`,
-				filename: 'src/index.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx, css } from '@emotion/react';
-			  const Component = () => <div css={css({ opacity: 0.5 })} />;`,
-				filename: 'src/index.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx } from '@emotion/react';
-			  const Component = () => <div css={{ opacity: 0.5 }} />;`,
-				filename: 'src/__tests__/test.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx } from '@emotion/react';
-			  const Component = () => <div css={{ opacity: 0.5 }} />;`,
-				filename: 'src/examples/example.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx } from '@emotion/react';
-			  const Component = () => <div css={{ opacity: 0.5 }} />;`,
-				filename: 'src/example-helpers/index.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx } from '@emotion/react';
-			  const Component = () => <div css={{ opacity: 0.5 }} />;`,
-				filename: 'src/__fixtures__/index.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx } from '@compiled/react';
-			  const Component = () => <div />;`,
-				filename: 'src/index.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx } from '@emotion/react';
-				const styles = { opacity: 0.5 };
-			  const Component = () => <div css={styles} />;`,
-				filename: 'src/index.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx, css } from '@emotion/react';
-				const getOpacity = (foo) => 0.5;
-			  const Component = (props) => {
-					const styles = { opacity: getOpacity(props.foo) };
-					return <div css={styles} />
-				};`,
-				filename: 'src/index.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx, css } from '@emotion/react';
-				const getStyles = (opacity) => ({ color: 'red', opacity });
-			  const Component = (props) => <div css={getStyles(props.opacity)} />`,
-				filename: 'src/index.tsx',
-			},
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx, css } from '@emotion/react';
-				const getOpacity = (foo) => 0.5;
-				function getStyles(props) {
-					return { color: 'red', opacity: props.opacity };
-				}
-			  const Component = (props) => <div css={getStyles(props)} />;`,
-				filename: 'src/index.tsx',
-			},
-		],
-		invalid: [
-			{
-				code: `
-				/** @jsx jsx */
-			  import { jsx } from '@emotion/react';
-			  const Component = () => <div css={{ opacity: 0.5 }} />;`,
-				filename: 'src/index.tsx',
-				errors: [{ messageId: 'noEmotionCssImport' }],
-			},
-			{
-				code: `
-				/** @jsx jsx */
-				import { jsx, css } from '@emotion/react';
-				const getOpacity = (foo) => 0.5;
-				const Component = (props) => <div css={{ opacity: getOpacity(props.foo) }} />;`,
-				filename: 'src/index.tsx',
-				errors: [{ messageId: 'noEmotionCssPropFunctionCall' }],
-			},
-			{
-				code: `
-				/** @jsx jsx */
-				import { jsx, css } from '@emotion/react';
-				function getOpacity(foo) {
-					return 0.5;
-				}
-				const Component = (props) => <div css={{ opacity: getOpacity(props.foo) }} />;`,
-				filename: 'src/index.tsx',
-				errors: [{ messageId: 'noEmotionCssPropFunctionCall' }],
-			},
-		],
-	});
-});

package/src/rules/ensure-valid-emotion-css-prop/index.ts

@@ -1,96 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import type { Rule } from 'eslint';
-
-type Position = {
-	line: number;
-	column: number;
-};
-
-const rule: Rule.RuleModule = {
-	meta: {
-		type: 'problem',
-		docs: {
-			description: 'Ensure valid use of the `css` prop from `@emotion/react`',
-			recommended: true,
-		},
-		messages: {
-			noEmotionCssImport: 'Must import `css` from `@emotion/react` when using the `css` prop.',
-			noEmotionCssPropFunctionCall:
-				'No function calls allowed when passing an object directly to the `css` prop with `@emotion/react`.',
-		},
-	},
-	create(context) {
-		let emotionJsxImported = false;
-		let emotionJsxImportPosition: Position | null | undefined;
-		let emotionCssImported = false;
-		let cssPropExpressonUsed = false;
-
-		// Ignore files in these directories
-		if (/example|__tests__|__fixtures__/.test(context.filename)) {
-			return {};
-		}
-
-		return {
-			ImportDeclaration(node) {
-				if (node.source.value === '@emotion/react') {
-					node.specifiers.forEach((specifier) => {
-						if (specifier.type === 'ImportSpecifier') {
-							if (specifier.imported.name === 'jsx') {
-								emotionJsxImported = true;
-								emotionJsxImportPosition = specifier.loc?.start;
-							}
-							if (specifier.imported.name === 'css') {
-								emotionCssImported = true;
-							}
-						}
-					});
-				}
-			},
-			JSXAttribute(node: any) {
-				const { name, value } = node;
-
-				// Only run on emotion css props
-				if (!emotionJsxImported) return;
-				if (name.name !== 'css') return;
-
-				if (
-					value.type === 'JSXExpressionContainer' &&
-					value.expression.type === 'ObjectExpression'
-				) {
-					cssPropExpressonUsed = true;
-					let containsFunctionExpression = false;
-
-					// Iterate over the properties of the object
-					value.expression.properties.forEach((prop: any) => {
-						// Check for function expressions directly within the object literal
-						if (
-							prop.value?.type === 'ArrowFunctionExpression' ||
-							prop.value?.type === 'FunctionExpression' ||
-							prop.value?.type === 'CallExpression'
-						) {
-							containsFunctionExpression = true;
-						}
-					});
-
-					// If a function expression is found within the direct object literal, report an error
-					if (containsFunctionExpression) {
-						context.report({
-							node,
-							messageId: 'noEmotionCssPropFunctionCall',
-						});
-					}
-				}
-			},
-			'Program:exit'() {
-				if (emotionJsxImported && cssPropExpressonUsed && !emotionCssImported) {
-					context.report({
-						messageId: 'noEmotionCssImport',
-						loc: emotionJsxImportPosition || { line: 1, column: 0 },
-					});
-				}
-			},
-		};
-	},
-};
-
-export default rule;