NativeScript/nativescript-core/ui/styling/css-selector/index.ts

import { isNullOrUndefined } from "../../../utils/types";

import * as cssParser from "../../../css";
import * as parser from "../../../css/parser";

/**
 * An interface describing the shape of a type on which the selectors may apply.
 * Note, the ui/core/view.View implements Node.
 */
export interface Node {
	parent?: Node;

	id?: string;
	nodeName?: string;
	cssType?: string;
	cssClasses?: Set<string>;
	cssPseudoClasses?: Set<string>;
	getChildIndex?(node: Node): number;
	getChildAt?(index: number): Node;
}

export interface Declaration {
	property: string;
	value: string;
}

export type ChangeMap<T extends Node> = Map<T, Changes>;

export interface Changes {
	attributes?: Set<string>;
	pseudoClasses?: Set<string>;
}

const enum Specificity {
	Inline = 1000,
	Id = 100,
	Attribute = 10,
	Class = 10,
	PseudoClass = 10,
	Type = 1,
	Universal = 0,
	Invalid = 0,
}

const enum Rarity {
	Invalid = 4,
	Id = 3,
	Class = 2,
	Type = 1,
	PseudoClass = 0,
	Attribute = 0,
	Universal = 0,
	Inline = 0,
}

interface LookupSorter {
	sortById(id: string, sel: SelectorCore);
	sortByClass(cssClass: string, sel: SelectorCore);
	sortByType(cssType: string, sel: SelectorCore);
	sortAsUniversal(sel: SelectorCore);
}

namespace Match {
	/**
	 * Depends on attributes or pseudoclasses state;
	 */
	export const Dynamic = true;
	/**
	 * Depends only on the tree structure.
	 */
	export const Static = false;
}

function getNodeDirectSibling(node): null | Node {
	if (!node.parent || !node.parent.getChildIndex || !node.parent.getChildAt) {
		return null;
	}
	const nodeIndex = node.parent.getChildIndex(node);
	if (nodeIndex === 0) {
		return null;
	}

	return node.parent.getChildAt(nodeIndex - 1);
}

function SelectorProperties(
	specificity: Specificity,
	rarity: Rarity,
	dynamic: boolean = false
): ClassDecorator {
	return (cls) => {
		cls.prototype.specificity = specificity;
		cls.prototype.rarity = rarity;
		cls.prototype.combinator = undefined;
		cls.prototype.dynamic = dynamic;

		return cls;
	};
}

declare type Combinator = "+" | ">" | "~" | " ";
@SelectorProperties(Specificity.Universal, Rarity.Universal, Match.Static)
export abstract class SelectorCore {
	public pos: number;
	public specificity: number;
	public rarity: Rarity;
	public combinator: Combinator;
	public ruleset: RuleSet;
	/**
	 * Dynamic selectors depend on attributes and pseudo classes.
	 */
	public dynamic: boolean;
	public abstract match(node: Node): boolean;
	/**
	 * If the selector is static returns if it matches the node.
	 * If the selector is dynamic returns if it may match the node, and accumulates any changes that may affect its state.
	 */
	public abstract accumulateChanges(
		node: Node,
		map: ChangeAccumulator
	): boolean;
	public lookupSort(sorter: LookupSorter, base?: SelectorCore): void {
		sorter.sortAsUniversal(base || this);
	}
}

export abstract class SimpleSelector extends SelectorCore {
	public accumulateChanges(node: Node, map?: ChangeAccumulator): boolean {
		if (!this.dynamic) {
			return this.match(node);
		} else if (this.mayMatch(node)) {
			this.trackChanges(node, map);

			return true;
		}

		return false;
	}
	public mayMatch(node: Node): boolean {
		return this.match(node);
	}
	public trackChanges(node: Node, map: ChangeAccumulator): void {
		// No-op, silence the tslint 'block is empty'.
		// Some derived classes (dynamic) will actually fill the map with stuff here, some (static) won't do anything.
	}
}

function wrap(text: string): string {
	return text ? ` ${text} ` : "";
}

@SelectorProperties(Specificity.Invalid, Rarity.Invalid, Match.Static)
export class InvalidSelector extends SimpleSelector {
	constructor(public e: Error) {
		super();
	}
	public toString(): string {
		return `<error: ${this.e}>`;
	}
	public match(node: Node): boolean {
		return false;
	}
	public lookupSort(sorter: LookupSorter, base?: SelectorCore): void {
		// No-op, silence the tslint 'block is empty'.
		// It feels like tslint has problems with simple polymorphism...
		// This selector is invalid and will never match so we won't bother sorting it to further appear in queries.
	}
}

