@atlaskit/css 0.19.1 → 0.19.3

package/codemods/hypermod.config.tsx

@@ -1,6 +1,11 @@
 import primitivesEmotionToCompiled from './0.5.2-primitives-emotion-to-compiled';
 
-const config = {
+const config: {
+	presets: {
+		'primitives-emotion-to-compiled': typeof primitivesEmotionToCompiled;
+	};
+	dependencies: string[];
+} = {
 	presets: {
 		'primitives-emotion-to-compiled': primitivesEmotionToCompiled,
 	},

package/constellation/index/migration.mdx

@@ -18,7 +18,7 @@ import SectionMessage from '@atlaskit/section-message';
 
 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.
+[UI Styling Standard ESLint Plugin](/components/eslint-plugin-ui-styling-standard) to guide you.
 
 ## Codemod
 

package/constellation/index/overview.mdx

@@ -34,7 +34,7 @@ For configuration details, see our
 at Atlassian.
 
 This is a strictly bounded variant designed to align the use of
-[Design System tokens](<(/components/tokens/all-tokens)>) and properties. You cannot use arbitrary
+[Design System tokens](/components/tokens/all-tokens) and properties. You cannot use arbitrary
 values, such as `color: 'rgba(123, 45, 67)'` nor `padding: 8`. Typically, only tokenized values are
 allowed. Additionally, there are some restrictions, such as `zIndex`, which only supports a limited
 set of numeric values.

package/css.docs.tsx

@@ -0,0 +1,86 @@
+import path from 'path';
+
+import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+
+const documentation: ComponentStructuredContentSource[] = [
+	{
+		name: 'css',
+		description: 'A typed variant of Compiled CSS-in-JS adhering to the Atlassian Design System.',
+		status: 'open-beta',
+		import: {
+			name: 'css',
+			package: '@atlaskit/css',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Prefer `cssMap` for CSS-in-JS styling',
+			"Use typescript to infer most things, eg. which media queries you're allowed to use",
+			'If the typescript bounding is too restrictive, you can use the `@compiled/react` library instead',
+		],
+		examples: [
+			{
+				name: 'Css',
+				description: 'Css example',
+				source: path.resolve(__dirname, './examples/ai/css.tsx'),
+			},
+		],
+		keywords: ['css', 'styles', 'theme', 'styling', 'utilities'],
+		categories: ['utility'],
+	},
+	{
+		name: 'cssMap',
+		description: 'A typed variant of Compiled CSS-in-JS adhering to the Atlassian Design System.',
+		status: 'open-beta',
+		import: {
+			name: 'cssMap',
+			package: '@atlaskit/css',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'This is the primary way to define styles in a more structured manner than `css`',
+			"Use typescript to infer most things, eg. which media queries you're allowed to use",
+			'If the typescript bounding is too restrictive, you can use the `@compiled/react` library instead',
+			'You MUST use this when working with an `xcss` prop as `css` does not work there',
+		],
+		examples: [
+			{
+				name: 'Css Map',
+				description: 'Css Map example',
+				source: path.resolve(__dirname, './examples/ai/css-map.tsx'),
+			},
+		],
+		keywords: ['css', 'styles', 'theme', 'styling', 'utilities'],
+		categories: ['utility'],
+	},
+	{
+		name: 'cx',
+		description: 'A function for combining styles in an `xcss` prop to maintain correct typing.',
+		status: 'open-beta',
+		import: {
+			name: 'cx',
+			package: '@atlaskit/css',
+			type: 'named',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use this to combine styles in an `xcss` prop to maintain correct typing, eg. `cx(styles.root, styles.bordered)`',
+			'This is not required for native elements which should use `[]` instead, eg. `[styles.root, styles.bordered]`',
+		],
+		examples: [
+			{
+				name: 'Cx',
+				description: 'Cx example',
+				source: path.resolve(__dirname, './examples/ai/cx.tsx'),
+			},
+		],
+		keywords: ['css', 'styles', 'theme', 'styling', 'utilities'],
+		categories: ['utility'],
+	},
+];
+
+export default documentation;

package/dist/cjs/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 "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.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 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.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 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.19.1",
+	"version": "0.19.3",
 	"description": "Style components backed by Atlassian Design System design tokens powered by Compiled CSS-in-JS.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -44,18 +44,19 @@
 	],
 	"atlaskit:src": "src/index.tsx",
 	"dependencies": {
-		"@atlaskit/tokens": "^10.0.0",
+		"@atlaskit/tokens": "^12.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.6"
+		"@compiled/react": "^0.20.0"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/button": "^23.9.0",
-		"@atlaskit/ds-lib": "^5.3.0",
-		"@atlaskit/primitives": "^17.1.0",
+		"@atlaskit/button": "^23.11.0",
+		"@atlaskit/ds-lib": "^7.0.0",
+		"@atlaskit/primitives": "^18.1.0",
+		"@atlassian/structured-docs-types": "workspace:^",
 		"@emotion/react": "^11.7.1",
 		"@testing-library/react": "^16.3.0",
 		"@types/jscodeshift": "^0.11.0",