How to migrate to Stylify CSS from other CSS frameworks and libraries

Shortcuts:Choose your migration guide Integrating Stylify in existing project Solving Selectors Collisions Solving CSS Specificity problems

Choose your migration guide

If you haven’t found a tool from which you want to migrate to Stylify, let us know!

Integrating Stylify in existing project

If you are about to integrate the Stylify CSS into an existing project you should start by rewriting small pieces of your application to minimize the integration errors and carefully remove all unused rewritten pieces of CSS.

Don’t worry about increasing the CSS size in your application by switching to Stylify. Stylify CSS doesn’t ship with any predefined CSS and it will generate only that CSS that matches the selectors you use. So if you write nothing, nothing will be generated.
Stylify can also generate CSS for each bundle separately so you can create small chunks of CSS and load them only when needed.

The recommended steps you should follow are the following:

Pick a small (or non critical) piece of your application.
Create a bundle for that piece of application using @stylify/bundler.
Rewrite the CSS of that selected part.
Import the bundle CSS and remove the unused rewritten CSS.
If all the previous steps are done, mangle selectors during a production build and repeat the process until everything is rewritten.

Solving Selectors Collisions

If there is a colision with the Stylify selectors, you can configure selectors prefix and in case you enable the mangling and there is a collision, then add you must add the mangled selectors prefix.

Solving CSS Specificity problems

In case Stylify utilities are overriden by your css, you need to increase Stylify CSS utilities specificity.

Whther you are using @stylify/unplugin or @stylify/bundler directly, you can configure css layers. This way, you can wrap your existing CSS into the layer, that has lower specificity than the CSS generated by Stylify CSS and the issue with overriden utilities will be solved.