Don’t unconditionally convert config keys to kebab-case

[thecrypticace]

Fixes #18114
Closes #18115

This PR changes JS config handling such that we always preserve casing for theme keys (when possible).

Now there are two exceptions to this rule:

1. Top-level keys in the theme do get converted to kebab-case. As CSS variables are not generated from these this shouldn't be a big issue.

All of our internal plugins look for kebab-case keys. So, for example, take the path backgroundColor.red.500. This must translate to --background-color-red-500. But if you had something like backgroundColor.lightBlue it would be perfectly fine for that to translate to --background-color-lightBlue internally (and thus the utility be written as bg-lightBlue.

2. Tuple object keys are converted to kebab-case as well.

These keys are converted to "nested" key syntax internally and typtically represent CSS property names.

For example:

export default {
  theme: {
    fontSize: {
      xs: ["1.5rem", { lineHeight: "1.3" }]
    },
    
    fontFamily: {
      sans: ["Potato Mono", { fontVariationSettings: '"XHGT" 0.7' }]
    }
  }
}

The lineHeight key here must be converted to line-height because it represents a CSS property name. The theme key that represents this value is --text-xs--line-height. The same situation applies for the fontVariationSettings where the theme key is --font-sans--font-variation-settings.

[coderabbitai]

Walkthrough

This pull request updates the Tailwind CSS config handling to support and preserve camelCase theme keys. Changes include: (1) renaming CSS custom property tokens and class names from kebab-case to camelCase in test files, (2) modifying the keyPathToCssProperty transformation to conditionally apply kebab-case conversion based on context (first namespace part, tuple-nested keys, and special cases like lineHeight), and (3) adding test coverage for camelCase key preservation during utility generation. The modifications ensure camelCase theme configuration entries are properly recognized and generate appropriate CSS selectors while maintaining kebab-case conversion for specific segments.

Pre-merge checks

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: preventing unconditional conversion of config keys to kebab-case, which directly addresses issue #18114.
Linked Issues check	✅ Passed	The code changes implement conditional kebab-case conversion logic in apply-config-to-theme.ts and update tests to use camelCase tokens, directly addressing issue #18114's requirement to preserve original camelCase/PascalCase key naming in utilities.
Out of Scope Changes check	✅ Passed	All changes are focused on implementing conditional kebab-case conversion and updating corresponding test expectations; no unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The pull request description clearly explains the changes: preserving casing for theme keys with two specific exceptions (top-level keys and tuple object keys), which aligns with the changeset targeting camelCase preservation in config handling.

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}