Compilador

color:blue => color azul
hover:color:blue => color azul después de hover
lg:color:blue => color azul desde la pantalla seleccionada
lg:hover:color:blue => color azul después de pasar el cursor desde la pantalla seleccionada

lg&&dark:color:red => pantalla grande y preferir esquema de color oscuro
minw740px||landscape:color:blue => para anchura mínima u horizontal

const compilerConfig = {
	dev: true
};

const compilerConfig = {
	macros: {
		'color:(\\S+?)': (match) => {
			// color:blue => creará => color: blue
			return {'color': match.getCapture(0)}
		},
	},
};

Uso:

<span class="color:red"></span>
<div class="color:#000"></span>
<div class="color:rgb(255,255,255)"></span>

const compilerConfig = {
	selectorsPrefix: 'u-'
};

Y en el código

<div class="
	u-color:blue
	hover:u-color:red
	[a]{u-color:blue}
"></div>

const compilerConfig = {
	mangleSelectors: true
};

const compiler = new Compiler(config);

compiler.rewriteSelectors(content);

const compilerConfig = {
	mangledSelectorsPrefix: '_'
};

<div class="color:blue"></div>

<!-- Con configuración -->
<div class="_a"></div>

<!-- Sin configuración -->
<div class="a"></div>

const compilerConfig = {
	variables: {
		blue: '#01befe',
		shadow: '0 8px 32px -8px rgb(0, 0, 0, 0.2)',
		// Cuando la variable es un objeto, Stylify CSS intenta encontrarle una pantalla
		// Puedes usar cualquier pantalla que hayas definido en las pantallas
		dark: { blue: 'lightblue' },
		md: { fontSize: 24px },
		'minw640px': { fontSize: 32px },
		// Cuando no se encuentra la pantalla, se vuelve a un selector personalizado aleatorio
		'.dark': { blue: 'lightblue' },
		':root[data-theme="dark"]': { blue: 'lightblue' }
	},
	// Si desea desactivar las variables CSS, establezca esta opción en false
	cssVariablesEnabled: true,
	// Por defecto, las variables se inyectan automáticamente en el CSS generado como variables CSS.
	// Puedes cambiar este comportamiento configurando la opción de abajo como false
	injectVariablesIntoCss: true
};

Uso:

<span class="color:$blue"></span>

const compilerConfig = {
	externalVariables: [
		// Comprobación de cadena simple
		'some-color',
		// Definir callback para especificar una comprobación más flexible.
		// Esto marcará, por ejemplo, cada variable que empiece por md-
		// como externa.
		(variable) => variable.startsWith('md-') ? true : undefined
	],
	// Si tienes muchas variables externas y no quieres molestarte en mapearlas,
	// puedes cambiar el nivel de advertencia
	// 'silent' => desactiva completamente la advertencia
	// 'warn' => es por defecto para desarrollo
	// 'error' => por defecto para producción
	undefinedVariableWarningLevel: 'silent'
};

Uso:

<span class="
	color:$some-color
	background:$md-sys-color-primary
	border-color:$md-sys-color-tertiary
"></span>

const compilerConfig = {
	keyframes: {
		fadeIn: 'from { opacity: 0; } to { opacity: 1; }',
		fadeOut: 'from { opacity: 1; } to { opacity: 0; }',
		shadowPulse: `
			from { box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2); }
			to { box-shadow: 0 0 0 20px rgba(0, 0, 0, 0); }
		`
	}
};

<span class="animation:fadeIn_2s_infinite">Desvanecer</span>
<span class="animation:fadeOut_2s_infinite">Desvanecimiento</span>
<span class="animation:shadowPulse_2s_infinite">Pulso de sombra</span>

const compilerConfig = {
	screens: {
		'sm': '(min-width: 400px)',
		// Las pantallas también pueden ser funciones
		// Eso te permite hacer una pantalla lo más flexible posible
		'minw\\w+': (screen) => `(min-width: ${screen.fullMatch.replace('minw', '')})`
	}
};

Uso:

<span class="sm:color:darkred"></span>
<div class="minw640px:color:$blue"></span>
<div class="minw80rem:color:darkgreen"></span>

const compilerConfig = {
	components: {
		// selector => dependencias
		'button': 'padding:4px background:black color:white hover:background:grey',
		'container': `
			max-width:1024px
			margin:0_auto
			md:max-width:1280px
		`,
		// Puedes definir múltiples componentes en una clave, sólo tienes que separarlos por "," (coma)
		'wrapper, footer': 'padding:24px',
		// Cuando un componente se define varias veces, los selectores se fusionan
		// Cuando se define selectorsChain se aplica el último
		'wrapper': 'margin-top:24px',
		'button--big': `
			&.btn {
				font-size:48px
			}
		`,
		// Componentes dinámicos
		// Cuando la función tiene un callback, acepta coincidencias de expresión regular
		// variables, helpers y si es dev environment.
		// De esta forma puedes definir componentes que devuelvan selectores basados en coincidencias
		// de la expresión regular.
		'title(?:--(\\S+))?': ({ matches, variables, helpers, dev }) => {
			const color = matches[1] ?? '#000';
			return `font-size:24px${color ? ` color:${color}` : ''}`;
		},
	}
};