@SelectorProperties(Specificity.Universal, Rarity.Universal, Match.Static)
export class UniversalSelector extends SimpleSelector {
	public toString(): string {
		return `*${wrap(this.combinator)}`;
	}
	public match(node: Node): boolean {
		return true;
	}
}

@SelectorProperties(Specificity.Id, Rarity.Id, Match.Static)
export class IdSelector extends SimpleSelector {
	constructor(public id: string) {
		super();
	}
	public toString(): string {
		return `#${this.id}${wrap(this.combinator)}`;
	}
	public match(node: Node): boolean {
		return node.id === this.id;
	}
	public lookupSort(sorter: LookupSorter, base?: SelectorCore): void {
		sorter.sortById(this.id, base || this);
	}
}

@SelectorProperties(Specificity.Type, Rarity.Type, Match.Static)
export class TypeSelector extends SimpleSelector {
	constructor(public cssType: string) {
		super();
	}
	public toString(): string {
		return `${this.cssType}${wrap(this.combinator)}`;
	}
	public match(node: Node): boolean {
		return node.cssType === this.cssType;
	}
	public lookupSort(sorter: LookupSorter, base?: SelectorCore): void {
		sorter.sortByType(this.cssType, base || this);
	}
}

@SelectorProperties(Specificity.Class, Rarity.Class, Match.Static)
export class ClassSelector extends SimpleSelector {
	constructor(public cssClass: string) {
		super();
	}
	public toString(): string {
		return `.${this.cssClass}${wrap(this.combinator)}`;
	}
	public match(node: Node): boolean {
		return node.cssClasses && node.cssClasses.has(this.cssClass);
	}
	public lookupSort(sorter: LookupSorter, base?: SelectorCore): void {
		sorter.sortByClass(this.cssClass, base || this);
	}
}

declare type AttributeTest = "=" | "^=" | "$=" | "*=" | "=" | "~=" | "|=";
@SelectorProperties(Specificity.Attribute, Rarity.Attribute, Match.Dynamic)
export class AttributeSelector extends SimpleSelector {
	constructor(
		public attribute: string,
		public test?: AttributeTest,
		public value?: string
	) {
		super();

		if (!test) {
			// HasAttribute
			this.match = (node) => !isNullOrUndefined(node[attribute]);

			return;
		}

		if (!value) {
			this.match = (node) => false;
		}

		this.match = (node) => {
			const attr = node[attribute] + "";

			if (test === "=") {
				// Equals
				return attr === value;
			}

			if (test === "^=") {
				// PrefixMatch
				return attr.startsWith(value);
			}

			if (test === "$=") {
				// SuffixMatch
				return attr.endsWith(value);
			}

			if (test === "*=") {
				// SubstringMatch
				return attr.indexOf(value) !== -1;
			}

			if (test === "~=") {
				// Includes
				const words = attr.split(" ");

				return words && words.indexOf(value) !== -1;
			}

			if (test === "|=") {
				// DashMatch
				return attr === value || attr.startsWith(value + "-");
			}
		};
	}
	public toString(): string {
		return `[${this.attribute}${wrap(this.test)}${
			(this.test && this.value) || ""
		}]${wrap(this.combinator)}`;
	}
	public match(node: Node): boolean {
		return false;
	}
	public mayMatch(node: Node): boolean {
		return true;
	}
	public trackChanges(node: Node, map: ChangeAccumulator): void {
		map.addAttribute(node, this.attribute);
	}
}

@SelectorProperties(Specificity.PseudoClass, Rarity.PseudoClass, Match.Dynamic)
export class PseudoClassSelector extends SimpleSelector {
	constructor(public cssPseudoClass: string) {
		super();
	}
	public toString(): string {
		return `:${this.cssPseudoClass}${wrap(this.combinator)}`;
	}
	public match(node: Node): boolean {
		return (
			node.cssPseudoClasses &&
			node.cssPseudoClasses.has(this.cssPseudoClass)
		);
	}
	public mayMatch(node: Node): boolean {
		return true;
	}
	public trackChanges(node: Node, map: ChangeAccumulator): void {
		map.addPseudoClass(node, this.cssPseudoClass);
	}
}

export class SimpleSelectorSequence extends SimpleSelector {
	private head: SimpleSelector;
	constructor(public selectors: SimpleSelector[]) {
		super();
		this.specificity = selectors.reduce(
			(sum, sel) => sel.specificity + sum,
			0
		);
		this.head = this.selectors.reduce(
			(prev, curr) => (!prev || curr.rarity > prev.rarity ? curr : prev),
			null
		);
		this.dynamic = selectors.some((sel) => sel.dynamic);
	}
	public toString(): string {
		return `${this.selectors.join("")}${wrap(this.combinator)}`;
	}
	public match(node: Node): boolean {
		return this.selectors.every((sel) => sel.match(node));
	}
	public mayMatch(node: Node): boolean {
		return this.selectors.every((sel) => sel.mayMatch(node));
	}
	public trackChanges(node, map): void {
		this.selectors.forEach((sel) => sel.trackChanges(node, map));
	}
	public lookupSort(sorter: LookupSorter, base?: SelectorCore): void {
		this.head.lookupSort(sorter, base || this);
	}
}

export class Selector extends SelectorCore {
	// Grouped by ancestor combinators, then by direct child combinators.
	private groups: Selector.ChildGroup[];
	private last: SelectorCore;

	constructor(public selectors: SimpleSelector[]) {
		super();
		const supportedCombinator = [undefined, " ", ">", "+"];
		let siblingGroup: SimpleSelector[];
		let lastGroup: SimpleSelector[][];
		let groups: SimpleSelector[][][] = [];

		this.specificity = 0;
		this.dynamic = false;

		for (let i = selectors.length - 1; i > -1; i--) {
			const sel = selectors[i];

			if (supportedCombinator.indexOf(sel.combinator) === -1) {
				throw new Error(`Unsupported combinator "${sel.combinator}".`);
			}
			if (sel.combinator === undefined || sel.combinator === " ") {
				groups.push((lastGroup = [(siblingGroup = [])]));
			}
			if (sel.combinator === ">") {
				lastGroup.push((siblingGroup = []));
			}

			this.specificity += sel.specificity;

			if (sel.dynamic) {
				this.dynamic = true;
			}

			siblingGroup.push(sel);
		}

		this.groups = groups.map(
			(g) =>
				new Selector.ChildGroup(
					g.map((sg) => new Selector.SiblingGroup(sg))
				)
		);
		this.last = selectors[selectors.length - 1];
	}

	public toString(): string {
		return this.selectors.join("");
	}

	public match(node: Node): boolean {
		return this.groups.every((group, i) => {
			if (i === 0) {
				node = group.match(node);

				return !!node;
			} else {
				let ancestor = node;
				while ((ancestor = ancestor.parent)) {
					if ((node = group.match(ancestor))) {
						return true;
					}
				}

				return false;
			}
		});
	}

	public lookupSort(sorter: LookupSorter, base?: SelectorCore): void {
		this.last.lookupSort(sorter, this);
	}

	public accumulateChanges(node: Node, map?: ChangeAccumulator): boolean {
		if (!this.dynamic) {
			return this.match(node);
		}

		let bounds: Selector.Bound[] = [];
		let mayMatch = this.groups.every((group, i) => {
			if (i === 0) {
				let nextNode = group.mayMatch(node);
				bounds.push({ left: node, right: node });
				node = nextNode;

				return !!node;
			} else {
				let ancestor = node;
				while ((ancestor = ancestor.parent)) {
					let nextNode = group.mayMatch(ancestor);
					if (nextNode) {
						bounds.push({ left: ancestor, right: null });
						node = nextNode;

						return true;
					}
				}

				return false;
			}
		});

		// Calculating the right bounds for each selectors won't save much
		if (!mayMatch) {
			return false;
		}

		if (!map) {
			return mayMatch;
		}

		for (let i = 0; i < this.groups.length; i++) {
			let group = this.groups[i];
			if (!group.dynamic) {
				continue;
			}
			let bound = bounds[i];
			let node = bound.left;
			do {
				if (group.mayMatch(node)) {
					group.trackChanges(node, map);
				}
			} while (node !== bound.right && (node = node.parent));
		}

		return mayMatch;
	}
}
export namespace Selector {
	// Non-spec. Selector sequences are grouped by ancestor then by child combinators for easier backtracking.
	export class ChildGroup {
		public dynamic: boolean;

