setupFile is no longer adding styles to the browser

[davestewart]

Not sure what happened, but our setup file is no longer adding custom styles.

Not sure if this is maybe a Nuxt or Histoire update?

I stripped it right down to just the following:

// histoire.config.ts
import { defineConfig } from 'histoire'
import { HstNuxt } from '@histoire/plugin-nuxt'
import { HstVue } from '@histoire/plugin-vue'

// export final config
export default defineConfig({
  setupFile: './histoire.setup.ts',
  plugins: [HstVue(), HstNuxt()],
  outDir: './histoire/dist',
})

// histoire.setup.ts
import './styles.css'

console.log('loaded setup file')

export default function () {
  console.log('running setup function')
}

// styles.css
body {
  color: red !important;
}

I see the loaded setup file log in the build process, but nothing else; no logs in the browser, or styles added.

This was all running fine until a couple of days ago.

[davestewart]

OK, I'm reopening this, because as it turns out, it's no necessarily the setup file, but just general random behaviour when loading.

Could be:

• the setupFile (which adds additional CSS)
• components (which may or may not load)
• Tailwind variants (useful but not essential)

There's really no guarantee that when the Histoire page loads, any of the above work first time, or at all.

There seems to be some kind of waterfall loading in at the start which I generally cross my fingers for that it works, then have to keep restarting if it doesn't.