# RFC-73 Migrating our components to Compiled CSS-in-JS

**URL:** <https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953>\
**Category:** Request for Comments (RFC)\
**Tags:** atlassian-design-system, css, rfc, atlaskit, atlassian-connect\
**Created:** [November 7, 2024, 4:12am UTC](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953 "2024-11-07T04:12:04Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![DanielDelCore](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/danieldelcore/32/39871_2.png) [@DanielDelCore](https://community.developer.atlassian.com/u/DanielDelCore)\
**Post date:** [November 7, 2024, 4:12am UTC](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953/1 "2024-11-07T04:12:04Z")

</div>

_RFCs are a way for Atlassian to share what we’re working on with our valued developer community._

_It’s a document for building shared understanding of a topic. It expresses a technical solution, but can also communicate how it should be built or even document standards. The most important aspect of an RFC is that a written specification facilitates feedback and drives consensus. **It is not a tool for approving or committing to ideas** , but more so a collaborative practice to shape an idea and to find serious flaws early._

_Please respect our community guidelines: keep it welcoming and safe by commenting on the idea not the people (especially the author); keep it tidy by keeping on topic; empower the community by keeping comments constructive. Thanks!_

## Project summary

Atlassian has standardised on [Compiled CSS-in-JS](https://compiledcssinjs.com/) as our build-time CSS-in-JS library. Compiled is an Atlassian initiative, and it is already in wide use across our products. We’re completing the transition by **migrating all Atlaskit components to Compiled CSS-in-JS.**

This includes the Atlassian Design System, Editor, Media, and other components — all packages in the `@atlaskit` npm scope currently styled using [Emotion](https://emotion.sh/docs/introduction).

The primary reason we are migrating to Compiled is to improve performance — reducing the runtime performance impact and bundle size of our components, and to better leverage modern React features available in version 18 and onwards, such as concurrent rendering and streaming SSR.

Compiled’s CSS generation creates static CSS at build time, reducing JavaScript bundle size and runtime overhead. This optimisation allows for the removal of duplicate or unused styles, resulting in smaller CSS files that enhance rendering times. Additionally, static CSS files benefit from better browser caching, improving performance during repeat visits.

This move also aligns Atlassian’s coding standards and ultimately benefits both developers and customers by enabling faster product development and more reliable engineering.

We’re excited for you to benefit from this, whether you directly use Compiled in your apps, or by having faster Atlassian products upon which to build your apps for our mutual customers!

### Scope of this RFC

In this RFC, we’re seeking feedback on how to best support you as Marketplace partners during this transition, including tooling and guidance.

We intend to add additional support throughout the RFC period and not just at the end, with the “Resolve” date representing the end of new additions.

- **Publish** : 07 Nov 2024
- **Discuss** : 16 Dec 2024
- **Resolve** : 30 Jan 2025

These changes affect apps that use Atlaskit components, built on Forge Custom UI or Connect. If you’re using Forge UI Kit, you’re good to go! No changes will be required.

### **Timeline for migration of packages**

We have migrated a pilot component to Compiled (more detail below), and will soon be starting to migrate all Atlaskit packages.

All migrations to Compiled will be shipped as new Major versions. Our current plan:

- **Oct 2024** : Shipped experimental Compiled version of `@atlaskit/lozenge` component
- **Nov 2024–ongoing** : Provide support for Marketplace partners to adopt and troubleshoot
- **Mid Nov 2024** : First batch of Atlassian Design System components will be migrated to Compiled
- **Late Nov–Dec 2024** : Remaining Atlassian Design System components will be migrated to Compiled, along with the first Editor and Media components
- **Progressively from Jan 2025** : All remaining Atlaskit packages will be migrated

## Asks (what this would mean for you — action may be required)

If your bundler supports CSS imports (`import 'styles.css';`), packages using Compiled should continue to work out of the box. We expect this to be the case in most scenarios. However, we **ask all Marketplace partners to look out for possible issues** , especially if you:

- Notice visual breaking changes when upgrading
- Are applying manual style overrides to `@atlaskit` packages
- Use [xcss via @atlaskit/primitives](https://atlassian.design/components/primitives/xcss/usage)
- Use a bundler that is not currently configured to support CSS imports

This migration may come with unforeseen side effects, depending on the type of bundler and/or CSS-in-JS libraries used in conjunction with Atlaskit packages — there are many more combinations than we can test. We are **asking for feedback** on the following areas:

- Please try using our experimental Lozenge component (see next section for instructions), and report any unexpected issues or visual breaking changes.
- Do you experience any observable performance impacts (negative or positive)?
- For those of you who need to use the Compiled plugin but can’t because you’re using something other than Webpack or Parcel, please share which bundler you’re currently using below, and we will investigate/recommend a way forward.
- Are there ways this might negatively impact Marketplace partners not yet mentioned here?

We’re here to support you through this transition as best we can!

## Testing compatibility using the Lozenge component

Test component entry-point: `import Lozenge from '@atlaskit/lozenge/compiled';`

To ensure your application is configured correctly for the migration to Compiled CSS-in-JS, we have provided a test component: `@atlaskit/lozenge/compiled`. This component serves as a verification tool to check if your setup supports the new CSS-in-JS solution effectively.

#### How to use

1. **Installation** : Ensure that you have the latest version of the `@atlaskit/lozenge/compiled` package installed in your project.  
To check you’re on the correct version, inspect `dist/cjs/compiled`. You will see an `index.compiled.css` and an `index.js` importing that file.
2. **Integration** : Integrate the test component into your application as you would with any other Atlaskit component.

```diff
+import Lozenge from '@atlaskit/lozenge/compiled';
-import Lozenge from '@atlaskit/lozenge';

```

1. **Verification** : Build and run your application to verify that the component renders correctly without any styling issues. This indicates that your application is correctly configured to handle Compiled CSS-in-JS.

#### Troubleshooting

- If you encounter any issues, ensure that your bundler is configured to support Compiled CSS-in-JS. Refer to the specific configuration guidelines for your bundler (e.g. Webpack, Parcel) as outlined in the migration documentation.
- For Webpack users, make sure to include [style-loader](https://webpack.js.org/loaders/style-loader/) and [css-loader](https://webpack.js.org/loaders/css-loader/) in your configuration. We highly recommend using `@compiled/webpack-loader` to avoid visual regressions.

By using this test component, you can confidently proceed knowing that your application is ready to leverage the performance and consistency benefits of Compiled CSS-in-JS.

## Update your bundler configuration(s)

The Compiled variants of our packages will be published to npm with internal stylesheets, such as [node\_modules/@atlaskit/lozenge/cjs/compiled/index.compiled.css](https://unpkg.com/browse/@atlaskit/lozenge@11.12.2/dist/cjs/compiled/index.compiled.css). Your bundler must include, combine, and run the Compiled plugins over them. By default, many bundlers will load these automatically, but without `@compiled/parcel-config` or `@compiled/webpack-loader`, we cannot guarantee those styles will be ordered correctly. There is a chance of some visual regressions with this migration.

Update your bundler configuration, and if issues persist, please leave a comment below, and we will be available to assist you.

_ **Note:** Compiled does not have plugin support for every bundler, so please let us know if you require support for a specific bundler._

#### Using Parcel (recommended)

```auto
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://atlassian.design/get-started/develop#set-up-your-bundling-environment](https://atlassian.design/get-started/develop#set-up-your-bundling-environment)

#### Using Webpack

Your configuration may vary greatly, this would be a typical production-facing Webpack config:

```auto
yarn install @atlaskit/tokens
yarn install --dev @compiled/webpack-loader mini-css-extract-plugin

```

```tsx
const { CompiledExtractPlugin } = require('@compiled/webpack-loader');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|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://atlassian.design/get-started/develop#set-up-your-bundling-environment](https://atlassian.design/get-started/develop#set-up-your-bundling-environment)

### Update your Babel configuration(s)

In order to use Compiled in Jest or CI, you must use `@compiled/babel-plugin` (this is preconfigured through `@compiled/webpack-loader` or `@compiled/parcel-config`).

```auto
yarn install @atlaskit/tokens
yarn install --dev @compiled/babel-plugin

```

```tsx
// babel.config.js
module.exports = {
  plugins: [
    // This will handle all `token()` calls outside of Compiled
    '@atlaskit/tokens/babel-plugin',
    // ↓↓ Compiled should run last ↓↓
    [
      '@compiled/babel-plugin',
      { transformerBabelPlugins: ['@atlaskit/tokens/babel-plugin'] }
    ],
  ],
}`

```

For full documentation, refer to [https://atlassian.design/get-started/develop#set-up-your-bundling-environment](https://atlassian.design/get-started/develop#set-up-your-bundling-environment)

## Want to use Compiled in your app? (optional)

It’s entirely optional for partners to migrate apps to Compiled. We recommend it if you want to access the performance improvements!

If you are interested, Compiled provides automated migration tooling (codemods) to allow you to quickly migrate applications from `emotion` or `styled-components`. Please see [How to migrate to Compiled?](https://compiledcssinjs.com/docs/migrating) and [@compiled/codemods](https://compiledcssinjs.com/docs/pkg-codemods#styled-components-to-compiled) for technical migration guidance.

```diff
-import styled from 'styled-components';
+import { styled } from '@compiled/react';

```

## FAQs

#### Do I need to migrate to Compiled as well?\<

No, Compiled can be used alongside other CSS-in-JS libraries. It is possible to safely interop compiled `@atlaskit` packages with UI components styled with other libraries (Emotion, styled-components, etc.).

However, please be aware of potential style-ordering and selector-related issues where custom overrides or hard-coded selectors may change as a result. This may happen when styling the same element with two different libraries.

#### What kind of breaking package changes will come with it?

While we typically expect minimal or no breaking visual changes for the majority of applications, we may be actioning some deprecations in the near future, primarily the `xcss` export from `@atlaskit/primitives` will be deprecated and replaced with the `@atlaskit/css.cssMap` package as described on [https://atlassian.design/components/css/examples](https://atlassian.design/components/css/examples).

There may be similar breaking changes, such as `props.cssFn` or similar styling APIs that will not work with Compiled that may be removed, but we will try to document this in each package’s major version changelog(s). Most of them are already [deprecated or linted against with our eslint tooling](https://atlassian.design/components/eslint-plugin-design-system/no-unsafe-style-overrides/usage).

#### Will the existing versions of packages still work?

Yes, in the short term. You can continue to use versions prior to the Major version that migrates to Compiled, for example, until you need to test with Compiled. In the long term, we strongly recommend upgrading to benefit from improvements in UX, performance, security, and accessibility.

---

<div class="post-metadata">

**Author:** ![lkimmel](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/lkimmel/32/48973_2.png) [@lkimmel](https://community.developer.atlassian.com/u/lkimmel)\
**Post date:** [November 7, 2024, 9:25am UTC](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953/2 "2024-11-07T09:25:50Z")

</div>

We do not use parcel, webpack nor babel, but **vite** to build our app. I did not try it out yet, but just to mention another common build tool, that should be covered in the documentation.

---

<div class="post-metadata">

**Author:** ![remie](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/remie/32/34985_2.png) [@remie](https://community.developer.atlassian.com/u/remie)\
**Post date:** [November 7, 2024, 9:33am UTC](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953/3 "2024-11-07T09:33:04Z")

</div>

We do use Webpack, but we do not use `babel-loader`.

Is there a specific reason why this cannot work with normal CSS loaders, like tailwind does? For example

```auto
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  'postcss-preset-env',
                  'tailwindcss',
                  'autoprefixer'
                ]
              }
            }
          }
        ]
      }

