Convert class names in class: shorthand directive to kebab case

[silllli]

Is your feature request related to a problem? Please describe. When using the class: shorthand directive, variable names are used literally as the resulting class name. Since we must use camel or snake case for variable names, this breaks the most commonly used kebab case for class names.

Describe the solution you'd like Convert variable and therefore class names to kebab case. That would be similar behavior as with accessing an element's data-attribute-name in JavaScsript (that is dataset.attributeName).

Describe alternatives you've considered Don't use the class: shorthand directive.

How important is this feature to you? Somewhat important, but it makes the class: shorthand directive useless when using a compound variable name.

Additional context

<script>
  let isHidden = true;
</script>

<style>
  .is-hidden {
    display: none;
  }
</style>

<div class:isHidden>
  This is hidden!
</div>

[Conduitry]

You can do class:is-hidden={isHidden}. https://svelte.dev/tutorial/classes

As written, your proposed change would be a breaking one if someone were relying on a class called isHidden.

[antony]

Sorry to be the no-man again, but the current behaviour is the most predictable way to do this, and supports whatever sort of casing you or your css library wants to use.

Converting things so that shorthand can be used introduces unpredictability, and would prevent the use of camelcased class names.

It's also a huge breaking change.

[silllli]

No problem—you know how to manage a project like this. Thank you for the feedback.

To not break any existing code and get rid of the (also to me worrying) unpredictability I thought this could be added as a plugin option. I’ll try to do it in a preprocessor.