Use CSS Modules error

[FKAJerry]

import classNames from "classnames";
import styles from './prometheus-extension.module.css'

export function Chevron({ open }: { open: boolean }) {
  return (
    <div
      className={classNames(styles.Chevron, { ["styles.ChevronOpen"]: open })}
    />
  );
}

and I import this jsx in content_scripts, print error below:

ERROR in [metric-viewer's content_scripts] One of yourcssfile imports is also defined as a content_script in manifest.json. Remove the duplicate entry and try again.

How does extension.js use css-modules now? or how can I debug this issue?

[cezaraugusto]

hi @FKAJerry, it seems you are importing an asset that is being imported by content_scripts and another file, is that the case? This is a limitation so far since I route assets imported from content_scripts to the web_accessible_resources folder.

A workaround would be using a dedicated file for the CSS module import just for content scripts. Let me know if that doesn't work

[cezaraugusto]

wont be an issue in the next relaese btw

[cezaraugusto]

@FKAJerry this is fixed in the latest version. Please try:

npx extension@latest create my-extension --template=content-css-module

It's not documented yet but hopefully will be soon. Closing as completed but please re-open if I'm wrong. Thanks!