Gracefully handle invalid class names

[connorjs]

Overview

As a user, I want css-typed to generate TS-compliant variable names for otherwise-invalid CSS class names. For example, kebab-case.

Notes

• [x] Should this require an option?

  Answer for now: Yes.

• [x] Should this be on by default, but have an option to disable?

  Answer for now: Not enabled by default.

• [x] If off, should the TS generate or skip the invalid name?

  Answer for now: Only emit valid TS.

• [x] What formats?

  Answer for now: support kebab-case to camelCase, but should not modify first letter.

  • kebab-case to camelCase is known
  • What about PascalCase?

[connorjs]

See https://github.com/connorjs/css-typed/pull/1 for the first approach to this.

[connorjs]

[Research note]

Vite has support for kebab-case to camelCase.

• CSS feature docs.

  If css.modules.localsConvention is set to enable camelCase locals (e.g. localsConvention: 'camelCaseOnly'), you can also use named imports:

• The css.modules docs mention this uses postcss-modules.

• Vite also has experimental support for lightning css. At first glance, I cannot tell if this supports kebab-case to camelCase transformation (but I could always prototype it).

A quick scan of Qwik suggests "defaults" but also "thanks to Vite."

My gut thought is to (a) default to no kebab-case to camelCase transformation but (b) only emit valid TS.

Note: I will create a "1.0 roadmap" tracking issue and include this in there (later).

[connorjs]

Another note: stylelint-config-standard recommends kebab-case. Therefore, I’m strongly inclined to default to handling kebab-case. I’ll open a PR to change that this week.

[connorjs]

This will be solved with upcoming localsConvention option. The next release will default to dashesOnly which will handle kebab-case by default.