tasks/start.js
function postcssToHTML(root, builder) {
	function toString(node) {
		if ('atrule' === node.type) {
			return atruleToString(node);
		} if ('rule' === node.type) {
			return ruleToString(node);
		} else if ('decl' === node.type) {
			return declToString(node);
		} else if ('comment' === node.type) {
			return commentToString(node);
		} else {
			return node.nodes ? node.nodes.map(childNodes => toString(childNodes)).join('') : '';
		}
	}

	function replaceVars(string) {
		return string
			.replace(/:?--[\w-]+/g, '<span class=css-var>$&</span>')
	}

	function replaceVarsAndFns(string) {
		return replaceVars(string)
			.replace(/(:?[\w-]+)\(/g, '<span class=css-function>$1</span>(')
			.replace(/"[^"]+"/g, '<span class=css-string>$&</span>')
	}

	function atruleToString(atrule) {
		return `${atrule.raws.before||''}<span class=css-atrule><span class=css-atrule-name>@${atrule.name}</span>${atrule.raws.afterName||''}<span class=css-atrule-params>${replaceVarsAndFns(atrule.params)}</span>${atrule.raws.between||''}${atrule.nodes?`<span class=css-block>{${atrule.nodes.map(node => toString(node)).join('')}${atrule.raws.after||''}}</span>`:';'}</span>`;
	}

	function ruleToString(rule) {
		return `${rule.raws.before||''}<span class=css-rule><span class=css-selector>${replaceVars(rule.selector)}</span>${rule.raws.between||''}<span class=css-block>{${rule.nodes.map(node => toString(node)).join('')}${rule.raws.after||''}}</span></span>`;
	}

	function declToString(decl) {
		return `${decl.raws.before || ''}<span class=css-declaration><span class=css-property>${decl.prop}</span>${decl.raws.between || ':'}<span class=css-value>${replaceVarsAndFns(decl.value)}</span>;</span>`;
	}

	function commentToString(comment) {
		return `${comment.raws.before}<span class=css-comment>/*${comment.raws.left}${comment.text}${comment.raws.right}*/</span>`;
	}

	builder(
		toString(root)
	);
}
function postcssToHTML(root, builder) {
	function toString(node) {
		if ('atrule' === node.type) {
			return atruleToString(node);
		} if ('rule' === node.type) {
			return ruleToString(node);
		} else if ('decl' === node.type) {
			return declToString(node);
		} else if ('comment' === node.type) {
			return commentToString(node);
		} else {
			return node.nodes ? node.nodes.map(childNodes => toString(childNodes)).join('') : '';
		}
	}

	function replaceVars(string) {
		return string
			.replace(/:?--[\w-]+/g, '<span class=css-var>$&</span>')
	}

	function replaceVarsAndFns(string) {
		return replaceVars(string)
			.replace(/(:?[\w-]+)\(/g, '<span class=css-function>$1</span>(')
			.replace(/"[^"]+"/g, '<span class=css-string>$&</span>')
	}

	function atruleToString(atrule) {
		return `${atrule.raws.before||''}<span class=css-atrule><span class=css-atrule-name>@${atrule.name}</span>${atrule.raws.afterName||''}<span class=css-atrule-params>${replaceVarsAndFns(atrule.params)}</span>${atrule.raws.between||''}${atrule.nodes?`<span class=css-block>{${atrule.nodes.map(node => toString(node)).join('')}${atrule.raws.after||''}}</span>`:';'}</span>`;
	}

	function ruleToString(rule) {
		return `${rule.raws.before||''}<span class=css-rule><span class=css-selector>${replaceVars(rule.selector)}</span>${rule.raws.between||''}<span class=css-block>{${rule.nodes.map(node => toString(node)).join('')}${rule.raws.after||''}}</span></span>`;
	}

	function declToString(decl) {
		return `${decl.raws.before || ''}<span class=css-declaration><span class=css-property>${decl.prop}</span>${decl.raws.between || ':'}<span class=css-value>${replaceVarsAndFns(decl.value)}</span>;</span>`;
	}

	function commentToString(comment) {
		return `${comment.raws.before}<span class=css-comment>/*${comment.raws.left}${comment.text}${comment.raws.right}*/</span>`;
	}

	builder(
		toString(root)
	);
}
function postcssToHTML ( root , builder ) { function toString ( node ) { if ( 'atrule' === node . type ) { return atruleToString ( node ) ; } if ( 'rule' === node . type ) { return ruleToString ( node ) ; } else if ( 'decl' === node . type ) { return declToString ( node ) ; } else if ( 'comment' === node . type ) { return commentToString ( node ) ; } else { return node . nodes ? node . nodes . map ( childNodes => toString ( childNodes ) ) . join ( '' ) : '' ; } } function replaceVars ( string ) { return string . replace ( / :?--[\w-]+ / g , '<span class=css-var>$&</span>' ) } function replaceVarsAndFns ( string ) { return replaceVars ( string ) . replace ( / (:?[\w-]+)\( / g , '<span class=css-function>$1</span>(' ) . replace ( / "[^"]+" / g , '<span class=css-string>$&</span>' ) } function atruleToString ( atrule ) { return ` ${ atrule . raws . before || '' } ${ atrule . name } ${ atrule . raws . afterName || '' } ${ replaceVarsAndFns ( atrule . params ) } ${ atrule . raws . between || '' } ${ atrule . nodes ? ` ${ atrule . nodes . map ( node => toString ( node ) ) . join ( '' ) } ${ atrule . raws . after || '' } ` : ';' } ` ; } function ruleToString ( rule ) { return ` ${ rule . raws . before || '' } ${ replaceVars ( rule . selector ) } ${ rule . raws . between || '' } ${ rule . nodes . map ( node => toString ( node ) ) . join ( '' ) } ${ rule . raws . after || '' } ` ; } function declToString ( decl ) { return ` ${ decl . raws . before || '' } ${ decl . prop } ${ decl . raws . between || ':' } ${ replaceVarsAndFns ( decl . value ) } ` ; } function commentToString ( comment ) { return ` ${ comment . raws . before } ${ comment . raws . left } ${ comment . text } ${ comment . raws . right } ` ; } builder ( toString ( root ) ) ; }
format css as syntax-highlighted HTML
format css as syntax - highlighted HTML