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).

Bắt đầu với bản tái hiện StackBlitz được liên kết và issue Storybook liên quan, sau đó theo dõi cách react-docgen sử dụng cấu hình Babel được cung cấp khi component import và export một CSS module. Công việc được hoàn thành khi tệp CSS không còn bị phân tích cú pháp như JavaScript, trong khi việc trích xuất tài liệu cho React component vẫn hoạt động.