When postcss modules are present, in some scenarios react-docgen tries to parse css files

Background

In certain scenarios react-docgen tries to parse CSS modules.

This yields an error as follows:

Use case

See related Storybook issue https://github.com/storybookjs/storybook/issues/25662 and stackblitz reproduction https://stackblitz.com/edit/github-cwovgn-yvzreq

Have a component like so

import React from "react"
import styles, { stylesheet } from "./Container.module.css"

const Container = ({ children }) => (
  <div>
    {children}
  </div>
)

export default Container;
export stylesheet;

And where the css file contains an @import

@import url("../../css/variables.css");

The babel config passed to react-docgen doesn't take into account the .babelrc file and attempts to parse the .css file as JavaScript.

This causes an error like so

[vite] Internal server error: /path/to/Container.module.css: Support for the experimental syntax 'decorators' isn't currently enabled (1:1):

Is there anyway to configure react-docgen to ignore .css files in this case?

If you're wondering why are we importing and exporting the processed stylesheet, we're building a critical css component that inlines CSS needed for the first paint. We're doing this by using rollup-post-css-modules to import postcss modules but also export the built stylesheet so it can be collated in a reliable fashion (ie the class names don't change from what is rendered in the component).

Commencez par la reproduction StackBlitz liée et l’issue Storybook associée, puis suivez la manière dont react-docgen utilise la configuration Babel fournie lorsque le composant importe et exporte un module CSS. Le travail est terminé lorsque le fichier CSS n’est plus analysé comme du JavaScript, tout en garantissant que l’extraction de la documentation du composant React fonctionne toujours.