I'm working on a react project boilerplate to get started.
my teammate said that it would be cool to have the name of the component and path of it in CSS class names that we define. it would be easier to find and locate the component for debugging he said.
something like: (src/components/shared/post.tsx)

.test {
    ...
}

<div className="test">...</div>

and the result be:

.shared__post__test {
    ...
}

<div className="shared__post__">...</div>

I'm aware that this kind of behavior is implemented in "CSS Modules" with "localIdentName", But We said that we wouldn't use it in this project.

I've searched for an alternative but didn't come by anything.

do you have any suggestions on how I can achieve this?