Support CSS Modules

[nvh95]

Why

• jest-preview currently doesn't support CSS Modules, and given the popularity of CSS Modules, jest-preview should support it out of the box.

How

• Not sure how to implement this feature, we may need to explore how CSS Modules works and mimic the behaviors. One possible solution is through a transform
• How create react app currently handle CSS Modules in jest:
  • They use identity-obj-proxy which transform imported className to string

import { sidebar } from './style.module.css' // => sidebar === 'sidebar'

<div className={sidebar} ></div> // => <div class="sidebar" ></div>

Reference:
https://github.com/facebook/create-react-app/blob/63bba07d584a769cfaf7699e0aab92ed99c3c57e/packages/react-scripts/scripts/utils/createJestConfig.js#L58

When

• 0.1.x/ 0.2.x

[nvh95]

• Can use https://github.com/madyankin/postcss-modules
• See how vite uses postcss-modules

https://github.com/vitejs/vite/blob/c29613013ca1c6d9c77b97e2253ed1f07e40a544/packages/vite/src/node/plugins/css.ts#L741-L767