Error: Could not parse CSS stylesheet

[teleskop150750]

Describe the bug

JSDOM doesn't understand CSS well

Error: Could not parse CSS stylesheet

Similar error

Reproduction

https://github.com/teleskop150750/Histoire

System Info

Windows 11, Google Chrome 114

Used Package Manager

pnpm

Validations

• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [X] Read the Contributing Guidelines.
• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[Akryum]

Probably need to find a way to mock all CSS files

[nikosgpet]

For the time being a came up with the following vite plugin, that needs to be added as a plugin in histoire.config.ts. This will clean all the CSS errors that pollute the console.

The vite plugin :

import type { Plugin } from 'vite'

/**
 * Custom Vite plugin to filter out CSS errors from the console
 * https://github.com/histoire-dev/histoire/issues/501
 */

// Custom Vite plugin to modify console behavior
export async function cleanCssErrors(): Promise<Plugin> {
  return {
    name: 'console-error-filter',
    async transform(code, id) {
      if (id.includes('histoire-setup')) {
        const consoleFilterCode = `
          const originalConsoleError = console.error
          const jsDomCssError = 'Error: Could not parse CSS stylesheet'
          console.error = (...params) => {
            if (!params.find(p => p.toString().includes(jsDomCssError))) {
              originalConsoleError(...params)
            }
          }
        `
        return {
          code: consoleFilterCode + code,
          map: null,
        }
      }
    },
  }
}

Changes to histoire.config.ts :

export default defineConfig({
  // ... other settings
  vite: {
    plugins: [
      cleanCssErrors(),
    ],
  },
})

This solution has been inspired by https://github.com/jsdom/jsdom/issues/2177#issuecomment-1724971596