How to Easily Port Styled Components to Linaria
Switching CSS-in-JS libraries in a frontend project is always a daunting task. This becomes particularly true in larger codebases that make extensive use of the library in question. In this article, we'll walk through the steps to port your application from using styled-components to Linaria.
Before we dive into the actual process, let's take a moment to understand what these two libraries are and why you might consider porting from one to another.
Styled Components is a battle-tested library for CSS-in-JS that has been used by 1% of all apps on the internet. Its main drawback is that it requires JavaScript to work, so you can't use it, for example, with React's Server Components. But it gives you a lot of flexibility when it comes to dynamic props.
Linaria, on the other hand, is a similar library with almost the same API as Styled Components. The main difference lies in its primary focus on non-javascript environments, resulting in better performance.
The porting process involves a few straightforward steps. It's important to note that Linaria's API is somewhat similar to Styled Components, which makes the process less complex than it might initially seem.
Install Linaria
The first step to port your application is to install Linaria. You can do this via npm or yarn:
1npm install @linaria/core @linaria/react @linaria/babel-preset @linaria/shaker
2# or
3yarn add @linaria/core @linaria/react @linaria/babel-preset @linaria/shakerYou'll also need to configure your Babel or webpack to handle Linaria's style extraction. For Babel, you need to add the linaria/babel preset to your configuration:
1{
2 "presets": [
3 "@babel/preset-env",
4 "@babel/preset-react",
5 "@linaria"
6 ]
7}and then configure linaria.config.js as so:
1const shaker = require('@linaria/shaker').default;
2
3module.exports = {
4 rules: [
5 {
6 action: shaker
7 },
8 {
9 test: /.json/,
10 action: "ignore"
11 },
12 {
13 test: /node_modules/,
14 action: 'ignore'
15 },
16 ]
17}The important thing to remember is that you should not change the order of the rules and if you find yourself adding a new rule always add it as a first item.
For a complete shift from the original styled-components API to Linaria's API, a few steps need to be carried out. Using the 'replace-all' feature in VSCode, or any other editor/IDE, can make this transition more seamless.
- Enclose each styled with the withTheme hook. This makes it possible to fetch values from the theme through dynamic props. You can utilize the following regular expression to replace all instances:
- Search for
1(= styled).(.*)`([\w\W]*?)`- Replace with:
1withTheme(styled.$2`$3`)- Replace all
styled-componentsimports with@linaria
If your application uses createGlobalStyle from Styled Components, you should replace it with the Global component from Linaria:
1// From this:
2import { createGlobalStyle } from 'styled-components';
3const GlobalStyle = createGlobalStyle`
4 body {
5 margin: 0;
6 padding: 0;
7 }
8`;
9
10// To this:
11export const globals = css`
12 :global() {
13 body {
14 margin: 0;
15 padding: 0;
16 }
17 }
18`;
19One important thing to mention is that you can’t use dynamic props in global component.
Once you've replaced all instances of Styled Components with Linaria, it's crucial to thoroughly test your application to ensure that all styles are being applied correctly. Due to differences in the handling of dynamic styles and global styles, you should carefully check each component to confirm it appears and behaves as expected.
Porting from Styled Components to Linaria is a straightforward process, thanks to the similarity of their APIs. It can help improve your application's performance by reducing the JavaScript payload size, allowing you to port to Server Components, and removing the styling computation from the runtime. Although there are differences in handling dynamic and global styles, with careful refactoring and testing, you can successfully port your application to Linaria.
Empower your vision, partner with us today
ㅤ
Trusted by: