CSS shorthand split

Benchmark created on


Setup

const input = 'border-color:   rgb(10 , 10,   10 )  rgba(100,    100,   100, .3   )' +
				'   rgb(  20%   20%  20% )    rgba(  255   255  255   /  .5 ) ';

Test runner

Ready to run.

Testing in
TestOps/sec
Old
function getShorthandValues( string ) {
	return string
		.replace( /, /g, ',' )
		.split( ' ' )
		.map( string => string.replace( /,/g, ', ' ) );
}

for ( let i = 0; i < 100000; i++ ) {
	getShorthandValues( input );
}
ready
New
const CSS_SHORTHAND_VALUE_REGEXP = /\w+\((?:[^()]|\([^()]*\))*\)|\S+/gi;

function getShorthandValues( string ) {
	const matches = string.matchAll( CSS_SHORTHAND_VALUE_REGEXP );

	return Array.from( matches ).map( i => i[ 0 ] );
}

for ( let i = 0; i < 100000; i++ ) {
	getShorthandValues( input );
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.