编译器

color:blue => 蓝色
hover:color:blue => 悬停后为蓝色
lg:color:blue => 选中屏幕时为蓝色
lg:hover:color:blue => 从选定的屏幕悬停后的蓝色

lg&&dark:color:red => 大屏幕和喜欢深色的颜色模式。
minw740px||landscape:color:blue =>最小宽度或横向

const compilerConfig = {
	dev: true
};

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

使用方法：

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

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

而在代码中：

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

<!-- 有了配置 -->
<div class="_a"></div>

<!-- 没有配置 --->
<div class="a"></div>

const compilerConfig = {
	variables: {
		blue: '#01befe',
		shadow: '0 8px 32px -8px rgb(0, 0, 0, 0.2)',
		// 当变量是一个对象时，Stylify CSS会尝试为它寻找屏幕。
		// 你可以使用你在屏幕中定义的任何屏幕
		dark: { blue: 'lightblue' },
		md: { fontSize: 24px },
		'minw640px': { fontSize: 32px },
		// 当没有找到屏幕时，它会回到一个随机的自定义选择器上
		'.dark': { blue: 'lightblue' },
		':root[data-theme="dark"]': { blue: 'lightblue' }
	},
	// 如果你想禁用CSS变量，请将此选项设为false。
	cssVariablesEnabled: true,
	// 默认情况下，变量会作为CSS变量自动注入到生成的CSS中。
	// 你可以通过将下面的选项设置为false来改变这种行为
	injectVariablesIntoCss: true
};

使用方法：

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

const compilerConfig = {
	externalVariables: [
		// 简单的字符串检查
		'some-color',
		// 定义回调以指定更灵活的检查。
		// 例如，这将标记每一个以md-开头的变量。
		// 作为外部变量。
		(variable) => variable.startsWith('md-') ? true : undefined
	],
	// 如果你有很多外部变量，而且你不想麻烦地映射它们,
	// 你可以改变警告级别
	// 'silent' => 完全禁止警告
	// 'warn' => 是开发时的默认值。
	// 'error' => 默认用于生产。
	undefinedVariableWarningLevel: 'silent'
};

使用方法：

<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">淡入</span>
<span class="animation:fadeOut_2s_infinite">淡出</span>
<span class="animation:shadowPulse_2s_infinite">阴影脉冲</span>

const compilerConfig = {
	screens: {
		'sm': '(min-width: 400px)',
		// 屏幕也可以是函数
		// 这可以让你尽可能地制作灵活的屏幕
		'minw\\w+': (screen) => `(min-width: ${screen.fullMatch.replace('minw', '')})`
	}
};

使用方法：

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

const compilerConfig = {
	components: {
		// 选择器 => 依赖性
		'button': 'padding:4px background:black color:white hover:background:grey',
		'container': `
			max-width:1024px
			margin:0_auto
			md:max-width:1280px
		`,
		// 你可以在一个键中定义多个组件，只要用","（逗号）隔开即可
		'wrapper, footer': 'padding:24px',
		// 当一个组件被多次定义时，选择器会被合并起来
		// 当选择器链被定义时，最后一个会被应用
		'wrapper': 'margin-top:24px',
		'button--big': `
			&.btn {
				font-size:48px
			}
		`,
		// 动态组件
		// 当函数有一个回调时，它接受来自正则表达式的匹配。
		// 变量，帮助器和如果是dev环境。
		// 这样，你可以定义一个组件，根据正则表达式的匹配结果返回选择器。
		// 来自正则表达式。
		'title(?:--(\\S+))?': ({ matches, variables, helpers, dev }) => {
			const color = matches[1] ?? '#000';
			return `font-size:24px${color ? ` color:${color}` : ''}`;
		},
	}
};

使用方法：

<span class="button"></span>
<div class="container"></div>
<!-- 动态组件 -->
<div class="title"></div>
<div class="title--#06f">
<div class="title--$red">

const compilerConfig = {
	customSelectors: {
		// 选择器 => 依赖性
		'article': 'font-size:16px line-height:28px color:#222',
		'article h1, article h2': 'color:blue',
		// 对于带有伪类的间接选择器，如`div > button`, `article a`。
		'article a:hover': 'color:blue'
		'article a:hover i': 'color:white'
		// 对于带有伪类的直接选择器，如a、input或a.button和a.link
		'a': 'color:green hover:color:blue',
		'a.link': 'color:green hover:color:red'
	}
};

使用方法：

<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 = helpers.shortcut(match.getCapture(0));
			return {[property]: match.getCapture(1)}
		}
	}
}

使用方法：

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

使用方法

<!-- stylify-ignore -->
里面的东西将被忽略
<div class="color:red"></div>
<!-- /stylify-ignore -->

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

<!--

// 组件希望有一个有效的javascript对象作为值，不需要周围的括号
stylify-components
	button: `font-size:24px padding:4px`,
	'button--big': `
		&.btn {
			font-size:48px
		}
	`
/stylify-components

// 变量需要一个有效的javascript对象作为值，不需要周围的括号。
stylify-variables
	blue: `#01befe`
/stylify-variables

// 关键帧希望有一个有效的javascript对象作为值，不需要周围的括号。
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


// 自定义选择器需要一个有效的javascript对象作为值，不需要周围的括号。
stylify-customSelectors
	article: `font-size:24px`
/stylify-customSelectors

// Pregenerate期望一个字符串
stylify-pregenerate
	border-top:1px_solid_#444
/stylify-pregenerate

// Screens希望得到一个有效的javascript对象作为值，不需要周围的括号。
stylify-screens
	'testScreen': '(min-width: 123px)',
	'dynamic\\w+': (screen) => `(max-width: ${screen.fullMatch.replace('dynamic', '')})`
/stylify-screens
-->

添加自定义内容选项处理器

import { hooks } from '@stylify/stylify'

// 你可以使用Stylify编译器来获取任何选项
hooks.addListener('compiler:processContentOption:myOption', ({
	contentOptions,
	option,
	value
}) => {

});

const compilationResult = new CompilationResult({
	// 所有选项都是可选的
	dev: false,
	// 如果可重新配置被设置为false，配置将不会改变
	reconfigurable: false,
	// 这个函数负责在生成CSS之前对屏幕进行排序。
	// 参数是一个Map类型，该函数也必须返回一个Map类型。
	screensSortingFunction: (screensList) => { return screensList },
	// 如果mangle selectors为true，CSS中的选择器将被处理。
	mangleSelectors: false,
});

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

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

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