tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

Fix lowercase+uppercase keys (camelCase/PascalCase) unexpectedly treated to kebab-case when using JavaScript config file

Open woohm402 opened this issue 8 months ago • 1 comments

Summary

Fixes #18114.

It Seems in apply-config-to-theme.ts#keyPathToCssProperty function the theme key is transformed as:

  • . is replaced with -
  • /([a-z])([A-Z])/ is replaced with $1-$2.toLowerCase()

However in theme.ts#resolve, when failed to find exact key, it only replaces

  • . is replaced with -

It seems the second transformation step is missing in theme.ts#resolve, causing inconsistencies when using camelCase or PascalCase theme keys.

Test plan

All unit tests pass, including the new test case covering this behavior.

woohm402 avatar May 22 '25 16:05 woohm402

I haven’t thoroughly tested all possible edge cases, so there might be scenarios I missed. If anything seems off or needs more coverage, I’d be happy to follow up 😀

woohm402 avatar May 22 '25 17:05 woohm402