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 usingclassName
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 :)
Top comments (0)