```

Please note that we also use AtlasKit packages in our P2 plugins and rely heavily on the [Atlassian Webpack resource plugin](https://www.npmjs.com/package/atlassian-webresource-webpack-plugin). I assume this will continue to work as expected as well?

---

<div class="post-metadata">

**Author:** ![AndreasEbert](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/andreasebert/32/38902_2.png) [@AndreasEbert](https://community.developer.atlassian.com/u/AndreasEbert)\
**Post date:** [November 7, 2024, 9:45am UTC](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953/4 "2024-11-07T09:45:56Z")

</div>

We also use _vite_ in a couple of our Cloud apps. Would be good if we can continue to use it without too much hazzle.

---

<div class="post-metadata">

**Author:** ![DanielDelCore](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/danieldelcore/32/39871_2.png) [@DanielDelCore](https://community.developer.atlassian.com/u/DanielDelCore)\
**Post date:** [November 7, 2024, 9:51am UTC](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953/5 "2024-11-07T09:51:25Z")

</div>

Hey @lkimmel @remie 👋

In those cases in both of those cases, Compiled-enabled packages should work as normal.

> If your bundler supports CSS imports (`import 'styles.css';` ), packages using Compiled should continue to work out of the box. We expect this to be the case in most scenarios.

I should add here, “even if you’re using Vite and esbuild” since they come pre-configured with the css import syntax.

If/when you have time, give the new lozenge variant a try and let me know if you run into any issues 🙏 If you observe any side-effects let me know and we can experiment with some other approaches.

I’ll look into this next week:

> AtlasKit packages in our P2 plugins

Cheers!

---

<div class="post-metadata">

**Author:** ![LeifNiemczik](https://avatars.discourse-cdn.com/v4/letter/l/5daacb/32.png) [@LeifNiemczik](https://community.developer.atlassian.com/u/LeifNiemczik)\
**Post date:** [November 7, 2024, 10:00am UTC](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953/6 "2024-11-07T10:00:27Z")

</div>

I guess this will probably ease overriding component styles, since the specificity of inline styles usually was higher than the one of our CSS files. So if that works and the update works with all common bundlers this would be an improvement.

---

<div class="post-metadata">

**Author:** ![marc](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/marc/32/39047_2.png) [@marc](https://community.developer.atlassian.com/u/marc)\
**Post date:** [November 7, 2024, 10:02am UTC](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953/7 "2024-11-07T10:02:40Z")

</div>

Is it possible to “export” the styles into a .css file, which we can use with standard html? I.e. a similar use like with AUI.

---

<div class="post-metadata">

**Author:** ![remie](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/remie/32/34985_2.png) [@remie](https://community.developer.atlassian.com/u/remie)\
**Post date:** [November 7, 2024, 12:17pm UTC](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953/8 "2024-11-07T12:17:50Z")

</div>

OK, I’ve tried using the Lozenge variant with compiled and Webpack is not giving any warnings/errors, but it also doesn’t look like a Lozenge.

This is the old version:

 ![Screenshot 2024-11-07 at 13.16.49](https://global.discourse-cdn.com/atlassiandeveloper/original/3X/b/6/b6789fef96ea4ba456cb13f5fc8d817f5fd5d394.png)

This is the compiled variant:

 ![Screenshot 2024-11-07 at 13.16.12](https://global.discourse-cdn.com/atlassiandeveloper/original/3X/2/6/2606ddeb640ddf10c69190e0d1fa23fe31fb5a5c.png)

This is the compiled variant in our DC plugin. Webpack also does not give any errors/warnings here, but again the result does not look correct to me:

 ![Screenshot 2024-11-07 at 13.34.49](https://global.discourse-cdn.com/atlassiandeveloper/original/3X/8/7/874a4994e4ce1d403f2f129d6dc5aa4348b5c1d2.png)

---

<div class="post-metadata">

**Author:** ![KylorHall](https://avatars.discourse-cdn.com/v4/letter/k/919ad9/32.png) [@KylorHall](https://community.developer.atlassian.com/u/KylorHall)\
**Post date:** [November 8, 2024, 4:02am UTC](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953/9 "2024-11-08T04:02:46Z")

</div>

Hey @remie, if I had to guess, you had classes attached to the Lozenge that weren’t actually available on the page, eg. not in a `<style>` tag. I found a small bug on our side causing that stylesheet to not be resolved for all bundlers (and we’re putting in place tooling and config to make sure that’s applied to all packages in the near future).

Hasn’t landed as of writing yet, but the next patch bump to `@atlaskit/lozenge` (with a minor bump to `@atlaskit/primitives`) should fix this in the next 24 hours—if I’ve understood the problem.

---

<div class="post-metadata">

**Author:** ![TonyGoughAdaptavist](https://avatars.discourse-cdn.com/v4/letter/t/f4b2a3/32.png) [@TonyGoughAdaptavist](https://community.developer.atlassian.com/u/TonyGoughAdaptavist)\
**Post date:** [November 8, 2024, 12:09pm UTC](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953/10 "2024-11-08T12:09:23Z")

</div>

Vite users here, no problems testing 11.12.2.

---

<div class="post-metadata">

**Author:** ![tobitheo](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/tobitheo/32/37087_2.png) [@tobitheo](https://community.developer.atlassian.com/u/tobitheo)\
**Post date:** [December 3, 2024, 5:03pm UTC](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953/11 "2024-12-03T17:03:15Z")

</div>

Next.js user here. It does not like that you are importing CSS as a node\_modules dependency:

```auto
 ⨯ ./node_modules/@atlaskit/lozenge/dist/esm/compiled/index.compiled.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@atlaskit/lozenge/dist/esm/compiled/index.js