		constructor(private selectors: SiblingGroup[]) {
			this.dynamic = selectors.some((sel) => sel.dynamic);
		}

		public match(node: Node): Node {
			return this.selectors.every(
				(sel, i) =>
					(node = i === 0 ? node : node.parent) && sel.match(node)
			)
				? node
				: null;
		}

		public mayMatch(node: Node): Node {
			return this.selectors.every(
				(sel, i) =>
					(node = i === 0 ? node : node.parent) && sel.mayMatch(node)
			)
				? node
				: null;
		}

		public trackChanges(node: Node, map: ChangeAccumulator) {
			this.selectors.forEach(
				(sel, i) =>
					(node = i === 0 ? node : node.parent) &&
					sel.trackChanges(node, map)
			);
		}
	}
	export class SiblingGroup {
		public dynamic: boolean;

		constructor(private selectors: SimpleSelector[]) {
			this.dynamic = selectors.some((sel) => sel.dynamic);
		}

		public match(node: Node): Node {
			return this.selectors.every(
				(sel, i) =>
					(node = i === 0 ? node : getNodeDirectSibling(node)) &&
					sel.match(node)
			)
				? node
				: null;
		}

		public mayMatch(node: Node): Node {
			return this.selectors.every(
				(sel, i) =>
					(node = i === 0 ? node : getNodeDirectSibling(node)) &&
					sel.mayMatch(node)
			)
				? node
				: null;
		}

		public trackChanges(node: Node, map: ChangeAccumulator) {
			this.selectors.forEach(
				(sel, i) =>
					(node = i === 0 ? node : getNodeDirectSibling(node)) &&
					sel.trackChanges(node, map)
			);
		}
	}
	export interface Bound {
		left: Node;
		right: Node;
	}
}

export class RuleSet {
	tag: string | Number;
	constructor(
		public selectors: SelectorCore[],
		public declarations: Declaration[]
	) {
		this.selectors.forEach((sel) => (sel.ruleset = this));
	}
	public toString(): string {
		return `${this.selectors.join(", ")} {${this.declarations
			.map((d, i) => `${i === 0 ? " " : ""}${d.property}: ${d.value}`)
			.join("; ")} }`;
	}
	public lookupSort(sorter: LookupSorter): void {
		this.selectors.forEach((sel) => sel.lookupSort(sorter));
	}
}

export function fromAstNodes(astRules: cssParser.Node[]): RuleSet[] {
	return (<cssParser.Rule[]>astRules.filter(isRule)).map((rule) => {
		let declarations = rule.declarations
			.filter(isDeclaration)
			.map(createDeclaration);
		let selectors = rule.selectors.map(createSelector);

		return new RuleSet(selectors, declarations);
	});
}

function createDeclaration(decl: cssParser.Declaration): any {
	return { property: decl.property.toLowerCase(), value: decl.value };
}

function createSimpleSelectorFromAst(
	ast: parser.SimpleSelector
): SimpleSelector {
	if (ast.type === ".") {
		return new ClassSelector(ast.identifier);
	}

	if (ast.type === "") {
		return new TypeSelector(ast.identifier.replace("-", "").toLowerCase());
	}

	if (ast.type === "#") {
		return new IdSelector(ast.identifier);
	}

	if (ast.type === "[]") {
		return new AttributeSelector(
			ast.property,
			ast.test,
			ast.test && ast.value
		);
	}

	if (ast.type === ":") {
		return new PseudoClassSelector(ast.identifier);
	}

	if (ast.type === "*") {
		return new UniversalSelector();
	}
}

function createSimpleSelectorSequenceFromAst(
	ast: parser.SimpleSelectorSequence
): SimpleSelectorSequence | SimpleSelector {
	if (ast.length === 0) {
		return new InvalidSelector(
			new Error("Empty simple selector sequence.")
		);
	} else if (ast.length === 1) {
		return createSimpleSelectorFromAst(ast[0]);
	} else {
		return new SimpleSelectorSequence(ast.map(createSimpleSelectorFromAst));
	}
}

