@atlaskit/eslint-plugin-platform 2.1.2 → 2.2.1

package/src/index.tsx

@@ -1,5 +1,6 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import type { Linter } from 'eslint';
+import compiledPlugin from '@compiled/eslint-plugin';
+import type { ESLint, Linter } from 'eslint';
 import ensureFeatureFlagRegistration from './rules/ensure-feature-flag-registration';
 import noPreAndPostInstallScripts from './rules/no-pre-post-installs';
 import ensureTestRunnerArguments from './rules/ensure-test-runner-arguments';
@@ -27,7 +28,13 @@ import useRecommendedUtils from './rules/feature-gating/use-recommended-utils';
 import expandBackgroundShorthand from './rules/compiled/expand-background-shorthand';
 import expandSpacingShorthand from './rules/compiled/expand-spacing-shorthand';
 
-export const rules = {
+const packageJson: {
+	name: string;
+	version: string;
+	// eslint-disable-next-line import/no-extraneous-dependencies
+} = require('@atlaskit/eslint-plugin-platform/package.json');
+
+const rules = {
 	'ensure-feature-flag-registration': ensureFeatureFlagRegistration,
 	'ensure-feature-flag-prefix': ensureFeatureFlagPrefix,
 	'ensure-test-runner-arguments': ensureTestRunnerArguments,
@@ -75,36 +82,27 @@ const commonConfig = {
 			runtime: 'classic',
 		},
 	],
-};
+} satisfies Linter.RulesRecord;
 
-export const configs = {
-	recommended: {
-		plugins: ['@atlaskit/platform', '@compiled'],
-		rules: {
-			...commonConfig,
-			// See platform/packages/platform/eslint-plugin/src/rules/feature-gating/README.md
-			// These rules are specific to `platform` and seem a WIP; jira and confluence currently have their own rules
-			'@atlaskit/platform/no-module-level-eval': 'error',
-			'@atlaskit/platform/static-feature-flags': 'error',
-			'@atlaskit/platform/no-preconditioning': 'error',
-			'@atlaskit/platform/inline-usage': 'error',
-			'@atlaskit/platform/prefer-fg': 'error',
-			'@atlaskit/platform/no-alias': 'error',
-			// end: feature-gating rules
-			'@atlaskit/platform/ensure-feature-flag-registration': 'error',
-			'@atlaskit/platform/ensure-feature-flag-prefix': [
-				'warn',
-				{ allowedPrefixes: ['platform.', 'platform_'] },
-			],
-		},
-	},
-	jira: {
-		plugins: ['@atlaskit/platform', '@compiled'],
-		rules: {
-			...commonConfig,
-		},
-	},
-};
+const recommendedRules = {
+	...commonConfig,
+	// See platform/packages/platform/eslint-plugin/src/rules/feature-gating/README.md
+	// These rules are specific to `platform` and seem a WIP; jira and confluence currently have their own rules
+	'@atlaskit/platform/no-module-level-eval': 'error',
+	'@atlaskit/platform/static-feature-flags': 'error',
+	'@atlaskit/platform/no-preconditioning': 'error',
+	'@atlaskit/platform/inline-usage': 'error',
+	'@atlaskit/platform/prefer-fg': 'error',
+	'@atlaskit/platform/no-alias': 'error',
+	// end: feature-gating rules
+	'@atlaskit/platform/ensure-feature-flag-registration': 'error',
+	'@atlaskit/platform/ensure-feature-flag-prefix': [
+		'warn',
+		{ allowedPrefixes: ['platform.', 'platform_'] },
+	],
+} satisfies Linter.RulesRecord;
+
+const jiraRules = commonConfig;
 
 const jsonPrefix =
 	'/* eslint-disable quote-props, comma-dangle, quotes, semi, eol-last, @typescript-eslint/semi, no-template-curly-in-string */ module.exports = ';
