feat: add hashSeed config in babel-plugin-react-scoped-css plugin

[BakuJun]

Thank you for your plugin.
When I use this plugin in multiple projects(pubish as npm),I found the same file name in different projects data-v-md5(filename) is conflicted.
So I provide a MR with filePath to md5 ，to avoid this situation.

[gaoxiaoliangz]

I have thought about this before, the reason why I used filename is because that I want consistent hash in CI and local environments, so that snapshot tests will not fail. Maybe it's better to use project-level relative path, but in the context of babel I cannot determine the project absolute path. Therefore I cannot get project-level relative path. Maybe there is a way, but I did not go further.

[BakuJun]

I have thought about this before, the reason why I used filename is because that I want consistent hash in CI and local environments, so that snapshot tests will not fail. Maybe it's better to use project-level relative path, but in the context of babel I cannot determine the project absolute path. Therefore I cannot get project-level relative path. Maybe there is a way, but I did not go further.

How about use

const cwdName = getFilenameFromPath(process.cwd());
const filename = getFilenameFromPath(path.node.source.value);

const hash = md5(cwdName + filename + lastHash).substr(0, 8)

cwdName is closer to project name.

[gaoxiaoliangz]

As a babel plugin, the user may use it in in all kinds of situations, and it's possible that cwd is not the project root. But if CI and local use the same cwd it maybe fine. So I think we can use cwd if there is no better option. And as we are using cwd, we can actually use path.relative to resolve the project relative path. Hash can be generated using that with more info thus reducing the risk of collision.

[BakuJun]

As a babel plugin, the user may use it in in all kinds of situations, and it's possible that cwd is not the project root. But if CI and local use the same cwd it maybe fine. So I think we can use cwd if there is no better option. And as we are using cwd, we can actually use path.relative to resolve the project relative path. Hash can be generated using that with more info thus reducing the risk of collision.

Relative path has the same problem.For example, I have two projects npmA and npmB. My entry file's relative path is src/index.tsx

const relative = path.relative(process.cwd(),filePath); //  value is 'src/index.tsx'

Relative path lost project name, but the cwd path works. I have updated MR and test case.Please have a look.

[gaoxiaoliangz]

I get your point, but using cwd folder name has the potential of generating different hashes on different machines, 'cause project folder names can be different.

I have another idea. Maybe we can let the user provide something like a hashSeed as a babel plugin option, and compute hash like this. And this hashSeed can be optional.

const hash = md5(hashSeed + fileRelativePath + lastHash)

[BakuJun]

I get your point, but using cwd folder name has the potential of generating different hashes on different machines, 'cause project folder names can be different.

I have another idea. Maybe we can let the user provide something like a hashSeed as a babel plugin option, and compute hash like this. And this hashSeed can be optional.

const hash = md5(hashSeed + fileRelativePath + lastHash)

HashSeed is a good idea. Please check the new commit.

[gaoxiaoliangz]

Thanks for the PR. I'll release this update soon.