How to Effortlessly Migrate from Styled Components CSS-in-JS to Stylify Utility-First CSS for Better React Development.

February 16, 2023
2 minute read
Total
0
Shares
0
0
0

Say goodbye to CSS-in-JS and Runtime scripts for injecting and compiling CSS and hello to lightning-fast coding with Stylify Utility-First CSS. As a React frontend engineer, you know the importance of efficient, streamlined solutions that don’t sacrifice style or functionality. And that’s exactly what Stylify offers.

Migrating from Styled Components CSS-in-JS solution is a breeze with Stylify. And because it has no runtime, you can expect snappier performance.

You can the examples in this article in the Playground On Stackblitz 🚀.



💎 Introduction

Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS based on what you write.

Features:
✅ Build module. No runtime script.
✅ CSS-like selectors
✅ No framework to study
✅ Less time spent in docs
✅ Mangled & Extremely small CSS
✅ No CSS purge needed
✅ Components, Variables, Custom selectors
✅ It can generate multiple CSS bundles



🔗 Components

In Styled Components, components are often defined this way:

const Title = styled.div`
  color: blue 
  font-weight: bold
  @media (max-width: 768px) {
    color:red
  }
`;
<Title>Hello World!🎉Title>
Enter fullscreen mode

Exit fullscreen mode

Stylify provides a similar feature. Components can be defined within a file (using content options), where they are used, or globally within a config.

Example with the configuration within a file. The content between stylify-components expect javascript object without surrounding brackets:


 class="title">
Enter fullscreen mode

Exit fullscreen mode

Example in a global compiler config:

const compilerConfig = {
  title: 'color:blue font-weight:bold md:color:red'
};
Enter fullscreen mode

Exit fullscreen mode

Usage:

 class="title">
Enter fullscreen mode

Exit fullscreen mode

Components are “lazy” (generated on demand). This means, that even if you configure them (in a file or globally), they will be generated only if matched within the content. No unused CSS will be generated. The same goes for utilities. If the utility for a component is not matched within a content directly, the selector is not generated and only the component selector is added to the CSS output.

The production CSS output will look something like this in production:

.a,.d {color:blue}
.b,.d {font-weight:bold}
 @media (max-width: 768px) {
 .c,.d {color:red}
 }
Enter fullscreen mode

Exit fullscreen mode

The html output:

 class="d">
Enter fullscreen mode

Exit fullscreen mode



🎯 Selectors

Stylify also allows you to use utilities directly within the content. So the above example can also look like this:

 class="color:blue font-weight:bold md:color:red">
Enter fullscreen mode

Exit fullscreen mode

The production output of the CSS will be similar to the example of the components. The HTML however will look like this:

 class="a b c">
Enter fullscreen mode

Exit fullscreen mode



💲Variables

When you need to pass a color into the component using props, then instead of doing this color: ${props => props.textColor};, you can use native CSS variables:

 
  style={{ '--localTextColor': props.textColor }}
  className="title color:$localTextColor"
">
Enter fullscreen mode

Exit fullscreen mode

We just need to tell Stylify to replace variables by CSS variables instead of their value and that the localTextColor is external:

const compilerConfig = {
  replaceVariablesByCssVariables: true,
  externalVariables: ['localTextColor']
}
Enter fullscreen mode

Exit fullscreen mode

The external variable can also be defined only in the file where it is used:


 
  style={{ '--localTextColor': props.textColor }}
  className="title color:$localTextColor"
">
Enter fullscreen mode

Exit fullscreen mode

Stylify also provides an option to configure custom variables. It can be done in the file where they are used, in the same way as components or in the global config:

In file:


 class="color:primary">
Enter fullscreen mode

Exit fullscreen mode

In Compiler Config:

const compilerConfig = {
  primary: '#000'
}
Enter fullscreen mode

Exit fullscreen mode



📦 Splitting CSS

Styled Components splits CSS automatically and inject it directly into the document based on the rendered components.

Stylify doesn’t have any runtime script, so you have to configure the Bundler and the splitting manually.

However, the Stylify output is so small (it can be even 10 Kb (gzipped) for a large website), that it is ok to have only one bundle for the whole project. Eventually, there you can check tips for CSS bundles splitting.

Bundles config example:

const bundles = [
  { 
     outputFile: 'path/to/layout.css', 
     files: ['path/to/layout.jsx'] 
  },

  // Bundler uses https://npmjs.com/package/fast-glob
  // You can use its glob syntax
  { 
     outputFile: 'path/to/global.css', 
     files: ['path/**/*.jsx'] 
  }
]);
Enter fullscreen mode

Exit fullscreen mode



Let me know what you think!

If you like the idea, let me know by starring Stylify repo ❤️.

I will be happy for any feedback! The Stylify is still a new Library and there is a lot of space for improvement 🙂.

Total
0
Shares
0
0
0
About Author
Valentsea Team
Valentsea
Read Next

File Server (free) for each OS via Localtonet

With File Server, you can manage your files by opening their path in your local environment. You can…