How to migrate from Emotion CSS-in-JS library to Stylify CSS

Shortcuts:Introduction Selectors and CSS Utilities Global Selectors Components Configuration, Customization and Variables

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.

If you find any incorrect or missing information, please contact <a href="mailto:dev@stylifyccss.com">dev@stylifycss.com</a> or edit this page on Github.

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

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

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

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

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>