Uso:

<span class="button"></span>
<div class="container"></div>
<!-- Componentes dinámicos -->
<div class="title"></div>
<div class="title--#06f">
<div class="title--$red">

const compilerConfig = {
	customSelectors: {
		// selector => dependencias
		'article': 'font-size:16px line-height:28px color:#222',
		'article h1, article h2': 'color:blue',
		// Para selectores indirectos con pseudoclase como `div > button`, `article a`
		'article a:hover': 'color:blue'
		'article a:hover i': 'color:white'
		// Para selectores directos con pseudoclase como a, input o a.button y a.link
		'a': 'color:green hover:color:blue',
		'a.link': 'color:green hover:color:red'
	}
};

Uso:

<article></article>

const compilerConfig = {
	customSelectors: {
		'header': `
			width:800px
			nav {
				font-size:14px
			}
			&.fixed {
				position:fixed
			}
			.docs & { background:blue }
			h1, h2 { font-family:arial }
		`
	}
}

<article class="
	[.docs_&]{font-size:14px;color:#222}
	[h1,h2]{margin-top:0}

	[a]{hover:color:steelblue}
	[a:hover]{color:stelblue}
	[&:hover_a]{color:stelblue}
"></article>

const compilerConfig = {
	helpers: {
		shortcut(value) {
			const shortcuts = {
				'bgc': 'background-color',
				'zi': 'z-index'
			};

			return value in shortcuts ? shortcuts[value] : value;
		},
		joinText(...texts) => '"' + texts.join(' ') + '"'
	},
	macros: {
		'(bgc|zi):(\\S+?)'(match) {
			const property = this.helpers.shortcut(match.getCapture(0));
			return {[property]: match.getCapture(1)}
		}
	}
}

Uso:

<div class="
	zi:2 bgc:red
	color:lighten(#000,10)
	content:joinText(^Custom^,^Long_Text^)
"></div>

const compilerConfig = {
	selectorsAreas: [
		// Vue.js
		/(?:^|\s+)(?:v-bind)?:class="([^"]+)"/,
		// React
		/(?:^|\s+)className="([^"]+)"/
	]
};

Uso

<!-- stylify-ignore -->
Todo lo que esté dentro será ignorado
<div class="color:red"></div>
<!-- /stylify-ignore -->

const compilerConfig = {
	pregenerate: 'color:red color:blue width:100%'
};

<!--

// Components espera un objeto javascript válido como valor sin corchetes alrededor
stylify-components
	button: `font-size:24px padding:4px`,
	'button--big': `
		&.btn {
			font-size:48px
		}
	`
/stylify-components

// Variables espera un objeto javascript válido como valor sin los corchetes circundantes
stylify-variables
	blue: `#01befe`
/stylify-variables

// Keyframes espera un objeto javascript válido como valor sin corchetes alrededor
stylify-keyframes
	fadeIn: 'from { opacity: 0; } to { opacity: 1; }',
	fadeOut: 'from { opacity: 1; } to { opacity: 0; }',
	shadowPulse: `
		from { box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2); }
		to { box-shadow: 0 0 0 20px rgba(0, 0, 0, 0); }
	`
/stylify-keyframes


// Los selectores personalizados esperan un objeto javascript válido como valor sin los corchetes circundantes
stylify-customSelectors
	article: `font-size:24px`
/stylify-customSelectors

// Pregenerate espera una cadena
stylify-pregenerate
	border-top:1px_solid_#444
/stylify-pregenerate

// Screens espera un objeto javascript válido como valor sin los corchetes circundantes
stylify-screens
	'testScreen': '(min-width: 123px)',
	'dynamic\\w+': (screen) => `(max-width: ${screen.fullMatch.replace('dynamic', '')})`
/stylify-screens
-->

Añadir procesador de opciones de contenido personalizado

import { hooks } from '@stylify/stylify'

// Puedes usar el compilador de Stylify para obtener cualquier opción
hooks.addListener('compiler:processContentOption:myOption', ({
	contentOptions,
	option,
	value
}) => {

});

const compilationResult = new CompilationResult({
	// Todas las opciones son opcionales
	dev: false,
	// Si reconfigurable se establece en false, la configuración no cambiará
	reconfigurable: false,
	// Esta función se encarga de ordenar las pantallas antes de generar el CSS.
	// El argumento es un tipo Map y la función también debe devolver un tipo Map.
	screensSortingFunction: (screensList) => { return screensList },
	// Si mangle selectors es true, los selectores dentro del CSS serán manhled
	mangleSelectors: false,
});

hooks.addListener('compilationResult:configureCssRecord', ({cssRecord}) => {
	// ...
});

import { hooks } from '@stylify/stylify';

hooks.addListener('hoook:name', (options) => {});