@atlaskit/css 0.10.2 → 0.10.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/css
 
+## 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
+
+- [#127093](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/127093)
+  [`1378ea7a99ce1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1378ea7a99ce1) -
+  Upgrades `jscodeshift` to handle generics properly.
+- Updated dependencies
+
 ## 0.10.2
 
 ### Patch Changes

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

@@ -4,6 +4,7 @@ import type {
 	default as core,
 	FileInfo,
 	ImportDeclaration,
+	Node,
 	Options,
 } from 'jscodeshift';
 
@@ -92,6 +93,9 @@ 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>();
 
 	source
 		.find(j.CallExpression, {
@@ -114,15 +118,68 @@ 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 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,9 +195,41 @@ 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;
+			const firstUsageIndex = programBody.findIndex((node: Node) => {
+				const nodeStart = node.loc?.start;
+				const usageStart = firstUsagePath?.node.loc?.start;
+
+				if (!nodeStart || !usageStart) {
+					return false;
+				}
+
+				return (
+					nodeStart.line > usageStart.line ||
+					(nodeStart.line === usageStart.line && nodeStart.column > usageStart.column)
+				);
+			});
+
+			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);
+			}
+		}
 	}
 
 	// update the xcss prop references to use the new cssMap object

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/css",
-	"version": "0.10.2",
+	"version": "0.10.4",
 	"description": "Style components backed by Atlassian Design System design tokens powered by Compiled CSS-in-JS.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -57,13 +57,13 @@
 	},
 	"devDependencies": {
 		"@af/visual-regression": "^1.3.0",
-		"@atlaskit/button": "^21.1.0",
+		"@atlaskit/button": "^22.0.0",
 		"@atlaskit/ds-lib": "^4.0.0",
 		"@atlaskit/primitives": "^14.2.0",
 		"@emotion/react": "^11.7.1",
 		"@testing-library/react": "^13.4.0",
 		"@types/jscodeshift": "^0.11.0",
-		"jscodeshift": "^0.13.0",
+		"jscodeshift": "^17.0.0",
 		"react-dom": "^18.2.0",
 		"typescript": "~5.4.2"
 	},