teacher.value = ti;

learner.value = li;

btnCompare.onclick = () => {

console.clear();

const t = teacher.value;

const l = learner.value;

const opts = null; // LOCAL ONLY

const expectedMessages = []; // LOCAL ONLY

const teacherAst = new CssAst(t);

if (teacherAst.messages.length === 0) {

const learnerAst = new CssAst(l, teacherAst.options);

if (learnerAst.messages.length === 0) {

const comparer = new CssAstComparer(teacherAst.options);

comparer.compare(teacherAst, learnerAst, opts);

if (comparer.messages.length !== expectedMessages.length) {

console.log('Received failures:', comparer.messages);

info.textContent = comparer.messages[0].message; // LOCAL ONLY

}

else info.textContent = 'All good.'; // LOCAL ONLY

// for (let m of comparer.messages) {

// expect(m.message).not.toContain(AUTO_ADDED_SELECTOR);

// }

// expect(comparer.messages.length).toEqual(expectedMessages.length);

// for (let em in expectedMessages) {

// const msgType = Object.keys(expectedMessages[em]);

// const expectedMsg = expectedMessages[em][msgType];

// const actualMsg = comparer.messages[em];

// expect(actualMsg.type).toEqual(msgType[0]);

// expect(actualMsg.message).toEqual(expectedMsg);

// }

} else {

console.warn('WARNING: parsing the learner CSS has produced error messages which skips the comparison test:');

console.log('learnerAst.messages:', learnerAst.messages);

console.log('learner code:', l);

console.log('teacher code:', t);

}

}

};

// teacher.addEventListener('keydown', tabHandler, false);

// learner.addEventListener('keydown', tabHandler, false);

if (string !== undefined) {

return string.replace(/[\s]/gi, '');

}

return;

a = removeWhitespace(a);

b = removeWhitespace(b);

return a === b;

if (string !== undefined) {

return string.toLowerCase();

}

return string;

const match = /##[\s\w]+\((.*)\)\s*##/.exec(o);

if (match && match.length > 0) {

return _.map(

match[1].split(';'),

o => o.trim()

);

}

throw `Error parsing options '${o}'.`;

if (quotes.trim().length) valArray.forEach((v, i) => valArray[i] = `${quotes}${v}${quotes}`);

valArray.some((v, i) => {

if (valArray.length >= 3) {

valArray[i] += (i === valArray.length - 2 ? ` ${connector}` : ',');

} else {

valArray[i] += (i === 0 ? (valArray.length > 1 ? ` ${connector}` : '') : '');

}

return i === valArray.length - 2;

});

return valArray.join(' ');

if (string !== undefined) {

return string.replace(/(?:\/\*(?:[\s\S]*?)\*\/)|(?:^\s*\/\/(?:.*)$)|(\<![\-\-\s\w\>\/]*\>)/gm, '');

}

return;

if (string !== undefined) {

return string.replace(/[\s\n]+/g, ' ');

}

return;

if (/##\s*[a-zA-Z]+\s*\(\s*\)\s*##/.test(string)) throw new Error(`Please provide at least 1 match option for ${string}.`);

const comparison = _.find(comparisonMode, (c) => {

if (c.match) {

return !!(c.match.exec(string));

}

else if (c.type === 'default') {

return true;

}

});

return comparison;

const match = (new RegExp(`^${type}[(](.+)[)]$`, 'i')).exec(string.trim());

if (valueReg === undefined) {

return !!match;

}

if (match && match.length > 1) {

return !!(new RegExp(`^${valueReg}$`, 'i')).exec(match[1].trim());

}

return false;

const options = parseOptions(expt);

if (options.length === 1) {

const opt = options[0];

return defaultDeclarationMessage(expt, val);

} else {

return `${val} is incorrect. Try using ${grammafy(options.map((opt) => colorText[opt]))}.`;

}

let url = val;

if (lang === 'css') {

const wrap = /url[(].*[)]/;

if (!wrap.test(val)) {

return `${val} is incorrect. The syntax should be: url("link").`;

}

url = val.replace(/url[(](.*)[)]/, '$1').trim();

}

if (urlRegEx.test(url)) {

return '';

} else {

return `${val} doesn't contain a valid link. Please read the instructions again.`;

}

return n > 0 ?

n + (/1$/.test(n) && n != 11 ? 'st' : /2$/.test(n) && n != 12 ? 'nd' : /3$/.test(n) && n != 13 ? 'rd' : 'th') :

n;

return target ?

srcString.replace(target, target.replace(/[^\s]/g, ' ')) :

srcString.replace(/[^\s]/g, ' ');

if (n < 0 || end > srcArray.length) throw new Error(`${srcArray}[${n} to ${end}] can not be flattened due to invalid index range`);

const addToSrcArray = (e, i) => srcArray.splice(n + i, 0, e);

while (n < end) {

if (Array.isArray(srcArray[n])) {

const _arr = srcArray[n];

srcArray.splice(n, 1);

_arr.forEach(addToSrcArray);

}

n++;

}

return srcArray;

constructor(css, opts = null) {

// super();

this._messages = [];

this._options = {};

if (css === 'undefined') {

throw 'CSS parameter is required.';

} else {

let cssClone = removeComments(css).trim();

if (cssClone === '') {

this._ast = this._parseAst(cssClone);

this._tree = { atRules: [], rules: [] };

} else {

cssClone = this._autoComplete(cssClone, opts);

if (this._initialCheck(cssClone, opts)) {

this._ast = this._parseAst(cssClone);

}

}

}

}

/* auto-completes partial syntax for teacher code, applies same auto-completion to learner code */

_autoComplete(input, opts) {

let output;

if (opts === null) { // opts === null for teacher code, learner code otherwise

// input = collapseWhitespace(input);

this._options.declarationsOnly = !pRule.test(input) && !input.trim().startsWith('@');

if (this._options.declarationsOnly) {

output = this._wrapWithSelector(input.endsWith(';') ? input : `${input};`); // selector wrap and attach semi-colon

} else {

output = input.replace(/([^\s{};])(\s*)}/g, '$1;$2}'); // insert semi-colon before } that isn't preceded by ; or { or }

}

}

else if (opts.declarationsOnly) {

if (!pRule.test(input)) output = this._wrapWithSelector(input);

}

return (output ? output : input);

}

