SIGN IN SIGN UP
honojs / hono UNCLAIMED

Web framework built on Web Standards

0 0 78 TypeScript

feat(css): add classNameSlug option to createCssContext (#4834)

* feat(css): add classNameSlug option to createCssContext

Add an optional classNameSlug function to createCssContext that lets
users customize generated CSS class names instead of the default
hash-based 'css-1234567890' format.

The function receives (hash, label, styleString) and returns the desired
class name string. This enables readable, debug-friendly class names
like 'h-hero-section' while preserving hash-based uniqueness.

Addresses review feedback:
- Move ClassNameSlug type near CssVariableType exports
- Rename third parameter from css to styleString
- Propagate classNameSlug to keyframesCommon and viewTransitionCommon
- Add classNameSlug support to DOM-side createCssContext
- Add TSDoc documentation

Closes #4577

* fix(css): sanitize and normalize classNameSlug output

Normalize and sanitize the return value of classNameSlug to prevent
CSS injection and improve readability:

- Trim leading/trailing whitespace
- Collapse whitespace sequences to hyphens (e.g. 'ultra fast' -> 'ultra-fast')
- Strip characters outside [a-zA-Z0-9_-]
- Fall back to hash if result is empty

Addresses review feedback from yusukebe and usualoma regarding
potential CSS injection through malicious classNameSlug functions.

* feat(css): add onInvalidSlug and unify server/DOM contexts

Add strict CSS identifier validation for classNameSlug output and
onInvalidSlug callback for invalid slugs, unified across server
and DOM-side createCssContext.

- Replace sanitizeClassName with validateClassName/validateKeyframeName
  (rejects digit-leading names and reserved @keyframes keywords)
- Add onInvalidSlug option (defaults to console.warn)
- Normalize labels (trim + hyphenate) before passing to classNameSlug

* feat(css): refine classNameSlug with strict validation and onInvalidSlug

Refine classNameSlug implementation by replacing sanitization with
strict validation and adding an onInvalidSlug callback.

- Add isValidClassName and isValidKeyframeName for strict identifier
  checks (^?-?[_a-zA-Z][_a-zA-Z0-9-]*$).
- Reject CSS-wide reserved keywords for @keyframes animation names.
- Pre-normalize labels (trim + hyphenate) before passing to classNameSlug.
- Add optional onInvalidSlug callback to createCssContext for custom
  error handling (defaults to console.warn).
- Ensure parity between SSR and DOM-side createCssContext.
- Ensure the default path remains zero-overhead when classNameSlug is unused.

* test: remove .trim() usage in classNameSlug test
W
Wambui Maina committed
f82aba8e8ea45d56199e751cee6ea7c067bcd176
Parent: 9f374a5
Committed by GitHub <noreply@github.com> on 4/4/2026, 12:37:41 PM