[🐞] Styles broken because className shows as classname in html

[jweb89]

Which component is affected?

Qwik Runtime

Describe the bug

className is not working because it shows in the html as className

Reproduction

https://stackblitz.com/edit/qwik-starter-9bpwga?file=src%2Froutes%2Findex.tsx

Steps to reproduce

See the difference in the table class vs className and inspect the html

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @builder.io/qwik: 0.23.0 => 0.23.0 
    @builder.io/qwik-city: 0.6.5 => 0.6.5 
    undici: ^5.16.0 => 5.20.0 
    vite: ^4.2.0 => 4.2.1

Additional Information

No response

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• qwik-starter-9bpwga (Open reproduction)

[manucorporat]

Gonna work on a fix! but notice className is deprecated and we might drop support, please use class!

[jweb89]

Yes I've seen. Unfortunately, we have a large code base that was migrated from react. It's something we've been slowly chipping away at

[manucorporat]

We have a new eslint rule now that can auto fix it!

[jweb89]

Okay nice! The other problem is we do share some lite components between qwik and react. Unless we break react rules and use class or continue to use className in qwik we won't be able to share those easily anymore

[manucorporat]

Fixed by https://github.com/BuilderIO/qwik/commit/47d159ae8c5b5a4142bcdfabe48fcd771c0459b2

But I would really encourage you to use class, className we fallback to a slow path for rendering