NativeScript/nativescript-core/css/parser.ts

export type Parsed<V> = { start: number; end: number; value: V };

// Values
export type ARGB = number;
export type URL = string;
export type Angle = number;
export interface Unit<T> {
	value: number;
	unit: string;
}
export type Length = Unit<"px" | "dip">;
export type Percentage = Unit<"%">;
export type LengthPercentage = Length | Percentage;
export type Keyword = string;
export interface ColorStop {
	argb: ARGB;
	offset?: LengthPercentage;
}
export interface LinearGradient {
	angle: number;
	colors: ColorStop[];
}
export interface Background {
	readonly color?: number;
	readonly image?: URL | LinearGradient;
	readonly repeat?: BackgroundRepeat;
	readonly position?: BackgroundPosition;
	readonly size?: BackgroundSize;
}
export type BackgroundRepeat = "repeat" | "repeat-x" | "repeat-y" | "no-repeat";
export type BackgroundSize =
	| "auto"
	| "cover"
	| "contain"
	| {
			x: LengthPercentage;
			y: "auto" | LengthPercentage;
	  };
export type HorizontalAlign = "left" | "center" | "right";
export type VerticalAlign = "top" | "center" | "bottom";
export interface HorizontalAlignWithOffset {
	readonly align: "left" | "right";
	readonly offset: LengthPercentage;
}
export interface VerticalAlignWithOffset {
	readonly align: "top" | "bottom";
	readonly offset: LengthPercentage;
}
export interface BackgroundPosition {
	readonly x: HorizontalAlign | HorizontalAlignWithOffset;
	readonly y: VerticalAlign | VerticalAlignWithOffset;
	text?: string;
}

