fix(vacation-calendar): fix broken timeline layout

.changeset/tame-eggs-marry.md

@@ -0,0 +1,11 @@
+---
+'@axis-backstage/plugin-vacation-calendar': patch
+---
+
+Fix broken timeline layout in consuming apps. The `react-calendar-timeline`
+package declares `sideEffects: false` with no exception for CSS, so its base
+stylesheet was tree-shaken out of the bundle when this plugin was consumed by
+a host app (it only appeared to work in this plugin's own dev server, which
+does not tree-shake). The base timeline styles are now inlined into this
+plugin's own CSS file, and the `sideEffects` field is updated to also cover
+the compiled `*.css.esm.js` output so it survives bundling.

plugins/vacation-calendar/package.json

@@ -33,7 +33,8 @@
     ]
   },
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "**/*.css.esm.js"
   ],
   "scripts": {
     "start": "backstage-cli package start",

plugins/vacation-calendar/src/components/CalendarCard/CalendarCard.css

@@ -1,4 +1,115 @@
-@import 'react-calendar-timeline/style.css';
+/*
+ * Base react-calendar-timeline styles, inlined here instead of imported from
+ * 'react-calendar-timeline/style.css'. That package declares "sideEffects": false
+ * with no exception for CSS files, so bundlers can tree-shake the import away
+ * entirely once this plugin is built and consumed by a host app.
+ */
+.react-calendar-timeline * {
+  box-sizing: border-box;
+}
+
+.react-calendar-timeline .rct-outer {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.react-calendar-timeline .rct-scroll {
+  display: inline-block;
+  white-space: normal;
+  vertical-align: top;
+  overflow: hidden;
+  touch-action: none;
+}
+
+.react-calendar-timeline .rct-item:hover {
+  z-index: 88;
+}
+
+.react-calendar-timeline .rct-item .rct-item-content {
+  position: sticky;
+  left: 0;
+  overflow: hidden;
+  display: inline-block;
+  border-radius: 2px;
+  padding: 0 6px;
+  height: 100%;
+}
+
+.react-calendar-timeline .rct-sidebar {
+  overflow: hidden;
+  white-space: normal;
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.react-calendar-timeline .rct-sidebar.rct-sidebar-right {
+  border-right: 0;
+  border-left: 1px solid var(--bui-border-1, #bbb);
+}
+
+.react-calendar-timeline .rct-sidebar .rct-sidebar-row {
+  padding: 0 4px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.react-calendar-timeline .rct-sidebar .rct-sidebar-row.rct-sidebar-row-even {
+  background: transparent;
+}
+
+.react-calendar-timeline .rct-vertical-lines .rct-vl {
+  position: absolute;
+  z-index: 30;
+}
+
+.react-calendar-timeline .rct-vertical-lines .rct-vl.rct-vl-first {
+  border-left-width: 2px;
+}
+
+.react-calendar-timeline .rct-vertical-lines .rct-vl.rct-day-6,
+.react-calendar-timeline .rct-vertical-lines .rct-vl.rct-day-0 {
+  background: #faf6e180;
+}
+
+.react-calendar-timeline .rct-horizontal-lines {
+  user-select: none;
+}
+
+.react-calendar-timeline .rct-horizontal-lines .rct-hl-even,
+.react-calendar-timeline .rct-horizontal-lines .rct-hl-odd {
+  box-sizing: border-box;
+  z-index: 40;
+}
+
+.react-calendar-timeline .rct-horizontal-lines .rct-hl-even {
+  background: transparent;
+}
+
+.react-calendar-timeline .rct-cursor-line {
+  position: absolute;
+  width: 2px;
+  background: #2196f3;
+  z-index: 51;
+}
+
+.react-calendar-timeline .rct-dateHeader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.react-calendar-timeline .rct-dateHeader-primary {
+  background-color: initial;
+}
 
 .react-calendar-timeline .rct-header-root {
   background: var(--bui-bg-neutral-2, #f5f5f5);

plugins/vacation-calendar/src/plugin.ts

@@ -1,4 +1,3 @@
-import 'react-calendar-timeline/style.css';
 import {
   createApiFactory,
   createPlugin,