How to migrate from Emotion CSS-in-JS library to Stylify CSS
This guide is here to help you quickly compare the features and syntax of the Emotion CSS-in-JS library with those of Stylify’s utility-first CSS, and give you an idea of how to migrate from Emotion to Stylify.
Introduction
Emotion is a library designed for writing CSS styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.
Stylify CSS is a library that uses native CSS-like selectors color:blue
, width:640px
, margin:0_auto
along with variables, components, custom selectors to generate optimized CSS dynamically based on what you write.
Selectors and CSS Utilities
![](/images/brands/emotion.png)
In Emotion, you can use CSS prop to style element directly like this:
<div css={css`
color: blue;
font-weight: bold;
@media (min-width: 640px) {
color: red;
}
`}></div>
Stylify uses CSS-like utilities, that can be used directly within the class attribute. There are no shortcuts by default and selectors cannot contain a space because of the further optimization:
<div class="
color:blue
font-weight:bold
md:color:red
md&&landscape:font-size:32px
minw123px:font-size:123px
"></div>
When some selectors have the same pseudo-class or even media query, you can group them like this:
<div class="
hover:{color:blue;text-decoration:underline}
md:hover:{transform:scale(1.1);left:4px}
"></div>
Global Selectors
![](/images/brands/emotion.png)
Sometimes we need to style some parts of the application globally. To do that within the Emotion, we need to use the Global component:
import { Global, css } from '@emotion/react'
render(
<Global styles={css`
.some-class {
color: hotpink !important;
}
`}/>
)
Stylify provides custom selectors with which you can style elements globally. These selectors can be defined directly within the class attribute or in the global config or in a file where they are used using content options.
Example with the class attribute:
<div class="[.button_.icon]{font-size:14px}">
<button class="
[.icon]{color:#fff;border-radius:12px}
[&+button]{margin-left:24px}
">
<i class="icon"></i>
</button>
<button></button>
<div>
The syntax pattern in the class attribute looks like this:
[css selectors]{stylify selectors split by ;}
The _
(underscore) is used instead of space in both CSS and Stylify selectors and the &
character always refers to the current element.
The same code but in the global config would look like this:
const compilerConfig = {
customSelectors: {
'.buttons-wrapper .button .icon': 'font-size:14px',
'.button': `
.icon { color:#fff border-radius:12px }
& + button { margin-left:24px }
`,
}
}
When defining `customSelectors` in the global config on through content options, the syntax lets you use a nesting feature. The &
characters refers to the upper level like in the SCSS.
Usage of the global config:
<div class="buttons-wrapper">
<button class="button">
<i class="icon"></i>
</button>
<button></button>
<div>
Components
![](/images/brands/emotion.png)
In Emotion, components are often defined this way:
const Title = styled.h1`
color: blue
font-weight: bold
@media (max-width: 640px) {
color:red
}
`;
<Title>Hello World!🎉</Title>
Stylify doesn't provide any predefined CSS Components by default. However, it provides two ways to define them and there is a set of copy&paste Headless Components you can use in your project.
Components can be configured in a file (using content options), where they are used, or globally within a $projectConfig.
Example with the configuration within a file. The content between stylify-components
expects javascript object without surrounding brackets:
<!--
stylify-components
title: 'color:blue font-weight:bold md:color:red'
/stylify-components
-->
<h1 class="title"></h1>
Example in a global compiler config:
const compilerConfig = {
components: {
title: 'color:blue font-weight:bold md:color:red'
}
};
Usage:
<h1 class="title"></h1>
When defining component, you can also use nesting syntax like in SCSS. This works in a global config and also in the content options:
const compilerConfig = {
components: {
button: `
color:black font-weight:bold
&:hover { color:grey }
&--red {
color:red
&:hover { color: darkred }
}
`
}
};
Configuration, Customization and Variables
![](/images/brands/emotion.png)
In Emotion CSS you mostly use variables that are defined within the Javascript or some config file or CSS variables.
const color = 'blue';
const Title = styled.h1`
color: ${color},
font-size: var(--font-size)
`;
In Stylify, there is nothing like a "theme", neither extend section in $projectConfig. There are only variables.
Variables can be defined in two ways in Stylify. In a global config or within a file where they are used via content options.
Example with global config:
const compilerConfig = {
variables: {
primary: '#000',
secondary: '#eee',
titleFontSize: '24px',
shadow: '0 2px 3px #000'
}
}
Variables can also be defined based on media query:
const compilerConfig = {
variables: {
dark: { blue: 'lightblue' },
md: { fontSize: 24px },
'minw640px': { fontSize: 32px },
// When screen is not found, it falls back to a random custom selector
'.dark': { blue: 'lightblue' },
':root[data-theme="dark"]': { blue: 'lightblue' }
}
}
Example with content options:
<!--
stylify-variables
primary: '#000',
secondary: '#eee'
titleFontSize: '24px',
shadow: '0 2px 3px #000'
/stylify-variables
-->
<div class="color:$primary"></div>
When you need to pass a color into the component using props, use native CSS variables:
<div
style={{ '--localTextColor': props.textColor }}
className="title color:$localTextColor"
">
</div>
We just need to tell Stylify to replace variables with CSS variables instead of their value and that the localTextColor
is external:
const compilerConfig = {
externalVariables: ['localTextColor']
}
The external variable can also be defined only in the file where it is used:
<!--
stylify-externalVariables
localTextColor
/stylify-externalVariables
-->
<div
style={{ '--localTextColor': props.textColor }}
className="title color:$localTextColor"
">
</div>
Integrate Stylify into your favorite tool
Stylify can be used in various tools. Pick your favorite tool and start using Stylify CSS in a minute.
Get Started
- 🚀 Learn how to get started
- 🔌 Check out @stylify/unplugin configuration
- ⚙️ Or configure Stylify right away:
Speed up development with prepared Headless CSS Components
Copy&Paste, unstyled components inspired by the Material Design V3.