feat: add namespaceToDevClassName as option of babel-plugin

[RavenColEvol]

What changed / motivation ?

Changed: Now namespaceToDevClassName has become part of babel-plugin so user can modify the output of dev class names to their need.

I'll add more details like docs changes for above change once this PR is approved.

Linked PR/Issues

Fixes https://github.com/facebook/stylex/issues/487

Pre-flight checklist

• [x] I have read the contributing guidelines Contribution Guidelines
• [x] Performed a self-review of my code

[nmn]

I've intentionally strayed away from this implementation as functions can not be passed through JSON configurations. I don't think this should be merged in the current state. However, there might be a way to represent the namespaceToDevClassName function as a type of string pattern, which would make this feature feasible.

[RavenColEvol]

@nmn hey thanks for the comment, I think i was lost too much on the usecase that i forgot .json usage. I still wonder how can i help solving the original issue where they want to convert to unicode string. One solution I can come up with is that providing both option function and string. Function definitely will allow you to do more. And i think this pattern is seen in many config of esbuild etc.

1. Function Based: Function will work as it is which is there in PR and will only work with js based config.
2. String Based : I've seen this pattern in multiple products where we ask user for string and it has some sort of templating pattern like {{title}}-{{date}} we can also do something similar by providing some variables {{namespace}}__{{varName}}--{{fileName}}

[necolas]

I think it would be better for stylex to improve how it does dev info and not have this configurable.

1. When dev is true, all class names should be prefixed by the property

<div class="margin-xrjyskp">

2. When debug is true, add data-* prop that contains info about the source files and lines that provide the styles. This is similar to what RSD does for elements, and something I'd like it to do for styles if StyleX doesn't provide this in the near future. It would replace the "dev class names" that stylex inserts

<div
  data-style-src="npm:package-name; path/to/file:12; path/to/other:56"
  class="margin-xrjyskp padding-xkgsvji"
>

[RavenColEvol]

That's insightful @necolas I totally agree with you that adding an inline file path attribute will make DX much more better. Just a point that dev class names earlier generated served a purpose for devs to always have a predictable class selector for testing which now will be lost i feel ( doing it on source map path won't be good as it will change if file path changes).

[necolas]

What kind of testing are you referring to? If it's selectors for unit or e2e tests, it's best to not rely on styling attributes for that, and instead use data-testid or semantic attributes.

[nmn]

@necolas Adding data-* attributes sounds like a great solution. I'll work on it.

[RavenColEvol]

Also you will then need to have an external devtools library for stylex. This library will help when Alt+Click is done on DOM it will open up the editor and focus the field. If you want I can give it a try @nmn

[necolas]

Integration with React Dev Tools is something we'd like to do eventually. That's the logical home for style debugging in React

[nmn]

Closing this PR as we have decided to go in a different direction. Work is underway for that new direction.