@atlaskit/eslint-plugin-platform 0.14.0 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/eslint-plugin-platform
 
+## 1.0.0
+
+### Major Changes
+
+- [#168864](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/168864)
+  [`49e4510bd86d3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/49e4510bd86d3) -
+  update eslint rule 'expand-border-properties' from warn to error
+
 ## 0.14.0
 
 ### Minor Changes

package/dist/cjs/index.js

@@ -68,7 +68,7 @@ var commonConfig = {
   '@atlaskit/platform/ensure-atlassian-team': 'error',
   '@atlaskit/platform/no-module-level-eval-nav4': 'error',
   // Compiled: rules that are not included via `@compiled/recommended
-  '@atlaskit/platform/expand-border-shorthand': 'warn',
+  '@atlaskit/platform/expand-border-shorthand': 'error',
   '@atlaskit/platform/expand-background-shorthand': 'warn',
   '@compiled/jsx-pragma': ['error', {
     importSources: ['@atlaskit/css'],

package/dist/cjs/rules/compiled/expand-border-shorthand/index.js

@@ -19,6 +19,9 @@ var separateBorderProperties = function separateBorderProperties(borderString, p
   if (EXCLUDED_VALUES.includes(borderString)) {
     return;
   }
+  if (borderString.includes('var(--')) {
+    return;
+  }
   context.report({
     node: property,
     messageId: 'expandBorderShorthand'
@@ -39,7 +42,7 @@ var isCompiledAPI = function isCompiledAPI(importDeclaration, callExpression) {
     return;
   }
   return importDeclaration.specifiers.some(function (specifier) {
-    return specifier.type === 'ImportSpecifier' && specifier.imported.name === functionName;
+    return specifier.type === 'ImportSpecifier' && specifier.local.name === functionName;
   });
 };
 var expandBorderShorthand = exports.expandBorderShorthand = {
@@ -66,21 +69,11 @@ var expandBorderShorthand = exports.expandBorderShorthand = {
         if (importDeclaration) {
           if (isCompiledAPI(importDeclaration, callExpression)) {
             if (node.value.type === 'Literal' && node.value.value !== null) {
-              if (typeof node.value.value === 'string') {
-                var borderString = node.value.value;
+              var borderString = typeof node.value.value === 'string' ? node.value.value : node.value.raw;
+              if (borderString) {
                 separateBorderProperties(borderString, node, context);
-              } else if (node.value.raw) {
-                var _borderString = node.value.raw;
-                separateBorderProperties(_borderString, node, context);
               }
             } else if (node.value.type === 'TemplateLiteral') {
-              if (node.value.quasis.length > 1 || node.value.expressions.length > 0) {
-                context.report({
-                  node: node,
-                  messageId: 'expandBorderShorthand'
-                });
-                return;
-              }
               if (node.value.quasis.length === 1 && node.value.quasis[0].value.cooked) {
                 var borderQuasis = node.value.quasis[0].value.cooked;
                 separateBorderProperties(borderQuasis, node, context);

package/dist/es2019/index.js

@@ -60,7 +60,7 @@ const commonConfig = {
   '@atlaskit/platform/ensure-atlassian-team': 'error',
   '@atlaskit/platform/no-module-level-eval-nav4': 'error',
   // Compiled: rules that are not included via `@compiled/recommended
-  '@atlaskit/platform/expand-border-shorthand': 'warn',
+  '@atlaskit/platform/expand-border-shorthand': 'error',
   '@atlaskit/platform/expand-background-shorthand': 'warn',
   '@compiled/jsx-pragma': ['error', {
     importSources: ['@atlaskit/css'],

package/dist/es2019/rules/compiled/expand-border-shorthand/index.js

@@ -13,6 +13,9 @@ const separateBorderProperties = (borderString, property, context) => {
   if (EXCLUDED_VALUES.includes(borderString)) {
     return;
   }
+  if (borderString.includes('var(--')) {
+    return;
+  }
   context.report({
     node: property,
     messageId: 'expandBorderShorthand'
@@ -32,7 +35,7 @@ const isCompiledAPI = (importDeclaration, callExpression) => {
   if (!functionName) {
     return;
   }
-  return importDeclaration.specifiers.some(specifier => specifier.type === 'ImportSpecifier' && specifier.imported.name === functionName);
+  return importDeclaration.specifiers.some(specifier => specifier.type === 'ImportSpecifier' && specifier.local.name === functionName);
 };
 export const expandBorderShorthand = {
   meta: {
@@ -58,21 +61,11 @@ export const expandBorderShorthand = {
         if (importDeclaration) {
           if (isCompiledAPI(importDeclaration, callExpression)) {
             if (node.value.type === 'Literal' && node.value.value !== null) {
-              if (typeof node.value.value === 'string') {
-                const borderString = node.value.value;
-                separateBorderProperties(borderString, node, context);
-              } else if (node.value.raw) {
-                const borderString = node.value.raw;
+              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.expressions.length > 0) {
-                context.report({
-                  node,
-                  messageId: 'expandBorderShorthand'
-                });
-                return;
-              }
               if (node.value.quasis.length === 1 && node.value.quasis[0].value.cooked) {
                 const borderQuasis = node.value.quasis[0].value.cooked;
                 separateBorderProperties(borderQuasis, node, context);

package/dist/esm/index.js

@@ -63,7 +63,7 @@ var commonConfig = {
   '@atlaskit/platform/ensure-atlassian-team': 'error',
   '@atlaskit/platform/no-module-level-eval-nav4': 'error',
   // Compiled: rules that are not included via `@compiled/recommended
-  '@atlaskit/platform/expand-border-shorthand': 'warn',
+  '@atlaskit/platform/expand-border-shorthand': 'error',
   '@atlaskit/platform/expand-background-shorthand': 'warn',
   '@compiled/jsx-pragma': ['error', {
     importSources: ['@atlaskit/css'],

package/dist/esm/rules/compiled/expand-border-shorthand/index.js

@@ -13,6 +13,9 @@ var separateBorderProperties = function separateBorderProperties(borderString, p
   if (EXCLUDED_VALUES.includes(borderString)) {
     return;
   }
+  if (borderString.includes('var(--')) {
+    return;
+  }
   context.report({
     node: property,
     messageId: 'expandBorderShorthand'
@@ -33,7 +36,7 @@ var isCompiledAPI = function isCompiledAPI(importDeclaration, callExpression) {
     return;
   }
   return importDeclaration.specifiers.some(function (specifier) {
-    return specifier.type === 'ImportSpecifier' && specifier.imported.name === functionName;
+    return specifier.type === 'ImportSpecifier' && specifier.local.name === functionName;
   });
 };
 export var expandBorderShorthand = {
@@ -60,21 +63,11 @@ export var expandBorderShorthand = {
         if (importDeclaration) {
           if (isCompiledAPI(importDeclaration, callExpression)) {
             if (node.value.type === 'Literal' && node.value.value !== null) {
-              if (typeof node.value.value === 'string') {
-                var borderString = node.value.value;
+              var borderString = typeof node.value.value === 'string' ? node.value.value : node.value.raw;
+              if (borderString) {
                 separateBorderProperties(borderString, node, context);
-              } else if (node.value.raw) {
-                var _borderString = node.value.raw;
-                separateBorderProperties(_borderString, node, context);
               }
             } else if (node.value.type === 'TemplateLiteral') {
-              if (node.value.quasis.length > 1 || node.value.expressions.length > 0) {
-                context.report({
-                  node: node,
-                  messageId: 'expandBorderShorthand'
-                });
-                return;
-              }
               if (node.value.quasis.length === 1 && node.value.quasis[0].value.cooked) {
                 var borderQuasis = node.value.quasis[0].value.cooked;
                 separateBorderProperties(borderQuasis, node, context);

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@atlaskit/eslint-plugin-platform",
 	"description": "The essential plugin for use with Atlassian frontend platform tools",
-	"version": "0.14.0",
+	"version": "1.0.0",
 	"author": "Atlassian Pty Ltd",
 	"atlassian": {
 		"team": "Build Infra",

package/src/index.tsx

@@ -62,7 +62,7 @@ const commonConfig = {
 	'@atlaskit/platform/ensure-atlassian-team': 'error',
 	'@atlaskit/platform/no-module-level-eval-nav4': 'error',
 	// Compiled: rules that are not included via `@compiled/recommended
-	'@atlaskit/platform/expand-border-shorthand': 'warn',
+	'@atlaskit/platform/expand-border-shorthand': 'error',
 	'@atlaskit/platform/expand-background-shorthand': 'warn',
 	'@compiled/jsx-pragma': [
 		'error',

package/src/rules/compiled/expand-border-shorthand/README.md

@@ -1,6 +1,6 @@
 # `shorthand-property-sorting`
 
-This ESLint rule enforces the expansion of CSS `border` shorthand property, into it's longhand
+This ESLint rule enforces the expansion of CSS `border` shorthand property, into its longhand
 equivalents `borderStyle`, `borderWidth`, `borderColor`, for packages that originates from
 `@compiled/react`, and `@atlaskit/css`.
 

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

@@ -3,15 +3,13 @@ import { outdent } from 'outdent';
 import { tester } from '../../../../__tests__/utils/_tester';
 import { expandBorderShorthand } from '../index';
 
-const valid_packages_calls_and_imports = [
+const included_packages_calls_and_imports = [
 	['css', 'css', '@atlaskit/css'],
 	['css', 'css', '@compiled/react'],
 	['styled', 'styled.div', '@compiled/react'],
-	['cssMap', 'cssMap', '@atlaskit/css'],
-	['cssMap', 'cssMap', '@compiled/react'],
 ];
 
-const invalid_packages_calls_and_imports = [
+const exempt_packages_calls_and_imports = [
 	['css', '@atlaskit/primitives'],
 	['css', '@emotion'],
 	['css', 'styled-components'],
@@ -19,8 +17,8 @@ const invalid_packages_calls_and_imports = [
 
 tester.run('expand-border-shorthand', expandBorderShorthand, {
 	valid: [
-		...invalid_packages_calls_and_imports.map(([pkg, imp]) => ({
-			name: `incorrect packages (${pkg}, ${imp})`,
+		...exempt_packages_calls_and_imports.map(([pkg, imp]) => ({
+			name: `handle only Compiled APIs (${pkg}, ${imp})`,
 			code: outdent`
 			import {${pkg}} from '${imp}';
 
@@ -30,13 +28,18 @@ tester.run('expand-border-shorthand', expandBorderShorthand, {
 		`,
 		})),
 		{
-			name: 'references correct package',
+			name: 'CallExpression matches with imported API',
 			code: outdent`
-			import {css} from '@compiled/react';
+			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',
+			});
 		`,
 		},
 		{
@@ -71,6 +74,17 @@ tester.run('expand-border-shorthand', expandBorderShorthand, {
 			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',
+			});
 		`,
 		},
 		{
@@ -91,9 +105,20 @@ tester.run('expand-border-shorthand', expandBorderShorthand, {
 			});
 		`,
 		},
+		{
+			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: [
-		...valid_packages_calls_and_imports.map(([pkg, call, imp]) => ({
+		...included_packages_calls_and_imports.map(([pkg, call, imp]) => ({
 			name: `simple case (${call}, ${imp})`,
 			code: outdent`
 			import {${pkg}} from '${imp}';
@@ -147,14 +172,6 @@ tester.run('expand-border-shorthand', expandBorderShorthand, {
 				border: \`1px solid red\`,
 			})
 
-			const styles2 = css({
-				border: \`1px solid \${token('red')}\`,
-			})
-
-			const styles3 = css({
-				border: \`1px \${solid} red\`,
-			})
-
 			const styles4 = css({
 				border: \`1px red\`,
 			})
@@ -162,12 +179,8 @@ tester.run('expand-border-shorthand', expandBorderShorthand, {
 			const styles5 = css({
 				border: \`1px\`,
 			})
-
-			const styles6 = css({
-				border: \` \${token('red')}\`,
-			})
 		`,
-			errors: Array.from(Array(6), () => ({ messageId: 'expandBorderShorthand' })),
+			errors: Array.from(Array(3), () => ({ messageId: 'expandBorderShorthand' })),
 		},
 		{
 			name: 'tokens',
@@ -182,5 +195,17 @@ tester.run('expand-border-shorthand', expandBorderShorthand, {
 		`,
 			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

@@ -22,6 +22,9 @@ const separateBorderProperties = (
 	if (EXCLUDED_VALUES.includes(borderString)) {
 		return;
 	}
+	if (borderString.includes('var(--')) {
+		return;
+	}
 
 	context.report({
 		node: property,
@@ -44,7 +47,7 @@ const isCompiledAPI = (importDeclaration: ImportDeclaration, callExpression: Cal
 	}
 
 	return importDeclaration.specifiers.some(
-		(specifier) => specifier.type === 'ImportSpecifier' && specifier.imported.name === functionName,
+		(specifier) => specifier.type === 'ImportSpecifier' && specifier.local.name === functionName,
 	);
 };
 
@@ -74,21 +77,12 @@ export const expandBorderShorthand: Rule.RuleModule = {
 				if (importDeclaration) {
 					if (isCompiledAPI(importDeclaration, callExpression)) {
 						if (node.value.type === 'Literal' && node.value.value !== null) {
-							if (typeof node.value.value === 'string') {
-								const borderString = node.value.value;
-								separateBorderProperties(borderString, node, context);
-							} else if (node.value.raw) {
-								const borderString = node.value.raw;
+							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.expressions.length > 0) {
-								context.report({
-									node,
-									messageId: 'expandBorderShorthand',
-								});
-								return;
-							}
 							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);