```

See also: [CSS Imported by a Dependency | Next.js](https://nextjs.org/docs/messages/css-npm)  
Minimal reproducible example: [https://codesandbox.io/p/devbox/tlkmrp](https://codesandbox.io/p/devbox/tlkmrp)

I’m going to try (in the near future) to see if switching over to webpack in Next + style-loader and css-loader described will get rid of this. Even if it does, we’ll see if the performance hit from switching away from swc is too annoying. This might be the kick in the behind I need to go away from Next.js…

PS: Sorry for being late to the party here, I was sick for 3 out of the last 4 weeks 😬  
PPS: I noticed you already started rolling this out to other Atlaskit modules (\>.\> `empty-state`) Might have to do some rollbacks for the time being.

---

<div class="post-metadata">

**Author:** ![hannes-finesoftware](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/hannes-finesoftware/32/42800_2.png) [@hannes-finesoftware](https://community.developer.atlassian.com/u/hannes-finesoftware)\
**Post date:** [December 9, 2024, 5:02pm UTC](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953/12 "2024-12-09T17:02:25Z")

</div>

Hi @DanielDelCore,

other next.js app here (using webpack/babel); same error as reported by @tobitheo.

Very likely related, we also have a problem with `@atlaskit/tokens/babel-plugin`, where we’re getting a

```auto
Error: token() must have a string as the first argument

