@atlaskit/css 0.6.0 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/css
 
+## 0.6.1
+
+### Patch Changes
+
+- [#160054](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/160054)
+  [`a85c8b06aad62`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a85c8b06aad62) -
+  Updates to the 0.5.2-primitives-emotion-to-compiled codemod to group imports from
+  @atlaskit/primitives.
+
 ## 0.6.0
 
 ### Minor Changes

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

@@ -50,8 +50,6 @@ const styleMaps = {
 export default function transformer(fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) {
 	const base = j(fileInfo.source);
 
-	addJsxPragma(j, base);
-
 	// replace xcss with cssMap
 	const xcssSpecifier = getImportSpecifier(j, base, 'xcss');
 	if (!xcssSpecifier) {
@@ -62,6 +60,8 @@ export default function transformer(fileInfo: FileInfo, { jscodeshift: j }: API,
 
 	updateImports(j, base);
 
+	addJsxPragma(j, base);
+
 	return base.toSource();
 }
 
@@ -221,20 +221,34 @@ function ensureSelectorAmpersand(j: core.JSCodeshift, objectExpression: core.Obj
 }
 
 function updateImports(j: core.JSCodeshift, source: ReturnType<typeof j>) {
-	// remove xcss import
+	// remove xcss import and collect primitives to import
+	const primitivesToImport = new Set<string>();
 	source
 		.find(j.ImportDeclaration)
-		.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === '@atlaskit/primitives')
+		.filter((path: ASTPath<ImportDeclaration>) => {
+			const importSource = path.node.source.value as string;
+			return (
+				importSource === '@atlaskit/primitives' || importSource.startsWith('@atlaskit/primitives/')
+			);
+		})
 		.forEach((path) => {
 			if (path.node.specifiers) {
-				path.node.specifiers = path.node.specifiers.filter(
-					(specifier) => specifier.local?.name !== 'xcss',
-				);
-				if (path.node.specifiers.length === 0) {
-					// if no specifiers remain, remove the import
-					j(path).remove();
-				}
+				path.node.specifiers.forEach((specifier) => {
+					if (specifier.type === 'ImportSpecifier' && specifier.imported) {
+						const importedName = specifier.imported.name;
+						if (importedName !== 'xcss') {
+							primitivesToImport.add(importedName);
+						}
+					} else if (specifier.type === 'ImportDefaultSpecifier') {
+						// handle deep imports like `import Anchor from '@atlaskit/primitives/anchor'`
+						if (specifier.local) {
+							primitivesToImport.add(specifier.local.name);
+						}
+					}
+				});
 			}
+			// remove the import declaration
+			j(path).remove();
 		});
 
 	const importsNeeded = {
@@ -245,18 +259,17 @@ function updateImports(j: core.JSCodeshift, source: ReturnType<typeof j>) {
 
 	// check existing imports
 	source.find(j.ImportDeclaration).forEach((path) => {
-		switch (path.node.source.value) {
+		const importSource = path.node.source.value as string;
+		switch (importSource) {
 			case '@atlaskit/css':
-				if (path.node.specifiers) {
-					path.node.specifiers.forEach((specifier) => {
-						if (specifier.local?.name === 'cssMap') {
-							importsNeeded.cssMap = true;
-						}
-						if (specifier.local?.name === 'jsx') {
-							importsNeeded.jsx = true;
-						}
-					});
-				}
+				path.node.specifiers?.forEach((specifier) => {
+					if (specifier.local?.name === 'cssMap') {
+						importsNeeded.cssMap = true;
+					}
+					if (specifier.local?.name === 'jsx') {
+						importsNeeded.jsx = true;
+					}
+				});
 				break;
 			case '@atlaskit/tokens':
 				importsNeeded.token = true;
@@ -264,7 +277,17 @@ function updateImports(j: core.JSCodeshift, source: ReturnType<typeof j>) {
 			case '@emotion/react':
 				// remove the jsx import from @emotion/react
 				path.node.specifiers = path.node.specifiers?.filter(
-					(specifier) => j.ImportSpecifier.check(specifier) && specifier.imported.name !== 'jsx',
+					(specifier) => !(j.ImportSpecifier.check(specifier) && specifier.imported.name === 'jsx'),
+				);
+				if (path.node.specifiers?.length === 0) {
+					j(path).remove();
+				}
+				break;
+			case 'react':
+				// remove default import React from 'react' if not needed
+				path.node.specifiers = path.node.specifiers?.filter(
+					(specifier) =>
+						!(specifier.type === 'ImportDefaultSpecifier' && specifier.local?.name === 'React'),
 				);
 				if (path.node.specifiers?.length === 0) {
 					j(path).remove();
@@ -275,15 +298,47 @@ function updateImports(j: core.JSCodeshift, source: ReturnType<typeof j>) {
 
 	const newImports: ImportDeclaration[] = [];
 
-	if (!importsNeeded.cssMap || !importsNeeded.jsx) {
-		// add cssMap and jsx together if either is missing
-		const cssMapImport = j.importDeclaration(
-			[j.importSpecifier(j.identifier('cssMap')), j.importSpecifier(j.identifier('jsx'))],
-			j.literal('@atlaskit/css'),
+	// add grouped import for primitives
+	// e.g. import { Anchor, Box } from '@atlaskit/primitives/compiled';
+	if (primitivesToImport.size > 0) {
+		const primitivesImport = j.importDeclaration(
+			Array.from(primitivesToImport)
+				.sort()
+				.map((name) => j.importSpecifier(j.identifier(name))),
+			j.literal('@atlaskit/primitives/compiled'),
 		);
-		newImports.push(cssMapImport);
+		newImports.push(primitivesImport);
+	}
+
+	// add cssMap and jsx import if needed
+	if (!importsNeeded.cssMap || !importsNeeded.jsx) {
+		const existingCssImports = source
+			.find(j.ImportDeclaration)
+			.filter((path) => path.node.source.value === '@atlaskit/css');
+
+		const newSpecifiers: core.ImportSpecifier[] = [];
+
+		if (!importsNeeded.cssMap) {
+			newSpecifiers.push(j.importSpecifier(j.identifier('cssMap')));
+		}
+		if (!importsNeeded.jsx) {
+			newSpecifiers.push(j.importSpecifier(j.identifier('jsx')));
+		}
+
+		if (existingCssImports.size() > 0) {
+			// existing import from '@atlaskit/css'
+			const existingCssImport = existingCssImports.at(0).get();
+
+			if (existingCssImport && existingCssImport.node.specifiers) {
+				existingCssImport.node.specifiers.push(...newSpecifiers);
+			}
+		} else {
+			const cssMapImport = j.importDeclaration(newSpecifiers, j.literal('@atlaskit/css'));
+			newImports.push(cssMapImport);
+		}
 	}
 
+	// add token import
 	if (!importsNeeded.token) {
 		const tokenImport = j.importDeclaration(
 			[j.importSpecifier(j.identifier('token'))],
@@ -292,26 +347,7 @@ function updateImports(j: core.JSCodeshift, source: ReturnType<typeof j>) {
 		newImports.push(tokenImport);
 	}
 
-	// remove default import React from 'react' if not needed
-	source.find(j.ImportDeclaration, { source: { value: 'react' } }).forEach((path) => {
-		path.node.specifiers = path.node.specifiers?.filter(
-			(specifier) =>
-				!(specifier.type === 'ImportDefaultSpecifier' && specifier.local?.name === 'React'),
-		);
-		if (path.node.specifiers?.length === 0) {
-			j(path).remove();
-		}
-	});
-
-	// update @atlaskit/primitives imports to @atlaskit/primitives/compiled
-	source
-		.find(j.ImportDeclaration)
-		.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === '@atlaskit/primitives')
-		.forEach((path) => {
-			path.node.source.value = '@atlaskit/primitives/compiled';
-		});
-
-	// add new imports after any existing comments to ensure they're below the jsx pragma
+	// add new imports after any existing comments
 	const rootNode = source.get().node;
 	const firstNonCommentIndex = rootNode.program.body.findIndex(
 		(node: core.Node) =>

package/codemods/0.5.2-primitives-emotion-to-compiled/style-maps.partial.tsx

@@ -846,14 +846,15 @@ export type Fill = keyof typeof fillMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::dbfb4c7de16d0ae4a53d66f9663aca91>>
+ * @codegen <<SignedSource::042cbfe8041c09e3817ae74154994f32>>
  * @codegenId misc
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["layer"]
  * @codegenDependency ../../../primitives/scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
- * @codegenDependency ../../../primitives/scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
+ * @codegenDependency ../../../primitives/scripts/codegen-file-templates/layer.tsx <<SignedSource::92793ca02dbfdad66e53ffbe9f0baa0a>>
  */
 export const layerMap = {
+	'1': 1,
 	card: 100,
 	navigation: 200,
 	dialog: 300,
@@ -906,12 +907,12 @@ export type BorderRadius = keyof typeof borderRadiusMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::97e5ae47f252660a5ef7569a3880c26c>>
+ * @codegen <<SignedSource::96d9a841cb440c2bd770d0af5c670f10>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
  * @codegenDependency ../../../primitives/scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
- * @codegenDependency ../../../primitives/scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
+ * @codegenDependency ../../../primitives/scripts/codegen-file-templates/layer.tsx <<SignedSource::92793ca02dbfdad66e53ffbe9f0baa0a>>
  */
 export const fontMap = {
 	'font.body': token(
@@ -1006,11 +1007,11 @@ export type FontFamily = keyof typeof fontFamilyMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7dc7abf82a13bc780c338b9602508ae6>>
+ * @codegen <<SignedSource::ae96213e36b930556f9ad18382088ff8>>
  * @codegenId text
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenDependency ../../../primitives/scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
- * @codegenDependency ../../../primitives/scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
+ * @codegenDependency ../../../primitives/scripts/codegen-file-templates/layer.tsx <<SignedSource::92793ca02dbfdad66e53ffbe9f0baa0a>>
  */
 export const textSizeMap = {
 	medium: token(

package/constellation/index/examples.mdx

@@ -21,7 +21,8 @@ This is built on top of [Compiled CSS-in-JS](https://compiledcssinjs.com/) which
 performant, static styling solution with the same syntax and a few breaking changes—the primary ones
 being dynamic styles as well as deep imports or exports for reuse of styles may not work.
 
-This will require major configuration, noted below.
+This will require configuration, refer to our
+[Get started](/get-started/develop#set-up-your-bundling-environment) guide.
 
 ## Usage
 
@@ -230,137 +231,6 @@ export function Card({
 
 ## Configuration required
 
-<SectionMessage title="More details coming soon!" appearance="warning">
-	<p>This section is under development, more details will come soon.</p>
-</SectionMessage>
-
 In order to use any Atlassian Design System packages that distribute Compiled CSS-in-JS, you
-**must** configure your project via Babel as well your bundler with Webpack and/or Parcel and using
-the latest version of these plugins:
-
-- `@atlaskit/tokens/babel-plugin`
-- `@compiled/babel-plugin` configured with `sortShorthand: true` (or configured through
-  `@compiled/webpack-loader` or `@compiled/parcel-config` or similar)
-- **SUGGESTED:** You should turn on
-  [@atlaskit/eslint-plugin-ui-styling-standard](/components/eslint-plugin-ui-styling-standard) to
-  guide you
-
-Refer to https://compiledcssinjs.com/docs/installation
-
-### Setup your Babel plugins
-
-Most products will use Babel across the dev lifecycle, so this is typically a baseline
-configuration.
-
-```sh
-yarn install @atlaskit/tokens
-yarn install --dev @compiled/babel-plugin
-yarn install --dev @compiled/babel-plugin-strip-runtime # optional, for extracting styles
-```
-
-Plugin order matters, your `@atlaskit/tokens/babel-plugin` must come before your
-`@compiled/babel-plugin`, otherwise you may experience errors.
-
-```js
-// babel.config.js
-module.exports = {
-	plugins: [
-		// This will handle all `token()` calls, eg. if used in a non-Compiled CSS-in-JS library:
-		'@atlaskit/tokens/babel-plugin',
-		// ↓↓ Compiled should run last ↓↓
-		['@compiled/babel-plugin', { transformerBabelPlugins: ['@atlaskit/tokens/babel-plugin'] }],
-		// OPTIONAL: If you are distributing packages with Compiled styles, you should also include the following.
-		// Your `dest` may vary depending on how you distribute, eg. if you have multiple `cjs` and `esm` distributions
-		// those will each need a separate `dest` through Babel's environment-specific configuration.
-		[
-			'@compiled/babel-plugin-strip-runtime',
-			{
-				sortShorthand: true,
-				extractStylesToDirectory: { source: 'src', dest: 'dist' }
-			},
-		],
-	],
-};
-```
-
-For full documentation, refer to https://compiledcssinjs.com/docs/installation#babel
-
-### Bundling with Webpack
-
-This configuration may vary, this is the default production-like configuration expected where the
-primary suggestion is to use extracted styles for performance and consistency reasons. Development
-configuration may vary.
-
-```sh
-yarn install @atlaskit/tokens
-yarn install --dev @compiled/webpack-loader mini-css-extract-plugin
-```
-
-```js
-const { CompiledExtractPlugin } = require('@compiled/webpack-loader');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-module.exports = {
-	module: {
-		rules: [
-			{
-				test: /\.(js|jsx|ts|tsx)$/,
-				use: [
-					{ loader: 'babel-loader' },
-					{
-						// ↓↓ Compiled should run last ↓↓
-						loader: '@compiled/webpack-loader',
-						options: {
-							transformerBabelPlugins: ['@atlaskit/tokens/babel-plugin'],
-							extract: true,
-							inlineCss: true,
-						},
-					},
-				],
-			},
-			{
-				test: /compiled-css\.css$/i,
-				use: [MiniCssExtractPlugin.loader, 'css-loader'],
-			},
-			{
-				test: /(?<!compiled-css)(?<!\.compiled)\.css$/,
-				use: ['style-loader', 'css-loader'],
-			},
-		],
-	},
-	plugins: [
-		new MiniCssExtractPlugin(),
-		new CompiledExtractPlugin({ sortShorthand: true }),
-	],
-};
-```
-
-For full documentation, refer to https://compiledcssinjs.com/docs/installation#webpack
-
-### Bundling with Parcel
-
-```sh
-yarn install @atlaskit/tokens
-yarn install --dev @compiled/parcel-config
-```
-
-Setup your `.compiledcssrc`:
-
-```json
-{
-	"transformerBabelPlugins": [["@atlaskit/tokens/babel-plugin"]],
-	"extract": true,
-	"inlineCss": true,
-	"sortShorthand": true
-}
-```
-
-Setup your `.parcelrc`:
-
-```json
-{
-	"extends": ["@parcel/config-default", "@compiled/parcel-config"]
-}
-```
-
-For full documentation, refer to https://compiledcssinjs.com/docs/installation#(recommended)-parcel
+**must** configure your project, please refer to our
+[Get started](/get-started/develop#set-up-your-bundling-environment) guide.

package/constellation/index/migration.mdx

@@ -2,21 +2,21 @@
 order: 1
 ---
 
+import SectionMessage from '@atlaskit/section-message';
+
 ## Migration to `@atlaskit/css`
 
-`@atlaskit/css` is the replacement for `@atlaskit/primitives/xcss` which will only work with the
-Compiled variants of packages, eg. `@atlaskit/primitives/compiled` (note that not all packages will
-be migrated to Compiled by the end of 2024).
+<SectionMessage title="Migration from Emotion to Compiled" appearance="discovery">
+	<p>
+		The Atlassian Design System is under the process of migrating from Emotion to Compiled for our
+		CSS-in-JS. Further details to come.
+	</p>
+</SectionMessage>
 
-Typically, this migration means moving from the `const styles = xcss({ padding: 'space.100' })` API
-to a `const styles = cssMap({ root: { padding: token('space.100') } })` API, and we have a codemod
-to assist with a majority of this migration for you. Some things are not available in the Compiled
-API such as dynamic styles or imports, please use the
+We have a codemod available to support this migration, but there are some breaking changes between
+Emotion and Compiled, such as dynamic styles or imports. Please use the
 [UI Styling Standard ESLint Plugin](/components/eslint-plugin-ui-styling-standard/) to guide you.
 
-Refer to [Configuration required](/components/css/examples#configuration-required) for details on
-how to configure your project to use `@atlaskit/css`
-
 ## Codemod
 
 We have a codemod to assist in migrations from `xcss()` to `@atlaskit/css`.

package/dist/cjs/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.32.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/es2019/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.32.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.32.2 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { createStrictAPI } from '@compiled/react';

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.32.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.32.2 */
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { createStrictAPI } from '@compiled/react';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/css",
-	"version": "0.6.0",
+	"version": "0.6.1",
 	"description": "Style components backed by Atlassian Design System design tokens powered by Compiled CSS-in-JS.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -15,7 +15,7 @@
 			"category": "Libraries",
 			"ignorePropTypes": true,
 			"status": {
-				"type": "alpha"
+				"type": "beta"
 			}
 		}
 	},
@@ -38,7 +38,7 @@
 		".": "./src/index.tsx"
 	},
 	"dependencies": {
-		"@atlaskit/tokens": "^2.0.0",
+		"@atlaskit/tokens": "^2.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.1"
 	},