How to use classes correctly in Qwik

Vladimír Gál — Wed, 08 Feb 2023 09:16:39 +0000

Recently, I encountered a problem with style classes while learning and coding a Qwik application and I believe it would be beneficial to share my knowledge with the community.

I spent quite some time debugging this before finding out where the problem is and that it is not properly documented anywhere in the documentation, even though it is there ("kinda").

The problem

Qwik uses class keyword while specifying styles instead of className. Problem with this is that you can still use className, in development mode. Qwik will give you warning that className is deprecated, but you can still use it. In production build, Qwik will only apply styles to those components that are styled with the class keyword. It will still leave the className there, without any styling being applied to your component.

The solution

While writing this blog post I was thinking about what can I give back to community to prevent this from happening to anyone else. Of course I can say: "Just don't use the className", but we are all human beings. People can error. And to save you some time during development in Qwik, I've created this small eslint plugin you can use:
https://github.com/vladimirgal1012/eslint-plugin-qwik-additions

Installation

Ensure your project uses eslint

Install Qwik Additions eslint plugin:

npm i eslint-plugin-qwik-additions --save-dev
yarn add -D eslint-plugin-qwik-additions

Enable the plugin in .eslintrc.js:

{
//...your config
plugins: ['qwik-additions' ,...yourPlugins],
//...your config
}

Enable the forbid-class-name rule (I've used error level, this will ensure that you won't build your application while having any component using className keyword):
```
{
//...your config
rules: {
//...your rules
'qwik-additions/forbid-class-name': 'error',
},
//...your config
}
```

Conclusion

In today's blog post I explained a problem with using classes in Qwik and how to prevent it from happening. This was my first blog post ever, thanks for reading everyone :)

DEV Community: Vladimír Gál

How to use classes correctly in Qwik

The problem

The solution

Installation

Conclusion