How to publish a react-component with css modules that can be consumed by both, projects using ES Modules and CommonJs for css modules

For some frameworks (eg. Gatsby >= V3) the default for importing CSS modules is as ES modules like so:

import { class1, class2 } from 'styles.modules.css'
// or
import * as styles from 'styles.modules.css'

https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/#css-modules-are-imported-as-es-modules

Other projects such as Create React App still use the default export like this:

import styles from 'styles.modules.css'

How can I publish a react-component (that uses css modules internally) so that it can be imported and used in both scenarios without extracting the css?