Cómo migrar de la librería Stitches CSS-in-JS a Stylify CSS

Accesos directos:Introducción Selectores y utilidades CSS Selectores globales Componentes Configuración, personalización y variables

Esta guía está aquí para ayudarte a comparar rápidamente las características y la sintaxis de la biblioteca CSS-in-JS de Stitches con las de CSS utility-first de Stylify, y darte una idea de cómo migrar de Stitches a Stylify.

Si encuentras alguna información incorrecta o que falta, por favor contacta con <a href="mailto:dev@stylifyccss.com">dev@stylifycss.com</a> o edita esta página en Github.

Introducción

Stitches es un CSS-in-JS con tiempo de ejecución cercano a cero, SSR, soporte multivariante, y una experiencia de desarrollador de lo mejor en su clase.

Stylify CSS es una librería que usa selectores nativos tipo CSS color:blue, max-width:640px, margen:0_auto junto con variables, componentes, selectores personalizados para generar CSS optimizado dinámicamente basado en lo que escribes.

Selectores y utilidades CSS

Cuando quieras estilizar algún elemento directamente, puedes usar la propiedad CSS:

<Button css={{
	borderRadius: '0',
	'&:hover': {
		backgroundColor: 'black',
		color: 'white',
	},
}}>Botón</Button>

Stylify utiliza utilidades similares a CSS, que se pueden utilizar directamente dentro del atributo class. No hay atajos por defecto y los selectores no pueden contener un espacio debido a la mayor optimización.:

<div class="
	color:blue
	font-weight:bold
	md:color:red
	md&&landscape:font-size:32px
	minw123px:font-size:123px
"></div>

Cuando algunos selectores tienen la misma pseudo-clase o incluso media query, puedes agruparlos así:

<div class="
	hover:{color:blue;text-decoration:underline}
	md:hover:{transform:scale(1.1);left:4px}
"></div>

Selectores globales

Los estilos globales se pueden definir dentro de Stitches de la siguiente manera:

import { globalCss } from '@stitches/react';

const globalStyles = globalCss({
	'*': { margin: 0, padding: 0 },
});

() => {
	globalStyles();
	return <div ... />
};

Stylify proporciona selectores personalizados con los que puedes aplicar estilo a los elementos de forma global. Estos selectores pueden ser definidos directamente dentro del atributo class o en el config global o en un archivo donde se usan usando opciones de contenido.

Ejemplo con el atributo class:

<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>

El patrón sintáctico en el atributo class tiene este aspecto:

[css selectors]{stylify selectors split by ;}

El _ (guión bajo) se utiliza en lugar del espacio tanto en selectores CSS como Stylify y el carácter & siempre se refiere al elemento actual.

El mismo código pero en la configuración global se vería así:

const compilerConfig = {
	customSelectors: {
		'.buttons-wrapper .button .icon': 'font-size:14px',
		'.button': `
			.icon { color:#fff border-radius:12px }
			& + button { margin-left:24px }
		`,
	}
}

Al definir `customSelectors` en la configuración global a través de opciones de contenido, la sintaxis permite utilizar una característica de anidamiento. Los caracteres & se refieren al nivel superior como en el SCSS.

Uso de la config global:

<div class="buttons-wrapper">
	<button class="button">
		<i class="icon"></i>
	</button>
	<button></button>
<div>

Componentes

Stitches permite definir componentes de esta manera:

import { styled } from '@stitches/react';

const Button = styled('button', {
	backgroundColor: 'gainsboro',
	borderRadius: '9999px',
	fontSize: '13px',
	padding: '10px 15px',
	'&:hover': {
		backgroundColor: 'lightgray',
	},
});

Stylify no proporciona ningún CSS predefinido Componentes por defecto. Sin embargo, proporciona dos maneras de definirlos y hay un conjunto de copiar y pegar Componentes sin cabeza que puede utilizar en su proyecto.

Los componentes pueden ser configurados en un archivo (usando opciones de contenido), donde son usados, o globalmente dentro de un $projectConfig.

Ejemplo con la configuración dentro de un archivo. El contenido entre stylify-components espera objeto javascript sin corchetes circundantes:

<!--
stylify-components
	title: 'color:blue font-weight:bold md:color:red'
/stylify-components
-->
<h1 class="title"></h1>

Ejemplo en un config global del compilador:

const compilerConfig = {
	components: {
		title: 'color:blue font-weight:bold md:color:red'
	}
};

Uso:

<h1 class="title"></h1>

Cuando se define un componente, también se puede utilizar la sintaxis de anidamiento como en SCSS. Esto funciona en una configuración global y también en las opciones de contenido:

const compilerConfig = {
	components: {
		button: `
			color:black font-weight:bold
			&:hover { color:grey }
			&--red {
				color:red
				&:hover { color: darkred }
			}
		`
	}
};

Configuración, personalización y variables

Stitches se puede configurar técnicamente desde cualquier lugar dentro de la aplicación. Puedes crear una nueva instancia de Stitches y reutilizarla en cualquier lugar que necesites.

Ejemplo de configuración global:

export const { styled, css } = createStitches({
	theme: {
		colors: {
			gray500: 'hsl(206,10%,76%)',
		},
		space: {
			1: '5px',
		},
		fontSizes: {
			1: '12px',
		},
		fonts: {
			mono: 'Söhne Mono, menlo, monospace',
		},
	// ...
	}
});

Ejemplo de configuración local:

const { styled } = createStitches({
	theme: {
		colors: {
			violet800: 'hsl(252 62% 54.9%)',
		},
	},
});
const Button = styled('button', {
	backgroundColor: '$violet800',
});

En Stylify, no hay nada como un "tema", ni extender sección en $projectConfig. Sólo hay variables.

Las variables se pueden definir de dos formas en Stylify. En una configuración global o dentro de un archivo donde se utilizan a través de opciones de contenido.

Ejemplo con config global:

const compilerConfig = {
	variables: {
		primary: '#000',
		secondary: '#eee',
		titleFontSize: '24px',
		shadow: '0 2px 3px #000'
	}
}

También se pueden definir variables basadas en 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' }
	}
}

Ejemplo con opciones de contenido:

<!--
stylify-variables
	primary: '#000',
	secondary: '#eee'
	titleFontSize: '24px',
	shadow: '0 2px 3px #000'
/stylify-variables
-->
<div class="color:$primary"></div>

Cuando necesites pasar un color al componente usando props, usa variables CSS nativas:

<div
	style={{ '--localTextColor': props.textColor }}
	className="title color:$localTextColor"
">
</div>

Sólo tenemos que decirle a Stylify que sustituya las variables por variables CSS en lugar de su valor y que el localTextColor es externo:

const compilerConfig = {
	externalVariables: ['localTextColor']
}

La variable externa también se puede definir sólo en el archivo donde se utiliza:

<!--
stylify-externalVariables
	localTextColor
/stylify-externalVariables
-->
<div
	style={{ '--localTextColor': props.textColor }}
	className="title color:$localTextColor"
">
</div>