const urlRegEx = /\s*url\((?:('|")([^\1]*)\1|([^\)]*))\)\s*/gy;
export function parseURL(text: string, start: number = 0): Parsed<URL> {
	urlRegEx.lastIndex = start;
	const result = urlRegEx.exec(text);
	if (!result) {
		return null;
	}
	const end = urlRegEx.lastIndex;
	const value: URL = result[2] || result[3];

	return { start, end, value };
}

const hexColorRegEx = /\s*#((?:[0-9A-F]{8})|(?:[0-9A-F]{6})|(?:[0-9A-F]{3}))\s*/giy;
export function parseHexColor(text: string, start: number = 0): Parsed<ARGB> {
	hexColorRegEx.lastIndex = start;
	const result = hexColorRegEx.exec(text);
	if (!result) {
		return null;
	}
	const end = hexColorRegEx.lastIndex;
	let hex = result[1];
	let argb;
	if (hex.length === 8) {
		argb = parseInt("0x" + hex);
	} else if (hex.length === 6) {
		argb = parseInt("0xFF" + hex);
	} else if (hex.length === 3) {
		argb = parseInt(
			"0xFF" + hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
		);
	}

	return { start, end, value: argb };
}

function rgbaToArgbNumber(
	r: number,
	g: number,
	b: number,
	a: number = 1
): number | undefined {
	if (
		r >= 0 &&
		r <= 255 &&
		g >= 0 &&
		g <= 255 &&
		b >= 0 &&
		b <= 255 &&
		a >= 0 &&
		a <= 1
	) {
		return (
			Math.round(a * 0xff) * 0x01000000 + r * 0x010000 + g * 0x000100 + b
		);
	} else {
		return null;
	}
}

const rgbColorRegEx = /\s*(rgb\(\s*(\d*)\s*,\s*(\d*)\s*,\s*(\d*)\s*\))/gy;
export function parseRGBColor(text: string, start: number = 0): Parsed<ARGB> {
	rgbColorRegEx.lastIndex = start;
	const result = rgbColorRegEx.exec(text);
	if (!result) {
		return null;
	}
	const end = rgbColorRegEx.lastIndex;
	const value =
		result[1] &&
		rgbaToArgbNumber(
			parseInt(result[2]),
			parseInt(result[3]),
			parseInt(result[4])
		);

	return { start, end, value };
}

const rgbaColorRegEx = /\s*(rgba\(\s*(\d*)\s*,\s*(\d*)\s*,\s*(\d*)\s*,\s*([01]?\.?\d*)\s*\))/gy;
export function parseRGBAColor(text: string, start: number = 0): Parsed<ARGB> {
	rgbaColorRegEx.lastIndex = start;
	const result = rgbaColorRegEx.exec(text);
	if (!result) {
		return null;
	}
	const end = rgbaColorRegEx.lastIndex;
	const value = rgbaToArgbNumber(
		parseInt(result[2]),
		parseInt(result[3]),
		parseInt(result[4]),
		parseFloat(result[5])
	);

	return { start, end, value };
}

export function convertHSLToRGBColor(
	hue: number,
	saturation: number,
	lightness: number
): { r: number; g: number; b: number } {
	// Per formula it will be easier if hue is divided to 60° and saturation to 100 beforehand
	// https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB
	hue /= 60;
	lightness /= 100;

	let chroma = ((1 - Math.abs(2 * lightness - 1)) * saturation) / 100,
		X = chroma * (1 - Math.abs((hue % 2) - 1)),
		// Add lightness match to all RGB components beforehand
		{ m: r, m: g, m: b } = { m: lightness - chroma / 2 };

	if (0 <= hue && hue < 1) {
		r += chroma;
		g += X;
	} else if (hue < 2) {
		r += X;
		g += chroma;
	} else if (hue < 3) {
		g += chroma;
		b += X;
	} else if (hue < 4) {
		g += X;
		b += chroma;
	} else if (hue < 5) {
		r += X;
		b += chroma;
	} else if (hue < 6) {
		r += chroma;
		b += X;
	}

	return {
		r: Math.round(r * 0xff),
		g: Math.round(g * 0xff),
		b: Math.round(b * 0xff),
	};
}

function hslaToArgbNumber(
	h: number,
	s: number,
	l: number,
	a: number = 1
): number | undefined {
	let { r, g, b } = convertHSLToRGBColor(h, s, l);

	if (
		r >= 0 &&
		r <= 255 &&
		g >= 0 &&
		g <= 255 &&
		b >= 0 &&
		b <= 255 &&
		a >= 0 &&
		a <= 1
	) {
		return (
			Math.round(a * 0xff) * 0x01000000 + r * 0x010000 + g * 0x000100 + b
		);
	} else {
		return null;
	}
}

const hslColorRegEx = /\s*(hsl\(\s*([\d.]*)\s*,\s*([\d.]*)%\s*,\s*([\d.]*)%\s*\))/gy;
export function parseHSLColor(text: string, start: number = 0): Parsed<ARGB> {
	hslColorRegEx.lastIndex = start;
	const result = hslColorRegEx.exec(text);
	if (!result) {
		return null;
	}
	const end = hslColorRegEx.lastIndex;
	const value =
		result[1] &&
		hslaToArgbNumber(
			parseFloat(result[2]),
			parseFloat(result[3]),
			parseFloat(result[4])
		);

	return { start, end, value };
}

const hslaColorRegEx = /\s*(hsla\(\s*([\d.]*)\s*,\s*([\d.]*)%\s*,\s*([\d.]*)%\s*,\s*([01]?\.?\d*)\s*\))/gy;
export function parseHSLAColor(text: string, start: number = 0): Parsed<ARGB> {
	hslaColorRegEx.lastIndex = start;
	const result = hslaColorRegEx.exec(text);
	if (!result) {
		return null;
	}
	const end = hslaColorRegEx.lastIndex;
	const value = hslaToArgbNumber(
		parseFloat(result[2]),
		parseFloat(result[3]),
		parseFloat(result[4]),
		parseFloat(result[5])
	);

	return { start, end, value };
}

export enum colors {
	transparent = 0x00000000,
	aliceblue = 0xfff0f8ff,
	antiquewhite = 0xfffaebd7,
	aqua = 0xff00ffff,
	aquamarine = 0xff7fffd4,
	azure = 0xfff0ffff,
	beige = 0xfff5f5dc,
	bisque = 0xffffe4c4,
	black = 0xff000000,
	blanchedalmond = 0xffffebcd,
	blue = 0xff0000ff,
	blueviolet = 0xff8a2be2,
	brown = 0xffa52a2a,
	burlywood = 0xffdeb887,
	cadetblue = 0xff5f9ea0,
	chartreuse = 0xff7fff00,
	chocolate = 0xffd2691e,
	coral = 0xffff7f50,
	cornflowerblue = 0xff6495ed,
	cornsilk = 0xfffff8dc,
	crimson = 0xffdc143c,
	cyan = 0xff00ffff,
	darkblue = 0xff00008b,
	darkcyan = 0xff008b8b,
	darkgoldenrod = 0xffb8860b,
	darkgray = 0xffa9a9a9,
	darkgreen = 0xff006400,
	darkgrey = 0xffa9a9a9,
	darkkhaki = 0xffbdb76b,
	darkmagenta = 0xff8b008b,
	darkolivegreen = 0xff556b2f,
	darkorange = 0xffff8c00,
	darkorchid = 0xff9932cc,
	darkred = 0xff8b0000,
	darksalmon = 0xffe9967a,
	darkseagreen = 0xff8fbc8f,
	darkslateblue = 0xff483d8b,
	darkslategray = 0xff2f4f4f,
	darkslategrey = 0xff2f4f4f,
	darkturquoise = 0xff00ced1,
	darkviolet = 0xff9400d3,
	deeppink = 0xffff1493,
	deepskyblue = 0xff00bfff,
	dimgray = 0xff696969,
	dimgrey = 0xff696969,
	dodgerblue = 0xff1e90ff,
	firebrick = 0xffb22222,
	floralwhite = 0xfffffaf0,
	forestgreen = 0xff228b22,
	fuchsia = 0xffff00ff,
	gainsboro = 0xffdcdcdc,
	ghostwhite = 0xfff8f8ff,
	gold = 0xffffd700,
	goldenrod = 0xffdaa520,
	gray = 0xff808080,
	green = 0xff008000,
	greenyellow = 0xffadff2f,
	grey = 0xff808080,
	honeydew = 0xfff0fff0,
	hotpink = 0xffff69b4,
	indianred = 0xffcd5c5c,
	indigo = 0xff4b0082,
	ivory = 0xfffffff0,
	khaki = 0xfff0e68c,
	lavender = 0xffe6e6fa,
	lavenderblush = 0xfffff0f5,
	lawngreen = 0xff7cfc00,
	lemonchiffon = 0xfffffacd,
	lightblue = 0xffadd8e6,
	lightcoral = 0xfff08080,
	lightcyan = 0xffe0ffff,
	lightgoldenrodyellow = 0xfffafad2,
	lightgray = 0xffd3d3d3,
	lightgreen = 0xff90ee90,
	lightgrey = 0xffd3d3d3,
	lightpink = 0xffffb6c1,
	lightsalmon = 0xffffa07a,
	lightseagreen = 0xff20b2aa,
	lightskyblue = 0xff87cefa,
	lightslategray = 0xff778899,
	lightslategrey = 0xff778899,
	lightsteelblue = 0xffb0c4de,
	lightyellow = 0xffffffe0,
	lime = 0xff00ff00,
	limegreen = 0xff32cd32,
	linen = 0xfffaf0e6,
	magenta = 0xffff00ff,
	maroon = 0xff800000,
	mediumaquamarine = 0xff66cdaa,
	mediumblue = 0xff0000cd,
	mediumorchid = 0xffba55d3,
	mediumpurple = 0xff9370db,
	mediumseagreen = 0xff3cb371,
	mediumslateblue = 0xff7b68ee,
	mediumspringgreen = 0xff00fa9a,
	mediumturquoise = 0xff48d1cc,
	mediumvioletred = 0xffc71585,
	midnightblue = 0xff191970,
	mintcream = 0xfff5fffa,
	mistyrose = 0xffffe4e1,
	moccasin = 0xffffe4b5,
	navajowhite = 0xffffdead,
	navy = 0xff000080,
	oldlace = 0xfffdf5e6,
	olive = 0xff808000,
	olivedrab = 0xff6b8e23,
	orange = 0xffffa500,
	orangered = 0xffff4500,
	orchid = 0xffda70d6,
	palegoldenrod = 0xffeee8aa,
	palegreen = 0xff98fb98,
	paleturquoise = 0xffafeeee,
	palevioletred = 0xffdb7093,
	papayawhip = 0xffffefd5,
	peachpuff = 0xffffdab9,
	peru = 0xffcd853f,
	pink = 0xffffc0cb,
	plum = 0xffdda0dd,
	powderblue = 0xffb0e0e6,
	purple = 0xff800080,
	rebeccapurple = 0xff663399,
	red = 0xffff0000,
	rosybrown = 0xffbc8f8f,
	royalblue = 0xff4169e1,
	saddlebrown = 0xff8b4513,
	salmon = 0xfffa8072,
	sandybrown = 0xfff4a460,
	seagreen = 0xff2e8b57,
	seashell = 0xfffff5ee,
	sienna = 0xffa0522d,
	silver = 0xffc0c0c0,
	skyblue = 0xff87ceeb,
	slateblue = 0xff6a5acd,
	slategray = 0xff708090,
	slategrey = 0xff708090,
	snow = 0xfffffafa,
	springgreen = 0xff00ff7f,
	steelblue = 0xff4682b4,
	tan = 0xffd2b48c,
	teal = 0xff008080,
	thistle = 0xffd8bfd8,
	tomato = 0xffff6347,
	turquoise = 0xff40e0d0,
	violet = 0xffee82ee,
	wheat = 0xfff5deb3,
	white = 0xffffffff,
	whitesmoke = 0xfff5f5f5,
	yellow = 0xffffff00,
	yellowgreen = 0xff9acd32,
}

export function parseColorKeyword(
	value,
	start: number,
	keyword = parseKeyword(value, start)
): Parsed<ARGB> {
	if (keyword && keyword.value in colors) {
		const end = keyword.end;
		const value = colors[keyword.value];

		return { start, end, value };
	}

	return null;
}

export function parseColor(
	value: string,
	start: number = 0,
	keyword = parseKeyword(value, start)
): Parsed<ARGB> {
	return (
		parseHexColor(value, start) ||
		parseColorKeyword(value, start, keyword) ||
		parseRGBColor(value, start) ||
		parseRGBAColor(value, start) ||
		parseHSLColor(value, start) ||
		parseHSLAColor(value, start)
	);
}

const keywordRegEx = /\s*([a-z][\w\-]*)\s*/giy;
function parseKeyword(text: string, start: number = 0): Parsed<Keyword> {
	keywordRegEx.lastIndex = start;
	const result = keywordRegEx.exec(text);
	if (!result) {
		return null;
	}
	const end = keywordRegEx.lastIndex;
	const value = result[1];

	return { start, end, value };
}

const backgroundRepeatKeywords = new Set([
	"repeat",
	"repeat-x",
	"repeat-y",
	"no-repeat",
]);
export function parseRepeat(
	value: string,
	start: number = 0,
	keyword = parseKeyword(value, start)
): Parsed<BackgroundRepeat> {
	if (keyword && backgroundRepeatKeywords.has(keyword.value)) {
		const end = keyword.end;
		const value = <BackgroundRepeat>keyword.value;

		return { start, end, value };
	}

	return null;
}

const unitRegEx = /\s*([\+\-]?(?:\d+\.\d+|\d+|\.\d+)(?:[eE][\+\-]?\d+)?)([a-zA-Z]+|%)?\s*/gy;
export function parseUnit(
	text: string,
	start: number = 0
): Parsed<Unit<string>> {
	unitRegEx.lastIndex = start;
	const result = unitRegEx.exec(text);
	if (!result) {
		return null;
	}
	const end = unitRegEx.lastIndex;
	const value = parseFloat(result[1]);
	const unit = <any>result[2] || "dip";

	return { start, end, value: { value, unit } };
}

export function parsePercentageOrLength(
	text: string,
	start: number = 0
): Parsed<LengthPercentage> {
	const unitResult = parseUnit(text, start);
	if (unitResult) {
		const { start, end } = unitResult;
		const value = <LengthPercentage>unitResult.value;
		if (value.unit === "%") {
			value.value /= 100;
		} else if (!value.unit) {
			value.unit = "dip";
		} else if (value.unit === "px" || value.unit === "dip") {
			// same
		} else {
			return null;
		}

		return { start, end, value };
	}

	return null;
}

const angleUnitsToRadMap: {
	[unit: string]: (
		start: number,
		end: number,
		value: number
	) => Parsed<Angle>;
} = {
	deg: (start: number, end: number, deg: number) => ({
		start,
		end,
		value: (deg / 180) * Math.PI,
	}),
	rad: (start: number, end: number, rad: number) => ({
		start,
		end,
		value: rad,
	}),
	grad: (start: number, end: number, grad: number) => ({
		start,
		end,
		value: (grad / 200) * Math.PI,
	}),
	turn: (start: number, end: number, turn: number) => ({
		start,
		end,
		value: turn * Math.PI * 2,
	}),
};
export function parseAngle(value: string, start: number = 0): Parsed<Angle> {
	const angleResult = parseUnit(value, start);
	if (angleResult) {
		const { start, end, value } = angleResult;

		return (angleUnitsToRadMap[value.unit] || ((_, __, ___) => null))(
			start,
			end,
			value.value
		);
	}

	return null;
}

const backgroundSizeKeywords = new Set(["auto", "contain", "cover"]);
export function parseBackgroundSize(
	value: string,
	start: number = 0,
	keyword = parseKeyword(value, start)
): Parsed<BackgroundSize> {
	let end = start;
	if (keyword && backgroundSizeKeywords.has(keyword.value)) {
		end = keyword.end;
		const value = <"auto" | "cover" | "contain">keyword.value;

		return { start, end, value };
	}

	// Parse one or two lengths... the other will be "auto"
	const firstLength = parsePercentageOrLength(value, end);
	if (firstLength) {
		end = firstLength.end;
		const secondLength = parsePercentageOrLength(value, firstLength.end);
		if (secondLength) {
			end = secondLength.end;

			return {
				start,
				end,
				value: { x: firstLength.value, y: secondLength.value },
			};
		} else {
			return { start, end, value: { x: firstLength.value, y: "auto" } };
		}
	}

	return null;
}

const backgroundPositionKeywords = Object.freeze(
	new Set(["left", "right", "top", "bottom", "center"])
);
const backgroundPositionKeywordsDirection: {
	[align: string]: "x" | "center" | "y";
} = {
	left: "x",
	right: "x",
	center: "center",
	top: "y",
	bottom: "y",
};
export function parseBackgroundPosition(
	text: string,
	start: number = 0,
	keyword = parseKeyword(text, start)
): Parsed<BackgroundPosition> {
	function formatH(
		align: Parsed<HorizontalAlign>,
		offset: Parsed<LengthPercentage>
	) {
		if (align.value === "center") {
			return "center";
		}
		if (offset && offset.value.value !== 0) {
			return { align: align.value, offset: offset.value };
		}

		return align.value;
	}
	function formatV(
		align: Parsed<VerticalAlign>,
		offset: Parsed<LengthPercentage>
	) {
		if (align.value === "center") {
			return "center";
		}
		if (offset && offset.value.value !== 0) {
			return { align: align.value, offset: offset.value };
		}

		return align.value;
	}
	let end = start;
	if (keyword && backgroundPositionKeywords.has(keyword.value)) {
		end = keyword.end;
		let firstDirection = backgroundPositionKeywordsDirection[keyword.value];

		const firstLength =
			firstDirection !== "center" && parsePercentageOrLength(text, end);
		if (firstLength) {
			end = firstLength.end;
		}

		const secondKeyword = parseKeyword(text, end);
		if (
			secondKeyword &&
			backgroundPositionKeywords.has(secondKeyword.value)
		) {
			end = secondKeyword.end;
			let secondDirection =
				backgroundPositionKeywordsDirection[secondKeyword.end];

			if (
				firstDirection === secondDirection &&
				firstDirection !== "center"
			) {
				return null; // Reject pair of both horizontal or both vertical alignments.
			}

			const secondLength =
				secondDirection !== "center" &&
				parsePercentageOrLength(text, end);
			if (secondLength) {
				end = secondLength.end;
			}

			if (
				(firstDirection === secondDirection &&
					secondDirection === "center") ||
				firstDirection === "x" ||
				secondDirection === "y"
			) {
				return {
					start,
					end,
					value: {
						x: formatH(
							<Parsed<HorizontalAlign>>keyword,
							firstLength
						),
						y: formatV(
							<Parsed<VerticalAlign>>secondKeyword,
							secondLength
						),
					},
				};
			} else {
				return {
					start,
					end,
					value: {
						x: formatH(
							<Parsed<HorizontalAlign>>secondKeyword,
							secondLength
						),
						y: formatV(<Parsed<VerticalAlign>>keyword, firstLength),
					},
				};
			}
		} else {
			if (firstDirection === "center") {
				return { start, end, value: { x: "center", y: "center" } };
			} else if (firstDirection === "x") {
				return {
					start,
					end,
					value: {
						x: formatH(
							<Parsed<HorizontalAlign>>keyword,
							firstLength
						),
						y: "center",
					},
				};
			} else {
				return {
					start,
					end,
					value: {
						x: "center",
						y: formatV(<Parsed<VerticalAlign>>keyword, firstLength),
					},
				};
			}
		}
	} else {
		const firstLength = parsePercentageOrLength(text, end);
		if (firstLength) {
			end = firstLength.end;
			const secondLength = parsePercentageOrLength(text, end);
			if (secondLength) {
				end = secondLength.end;

				return {
					start,
					end,
					value: {
						x: { align: "left", offset: firstLength.value },
						y: { align: "top", offset: secondLength.value },
					},
				};
			} else {
				return {
					start,
					end,
					value: {
						x: { align: "left", offset: firstLength.value },
						y: "center",
					},
				};
			}
		} else {
			return null;
		}
	}
}

const directionRegEx = /\s*to\s*(left|right|top|bottom)\s*(left|right|top|bottom)?\s*/gy;
const sideDirections = {
	top: (Math.PI * 0) / 2,
	right: (Math.PI * 1) / 2,
	bottom: (Math.PI * 2) / 2,
	left: (Math.PI * 3) / 2,
};
const cornerDirections = {
	top: {
		right: (Math.PI * 1) / 4,
		left: (Math.PI * 7) / 4,
	},
	right: {
		top: (Math.PI * 1) / 4,
		bottom: (Math.PI * 3) / 4,
	},
	bottom: {
		right: (Math.PI * 3) / 4,
		left: (Math.PI * 5) / 4,
	},
	left: {
		top: (Math.PI * 7) / 4,
		bottom: (Math.PI * 5) / 4,
	},
};
function parseDirection(text: string, start: number = 0): Parsed<Angle> {
	directionRegEx.lastIndex = start;
	const result = directionRegEx.exec(text);
	if (!result) {
		return null;
	}
	const end = directionRegEx.lastIndex;
	const firstDirection = result[1];
	if (result[2]) {
		const secondDirection = result[2];
		const value = cornerDirections[firstDirection][secondDirection];

		return value === undefined ? null : { start, end, value };
	} else {
		return { start, end, value: sideDirections[firstDirection] };
	}
}

const openingBracketRegEx = /\s*\(\s*/gy;
const closingBracketRegEx = /\s*\)\s*/gy;
const closingBracketOrCommaRegEx = /\s*(\)|,)\s*/gy;
function parseArgumentsList<T>(
	text: string,
	start: number,
	argument: (value: string, lastIndex: number, index: number) => Parsed<T>
): Parsed<Parsed<T>[]> {
	openingBracketRegEx.lastIndex = start;
	const openingBracket = openingBracketRegEx.exec(text);
	if (!openingBracket) {
		return null;
	}
	let end = openingBracketRegEx.lastIndex;
	const value: Parsed<T>[] = [];

	closingBracketRegEx.lastIndex = end;
	const closingBracket = closingBracketRegEx.exec(text);
	if (closingBracket) {
		return { start, end, value };
	}

	for (let index = 0; true; index++) {
		const arg = argument(text, end, index);
		if (!arg) {
			return null;
		}
		end = arg.end;
		value.push(arg);

		closingBracketOrCommaRegEx.lastIndex = end;
		const closingBracketOrComma = closingBracketOrCommaRegEx.exec(text);
		if (closingBracketOrComma) {
			end = closingBracketOrCommaRegEx.lastIndex;
			if (closingBracketOrComma[1] === ",") {
				continue;
			} else if (closingBracketOrComma[1] === ")") {
				return { start, end, value };
			}
		} else {
			return null;
		}
	}
}

export function parseColorStop(
	text: string,
	start: number = 0
): Parsed<ColorStop> {
	const color = parseColor(text, start);
	if (!color) {
		return null;
	}
	let end = color.end;
	const offset = parsePercentageOrLength(text, end);
	if (offset) {
		end = offset.end;

		return {
			start,
			end,
			value: { argb: color.value, offset: offset.value },
		};
	}

	return { start, end, value: { argb: color.value } };
}

const linearGradientStartRegEx = /\s*linear-gradient\s*/gy;
export function parseLinearGradient(
	text: string,
	start: number = 0
): Parsed<LinearGradient> {
	linearGradientStartRegEx.lastIndex = start;
	const lgs = linearGradientStartRegEx.exec(text);
	if (!lgs) {
		return null;
	}
	let end = linearGradientStartRegEx.lastIndex;

	let angle = Math.PI;
	const colors: ColorStop[] = [];

	const parsedArgs = parseArgumentsList<Angle | ColorStop>(
		text,
		end,
		(text, start, index) => {
			if (index === 0) {
				// First arg can be gradient direction
				const angleArg =
					parseAngle(text, start) || parseDirection(text, start);
				if (angleArg) {
					angle = angleArg.value;

					return angleArg;
				}
			}

			const colorStop = parseColorStop(text, start);
			if (colorStop) {
				colors.push(colorStop.value);

				return colorStop;
			}

			return null;
		}
	);
	if (!parsedArgs) {
		return null;
	}
	end = parsedArgs.end;

	return { start, end, value: { angle, colors } };
}

const slashRegEx = /\s*(\/)\s*/gy;
function parseSlash(text: string, start: number): Parsed<"/"> {
	slashRegEx.lastIndex = start;
	const slash = slashRegEx.exec(text);
	if (!slash) {
		return null;
	}
	const end = slashRegEx.lastIndex;

	return { start, end, value: "/" };
}

export function parseBackground(
	text: string,
	start: number = 0
): Parsed<Background> {
	const value: any = {};
	let end = start;
	while (end < text.length) {
		const keyword = parseKeyword(text, end);
		const color = parseColor(text, end, keyword);
		if (color) {
			value.color = color.value;
			end = color.end;
			continue;
		}
		const repeat = parseRepeat(text, end, keyword);
		if (repeat) {
			value.repeat = repeat.value;
			end = repeat.end;
			continue;
		}
		const position = parseBackgroundPosition(text, end, keyword);
		if (position) {
			position.value.text = text.substring(position.start, position.end);
			value.position = position.value;
			end = position.end;

			const slash = parseSlash(text, end);
			if (slash) {
				end = slash.end;
				const size = parseBackgroundSize(text, end);
				if (!size) {
					// Found / but no proper size following
					return null;
				}
				value.size = size.value;
				end = size.end;
			}
			continue;
		}

		const url = parseURL(text, end);
		if (url) {
			value.image = url.value;
			end = url.end;
			continue;
		}
		const gradient = parseLinearGradient(text, end);
		if (gradient) {
			value.image = gradient.value;
			end = gradient.end;
			continue;
		}

		return null;
	}

	return { start, end, value };
}

// Selectors

export type Combinator = "+" | "~" | ">" | " ";

export interface UniversalSelector {
	type: "*";
}
export interface TypeSelector {
	type: "";
	identifier: string;
}
export interface ClassSelector {
	type: ".";
	identifier: string;
}
export interface IdSelector {
	type: "#";
	identifier: string;
}
export interface PseudoClassSelector {
	type: ":";
	identifier: string;
}
export type AttributeSelectorTest =
	| "="
	| "^="
	| "$="
	| "*="
	| "="
	| "~="
	| "|=";
export interface AttributeSelector {
	type: "[]";
	property: string;
	test?: AttributeSelectorTest;
	value?: string;
}

export type SimpleSelector =
	| UniversalSelector
	| TypeSelector
	| ClassSelector
	| IdSelector
	| PseudoClassSelector
	| AttributeSelector;
export type SimpleSelectorSequence = SimpleSelector[];
export type SelectorCombinatorPair = [SimpleSelectorSequence, Combinator];
export type Selector = SelectorCombinatorPair[];

const universalSelectorRegEx = /\*/gy;
export function parseUniversalSelector(
	text: string,
	start: number = 0
): Parsed<UniversalSelector> {
	universalSelectorRegEx.lastIndex = start;
	const result = universalSelectorRegEx.exec(text);
	if (!result) {
		return null;
	}
	const end = universalSelectorRegEx.lastIndex;

	return { start, end, value: { type: "*" } };
}

const simpleIdentifierSelectorRegEx = /(#|\.|:|\b)((?:[\w_-]|\\.)(?:[\w\d_-]|\\.)*)/guy;
const unicodeEscapeRegEx = /\\([0-9a-fA-F]{1,5}\s|[0-9a-fA-F]{6})/g;
export function parseSimpleIdentifierSelector(
	text: string,
	start: number = 0
): Parsed<TypeSelector | ClassSelector | IdSelector | PseudoClassSelector> {
	simpleIdentifierSelectorRegEx.lastIndex = start;
	const result = simpleIdentifierSelectorRegEx.exec(
		text.replace(
			unicodeEscapeRegEx,
			(_, c) => "\\" + String.fromCodePoint(parseInt(c.trim(), 16))
		)
	);
	if (!result) {
		return null;
	}
	const end = simpleIdentifierSelectorRegEx.lastIndex;
	const type = <"#" | "." | ":" | "">result[1];
	const identifier: string = result[2].replace(/\\/g, "");
	const value = <
		TypeSelector | ClassSelector | IdSelector | PseudoClassSelector
	>{ type, identifier };

	return { start, end, value };
}

const attributeSelectorRegEx = /\[\s*([_-\w][_-\w\d]*)\s*(?:(=|\^=|\$=|\*=|\~=|\|=)\s*(?:([_-\w][_-\w\d]*)|"((?:[^\\"]|\\(?:"|n|r|f|\\|0-9a-f))*)"|'((?:[^\\']|\\(?:'|n|r|f|\\|0-9a-f))*)')\s*)?\]/gy;
export function parseAttributeSelector(
	text: string,
	start: number
): Parsed<AttributeSelector> {
	attributeSelectorRegEx.lastIndex = start;
	const result = attributeSelectorRegEx.exec(text);
	if (!result) {
		return null;
	}
	const end = attributeSelectorRegEx.lastIndex;
	const property = result[1];
	if (result[2]) {
		const test = <AttributeSelectorTest>result[2];
		const value = result[3] || result[4] || result[5];

		return { start, end, value: { type: "[]", property, test, value } };
	}

	return { start, end, value: { type: "[]", property } };
}

export function parseSimpleSelector(
	text: string,
	start: number = 0
): Parsed<SimpleSelector> {
	return (
		parseUniversalSelector(text, start) ||
		parseSimpleIdentifierSelector(text, start) ||
		parseAttributeSelector(text, start)
	);
}

export function parseSimpleSelectorSequence(
	text: string,
	start: number
): Parsed<SimpleSelector[]> {
	let simpleSelector = parseSimpleSelector(text, start);
	if (!simpleSelector) {
		return null;
	}
	let end = simpleSelector.end;
	let value = <SimpleSelectorSequence>[];
	while (simpleSelector) {
		value.push(simpleSelector.value);
		end = simpleSelector.end;
		simpleSelector = parseSimpleSelector(text, end);
	}

	return { start, end, value };
}

const combinatorRegEx = /\s*(\+|~|>)?\s*/gy;
export function parseCombinator(
	text: string,
	start: number = 0
): Parsed<Combinator> {
	combinatorRegEx.lastIndex = start;
	const result = combinatorRegEx.exec(text);
	if (!result) {
		return null;
	}
	const end = combinatorRegEx.lastIndex;
	const value = <Combinator>result[1] || " ";

	return { start, end, value };
}

const whiteSpaceRegEx = /\s*/gy;
export function parseSelector(
	text: string,
	start: number = 0
): Parsed<Selector> {
	let end = start;
	whiteSpaceRegEx.lastIndex = end;
	const leadingWhiteSpace = whiteSpaceRegEx.exec(text);
	if (leadingWhiteSpace) {
		end = whiteSpaceRegEx.lastIndex;
	}
	let value = <Selector>[];
	let combinator: Parsed<Combinator>;
	let expectSimpleSelector = true; // Must have at least one
	let pair: SelectorCombinatorPair;
	do {
		const simpleSelectorSequence = parseSimpleSelectorSequence(text, end);
		if (!simpleSelectorSequence) {
			if (expectSimpleSelector) {
				return null;
			} else {
				break;
			}
		}
		end = simpleSelectorSequence.end;
		if (combinator) {
			pair[1] = combinator.value;
		}
		pair = [simpleSelectorSequence.value, undefined];
		value.push(pair);

		combinator = parseCombinator(text, end);
		if (combinator) {
			end = combinator.end;
		}
		expectSimpleSelector = combinator && combinator.value !== " "; // Simple selector must follow non trailing white space combinator
	} while (combinator);

	return { start, end, value };
}

export interface Stylesheet {
	rules: Rule[];
}
export type Rule = QualifiedRule | AtRule;

export interface AtRule {
	type: "at-rule";
	name: string;
	prelude: InputToken[];
	block: SimpleBlock;
}
export interface QualifiedRule {
	type: "qualified-rule";
	prelude: InputToken[];
	block: SimpleBlock;
}

const whitespaceRegEx = /[\s\t\n\r\f]*/gmy;

const singleQuoteStringRegEx = /'((?:[^\n\r\f\']|\\(?:\$|\n|[0-9a-fA-F]{1,6}\s?))*)(:?'|$)/gmy; // Besides $n, parse escape
const doubleQuoteStringRegEx = /"((?:[^\n\r\f\"]|\\(?:\$|\n|[0-9a-fA-F]{1,6}\s?))*)(:?"|$)/gmy; // Besides $n, parse escape

const commentRegEx = /(\/\*(?:[^\*]|\*[^\/])*\*\/)/gmy;
const numberRegEx = /[\+\-]?(?:\d+\.\d+|\d+|\.\d+)(?:[eE][\+\-]?\d+)?/gmy;
const nameRegEx = /-?(?:(?:[a-zA-Z_]|[^\x00-\x7F]|\\(?:\$|\n|[0-9a-fA-F]{1,6}\s?))(?:[a-zA-Z_0-9\-]*|\\(?:\$|\n|[0-9a-fA-F]{1,6}\s?))*)/gmy;
// const nonQuoteURLRegEx = /(:?[^\)\s\t\n\r\f\'\"\(]|\\(?:\$|\n|[0-9a-fA-F]{1,6}\s?))*/gym; // TODO: non-printable code points omitted

type InputToken =
	| "("
	| ")"
	| "{"
	| "}"
	| "["
	| "]"
	| ":"
	| ";"
	| ","
	| " "
	| "^="
	| "|="
	| "$="
	| "*="
	| "~="
	| "<!--"
	| "-->"
	| undefined
	| /* <EOF-token> */ InputTokenObject
	| FunctionInputToken
	| FunctionToken
	| SimpleBlock
	| AtKeywordToken;

export const enum TokenObjectType {
	/**
	 * <string-token>
	 */
	string = 1,
	/**
	 * <delim-token>
	 */
	delim = 2,
	/**
	 * <number-token>
	 */
	number = 3,
	/**
	 * <percentage-token>
	 */
	percentage = 4,
	/**
	 * <dimension-token>
	 */
	dimension = 5,
	/**
	 * <ident-token>
	 */
	ident = 6,
	/**
	 * <url-token>
	 */
	url = 7,
	/**
	 * <function-token>
	 * This is a token indicating a function's leading: <ident-token>(
	 */
	functionToken = 8,
	/**
	 * <simple-block>
	 */
	simpleBlock = 9,
	/**
	 * <comment-token>
	 */
	comment = 10,
	/**
	 * <at-keyword-token>
	 */
	atKeyword = 11,
	/**
	 * <hash-token>
	 */
	hash = 12,
	/**
	 * <function>
	 * This is a complete consumed function: <function-token>([<component-value> [, <component-value>]*])")"
	 */
	function = 14,
}

interface InputTokenObject {
	type: TokenObjectType;
	text: string;
}

/**
 * This is a "<ident>(" token.
 */
interface FunctionInputToken extends InputTokenObject {
	name: string;
}

/**
 * This is a completely parsed function like "<ident>([component [, component]*])".
 */
interface FunctionToken extends FunctionInputToken {
	components: any[];
}

interface SimpleBlock extends InputTokenObject {
	associatedToken: InputToken;
	values: InputToken[];
}

interface AtKeywordToken extends InputTokenObject {}

/**
 * CSS parser following relatively close:
 * CSS Syntax Module Level 3
 * https://www.w3.org/TR/css-syntax-3/
 */
export class CSS3Parser {
	private nextInputCodePointIndex = 0;
	private reconsumedInputToken: InputToken;
	private topLevelFlag: boolean;

	constructor(private text: string) {}

	/**
	 * For testing purposes.
	 * This method allows us to run and assert the proper working of the tokenizer.
	 */
	tokenize(): InputToken[] {
		let tokens: InputToken[] = [];
		let inputToken: InputToken;
		do {
			inputToken = this.consumeAToken();
			tokens.push(inputToken);
		} while (inputToken);

		return tokens;
	}

	/**
	 * 4.3.1. Consume a token
	 * https://www.w3.org/TR/css-syntax-3/#consume-a-token
	 */
	private consumeAToken(): InputToken {
		if (this.reconsumedInputToken) {
			let result = this.reconsumedInputToken;
			this.reconsumedInputToken = null;

			return result;
		}
		const char = this.text[this.nextInputCodePointIndex];
		switch (char) {
			case '"':
				return this.consumeAStringToken();
			case "'":
				return this.consumeAStringToken();
			case "(":
			case ")":
			case ",":
			case ":":
			case ";":
			case "[":
			case "]":
			case "{":
			case "}":
				this.nextInputCodePointIndex++;

				return <any>char;
			case "#":
				return this.consumeAHashToken() || this.consumeADelimToken();
			case " ":
			case "\t":
			case "\n":
			case "\r":
			case "\f":
				return this.consumeAWhitespace();
			case "@":
				return this.consumeAtKeyword() || this.consumeADelimToken();
			// TODO: Only if this is valid escape, otherwise it is a parse error
			case "\\":
				return (
					this.consumeAnIdentLikeToken() || this.consumeADelimToken()
				);
			case "0":
			case "1":
			case "2":
			case "3":
			case "4":
			case "5":
			case "6":
			case "7":
			case "8":
			case "9":
				return this.consumeANumericToken();
			case "u":
			case "U":
				if (this.text[this.nextInputCodePointIndex + 1] === "+") {
					const thirdChar = this.text[
						this.nextInputCodePointIndex + 2
					];
					if (
						(thirdChar >= "0" && thirdChar <= "9") ||
						thirdChar === "?"
					) {
						// TODO: Handle unicode stuff such as U+002B
						throw new Error("Unicode tokens not supported!");
					}
				}

				return (
					this.consumeAnIdentLikeToken() || this.consumeADelimToken()
				);
			case "$":
			case "*":
			case "^":
			case "|":
			case "~":
				return this.consumeAMatchToken() || this.consumeADelimToken();
			case "-":
				return (
					this.consumeANumericToken() ||
					this.consumeAnIdentLikeToken() ||
					this.consumeCDC() ||
					this.consumeADelimToken()
				);
			case "+":
			case ".":
				return this.consumeANumericToken() || this.consumeADelimToken();
			case "/":
				return this.consumeAComment() || this.consumeADelimToken();
			case "<":
				return this.consumeCDO() || this.consumeADelimToken();
			case undefined:
				return undefined;
			default:
				return (
					this.consumeAnIdentLikeToken() || this.consumeADelimToken()
				);
		}
	}

	private consumeADelimToken(): InputToken {
		return {
			type: TokenObjectType.delim,
			text: this.text[this.nextInputCodePointIndex++],
		};
	}

	private consumeAWhitespace(): InputToken {
		whitespaceRegEx.lastIndex = this.nextInputCodePointIndex;
		whitespaceRegEx.exec(this.text);
		this.nextInputCodePointIndex = whitespaceRegEx.lastIndex;

		return " ";
	}

	private consumeAHashToken(): InputTokenObject {
		this.nextInputCodePointIndex++;
		let hashName = this.consumeAName();
		if (hashName) {
			return { type: TokenObjectType.hash, text: "#" + hashName.text };
		}
		this.nextInputCodePointIndex--;

		return null;
	}

	private consumeCDO(): "<!--" | null {
		if (this.text.substr(this.nextInputCodePointIndex, 4) === "<!--") {
			this.nextInputCodePointIndex += 4;

			return "<!--";
		}

		return null;
	}

	private consumeCDC(): "-->" | null {
		if (this.text.substr(this.nextInputCodePointIndex, 3) === "-->") {
			this.nextInputCodePointIndex += 3;

			return "-->";
		}

		return null;
	}

	private consumeAMatchToken(): "*=" | "$=" | "|=" | "~=" | "^=" | null {
		if (this.text[this.nextInputCodePointIndex + 1] === "=") {
			const token = this.text.substr(this.nextInputCodePointIndex, 2);
			this.nextInputCodePointIndex += 2;

			return <"*=" | "$=" | "|=" | "~=" | "^=">token;
		}

		return null;
	}

	/**
	 * 4.3.2. Consume a numeric token
	 * https://www.w3.org/TR/css-syntax-3/#consume-a-numeric-token
	 */
	private consumeANumericToken(): InputToken {
		numberRegEx.lastIndex = this.nextInputCodePointIndex;
		const result = numberRegEx.exec(this.text);
		if (!result) {
			return null;
		}
		this.nextInputCodePointIndex = numberRegEx.lastIndex;
		if (this.text[this.nextInputCodePointIndex] === "%") {
			return { type: TokenObjectType.percentage, text: result[0] }; // TODO: Push the actual number and unit here...
		}

		const name = this.consumeAName();
		if (name) {
			return {
				type: TokenObjectType.dimension,
				text: result[0] + name.text,
			};
		}

		return { type: TokenObjectType.number, text: result[0] };
	}

	/**
	 * 4.3.3. Consume an ident-like token
	 * https://www.w3.org/TR/css-syntax-3/#consume-an-ident-like-token
	 */
	private consumeAnIdentLikeToken(): InputToken {
		const name = this.consumeAName();
		if (!name) {
			return null;
		}
		if (this.text[this.nextInputCodePointIndex] === "(") {
			this.nextInputCodePointIndex++;
			if (name.text.toLowerCase() === "url") {
				return this.consumeAURLToken();
			}

			return <FunctionInputToken>{
				type: TokenObjectType.functionToken,
				name: name.text,
				text: name.text + "(",
			};
		}

		return name;
	}

	/**
	 * 4.3.4. Consume a string token
	 * https://www.w3.org/TR/css-syntax-3/#consume-a-string-token
	 */
	private consumeAStringToken(): InputTokenObject {
		const char = this.text[this.nextInputCodePointIndex];
		let result: RegExpExecArray;
		if (char === "'") {
			singleQuoteStringRegEx.lastIndex = this.nextInputCodePointIndex;
			result = singleQuoteStringRegEx.exec(this.text);
			if (!result) {
				return null;
			}
			this.nextInputCodePointIndex = singleQuoteStringRegEx.lastIndex;
		} else if (char === '"') {
			doubleQuoteStringRegEx.lastIndex = this.nextInputCodePointIndex;
			result = doubleQuoteStringRegEx.exec(this.text);
			if (!result) {
				return null;
			}
			this.nextInputCodePointIndex = doubleQuoteStringRegEx.lastIndex;
		}

		// TODO: Handle bad-string.
		// TODO: Perform string escaping.
		return { type: TokenObjectType.string, text: result[0] };
	}

	/**
	 * 4.3.5. Consume a url token
	 * https://www.w3.org/TR/css-syntax-3/#consume-a-url-token
	 */
	private consumeAURLToken(): InputToken {
		const start = this.nextInputCodePointIndex - 3 /* url */ - 1; /* ( */
		const urlToken: InputToken = {
			type: TokenObjectType.url,
			text: undefined,
		};
		this.consumeAWhitespace();
		if (this.nextInputCodePointIndex >= this.text.length) {
			return urlToken;
		}
		const nextInputCodePoint = this.text[this.nextInputCodePointIndex];
		if (nextInputCodePoint === '"' || nextInputCodePoint === "'") {
			const stringToken = this.consumeAStringToken();
			// TODO: Handle bad-string.
			// TODO: Set value instead.
			urlToken.text = stringToken.text;
			this.consumeAWhitespace();
			if (
				this.text[this.nextInputCodePointIndex] === ")" ||
				this.nextInputCodePointIndex >= this.text.length
			) {
				this.nextInputCodePointIndex++;
				const end = this.nextInputCodePointIndex;
				urlToken.text = this.text.substring(start, end);

				return urlToken;
			} else {
				// TODO: Handle bad-url.
				return null;
			}
		}

		while (this.nextInputCodePointIndex < this.text.length) {
			const char = this.text[this.nextInputCodePointIndex++];
			switch (char) {
				case ")":
					return urlToken;
				case " ":
				case "\t":
				case "\n":
				case "\r":
				case "\f":
					this.consumeAWhitespace();
					if (this.text[this.nextInputCodePointIndex] === ")") {
						this.nextInputCodePointIndex++;

						return urlToken;
					} else {
						// TODO: Bar url! Consume remnants.
						return null;
					}
				case '"':
				case "'":
					// TODO: Parse error! Bar url! Consume remnants.
					return null;
				case "\\":
					// TODO: Escape!
					throw new Error("Escaping not yet supported!");
				default:
					// TODO: Non-printable chars - error.
					urlToken.text += char;
			}
		}

		return urlToken;
	}

	/**
	 * 4.3.11. Consume a name
	 * https://www.w3.org/TR/css-syntax-3/#consume-a-name
	 */
	private consumeAName(): InputTokenObject {
		nameRegEx.lastIndex = this.nextInputCodePointIndex;
		const result = nameRegEx.exec(this.text);
		if (!result) {
			return null;
		}
		this.nextInputCodePointIndex = nameRegEx.lastIndex;

		// TODO: Perform string escaping.
		return { type: TokenObjectType.ident, text: result[0] };
	}

	private consumeAtKeyword(): InputTokenObject {
		this.nextInputCodePointIndex++;
		let name = this.consumeAName();
		if (name) {
			return { type: TokenObjectType.atKeyword, text: name.text };
		}
		this.nextInputCodePointIndex--;

		return null;
	}

	private consumeAComment(): InputToken {
		if (this.text[this.nextInputCodePointIndex + 1] === "*") {
			commentRegEx.lastIndex = this.nextInputCodePointIndex;
			const result = commentRegEx.exec(this.text);
			if (!result) {
				return null; // TODO: Handle <bad-comment>
			}
			this.nextInputCodePointIndex = commentRegEx.lastIndex;

			// The CSS spec tokenizer does not emmit comment tokens
			return this.consumeAToken();
		}

		return null;
	}

	private reconsumeTheCurrentInputToken(currentInputToken: InputToken) {
		this.reconsumedInputToken = currentInputToken;
	}

	/**
	 * 5.3.1. Parse a stylesheet
	 * https://www.w3.org/TR/css-syntax-3/#parse-a-stylesheet
	 */
	public parseAStylesheet(): Stylesheet {
		this.topLevelFlag = true;
		const stylesheet: Stylesheet = {
			rules: this.consumeAListOfRules(),
		};

		return stylesheet;
	}

	/**
	 * 5.4.1. Consume a list of rules
	 * https://www.w3.org/TR/css-syntax-3/#consume-a-list-of-rules
	 */
	public consumeAListOfRules(): Rule[] {
		const rules: Rule[] = [];
		let inputToken: InputToken;
		while ((inputToken = this.consumeAToken())) {
			switch (inputToken) {
				case " ":
					continue;
				case "<!--":
				case "-->":
					if (this.topLevelFlag) {
						continue;
					}
					this.reconsumeTheCurrentInputToken(inputToken);
					const atRule = this.consumeAnAtRule();
					if (atRule) {
						rules.push(atRule);
					}
					continue;
			}
			if (
				(<InputTokenObject>inputToken).type ===
				TokenObjectType.atKeyword
			) {
				this.reconsumeTheCurrentInputToken(inputToken);
				const atRule = this.consumeAnAtRule();
				if (atRule) {
					rules.push(atRule);
				}
				continue;
			}
			this.reconsumeTheCurrentInputToken(inputToken);
			const qualifiedRule = this.consumeAQualifiedRule();
			if (qualifiedRule) {
				rules.push(qualifiedRule);
			}
		}

		return rules;
	}

	/**
	 * 5.4.2. Consume an at-rule
	 * https://www.w3.org/TR/css-syntax-3/#consume-an-at-rule
	 */
	public consumeAnAtRule(): AtRule {
		let inputToken = this.consumeAToken();
		const atRule: AtRule = {
			type: "at-rule",
			name: (<AtKeywordToken>inputToken).text,
			prelude: [],
			block: undefined,
		};
		while ((inputToken = this.consumeAToken())) {
			if (inputToken === ";") {
				return atRule;
			} else if (inputToken === "{") {
				atRule.block = this.consumeASimpleBlock(inputToken);

				return atRule;
			} else if (
				(<InputTokenObject>inputToken).type ===
					TokenObjectType.simpleBlock &&
				(<SimpleBlock>inputToken).associatedToken === "{"
			) {
				atRule.block = <SimpleBlock>inputToken;

				return atRule;
			}
			this.reconsumeTheCurrentInputToken(inputToken);
			const component = this.consumeAComponentValue();
			if (component) {
				atRule.prelude.push(component);
			}
		}

		return atRule;
	}

	/**
	 * 5.4.3. Consume a qualified rule
	 * https://www.w3.org/TR/css-syntax-3/#consume-a-qualified-rule
	 */
	public consumeAQualifiedRule(): QualifiedRule {
		const qualifiedRule: QualifiedRule = {
			type: "qualified-rule",
			prelude: [],
			block: undefined,
		};
		let inputToken: InputToken;
		while ((inputToken = this.consumeAToken())) {
			if (inputToken === "{") {
				let block = this.consumeASimpleBlock(inputToken);
				qualifiedRule.block = block;

				return qualifiedRule;
			} else if (
				(<InputTokenObject>inputToken).type ===
				TokenObjectType.simpleBlock
			) {
				const simpleBlock: SimpleBlock = <SimpleBlock>inputToken;
				if (simpleBlock.associatedToken === "{") {
					qualifiedRule.block = simpleBlock;

					return qualifiedRule;
				}
			}
			this.reconsumeTheCurrentInputToken(inputToken);
			const componentValue = this.consumeAComponentValue();
			if (componentValue) {
				qualifiedRule.prelude.push(componentValue);
			}
		}

		// TODO: This is a parse error, log parse errors!
		return null;
	}

	/**
	 * 5.4.6. Consume a component value
	 * https://www.w3.org/TR/css-syntax-3/#consume-a-component-value
	 */
	private consumeAComponentValue(): InputToken {
		// const inputToken = this.consumeAToken();
		const inputToken = this.consumeAToken();
		switch (inputToken) {
			case "{":
			case "[":
			case "(":
				this.nextInputCodePointIndex++;

				return this.consumeASimpleBlock(inputToken);
		}
		if (
			typeof inputToken === "object" &&
			inputToken.type === TokenObjectType.functionToken
		) {
			return this.consumeAFunction((<FunctionInputToken>inputToken).name);
		}

		return inputToken;
	}

	/**
	 * 5.4.7. Consume a simple block
	 * https://www.w3.org/TR/css-syntax-3/#consume-a-simple-block
	 */
	private consumeASimpleBlock(associatedToken: InputToken): SimpleBlock {
		const endianToken: "]" | "}" | ")" = {
			"[": "]",
			"{": "}",
			"(": ")",
		}[<any>associatedToken];
		const start = this.nextInputCodePointIndex - 1;
		const block: SimpleBlock = {
			type: TokenObjectType.simpleBlock,
			text: undefined,
			associatedToken,
			values: [],
		};
		let nextInputToken;
		while ((nextInputToken = this.text[this.nextInputCodePointIndex])) {
			if (nextInputToken === endianToken) {
				this.nextInputCodePointIndex++;
				const end = this.nextInputCodePointIndex;
				block.text = this.text.substring(start, end);

				return block;
			}
			const value = this.consumeAComponentValue();
			if (value) {
				block.values.push(value);
			}
		}
		block.text = this.text.substring(start);

		return block;
	}

	/**
	 * 5.4.8. Consume a function
	 * https://www.w3.org/TR/css-syntax-3/#consume-a-function
	 */
	private consumeAFunction(name: string): InputToken {
		const start = this.nextInputCodePointIndex;
		const funcToken: FunctionToken = {
			type: TokenObjectType.function,
			name,
			text: undefined,
			components: [],
		};
		do {
			if (this.nextInputCodePointIndex >= this.text.length) {
				funcToken.text = name + "(" + this.text.substring(start);

				return funcToken;
			}
			const nextInputToken = this.text[this.nextInputCodePointIndex];
			switch (nextInputToken) {
				case ")":
					this.nextInputCodePointIndex++;
					const end = this.nextInputCodePointIndex;
					funcToken.text =
						name + "(" + this.text.substring(start, end);

					return funcToken;
				default:
					const component = this.consumeAComponentValue();
					if (component) {
						funcToken.components.push(component);
					}
				// TODO: Else we won't advance
			}
		} while (true);
	}
}

/**
 * Consume a CSS3 parsed stylesheet and convert the rules and selectors to the
 * NativeScript internal JSON representation.
 */
export class CSSNativeScript {
	public parseStylesheet(stylesheet: Stylesheet): any {
		return {
			type: "stylesheet",
			stylesheet: {
				rules: this.parseRules(stylesheet.rules),
			},
		};
	}

	private parseRules(rules: Rule[]): any {
		return rules.map((rule) => this.parseRule(rule));
	}

	private parseRule(rule: Rule): any {
		if (rule.type === "at-rule") {
			return this.parseAtRule(rule);
		} else if (rule.type === "qualified-rule") {
			return this.parseQualifiedRule(rule);
		}
	}

	private parseAtRule(rule: AtRule): any {
		if (rule.name === "import") {
			// TODO: We have used an "@improt { url('path somewhere'); }" at few places.
			return {
				import: rule.prelude
					.map((m) => (typeof m === "string" ? m : m.text))
					.join("")
					.trim(),
				type: "import",
			};
		}

		return;
	}

	private parseQualifiedRule(rule: QualifiedRule): any {
		return {
			type: "rule",
			selectors: this.preludeToSelectorsStringArray(rule.prelude),
			declarations: this.ruleBlockToDeclarations(rule.block.values),
		};
	}

	private ruleBlockToDeclarations(
		declarationsInputTokens: InputToken[]
	): { type: "declaration"; property: string; value: string }[] {
		// return <any>declarationsInputTokens;
		const declarations: {
			type: "declaration";
			property: string;
			value: string;
		}[] = [];

		let property = "";
		let value = "";
		let reading: "property" | "value" = "property";

		for (let i = 0; i < declarationsInputTokens.length; i++) {
			let inputToken = declarationsInputTokens[i];
			if (reading === "property") {
				if (inputToken === ":") {
					reading = "value";
				} else if (typeof inputToken === "string") {
					property += inputToken;
				} else {
					property += inputToken.text;
				}
			} else {
				if (inputToken === ";") {
					property = property.trim();
					value = value.trim();
					declarations.push({ type: "declaration", property, value });
					property = "";
					value = "";
					reading = "property";
				} else if (typeof inputToken === "string") {
					value += inputToken;
				} else {
					value += inputToken.text;
				}
			}
		}
		property = property.trim();
		value = value.trim();
		if (property || value) {
			declarations.push({ type: "declaration", property, value });
		}

		return declarations;
	}

	private preludeToSelectorsStringArray(prelude: InputToken[]): string[] {
		let selectors = [];
		let selector = "";
		prelude.forEach((inputToken) => {
			if (typeof inputToken === "string") {
				if (inputToken === ",") {
					if (selector) {
						selectors.push(selector.trim());
					}
					selector = "";
				} else {
					selector += inputToken;
				}
			} else if (typeof inputToken === "object") {
				selector += inputToken.text;
			}
		});
		if (selector) {
			selectors.push(selector.trim());
		}

		return selectors;
	}
}