Support for `atomicClassNameSlug` option for customizing the generated atomic classes
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 413
- PR merge metrics
- No merged PRs in 30d
Description
## Describe the feature
A new configuration option `atomicClassNameSlug` that accepts a template string `"myAtomics-[propertyHash]-[valueHash]"` or a factory function (both similar to the existing [`classNameSlug`](https://github.com/callstack/linaria/blob/master/docs/CONFIGURATION.md#:~:text=classNameSlug) option)
## Motivation
Linaria already has a feature to customize classname slugs via the `classNameSlug` option. The atomic package currently only allows it's own slug generation in the form of [`atm_[propertyHash]_[valueHash]`](https://github.com/callstack/linaria/blob/master/docs/ATOMIC_CSS.md#:~:text=The%20format%20of%20these%20atoms%20is) and customization of this is not possible.
This feature would allow generating developer friendly atomic names for eg. the css `padding: 18rem` -> `atm_padding-[18rem]` (or tailwind inspired `atm_p-[18rem]`) during development and eg. `atm_82c_01jx` in production (provided the users implement this in the `atomicClassNameSlug` option as a function - that's left up to the individuals. In theory this could be followed by adjusting the option `displayName` in the future to also apply to atomic classes and prefill the `atomicClassNameSlug` option with a default readable developer format).
> The [documentation for atomics](https://github.com/callstack/linaria/blob/master/docs/ATOMIC_CSS.md#:~:text=atm_background_qrst) seems to suggest that this already works (by using classNames such as `atm_background_qrst`) but the code always hashes the name regardless of the `displayName` option. I'm unsure if this has been removed or never implemented.
## Possible implementations
The only place that has to be modified is the [`atomize` helper of the `@linaria/atomic` package](https://github.com/callstack/linaria/blob/develop/packages/atomic/src/processors/helpers/atomize.ts#L104-L106).
This function would need to read the configuration options and either parse or call the `atomicClassNameSlug` to generate the custom atomic class name slugs. The prefix `atm_` would always be attached to the generated string regardless of the option (for reasons explained below).
> I'd prefer to have the prefix `atm_` also customizable but it's needed for [deduplication inside of `cx`](https://github.com/callstack/linaria/blob/develop/packages/core/src/cx.ts#L37-L39) which relies on a unique prefix during runtime. The only way to have support for this would be to add another configuration option to customize and enforce a user provided prefix (that cannot be an empty string) and pass it as a constant during transpilation to `cx`. This would all be too much work and complexity to maintain for arguably little added value.
## Related Issues
None
Contributor guide
Assessment
This issue has not been assessed yet.