```

for a point in code where we’re wrapping a call to `token`. There might be other ways to do what we’re doing there, but I’m afraid this needs some investigation.

I can also confirm @tobitheo’s point that `@compiled` _already_ seems to bleed into the published AK components. I’m not sure where exactly this came in, but I had to revert a bunch of dependency bumps to get my build going again. (I believe it might have been some transitive dependency on `@atlaskit/heading`, version 4?, but I’m not sure.)

---

<div class="post-metadata">

**Author:** ![hannes-finesoftware](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/hannes-finesoftware/32/42800_2.png) [@hannes-finesoftware](https://community.developer.atlassian.com/u/hannes-finesoftware)\
**Post date:** [December 9, 2024, 9:59pm UTC](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953/13 "2024-12-09T21:59:12Z")

</div>

`@atlaskit/section-message@6.8.2` seems to bring in `@compiled`:

```auto
@atlaskit/section-message/node_modules/@atlaskit/heading/dist/esm/heading.partial.compiled.css

```

---

<div class="post-metadata">

**Author:** ![DanielDelCore](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/danieldelcore/32/39871_2.png) [@DanielDelCore](https://community.developer.atlassian.com/u/DanielDelCore)\
**Post date:** [December 10, 2024, 11:30pm UTC](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953/14 "2024-12-10T23:30:03Z")

</div>

Hey @tobitheo @hannes-finesoftware, thanks for raising this and apologies for the inconvenience! I’m going to look into this today and see if there are any workarounds available to us!

---

<div class="post-metadata">

**Author:** ![marc](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/marc/32/39047_2.png) [@marc](https://community.developer.atlassian.com/u/marc)\
**Post date:** [December 11, 2024, 7:30am UTC](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953/15 "2024-12-11T07:30:51Z")

</div>

Hi @DanielDelCore ,

Maybe you can help:

> [@marc](#):
>
> Is it possible to “export” the styles into a .css file, which we can use with standard html? I.e. a similar use like with AUI.

---

<div class="post-metadata">

**Author:** ![DanielDelCore](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/danieldelcore/32/39871_2.png) [@DanielDelCore](https://community.developer.atlassian.com/u/DanielDelCore)\
**Post date:** [December 12, 2024, 12:43am UTC](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953/16 "2024-12-12T00:43:41Z")

</div>

Hey all 👋, (@tobitheo @hannes-finesoftware)

We did some digging yesterday, I was scratching my head because we tested with Nextjs and CRA before publishing these comms.

We found that this issue only happens when using Nextjs with the Pages Router. To work around it you can use the config shown here 👇 Although, it unfortunately does require manually adding packages to the `transpileModules` array. Could you please give this a try and LMK if you run into any issues 🙏

[https://codesandbox.io/p/devbox/next-compiled-css-pages-forked-n2k9gn?workspaceId=ws\_KeNunwkWFCiNERoCoqw87D](https://codesandbox.io/p/devbox/next-compiled-css-pages-forked-n2k9gn?workspaceId=ws_KeNunwkWFCiNERoCoqw87D)

Alternatively you can upgrade to App router and it should work out of the box, [Vercel provides some docs and codemods](https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration) to make this easier.

[https://codesandbox.io/p/devbox/next-compiled-css-pages-forked-c8chnn?workspaceId=ws\_KeNunwkWFCiNERoCoqw87D](https://codesandbox.io/p/devbox/next-compiled-css-pages-forked-c8chnn?workspaceId=ws_KeNunwkWFCiNERoCoqw87D)

Cheers!

---

<div class="post-metadata">

**Author:** ![DanielDelCore](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/danieldelcore/32/39871_2.png) [@DanielDelCore](https://community.developer.atlassian.com/u/DanielDelCore)\
**Post date:** [December 12, 2024, 1:03am UTC](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953/17 "2024-12-12T01:03:37Z")

</div>

Sorry for the late response @marc,

That should be possible via webpack by combining chunks matching `node_modules/@atlaskit/**/dist/cjs/*.compiled.css` or similar.  
It’s a similar process to combining various libraries into a `vendor.js` file.

However, we don’t have direct control over how css files generated so there may be some nuances/gotchas to be conscious of. These styles also change often, whenever we touch our internal styles classnames will be regenerated (hashed) which may break your component implementations.

TL;DR It should be possible, but will be fragile if the right precautions aren’t taken, so do so at your own risk.

---

<div class="post-metadata">

**Author:** ![marc](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/marc/32/39047_2.png) [@marc](https://community.developer.atlassian.com/u/marc)\
**Post date:** [December 12, 2024, 12:34pm UTC](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953/18 "2024-12-12T12:34:46Z")

</div>

Hi @DanielDelCore ,  
Thank you for the answer. This in effect means no CSS like AUI provided, as constantly changing CSS without documentation is not what we are looking for.

---

<div class="post-metadata">

**Author:** ![hannes-finesoftware](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/hannes-finesoftware/32/42800_2.png) [@hannes-finesoftware](https://community.developer.atlassian.com/u/hannes-finesoftware)\
**Post date:** [December 13, 2024, 8:48am UTC](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953/19 "2024-12-13T08:48:33Z")

</div>

@daniel

When I do either the `transpileModules` trick or use the app router, the build fails with e.g.

```auto
SyntaxError: importSource cannot be set when runtime is classic.
> 1 | /**
    | ^
  2 | * @jsxRuntime classic
  3 | * @jsx jsx
  4 | */
