Blazity
Overview of Styled Components and 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.
Migrating
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:
Code
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:
Code
1{
2 "presets": [
3 "@babel/preset-env",
4 "@babel/preset-react",
5 "@linaria"
6 ]
7}and then configure linaria.config.js as so:
Code
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.
Replace old API syntax
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
Code
1(= styled).(.*)`([\w\W]*?)`- Replace with:
Code
1withTheme(styled.$2`$3`)- Replace all styled-components imports with @linaria
Handling Global Styles
If your application uses createGlobalStyle from Styled Components, you should replace it with the Global component from Linaria:
Code
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`;One important thing to mention is that you can’t use dynamic props in global component.
Through testing
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.
Conclusion
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.