/* checks for errors that are difficult to identify with parser error messages */

_initialCheck(input /* space-collapsed for teacher code, untouched for learner code */, opts) {

let verdict = '', pass = true, inputClone = input, ruleCount = 0, tree = { atRules: [], rules: [] };

function latestNode() {

return lastOf([tree.rules, tree.atRules].filter(arr => arr.some(r => r.nth == ruleCount))[0]);

}

function buildInvalidCode(invalidCode = '') {

let ln, isNestedAtRule;

// error position can be retrieved before trim

inputClone = inputClone.trim();

// build invalid code

while (inputClone.length) {

invalidCode += inputClone[0];

if (inputClone[0] == '}') break;

inputClone = inputClone.slice(1);

}

// if tree is partially built

if (tree.rules.length + tree.atRules.length) {

ln = latestNode();

isNestedAtRule = ln.hasOwnProperty('rules') || ln.hasOwnProperty('keyframes');

}

const braces = invalidCode.match(/[{}]/g) || [];

if (braces.length % 2) {

// pattern to remove valid rules from invalid code

const p = /\s*([^@/;{}\s]+[^/;{}]*){\s*([^{}]*)}/g;

verdict = `Make sure the curly brackets are properly paired in ${invalidCode.replace(p, '').replace(/\s+/g, ' ')}.`;

}

else if (/^{[^{}]+}/.test(invalidCode)) {

verdict = isNestedAtRule ?

`There is a missing selector in the @${ln.type} at-rule.` :

`The ${rank(ln.nth + 1)} rule in your CSS has no selector.`;

}

else {

verdict = isNestedAtRule ?

`The @${ln.type} at-rule contains invalid code. Please read the instructions again.` :

ln ?

`Your CSS is incorrect after the ${rank(ln.nth)} rule. Please read the instructions again.` :

`${invalidCode} is incorrect. Please read the instructions again.`;

}

}

function pushAtRule(nested, data) {

if (nested) {

switch (data[1]) {

case 'media':

// further analyze identifiers

if (data[3]) {

// loop to find & remove trailing tag names

for (let i = 0; i < tags.length; i++) {

const p = new RegExp(`\\s*${tags[i]}(\\[[^\\[\\]]*\\])?\\s*$`, 'i');

if (p.test(data[3])) {

data[0] = data[0].replace(p, '');

data[3] = data[3].replace(p, '');

i = -1;

}

}

}

tree.atRules.push({ type: 'media', media: data[3] ? data[3].trim() : '', rules: [], nth: ruleCount += 1 });

break;

case 'keyframes':

tree.atRules.push({ type: 'keyframes', name: data[3] ? data[3].trim() : '', vendor: '', keyframes: [], nth: ruleCount += 1 });

break;

default: throw new Error(`Expectation for the @${data[1]} at-rule is not yet implemented.`);

}

} else {

tree.atRules.push({ type: data[1], value: data[3], nth: ruleCount += 1 });

}

}

function pushNestedRule(type, data) {

switch (type) {

case 'media':

if (checkRule(data, true)) {

lastOf(tree.atRules).rules.push({ type: 'rule', selectors: data[1], declarations: data[2] });

}

break;

case 'keyframes':

if (/\s/.test(data[1])) {

verdict = `${data[1]} is incorrect. No space is allowed.`;

}

else if (!/^[\d]+(\.[\d]+)?%$/.test(data[1])) {

verdict = `${data[1]} is not a valid selector for the @keyframes at-rule. Use a number followed by the % symbol.`;

} else {

lastOf(tree.atRules).keyframes.push({ type: 'keyframe', values: data[1], declarations: data[2] });

}

break;

}

if (data[2] && !verdict) {

const

r = lastOf(tree.atRules).rules || lastOf(tree.atRules).keyframes,

d = checkDeclaration(lastOf(r));

if (d) checkProperty(d) && checkValue(d);

}

return !verdict;

}

function parse() {

const foundAndMatched = (p, i) => {

let match = inputClone.match(p);

if (match && pass) {

// invalidate matched string containing white spaces only

match = match.map(m => m ? m.trim() || m : m);

pass = i ? checkAtRule(match, i == 1) : checkRule(match);

}

return match && pass;

};

while (inputClone.trim().length && !verdict) {

pass = [pRule, pNestedAtRule, pAtRule].some(foundAndMatched);

if (verdict) break;

if (!pass) buildInvalidCode();

}

}

function checkAtRule(match, nested) {

// remove "@[type] [identifier]" from input string

inputClone = toSpace(inputClone, match[0]);

// @media or @keyframes etc...

if (nested) {

const

ob = inputClone.match(/^\s*\{/), // opening brace

checker = [

{

error: /[A-Z]/.test(match[1]),

feedback: `@${match[1]} is incorrect. Make sure all letters are lowercase.`,

},

{

error: !match[3],

feedback: `The @${match[1]} at-rule needs a${match[1] == 'media' ? 'n identifier' : ' name'}.`,

},

{

error: match[1] == 'keyframes' && /\s/.test(match[3]),

feedback: `${match[3]} is incorrect. Spaces are not allowed in the name of the @keyframes at-rule.`,

},

{

error: !match[2],

feedback: `There should be a space between @${match[1]} and ${String(match[3]).trim()}.`,

}];

if (ob) {

if (checker.every(c => { return !(verdict = c.error ? c.feedback : ''); })) {

pushAtRule(nested, match);

inputClone = toSpace(inputClone, ob[0]);

// remove valid rules

while (pRule.test(inputClone)) {

const m = inputClone.match(pRule).map(_m => _m.trim());

pushNestedRule(match[1], m);

inputClone = toSpace(inputClone, m[0]);

if (verdict) return null;

}

const cb = inputClone.match(/^\s*\}/); // closing brace

if (cb) {

inputClone = toSpace(inputClone, cb[0]);

}

else if (!inputClone.trim().length || pAtRule.test(inputClone)) {

verdict = `Make sure curly brackets are properly paired for the ${match[0].trim()} at-rule.`;

} else {

buildInvalidCode();

}

}

} else {

verdict = `The ${match[0].trim()} at-rule should be followed by the "{" symbol.`;

}

}

// @import, @charset or @namespace

else {

const checker = [

() => { return match[1] ? '' : 'Please write the type of at-rule after the @ symbol.'; },

() => {

const _match = match[1].match(/^(charset|import|namespace)([^\s\n]*)/i);

if (!_match) {

return `@${match[1]} is not a valid type of at-rule.`;

}

else if (_match[2]) {

return `There should be a space between @${_match[1]} and ${_match[2]}.`;

}

},

() => { return /[A-Z]/.test(match[1]) ? `@${match[1]} is incorrect. Make sure all letters are lowercase.` : ''; },

() => {

const word = match[1] == 'import' ? 'link' : match[1] == 'charset' ? 'character code' : 'name';

return match[3] ? '' : `The @${match[1]} at-rule needs a ${word}.`;

},

() => { return match[4] ? '' : `Don't forget the semi-colon(;) after ${match[3]}`; },

];

if (checker.every(check => !(verdict = check()))) {

pushAtRule(nested, match);

// disguise as declaration

checkValue([{ property: '@import', value: match[3] }]);

}

}

return !verdict;

}

function checkRule(match, nested) {

const

sel = flatten(match[1].split(/,|>|\+|~/).map(s => s.trim()).map(s => s.split(/\s+/))),

pTags = tags.map(t => new RegExp(`^${t}(::?[a-z-()]+)?$`, 'i')),

checker = [

() => {

let feedback = '';

// every selector must be a valid HTML tag or begin with . # or *

sel.every(s => {

s = s.replace(/(\[[^[\]]+\])$/, '');

if (pTags.some(t => t.test(s)) || /^[.#*]/.test(s)) {

return true;

} else {

// remove 2nd ${...} after in-line error message is implemented

feedback = `${s} ${sel.length > 1 ? `in ${match[1]} ` : ''}is not a valid tag name.`;

return;

}

});

return feedback;

},

() => {

let feedback = '';

// any selector begins with . or # followed by a non-alphabet character

sel.some(s => {

if (/^[.#]/.test(s) && !/[a-z]/i.test(s[1])) {

// remove 2nd ${...} after in-line error message is implemented

feedback = `${s} ${sel.length > 1 ? `in ${match[1]} ` : ''}is incorrect. Selector must begin with a letter.`;

return true;

}

return;

});

return feedback;

},

];

if (checker.every(check => !(verdict = check())) && !nested) {

tree.rules.push({ type: 'rule', selector: match[1], declarations: match[2], nth: ruleCount += 1 });

inputClone = toSpace(inputClone, match[0]);

if (match[2]) {

const d = checkDeclaration();

if (d) checkProperty(d) && checkValue(d);

}

}

return !verdict;

}

function checkDeclaration(target = lastOf(tree.rules)) {

const p = /[^:]+\s*:\s*[^;]+\s*;/i; // fixed declaration pattern