Bug: CSS styles fail to inject on first load — unstyled settings panel

[nyldn]

Description

The Agentation toolbar occasionally renders completely unstyled on first page load — the settings panel shows raw text with no background, borders, or layout. A page refresh fixes it.

Root Cause

package.json has "sideEffects": false (added in #125 for tree-shaking). This tells bundlers like Vite that all module code is side-effect-free and can be deferred, reordered, or eliminated.

However, the tsup.config.ts SCSS modules plugin injects CSS at runtime via document.createElement('style') — which IS a side effect:

// Generated code in dist/index.mjs (from tsup.config.ts lines 50-58):
if (typeof document !== 'undefined') {
  let style = document.getElementById('feedback-tool-styles-...');
  if (!style) {
    style = document.createElement('style');
    style.id = 'feedback-tool-styles-...';
    document.head.appendChild(style);
  }
  style.textContent = css;
}

With "sideEffects": false, Vite may defer this module evaluation until after React renders the component — resulting in an unstyled first paint.

Reproduction

1. Use Agentation in an Astro project with client:only="react"
2. Hard-refresh the page (Cmd+Shift+R)
3. Open the toolbar settings — panel renders as raw unstyled text
4. Soft-refresh (Cmd+R) — styles load correctly (cached module evaluation runs earlier)

Environment: Astro 6.1.1, Vite 6.x, React 19, agentation 3.0.2

Suggested Fix

Change package.json from:

"sideEffects": false

to:

"sideEffects": ["./dist/index.js", "./dist/index.mjs"]

This preserves tree-shaking for individual named exports while telling bundlers that the entry points contain side-effectful code (CSS injection) that must not be deferred.

This is the standard pattern used by libraries like @mui/material, antd, and react-toastify that inject CSS at runtime.

Related

• Add sideEffects: false to package.json to allow bundlers to tree-shake this tool #125 — Added sideEffects: false for tree-shaking (caused this regression)