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

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>

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>

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 }
			}
		`
	}
};

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>