@@ -112,55 +110,98 @@ const jsonPrefix =
 const jsonPrefixForFlatConfig =
 	'/* eslint-disable quote-props, comma-dangle, quotes, semi, eol-last, no-template-curly-in-string */ module.exports = ';
 
-export const processors = {
-	'package-json-processor': {
-		preprocess: (source: string) => {
-			// augment the json into a js file
-			return [jsonPrefix + source.trim()];
+const { name, version } = packageJson;
+const plugin = {
+	meta: {
+		name,
+		version,
+	},
+	rules,
+	configs: {
+		recommended: {
+			plugins: ['@atlaskit/platform', '@compiled'],
+			rules: recommendedRules,
 		},
-		postprocess: (messages) => {
-			return messages[0].map((message) => {
-				const { fix } = message;
-				if (!fix) {
-					return message;
-				}
-
-				const offset = jsonPrefix.length;
-				return {
-					...message,
-					fix: {
-						...fix,
-						range: [fix.range[0] - offset, fix.range[1] - offset],
-					},
-				};
-			});
+		'recommended/flat': {
+			plugins: {
+				get '@atlaskit/platform'(): ESLint.Plugin {
+					return plugin;
+				},
+				// @ts-expect-error there's an issue with the types for @compiled/eslint-plugin ('no-css-prop-without-css-function' specifically)
+				'@compiled': { meta: compiledPlugin.meta, rules: compiledPlugin.rules } as ESLint.Plugin,
+			},
+			rules: recommendedRules,
 		},
-		supportsAutofix: true,
-	} as Linter.Processor,
-	// This processor is used for ESLint FlatConfig,
-	// once we roll out FlatConfig, we can remove the above processor
-	'package-json-processor-for-flat-config': {
-		preprocess: (source: string) => {
-			// augment the json into a js file
-			return [jsonPrefixForFlatConfig + source.trim()];
+		jira: {
+			plugins: ['@atlaskit/platform', '@compiled'],
+			rules: jiraRules,
 		},
-		postprocess: (messages) => {
-			return messages[0].map((message) => {
-				const { fix } = message;
-				if (!fix) {
-					return message;
-				}
-
-				const offset = jsonPrefixForFlatConfig.length;
-				return {
-					...message,
-					fix: {
-						...fix,
-						range: [fix.range[0] - offset, fix.range[1] - offset],
-					},
-				};
-			});
+		'jira/flat': {
+			plugins: {
+				get '@atlaskit/platform'(): ESLint.Plugin {
+					return plugin;
+				},
+				// @ts-expect-error there's an issue with the types for @compiled/eslint-plugin ('no-css-prop-without-css-function' specifically)
+				'@compiled': { meta: compiledPlugin.meta, rules: compiledPlugin.rules } as ESLint.Plugin,
+			},
+			rules: jiraRules,
 		},
-		supportsAutofix: true,
-	} as Linter.Processor,
-};
+	},
+	processors: {
+		'package-json-processor': {
+			preprocess: (source: string) => {
+				// augment the json into a js file
+				return [jsonPrefix + source.trim()];
+			},
+			postprocess: (messages) => {
+				return messages[0].map((message) => {
+					const { fix } = message;
+					if (!fix) {
+						return message;
+					}
+
+					const offset = jsonPrefix.length;
+					return {
+						...message,
+						fix: {
+							...fix,
+							range: [fix.range[0] - offset, fix.range[1] - offset],
+						},
+					};
+				});
+			},
+			supportsAutofix: true,
+		} as Linter.Processor,
+		// This processor is used for ESLint FlatConfig,
+		// once we roll out FlatConfig, we can remove the above processor
+		'package-json-processor-for-flat-config': {
+			preprocess: (source: string) => {
+				// augment the json into a js file
+				return [jsonPrefixForFlatConfig + source.trim()];
+			},
+			postprocess: (messages) => {
+				return messages[0].map((message) => {
+					const { fix } = message;
+					if (!fix) {
+						return message;
+					}
+
+					const offset = jsonPrefixForFlatConfig.length;
+					return {
+						...message,
+						fix: {
+							...fix,
+							range: [fix.range[0] - offset, fix.range[1] - offset],
+						},
+					};
+				});
+			},
+			supportsAutofix: true,
+		} as Linter.Processor,
+	},
+} satisfies ESLint.Plugin;
+const configs = plugin.configs;
+const processors = plugin.processors;
+
+export { configs, plugin, processors, rules };
+export default plugin;

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

@@ -272,6 +272,36 @@ const invalidTestCases = (property: string) => {
 			`,
 			errors: Array.from(Array(3), () => ({ 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`,
@@ -383,7 +413,7 @@ const invalidTestCases = (property: string) => {
 			`,
 			errors: Array.from(Array(2), () => ({ messageId: 'expandSpacingShorthand' })),
 		},
-		// TODO (AFB-1022): Resolve this failing test
+		// // TODO (AFB-1022): Resolve this failing test
 		// {
 		//  name: `${property}: styled components with prop input`,
 		//  code: outdent`

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

@@ -34,7 +34,7 @@ const parseTemplateLiteral = (templateLiteral: TemplateLiteral, context: Rule.Ru
 			if (cookedQuasi) {
 				const splitQuasis = cookedQuasi.split(' ');
 				splitQuasis.forEach((str) => {
-					str = str.trim().replace("\'", "");
+					str = str.trim().replace("'", '');
 					if (str.length > 0) {
 						propertyValues.push(isNaN(Number(str)) ? `'${str}'` : str);
 					}
@@ -49,26 +49,52 @@ const parseTemplateLiteral = (templateLiteral: TemplateLiteral, context: Rule.Ru
 	return propertyValues;
 };
 
-const checkValidPropertyValues = (propertyValues: string[]) => {
+/**
+ * Checks if the parsed property values are valid (i.e. no rule violation will be thrown). Cases are, the property values:
+ * 1. Do not contain a token
+ * 2. Have length that are not in the range [1, 4]
+ * 3. Includes `calc(...)`
+ * Then, the rule will return with no error
+ * @param propertyValues property values parsed as list of strings
+ * @returns boolean
+ */
+const isPropertyValueExempted = (propertyValues: string[]) => {
 	if (!propertyValues.some((str) => str.includes('token('))) {
-		return false;
+		return true;
 	}
 	if (propertyValues.length < 1 || propertyValues.length > 4) {
-		return false;
+		return true;
 	}
 	if (propertyValues.some((str) => str.includes('calc('))) {
-		return false;
+		return true;
 	}
-	return true;
+	return false;
 };
 
-// Check that all expressions in TemplateLiteral are token expressions
-// If true: create an autofix
-// If false: report violation without autofix
-const hasOnlyTokens = (templateLiteral: TemplateLiteral) => {
+/**
+ * Checks if the parsed property values are invalid (i.e. rule violation thrown) and autofix required. Cases are when:
+ *  1. All expressions in TemplateLiteral are token expressions
+ *  2. 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 = (templateLiteral: TemplateLiteral, propertyValues: string[]) => {
 	const expressions = templateLiteral.expressions;
-	return expressions.every((expr) => expr.type === 'CallExpression' && isTokenCallExpression(expr));
-};
+	if (!expressions.every((expr) => expr.type === 'CallExpression' && isTokenCallExpression(expr))) {
+		return false;
+	}
+	
+	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 = ({
@@ -130,8 +156,24 @@ const executeExpandSpacingRule = (
 		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)) {
+		const propertyValues = parseTemplateLiteral(node.value, context);
+		if (isPropertyValueExempted(propertyValues)) {
+			// Valid, so no error should be thrown
+			return;
+		}
+		if (isPropertyValuesInvalidFix(node.value, 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',
@@ -141,20 +183,6 @@ const executeExpandSpacingRule = (
 			});
 			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)];