gaoxiaoliangz/react-scoped-css

Include component name of path in hash?

stefaneidelloth opened this issue · 3 comments

Lets say, I have css class 'foo' for components Baa and Qux... and I debug the final application with chrome dev tools...
how to I know where the css class foo[hash] comes from?

=>How can I include the name of the component in the hash to get

foo[Baa-hash] vs. foo[Qux-hash]

If I have two components with the same name in different packages, It would be good to include the full path:

foo[package_a/Baa-hash] vs. foo[package_b/Baa-hash]

It seems to be a good idea. Despite the fact that usually each component should have its own css file, I think I might implement something to let users customize the hash generating function.

I just had a look at the dev tools. If the source map would work correctly, that would also be fine for me.

image

However, If I Tools.scoped.css exists twice (in different folders), the link Tools.scoped.css:1 seems to point to the same file for both hashes:
.tools[data-v-c1c98b61]
and
.tools[data-v-db194bb4]

.tools[data-v-db194bb4] {
  display: block;
  margin: 0;
  padding: 0;
}
.preview[data-v-db194bb4] {
  background-color: transparent;
}

Checkout examples/simple/src in this repo, specificly TextA and TextB. They both have a css file named Text.scoped.scss, and the soucemap is correct.
Maybe something else is mis configured? Or if you can provide a mini-repo to reproduce the problem, I may look into it more closely.