@atlaskit/css 0.10.3 → 0.10.5

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @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
+
+- [#133515](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/133515)
+  [`3e092526fea27`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3e092526fea27) -
+  Fix codemod config.
+
 ## 0.10.3
 
 ### Patch Changes

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

@@ -92,6 +92,10 @@ function replaceXcssWithCssMap(
 	specifier: string,
 ) {
 	const cssMapProperties: core.ObjectProperty[] = [];
+	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, {
@@ -114,15 +118,85 @@ function replaceXcssWithCssMap(
 
 					if (variableDeclarator && variableDeclarator.type === 'VariableDeclarator') {
 						const variableName = variableDeclarator.id.name; // e.g. buttonStyles
-						const key = getCssMapKey(variableName); // buttonStyles -> button to put in cssMap as the key e.g. styles = cssMap({ button: { color: 'red' } });
+						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);
+						}
+					}
+				}
+			}
+		});
 
+	// find the first usage of any style variable
+	source.find(j.Identifier).forEach((path) => {
+		if (
+			styleVariables.has(path.node.name) &&
+			(!firstUsagePath ||
+				(path.node.loc?.start &&
+					firstUsagePath.node.loc?.start &&
+					(path.node.loc.start.line < firstUsagePath.node.loc.start.line ||
+						(path.node.loc.start.line === firstUsagePath.node.loc.start.line &&
+							path.node.loc.start.column < firstUsagePath.node.loc.start.column))))
+		) {
+			firstUsagePath = path;
+		}
+	});
+
+	// find all xcss function calls
+	source
+		.find(j.CallExpression, {
+			callee: {
+				type: 'Identifier',
+				name: specifier,
+			},
+		})
+		.forEach((path) => {
+			const args = path.node.arguments;
+			// only process xcss calls that have a single object argument
+			if (args.length === 1 && args[0].type === 'ObjectExpression') {
+				// get the parent variable declaration that contains this xcss call
+				// e.g. const buttonStyles = xcss({...})
+				const parentVariableDeclaration = path.parentPath?.parentPath?.parentPath?.node;
+				if (parentVariableDeclaration && parentVariableDeclaration.type === 'VariableDeclaration') {
+					// find the variable declarator that initialises with this xcss call
+					// e.g. const buttonStyles = xcss({ color: 'red' });
+					const variableDeclarator = parentVariableDeclaration.declarations.find(
+						(declaration: core.VariableDeclarator) => declaration.init === path.node,
+					);
+
+					if (variableDeclarator && variableDeclarator.type === 'VariableDeclarator') {
+						// convert the variable name to a cssMap key (e.g. myStyles -> root)
+						const variableName = variableDeclarator.id.name;
+						const key = getCssMapKey(variableName);
+
+						// create a new cssMap property with the key and the processed styles
 						const cssMapObject = j.objectProperty(
 							j.identifier(key),
 							ensureSelectorAmpersand(j, args[0]),
 						);
 						cssMapProperties.push(cssMapObject);
 
-						j(path.parentPath.parentPath.parentPath).remove(); // remove original xcss object
+						// track the first xcss call
+						if (!firstXcssPath) {
+							firstXcssPath = path;
+						}
+
+						// remove the original xcss variable declaration since we'll replace it with cssMap
+						j(path.parentPath.parentPath.parentPath).remove();
 					}
 				}
 			}
@@ -138,11 +212,167 @@ function replaceXcssWithCssMap(
 			),
 		]);
 
-		// insert the cssMap var after all imports
-		const lastImportIndex = source.find(j.ImportDeclaration).size();
-		source.get().node.program.body.splice(lastImportIndex, 0, cssMapVariableDeclaration);
+		// insert the cssMap declaration before its first usage
+		if (firstUsagePath) {
+			const programBody = source.get().node.program.body;
+			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;
+							}
+						}
+					}
+				}
+			}
+
+			// 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',
+				);
+			}
+
+			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, {
@@ -160,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/codemods/hypermod.config.tsx

@@ -4,6 +4,7 @@ const config = {
 	presets: {
 		'primitives-emotion-to-compiled': primitivesEmotionToCompiled,
 	},
+	dependencies: ['@emotion/react'],
 };
 
 export default config;

package/constellation/index/migration.mdx

@@ -25,7 +25,7 @@ Emotion and Compiled, such as dynamic styles or imports. Please use the
 We have a codemod to assist in migrations from `xcss()` to `@atlaskit/css`.
 
 ```sh
-npx @hypermod/cli --packages @atlaskit/css@primitives-emotion-to-compiled ./path/to/folder
+npx @hypermod/cli --packages @atlaskit/css#primitives-emotion-to-compiled ./path/to/folder
 ```
 
 The codemod should migrate something like this:

package/constellation/index/overview.mdx

@@ -18,7 +18,7 @@ import UnboundedExample from '../../examples/constellation/unbounded';
 
 `@atlaskit/css` is the replacement for `@atlaskit/primitives.xcss`. It serves as a bounded styling
 library for use with native HTML elements and the Atlassian Design System, including
-[primitive components](/components/primitives).
+[primitive components](/components/primitives/overview).
 
 Built on [Compiled CSS-in-JS](https://compiledcssinjs.com/), it provides a performant, static
 styling solution with some syntax changes. Notably, dynamic styles and certain imports/exports may
@@ -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.3",
+	"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,13 +57,13 @@
 	},
 	"devDependencies": {
 		"@af/visual-regression": "^1.3.0",
-		"@atlaskit/button": "^21.1.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",
-		"jscodeshift": "^0.16.1",
+		"jscodeshift": "^17.0.0",
 		"react-dom": "^18.2.0",
 		"typescript": "~5.4.2"
 	},