`CSS` is not defined on `histoire`

[LemonNekoGH]

Describe the bug

Error while collecting story Example.story.vue:

ReferenceError: CSS is not defined

Provide a minimal reproduction demo of the bug

https://stackblitz.com/~/github.com/LemonNekoGH/anime-cannot-used-on-histoire

Detail the steps to reproduce the behavior in the minimal reproduction demo

For example:

1. Go to histoire.setup.ts
2. Comment the code window.CSS = {}
3. Go to terminal
4. PressCtrl+C to Stop the server
5. Run pnpm dev
6. See the error

Environment details

npx envinfo --system --binaries --browsers

  System:
    OS: macOS 15.4.1
    CPU: (14) arm64 Apple M4 Max
    Memory: 178.20 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.10.0 - ~/.asdf/installs/nodejs/23.10.0/bin/node
    npm: 10.9.2 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 9.12.3 - ~/.asdf/installs/nodejs/23.10.0/bin/pnpm
    bun: 1.1.34 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 136.0.7103.93
    Edge: 136.0.3240.64
    Safari: 18.4

[LemonNekoGH]

I found this in repository: https://github.com/juliangarnier/anime/blob/c5b92032b0021abdc9a67d7810d6447cae50d9ed/src/waapi.js#L173

Window is defined when running on histoire, then the isUnd(CSS) statement will execute, but if CSS is not defined, it cannot be pass as a parameter to a function, maybe we need to use typeof CSS === 'undefined' directly instead?

[nekomeowww]

As commented for CSS namespace / object:

Holds useful CSS-related methods. No object with this interface are implemented: it contains only static methods and therefore is a utilitarian interface. Therefore, we can assign CSS as undefined for server side setup file.

You will need to configure for this:

export default defineConfig({
  // ...
  setupFile: {
    browser: 'stories/setup.ts',
    server: 'stories/setup.server.ts',
  },
  // ...
})

Create stories/setup.server.ts:

import './setup'

globalThis.CSS = undefined as any

Then it's good to go.

[LemonNekoGH]

As commented for CSS namespace / object:

Holds useful CSS-related methods. No object with this interface are implemented: it contains only static methods and therefore is a utilitarian interface. Therefore, we can assign CSS as undefined for server side setup file.

You will need to configure for this:

export default defineConfig({ // ... setupFile: { browser: 'stories/setup.ts', server: 'stories/setup.server.ts', }, // ... }) Create stories/setup.server.ts:

import './setup'

globalThis.CSS = undefined as any Then it's good to go.

Thank you, it works!

[juliangarnier]

Is it still an issue in 4.1.1?

[nekomeowww]

Let me try. Thanks for notifying me.

[nekomeowww]

@juliangarnier Tested, it works now. @LemonNekoGH I guess we can close it.

[LemonNekoGH]

@juliangarnier Tested, it works now. @LemonNekoGH I guess we can close it.

Yes it works now, let me close it, thank you