function createSelectorFromAst(
	ast: parser.Selector
): SimpleSelector | SimpleSelectorSequence | Selector {
	if (ast.length === 0) {
		return new InvalidSelector(new Error("Empty selector."));
	} else if (ast.length === 1) {
		return createSimpleSelectorSequenceFromAst(ast[0][0]);
	} else {
		let simpleSelectorSequences = [];
		let simpleSelectorSequence: SimpleSelectorSequence | SimpleSelector;
		let combinator: parser.Combinator;
		for (let i = 0; i < ast.length; i++) {
			simpleSelectorSequence = createSimpleSelectorSequenceFromAst(
				<parser.SimpleSelectorSequence>ast[i][0]
			);
			combinator = <parser.Combinator>ast[i][1];
			if (combinator) {
				simpleSelectorSequence.combinator = combinator;
			}
			simpleSelectorSequences.push(simpleSelectorSequence);
		}

		return new Selector(simpleSelectorSequences);
	}
}

export function createSelector(
	sel: string
): SimpleSelector | SimpleSelectorSequence | Selector {
	try {
		let parsedSelector = parser.parseSelector(sel);
		if (!parsedSelector) {
			return new InvalidSelector(new Error("Empty selector"));
		}

		return createSelectorFromAst(parsedSelector.value);
	} catch (e) {
		return new InvalidSelector(e);
	}
}

function isRule(node: cssParser.Node): node is cssParser.Rule {
	return node.type === "rule";
}
function isDeclaration(node: cssParser.Node): node is cssParser.Declaration {
	return node.type === "declaration";
}

interface SelectorMap {
	[key: string]: SelectorCore[];
}
export class SelectorsMap<T extends Node> implements LookupSorter {
	private id: SelectorMap = {};
	private class: SelectorMap = {};
	private type: SelectorMap = {};
	private universal: SelectorCore[] = [];

	private position = 0;

	constructor(rulesets: RuleSet[]) {
		rulesets.forEach((rule) => rule.lookupSort(this));
	}

	query(node: T): SelectorsMatch<T> {
		const selectorsMatch = new SelectorsMatch<T>();
		const { cssClasses, id, cssType } = node;
		const selectorClasses = [
			this.universal,
			this.id[id],
			this.type[cssType],
		];

		if (cssClasses && cssClasses.size) {
			cssClasses.forEach((c) => selectorClasses.push(this.class[c]));
		}

		const selectors = selectorClasses.reduce(
			(cur, next) => cur.concat(next || []),
			[]
		);

		selectorsMatch.selectors = selectors
			.filter((sel) => sel.accumulateChanges(node, selectorsMatch))
			.sort((a, b) => a.specificity - b.specificity || a.pos - b.pos);

		return selectorsMatch;
	}

	sortById(id: string, sel: SelectorCore): void {
		this.addToMap(this.id, id, sel);
	}
	sortByClass(cssClass: string, sel: SelectorCore): void {
		this.addToMap(this.class, cssClass, sel);
	}
	sortByType(cssType: string, sel: SelectorCore): void {
		this.addToMap(this.type, cssType, sel);
	}
	sortAsUniversal(sel: SelectorCore): void {
		this.universal.push(this.makeDocSelector(sel));
	}

	private addToMap(map: SelectorMap, head: string, sel: SelectorCore): void {
		if (!map[head]) {
			map[head] = [];
		}

		map[head].push(this.makeDocSelector(sel));
	}

	private makeDocSelector(sel: SelectorCore): SelectorCore {
		sel.pos = this.position++;

		return sel;
	}
}

interface ChangeAccumulator {
	addAttribute(node: Node, attribute: string): void;
	addPseudoClass(node: Node, pseudoClass: string): void;
}

export class SelectorsMatch<T extends Node> implements ChangeAccumulator {
	public changeMap: ChangeMap<T> = new Map<T, Changes>();
	public selectors;

	public addAttribute(node: T, attribute: string): void {
		let deps: Changes = this.properties(node);
		if (!deps.attributes) {
			deps.attributes = new Set();
		}
		deps.attributes.add(attribute);
	}

	public addPseudoClass(node: T, pseudoClass: string): void {
		let deps: Changes = this.properties(node);
		if (!deps.pseudoClasses) {
			deps.pseudoClasses = new Set();
		}
		deps.pseudoClasses.add(pseudoClass);
	}

	public properties(node: T): Changes {
		let set = this.changeMap.get(node);
		if (!set) {
			this.changeMap.set(node, (set = {}));
		}

		return set;
	}
}