Working on performance improvements

Author: sergeche

benchmark.js

@@ -0,0 +1,22 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const parser = require('./');
+
+const css = fs.readFileSync(path.resolve(__dirname, './test/fixtures/ayyo.css'), 'utf8');
+
+if (typeof console.profile !== 'function') {
+	console.profile = label => console.time(label);
+	console.profileEnd = label => console.timeEnd(label);
+}
+
+console.profile('Parse CSS');
+const model = parser.default(css);
+console.profileEnd('Parse CSS');
+
+console.log(model.children.length);
+
+// console.time('CSS Tree');
+// const ast = csstree.parse(css);
+// console.timeEnd('CSS Tree');

index.js

@@ -4,56 +4,96 @@ import StreamReader from '@emmetio/stream-reader';
 import Stylesheet from './lib/stylesheet';
 import createRule from './lib/rule';
 import createProperty from './lib/property';
-import token, { unknown, Token } from './lib/tokens/index';
+import { Token } from './lib/tokens/index';
 
-export default function(source) {
+import atKeyword from './lib/tokens/at-keyword';
+import string from './lib/tokens/string';
+import separator from './lib/tokens/separator';
+import comment, { multiLineComment } from './lib/tokens/comment';
+import whitespace from './lib/tokens/whitespace';
+
+const LBRACE = 40;  // (
+const RBRACE = 41;  // )
+
+export default function parseStylesheet(source) {
 	const stream = typeof source === 'string' ? new StreamReader(source) : source;
 	const root = new Stylesheet();
+	let ctx = root, child, accum;
+	let token, start;
 	let tokens = [];
-	let ctx = root, child, t;
 
 	while (!stream.eof()) {
-		t = token(stream);
-
-		if (!t) {
-			// unable to identify following character, consume it as unknown token
-			stream.start = stream.pos;
-			stream.next();
-			tokens.push(unknown(stream));
-		} else if (t.propertyTerminator) {
-			// Tokens consumed before are CSS property
-			tokens.push(t);
-			ctx.addChild(createProperty(stream, tokens, t));
-			tokens = [];
-		} else if (t.ruleStart) {
-			// Tokens consumed before are CSS rule
-			child = createRule(stream, tokens, t);
-			if (child) {
+		token = atKeyword(stream) || separator(stream) || whitespace(stream) || comment(stream);
+		if (token) {
+			if (accum) {
+				tokens.push(accum);
+				accum = null;
+			}
+
+			if (token.propertyTerminator) {
+				ctx.addChild(createProperty(stream, tokens, token));
+				tokens = [];
+			} else if (token.ruleStart) {
+				child = createRule(stream, tokens, token);
 				ctx.addChild(child);
 				ctx = child;
+				tokens = [];
+			} else if (token.ruleEnd) {
+				// Finalize context section
+				ctx.addChild(createProperty(stream, tokens));
+
+				if (ctx.type !== 'root') {
+					// In case of invalid stylesheet with redundant `}`,
+					// don’t modify root section.
+					ctx.contentRange.end = token.end;
+					ctx = ctx.parent;
+				}
+
+				tokens = [];
+			} else {
+				tokens.push(token);
 			}
-			tokens = [];
-		} else if (t.ruleEnd) {
-			// Finalize previously consumed tokens as CSS property
-			ctx.addChild(createProperty(stream, tokens));
-			tokens = [];
-
-			// In case of invalid stylesheet with redundant `}`,
-			// don’t modify root section.
-			if (ctx.type !== 'root') {
-				ctx.contentEnd = t;
-			}
 
-			ctx = ctx.parent || ctx;
+			continue;
+		}
+
+		start = stream.pos;
+		if (braces(stream) || string(stream) || !isNaN(stream.next())) {
+			if (!accum) {
+				accum = new Token(stream, start);
+			} else {
+				accum.end = stream.pos;
+			}
 		} else {
-			tokens.push(t);
+			throw new Error(`Unexpected end-of-stream at ${stream.pos}`);
 		}
 	}
 
-	// save unterminated tokens as property
+	// Finalize all the rest properties
 	ctx.addChild(createProperty(stream, tokens));
 
 	return root;
 }
 
-export { token, createProperty, createRule, Token }
+function braces(stream) {
+	if (stream.eat(LBRACE)) {
+		let stack = 1;
+
+		// Handle edge case: do not consume single-line comment inside braces
+		// since most likely it’s an unquoted url like `http://example.com`
+		while (!stream.eof()) {
+			if (stream.eat(RBRACE)) {
+				stack--;
+				if (!stack) {
+					break;
+				}
+			} else if (!string(stream) && !multiLineComment(stream)) {
+				stream.next();
+			}
+		}
+
+		return true;
+	}
+
+	return false;
+}

lib/preparse.js

@@ -1,16 +1,17 @@
 'use strict';
 
 import Token from './token';
-import FragmentsToken from './fragments';
 import { RULE_START, RULE_END } from './separator';
+import { last } from '../utils';
 
 const ARGUMENTS_START = 40;  // (
 const ARGUMENTS_END   = 41;  // )
 
 export default function(stream, tokenConsumer) {
-	const start = stream.pos;
+	if (stream.peek() === ARGUMENTS_START) {
+		stream.start = stream.pos;
+		stream.next();
 
-	if (stream.eat(ARGUMENTS_START)) {
 		const tokens = [];
 		let t, ch;
 		// in LESS, it’s possible to separate arguments list either by `;` or `,`.
@@ -34,38 +35,51 @@ export default function(stream, tokenConsumer) {
 			tokens.push(t);
 		}
 
-		return createArguments(stream, tokens, start, usePropTerminator);
+		return createArgumentList(stream, tokens, usePropTerminator);
 	}
 }
 
 function isUnexpectedTerminator(code) {
 	return code === RULE_START || code === RULE_END;
 }
 
-function createArguments(stream, tokens, start, usePropTerminator) {
-	const sep = usePropTerminator ? semicolonSeparator : commaSeparator;
-	const list = [];
+function createArgumentList(stream, tokens, usePropTerminator) {
+	const argsToken = new Token(stream, 'arguments');
+	const isSeparator = usePropTerminator ? semicolonSeparator : commaSeparator;
 	let arg = [];
 
 	for (let i = 0, il = tokens.length, token; i < il; i++) {
 		token = tokens[i];
-		if (sep(token)) {
-			if (arg.length) {
-				list.push(new FragmentsToken(stream, arg));
-				arg = [];
-			} else {
-				list.push(new Token(stream, token.start, token.start));
-			}
+		if (isSeparator(token)) {
+			argsToken.add(createArgument(stream, arg) || createEmptyArgument(stream, token.start));
 		} else {
 			arg.push(token);
 		}
 	}
 
 	if (arg.length) {
-		list.push(new FragmentsToken(stream, arg));
+		argsToken.add(createArgument(stream, arg));
+	}
+
+	return argsToken;
+}
+
+function createArgument(stream, tokens) {
+	if (tokens && tokens.length) {
+		const arg = new Token(stream, 'argument', tokens[0].start, last(tokens).end);
+
+		for (let i = 0; i < tokens.length; i++) {
+			arg.add(tokens[i]);
+		}
+
+		return arg;
 	}
+}
 
-	return new ArgumentsToken(list, stream, start);
+function createEmptyArgument(stream, pos) {
+	const token = new Token(stream, 'argument', pos, pos);
+	token.property('empty', true);
+	return token;
 }
 
 function commaSeparator(token) {
@@ -75,14 +89,3 @@ function commaSeparator(token) {
 function semicolonSeparator(token) {
 	return token.propertyTerminator;
 }
-
-/**
- * A token that represents a set of arguments between `(` and `)`
- */
-export class ArgumentsToken extends Token {
-	constructor(list, stream, start, end) {
-		super(stream, start, end);
-		this.list = list;
-		this.type = 'arguments';
-	}
-}

lib/tokens/arguments.js

@@ -12,17 +12,10 @@ export default function(stream) {
 	if (stream.eatWhile(64 /* @ */)) {
 		const name = ident(stream);
 		if (name) {
-			return new AtKeywordToken(name, stream, start);
+			stream.start = start;
+			return new Token(stream, 'at-keyword').add(name);
 		}
 	}
 
 	stream.pos = start;
 }
-
-export class AtKeywordToken extends Token {
-	constructor(name, stream, start, end) {
-		super(stream, start, end);
-		this.type = 'at-keyword';
-		this.name = name;
-	}
-}