Compiler

color:blue => blue color
hover:color:blue => blue color after hover
lg:color:blue => blue color for from selected screen
lg:hover:color:blue => blue color after hover from selected screen

lg&&dark:color:red => large screen and prefer-color-scheme dark
minw740px||landscape:color:blue => for min width or landscape

const compilerConfig = {
	dev: true
};

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

Usage:

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

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

And in the code:

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

<!-- With configuration -->
<div class="_a"></div>

<!-- Without configuration -->
<div class="a"></div>

const compilerConfig = {
	variables: {
		blue: '#01befe',
		shadow: '0 8px 32px -8px rgb(0, 0, 0, 0.2)',
		// When variable is an object, Stylify CSS tries to find screen for it
		// You can use any screen you have defined in the screens
		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' }
	},
	// If you want to disable CSS variables, set this option to false
	cssVariablesEnabled: true,
	// By default, variables are automatically injected into the generated CSS as CSS variables.
	// You can change this behavior by setting the option below to false
	injectVariablesIntoCss: true
};

Usage:

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

const compilerConfig = {
	externalVariables: [
		// Simple string check
		'some-color',
		// Define callback to specify more flexible check.
		// This will for example mark every variable that starts with md-
		// as external.
		(variable) => variable.startsWith('md-') ? true : undefined
	],
	// If you have a lot of external variables and you don't want to bother by mapping them,
	// you can change the warning level
	// 'silent' => disables warning completely
	// 'warn' => is default for development
	// 'error' => is default for production
	undefinedVariableWarningLevel: 'silent'
};

Usage:

<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">Fade In</span>
<span class="animation:fadeOut_2s_infinite">Fade Out</span>
<span class="animation:shadowPulse_2s_infinite">Shadow pulse</span>

const compilerConfig = {
	screens: {
		'sm': '(min-width: 400px)',
		// Screens can also be functions
		// That allows you to make as flexible screen as possible
		'minw\\w+': (screen) => `(min-width: ${screen.fullMatch.replace('minw', '')})`
	}
};

Usage:

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

const compilerConfig = {
	components: {
		// selector => dependencies
		'button': 'padding:4px background:black color:white hover:background:grey',
		'container': `
			max-width:1024px
			margin:0_auto
			md:max-width:1280px
		`,
		// You can define multiple components in one key, just separate them by "," (comma)
		'wrapper, footer': 'padding:24px',
		// When one component is defined multiple times, the selectors are merged
		// When selectorsChain is defined the last one is applied
		'wrapper': 'margin-top:24px',
		'button--big': `
			&.btn {
				font-size:48px
			}
		`,
		// Dynamic components
		// When the function has a callback, it accepts matches from regular expression
		// variables, helpers and if is dev environment.
		// This way you can define component, that returns selectors based on matches
		// from regular expression.
		'title(?:--(\\S+))?': ({ matches, variables, helpers, dev }) => {
			const color = matches[1] ?? '#000';
			return `font-size:24px${color ? ` color:${color}` : ''}`;
		},
	}
};

Usage:

<span class="button"></span>
<div class="container"></div>
<!-- Dynamic Components -->
<div class="title"></div>
<div class="title--#06f">
<div class="title--$red">

const compilerConfig = {
	customSelectors: {
		// selector => dependencies
		'article': 'font-size:16px line-height:28px color:#222',
		'article h1, article h2': 'color:blue',
		// For indirect selectors with pseudo class like `div > button`, `article a`
		'article a:hover': 'color:blue'
		'article a:hover i': 'color:white'
		// For direct selectors with pseudo class like a, input or a.button and a.link
		'a': 'color:green hover:color:blue',
		'a.link': 'color:green hover:color:red'
	}
};

Usage:

<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:steelblue}
	[&:hover_a]{color:steelblue}
"></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)}
		}
	}
}

Usage:

<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="([^"]+)"/
	]
};

Usage

<!-- stylify-ignore -->
Everything inside will be ignored
<div class="color:red"></div>
<!-- /stylify-ignore -->

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

<!--

// Components expects a valid javascript object as value without surrounding brackets
stylify-components
	button: `font-size:24px padding:4px`,
	'button--big': `
		&.btn {
			font-size:48px
		}
	`
/stylify-components

// Variables expects a valid javascript object as value without surrounding brackets
stylify-variables
	blue: `#01befe`
/stylify-variables

// Keyframes expects a valid javascript object as value without surrounding brackets
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


// Custom selectors expects a valid javascript object as value without surrounding brackets
stylify-customSelectors
	article: `font-size:24px`
/stylify-customSelectors

// Pregenerate expects a string
stylify-pregenerate
	border-top:1px_solid_#444
/stylify-pregenerate

// Screens expects a valid javascript object as value without surrounding brackets
stylify-screens
	'testScreen': '(min-width: 123px)',
	'dynamic\\w+': (screen) => `(max-width: ${screen.fullMatch.replace('dynamic', '')})`
/stylify-screens
-->

Adding custom content option processor

import { hooks } from '@stylify/stylify'

// You can use Stylify compiler to get any option
hooks.addListener('compiler:processContentOption:myOption', ({
	contentOptions,
	option,
	value
}) => {

});

const compilationResult = new CompilationResult({
	// All options are optional
	dev: false,
	// If reconfigurable is set to false, the configuration will not change
	reconfigurable: false,
	// This function is responsible for sorting screens before the CSS is generated.
	// The argument is a Map type and the function must also return a Map type.
	screensSortingFunction: (screensList) => { return screensList },
	// If mangle selectors is true, selectors within the CSS will be manhled
	mangleSelectors: false,
});

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

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

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