@atlaskit/css 0.10.4 → 0.10.5

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/css
 
+## 0.10.5
+
+### Patch Changes
+
+- [#135712](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135712)
+  [`fa9caa5adb7a3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fa9caa5adb7a3) -
+  Improvements to `xcss()` -> `cssMap()` codemod.
+- Updated dependencies
+
 ## 0.10.4
 
 ### Patch Changes

package/codemods/0.5.2-primitives-emotion-to-compiled/index.tsx

@@ -4,7 +4,6 @@ import type {
 	default as core,
 	FileInfo,
 	ImportDeclaration,
-	Node,
 	Options,
 } from 'jscodeshift';
 
@@ -96,6 +95,7 @@ function replaceXcssWithCssMap(
 	let firstXcssPath: ASTPath<core.CallExpression> | null = null;
 	let firstUsagePath: ASTPath<core.Node> | null = null;
 	const styleVariables = new Set<string>();
+	const variableDependencies = new Map<string, Set<string>>();
 
 	source
 		.find(j.CallExpression, {
@@ -119,6 +119,23 @@ function replaceXcssWithCssMap(
 					if (variableDeclarator && variableDeclarator.type === 'VariableDeclarator') {
 						const variableName = variableDeclarator.id.name; // e.g. buttonStyles
 						styleVariables.add(variableName);
+
+						// find dependencies in the xcss object
+						const dependencies = new Set<string>();
+						if (args[0].type === 'ObjectExpression') {
+							args[0].properties.forEach((prop) => {
+								if (prop.type === 'ObjectProperty' && prop.value.type === 'TemplateLiteral') {
+									prop.value.expressions.forEach((expr) => {
+										if (expr.type === 'Identifier') {
+											dependencies.add(expr.name);
+										}
+									});
+								}
+							});
+						}
+						if (dependencies.size > 0) {
+							variableDependencies.set(variableName, dependencies);
+						}
 					}
 				}
 			}
@@ -198,40 +215,164 @@ function replaceXcssWithCssMap(
 		// insert the cssMap declaration before its first usage
 		if (firstUsagePath) {
 			const programBody = source.get().node.program.body;
-			const firstUsageIndex = programBody.findIndex((node: Node) => {
-				const nodeStart = node.loc?.start;
-				const usageStart = firstUsagePath?.node.loc?.start;
-
-				if (!nodeStart || !usageStart) {
-					return false;
+			let insertIndex = 0;
+
+			// find the last variable declaration that any style depends on
+			let lastDependencyIndex = -1;
+			for (let i = 0; i < programBody.length; i++) {
+				const node = programBody[i];
+				if (node.type === 'VariableDeclaration') {
+					const varName = node.declarations[0]?.id.name;
+					if (varName) {
+						// check if this variable is a dependency of any style
+						for (const [, deps] of variableDependencies.entries()) {
+							if (deps.has(varName)) {
+								lastDependencyIndex = i;
+								break;
+							}
+						}
+					}
 				}
+			}
 
-				return (
-					nodeStart.line > usageStart.line ||
-					(nodeStart.line === usageStart.line && nodeStart.column > usageStart.column)
+			// insert after the last dependency
+			if (lastDependencyIndex !== -1) {
+				insertIndex = lastDependencyIndex + 1;
+			} else {
+				// if no dependencies, find the first non-import/type declaration
+				insertIndex = programBody.findIndex(
+					(node: { type: string }) =>
+						node.type !== 'ImportDeclaration' &&
+						node.type !== 'TypeAlias' &&
+						node.type !== 'InterfaceDeclaration',
 				);
-			});
-
-			if (firstUsageIndex !== -1) {
-				// find the last import or variable declaration before the first usage
-				let insertIndex = firstUsageIndex;
-				while (insertIndex > 0) {
-					const node = programBody[insertIndex - 1];
-					if (
-						node.type === 'ImportDeclaration' ||
-						node.type === 'VariableDeclaration' ||
-						node.type === 'TypeAlias' ||
-						node.type === 'InterfaceDeclaration'
-					) {
-						break;
-					}
-					insertIndex--;
-				}
-				programBody.splice(insertIndex, 0, cssMapVariableDeclaration);
 			}
+
+			programBody.splice(insertIndex, 0, cssMapVariableDeclaration);
 		}
 	}
 
+	// First handle backgroundColor transformation for Box components
+	source
+		.find(j.JSXAttribute, {
+			name: {
+				type: 'JSXIdentifier',
+				name: 'xcss',
+			},
+		})
+		.forEach((path) => {
+			const value = path.node.value;
+			if (value && value.type === 'JSXExpressionContainer') {
+				const expression = value.expression;
+				const parentElement = path.parentPath?.node;
+				const isBoxComponent = parentElement?.name?.name === 'Box';
+
+				if (isBoxComponent) {
+					if (expression.type === 'Identifier') {
+						const styleKey = getCssMapKey(expression.name);
+						const styleObject = cssMapProperties.find(
+							(prop) => prop.key.type === 'Identifier' && prop.key.name === styleKey,
+						)?.value;
+						if (styleObject?.type === 'ObjectExpression') {
+							const backgroundColorProp = styleObject.properties.find(
+								(prop) =>
+									prop.type === 'ObjectProperty' &&
+									prop.key.type === 'Identifier' &&
+									prop.key.name === 'backgroundColor',
+							);
+							if (
+								backgroundColorProp?.type === 'ObjectProperty' &&
+								backgroundColorProp.value.type === 'StringLiteral'
+							) {
+								// add backgroundColor prop to Box component
+								parentElement.attributes.push(
+									j.jsxAttribute(
+										j.jsxIdentifier('backgroundColor'),
+										j.stringLiteral(backgroundColorProp.value.value),
+									),
+								);
+								// remove backgroundColor from cssMap
+								styleObject.properties = styleObject.properties.filter(
+									(prop) =>
+										!(
+											prop.type === 'ObjectProperty' &&
+											prop.key.type === 'Identifier' &&
+											prop.key.name === 'backgroundColor'
+										),
+								);
+							}
+						}
+					} else if (expression.type === 'ArrayExpression') {
+						// handle array of styles
+						const backgroundColorValues: string[] = [];
+						expression.elements.forEach((element) => {
+							if (element?.type === 'Identifier') {
+								const styleKey = getCssMapKey(element.name);
+								const styleObject = cssMapProperties.find(
+									(prop) => prop.key.type === 'Identifier' && prop.key.name === styleKey,
+								)?.value;
+								if (styleObject?.type === 'ObjectExpression') {
+									const backgroundColorProp = styleObject.properties.find(
+										(prop) =>
+											prop.type === 'ObjectProperty' &&
+											prop.key.type === 'Identifier' &&
+											prop.key.name === 'backgroundColor',
+									);
+									if (
+										backgroundColorProp?.type === 'ObjectProperty' &&
+										backgroundColorProp.value.type === 'StringLiteral'
+									) {
+										backgroundColorValues.push(backgroundColorProp.value.value);
+										// remove backgroundColor from cssMap
+										styleObject.properties = styleObject.properties.filter(
+											(prop) =>
+												!(
+													prop.type === 'ObjectProperty' &&
+													prop.key.type === 'Identifier' &&
+													prop.key.name === 'backgroundColor'
+												),
+										);
+									}
+								}
+							}
+						});
+
+						// if we found backgroundColor values, add to Box component
+						if (backgroundColorValues.length > 0) {
+							if (backgroundColorValues.length === 1) {
+								// single backgroundColor value
+								parentElement.attributes.push(
+									j.jsxAttribute(
+										j.jsxIdentifier('backgroundColor'),
+										j.stringLiteral(backgroundColorValues[0]),
+									),
+								);
+							} else {
+								// multiple backgroundColor values - use ternary for conditional
+								const conditions = expression.elements
+									.map((element, index) => {
+										if (
+											element?.type === 'LogicalExpression' &&
+											element.left.type === 'Identifier'
+										) {
+											return `${element.left.name} ? "${backgroundColorValues[index]}" :`;
+										}
+										return `"${backgroundColorValues[index]}"`;
+									})
+									.join(' ');
+								parentElement.attributes.push(
+									j.jsxAttribute(
+										j.jsxIdentifier('backgroundColor'),
+										j.jsxExpressionContainer(j.identifier(conditions)),
+									),
+								);
+							}
+						}
+					}
+				}
+			}
+		});
+
 	// update the xcss prop references to use the new cssMap object
 	source
 		.find(j.JSXAttribute, {
@@ -249,7 +390,7 @@ function replaceXcssWithCssMap(
 					// <Box xcss={buttonStyles} /> -> <Box xcss={styles.button} />
 					expression.name = `styles.${getCssMapKey(expression.name)}`;
 				} else if (expression.type === 'ArrayExpression') {
-					// <Box xcss={[baseStyles, otherStyles]} /> -> <Box xcss={[styles.base, styles.otherStyles]} />
+					// <Box xcss={[baseStyles, otherStyles]} /> -> <Box xcss={[styles.base, styles.other]} />
 					expression.elements.forEach((element) => {
 						if (element?.type === 'Identifier') {
 							element.name = `styles.${getCssMapKey(element.name)}`;

package/constellation/index/overview.mdx

@@ -39,7 +39,7 @@ values, such as `color: 'rgba(123, 45, 67)'` nor `padding: 8`. Typically, only t
 allowed. Additionally, there are some restrictions, such as `zIndex`, which only supports a limited
 set of numeric values.
 
-### cssMap
+### cssMap()
 
 We recommend using `cssMap` to create style maps. These maps can be applied and reused on both
 native elements and React components using `props.css` and `props.xcss` respectively.
@@ -48,6 +48,22 @@ Make sure to define the styles before using them in your components, i.e. at the
 
 <Example Component={CssMapExample} packageName="@atlaskit/css" />
 
+### css()
+
+The `css()` function is a lower-level API that creates a single style object. Unlike `cssMap()`,
+it's best suited for one-off styles. Use it with elements that accept a `css` prop. While `css()` is
+simpler to use, we recommend `cssMap()` for most cases because it provides better reusability and
+type safety.
+
+```tsx
+const styles = css({
+	padding: token('space.100'),
+	color: token('color.text'),
+});
+
+<div css={styles}>Hello world!</div>;
+```
+
 ### Primitives
 
 When using `@atlaskit/css`, it's important to note that it's not compatible with the Emotion variant

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/css",
-	"version": "0.10.4",
+	"version": "0.10.5",
 	"description": "Style components backed by Atlassian Design System design tokens powered by Compiled CSS-in-JS.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -48,7 +48,7 @@
 		"./test-utils": "./src/test-utils/index.tsx"
 	},
 	"dependencies": {
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/tokens": "^4.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"
 	},
@@ -57,9 +57,9 @@
 	},
 	"devDependencies": {
 		"@af/visual-regression": "^1.3.0",
-		"@atlaskit/button": "^22.0.0",
+		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/primitives": "^14.2.0",
+		"@atlaskit/primitives": "^14.3.0",
 		"@emotion/react": "^11.7.1",
 		"@testing-library/react": "^13.4.0",
 		"@types/jscodeshift": "^0.11.0",