Issue Report: Conflicting Class Names in Compiled CSS

Atlassian Ecosystem Design
1

The file:

@atlaskit/calendar/dist/esm/internal/components/date.compiled.css

defines the class:
._kkk2n7od { all: unset; }

which is used internally by @atlaskit/calendar.

However, the same class definition appears in other packages as well, for example:

• @atlaskit/editor-plugin-date/node_modules/@atlaskit/calendar/dist/esm/internal/components/date.compiled.css

• @atlaskit/smart-card/dist/esm/view/FlexibleCard/components/blocks/action-block/action-footer/index.compiled.css

• @atlaskit/smart-card/dist/esm/view/FlexibleCard/components/actions/action/action-stack-item/action-button.compiled.css

• @atlaskit/smart-card/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-trigger/index.compiled.css

Vite injects all CSS into the head element (e.g.,

<style type="text/css" data-vite-dev-id="/app/node_modules/@atlaskit/smart-card/dist/esm/view/FlexibleCard/components/blocks/action-block/action-footer/index.compiled.css">

). As a result, the later-loaded definition of ._kkk2n7od { all: unset; } overrides earlier definitions, causing elements that rely on the @atlaskit/calendar styles to be reset and rendered incorrectly.

In our case, the calendar styles are loaded before the conflicting ones from smart-card and other dependencies, leading to broken styling for calendar components.

Questions:

  1. How can this issue be resolved?

  2. Why do these packages compile and distribute CSS with identical class names?

2 Likes
2

Fixed by doing this in the main txs file:

import "@atlaskit/smart-card/dist/esm/view/FlexibleCard/components/blocks/action-block/action-footer/index.compiled.css"
import "@atlaskit/smart-card/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-trigger/index.compiled.css"
import "@atlaskit/smart-card/dist/esm/view/FlexibleCard/components/actions/action/action-stack-item/action-button.compiled.css"
import "@atlaskit/calendar/dist/esm/internal/components/date.compiled.css"
1 Like
3

Hey @pch :wave:

Thanks for sharing your issue with us.

Unfortunately, this is an issue with the atomic css algorithm when distributed via multiple packages.

The Webpack Compiled plugin resolves this by deduping the extracted classnames, however, it’s not available as a Vite plugin.

I’m going to talk to the team to see if there’s a nice way forward.

Cheers,
Daniel.

1 Like
4

Someone directed me to this third-party vite plugin for compiled, I don’t know well it works but it might be worth a try.

1 Like
5

We’ll try this.

6

This plugin didn’t helped.

Anyway here’s an example how smart card breakes the calendar.
https://codesandbox.io/p/sandbox/calendar-default-forked-6hw4h9?file=%2Fexample.tsx%3A3%2C82

Here’s the original one.
https://atlassian.design/components/calendar/examples

In vite smart card chunk is loaded after calendar.

So the fix in our code is:

import "@atlaskit/smart-card/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-trigger/index.compiled.css"

import "@atlaskit/smart-card/dist/esm/view/FlexibleCard/components/actions/action/action-stack-item/action-button.compiled.css"

import "@atlaskit/smart-card/dist/esm/view/FlexibleCard/components/blocks/action-block/action-footer/index.compiled.css"

import "@atlaskit/react-select/dist/esm/compiled/components/indicators.compiled.css"

import "@atlaskit/calendar/dist/esm/internal/components/date.compiled.css"