Import trace for requested module:
../../../../node_modules/@atlaskit/lozenge/dist/esm/Lozenge/index.js

```

(If it’s not `Lozenge` failing, it’s somewhere else in AK.)

For context, we’re using `@emotion` for our app’s own styling, with

```auto
'preset-react': {
    runtime: 'automatic',
    importSource: '@emotion/react',
},

```

in `babel`.

---

<div class="post-metadata">

**Author:** ![edwin\_ro](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/edwin_ro/32/39164_2.png) [@edwin\_ro](https://community.developer.atlassian.com/u/edwin_ro)\
**Post date:** [December 13, 2024, 9:55am UTC](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953/20 "2024-12-13T09:55:50Z")

</div>

Is this RFC related with the deprecation of styling on Select ([https://developer.atlassian.com/changelog/#CHANGE-1953](https://developer.atlassian.com/changelog/#CHANGE-1953))?

If so, will there be alternatives? We’re heavily using `components , formatOptionLabel, style` props on Select to e.g correctly set z-index, menu width, icons on select options, actions like ‘Select all’ etc…

 ![image](https://global.discourse-cdn.com/atlassiandeveloper/original/3X/0/f/0f3b00d23b8a23b5221382000ea490a8cc14ec98.png)

[Next page](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953.md?page=2)