@markuplint/types 1.0.0-dev.20211213.0

package/src/css-syntax.spec.ts

@@ -0,0 +1,167 @@
+import type { CustomCssSyntax } from './types';
+
+import { cssSyntaxMatch } from './css-syntax';
+
+test('CSS Standard', () => {
+	expect(cssSyntaxMatch('10px', '<length>').matched).toBe(true);
+	expect(cssSyntaxMatch('one-pixel', '<length>').matched).toBe(false);
+	expect(cssSyntaxMatch('(prefers-color-scheme: dark)', '<media-query-list>').matched).toBe(true);
+});
+
+test('Extends', () => {
+	const sourceSizeList: CustomCssSyntax = {
+		ref: 'https://html.spec.whatwg.org/multipage/images.html#sizes-attributes',
+		syntax: {
+			apply: '<source-size-list>',
+			def: {
+				'source-size-list': '[ <source-size># , ]? <source-size-value>',
+				'source-size': '<media-condition> <source-size-value>',
+				'source-size-value': '<length>',
+			},
+		},
+	};
+	expect(cssSyntaxMatch('50vw', sourceSizeList).matched).toBe(true);
+	expect(cssSyntaxMatch('(max-width: 600px) 200px, 50vw', sourceSizeList).matched).toBe(true);
+	expect(cssSyntaxMatch('print 300vw', sourceSizeList).matched).toBe(false);
+	expect(cssSyntaxMatch('(max-width: 600px) 200px', sourceSizeList).matched).toBe(false);
+	expect(
+		cssSyntaxMatch('(max-width: 600px) 200px', {
+			...sourceSizeList,
+			syntax: {
+				...sourceSizeList.syntax,
+				apply: '<source-size>',
+			},
+		}).matched,
+	).toBe(true);
+
+	const keyTimes: CustomCssSyntax = {
+		ref: 'https://svgwg.org/specs/animations/#KeyTimesAttribute',
+		syntax: {
+			apply: '<key-times>',
+			def: {
+				'key-times': '<number> [; <number>]* [;]?',
+			},
+		},
+	};
+	expect(cssSyntaxMatch('20; 20; 30', keyTimes).matched).toBe(true);
+	expect(cssSyntaxMatch('20; 20; 30;', keyTimes).matched).toBe(true);
+	expect(cssSyntaxMatch('20; 20; abc;', keyTimes).matched).toBe(false);
+	expect(cssSyntaxMatch('20; 20; ;', keyTimes).matched).toBe(false);
+
+	const SVGViewBox: CustomCssSyntax = {
+		ref: 'https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute',
+		syntax: {
+			apply: '<view-box>',
+			def: {
+				'view-box': '<min-x> [,]? <min-y> [,]? <width> [,]? <height>',
+				'min-x': '<number>',
+				'min-y': '<number>',
+				width: '<number>',
+				height: '<number>',
+			},
+		},
+	};
+	expect(cssSyntaxMatch('0 0 30 10', SVGViewBox).matched).toBe(true);
+	expect(cssSyntaxMatch('0 0, 30, 10', SVGViewBox).matched).toBe(true);
+	expect(cssSyntaxMatch('0 0, 30', SVGViewBox).matched).toBe(false);
+
+	const percentageList: CustomCssSyntax = {
+		ref: 'https://developer.mozilla.org/en-US/docs/Web/SVG/Content_type#percentage',
+		syntax: {
+			apply: '<percentage-list>',
+			def: {
+				'percentage-list': '[ <number> [,]? ]* <number>',
+			},
+		},
+	};
+	expect(cssSyntaxMatch('0 0 30 10', percentageList).matched).toBe(true);
+	expect(cssSyntaxMatch('0, 0, 30 10', percentageList).matched).toBe(true);
+	expect(cssSyntaxMatch('0', percentageList).matched).toBe(true);
+	expect(cssSyntaxMatch('', percentageList).matched).toBe(false);
+
+	const custom: CustomCssSyntax = {
+		ref: 'n/a',
+		syntax: {
+			apply: '<custom>',
+			def: {
+				custom: '0 | 1 | .',
+			},
+		},
+	};
+	expect(cssSyntaxMatch('0', custom).matched).toBe(true);
+	expect(cssSyntaxMatch('1', custom).matched).toBe(true);
+	expect(cssSyntaxMatch('.', custom).matched).toBe(true);
+	expect(cssSyntaxMatch('2', custom).matched).toBe(false);
+	expect(cssSyntaxMatch(':', custom).matched).toBe(false);
+});
+
+test('custom-type-checking', () => {
+	const custom: CustomCssSyntax = {
+		ref: 'n/a',
+		caseSensitive: true,
+		syntax: {
+			apply: '<custom>',
+			def: {
+				custom: '<custom-type>',
+				'custom-type': token => {
+					if (!token) {
+						return 0;
+					}
+					return token.value === '1' ? 1 : 0;
+				},
+			},
+		},
+	};
+	expect(cssSyntaxMatch('1', custom).matched).toBe(true);
+	expect(cssSyntaxMatch('0', custom).matched).toBe(false);
+});
+
+test('case-sensivite', () => {
+	const custom: CustomCssSyntax = {
+		ref: 'n/a',
+		caseSensitive: true,
+		syntax: {
+			apply: '<custom>',
+			def: {
+				custom: 'CaSeS [a | B | aBc]',
+			},
+		},
+	};
+	expect(cssSyntaxMatch('CaSeS a', custom).matched).toBe(true);
+	expect(cssSyntaxMatch('CaSeS B', custom).matched).toBe(true);
+	expect(cssSyntaxMatch('CaSeS aBc', custom).matched).toBe(true);
+	expect(cssSyntaxMatch('CaSeS A', custom)).toStrictEqual({
+		column: 7,
+		line: 1,
+		matched: false,
+		length: 1,
+		offset: 6,
+		partName: 'value',
+		raw: 'A',
+		reason: 'syntax-error',
+		ref: 'n/a',
+		expects: [
+			{
+				type: 'syntax',
+				value: 'CaSeS [ a | B | aBc ]',
+			},
+		],
+	});
+	expect(cssSyntaxMatch('CaSeS abc', custom)).toStrictEqual({
+		column: 7,
+		line: 1,
+		matched: false,
+		length: 3,
+		offset: 6,
+		partName: 'value',
+		raw: 'abc',
+		reason: 'syntax-error',
+		ref: 'n/a',
+		expects: [
+			{
+				type: 'syntax',
+				value: 'CaSeS [ a | B | aBc ]',
+			},
+		],
+	});
+});

package/src/css-syntax.ts

@@ -0,0 +1,177 @@
+import type { CustomCssSyntax, CssSyntaxTokenizer, CSSSyntaxToken, GetNextToken, Result, CssSyntax } from './types';
+
+// @ts-ignore
+import csstree from 'css-tree';
+// @ts-ignore
+import { SyntaxMatchError } from 'css-tree/lib/lexer/error.js';
+// @ts-ignore
+import { matchAsTree } from 'css-tree/lib/lexer/match.js';
+// @ts-ignore
+import prepareTokens from 'css-tree/lib/lexer/prepare-tokens.js';
+
+import { log } from './debug';
+import { tokenizers } from './defs';
+import { matched } from './match-result';
+
+// eslint-disable-next-line no-redeclare
+interface SyntaxMatchError {
+	message: string;
+	rawMessage: 'Mismatch';
+	syntax: string;
+	css: string;
+	mismatchOffset: number;
+	mismatchLength: number;
+	offset: number;
+	line: number;
+	column: number;
+	loc: {
+		source: '<unknown>';
+		start: { offset: number; line: number; column: number };
+		end: { offset: number; line: number; column: number };
+	};
+}
+
+export function cssSyntaxMatch(value: string, type: CssSyntax | CustomCssSyntax): Result {
+	const origin = value;
+	let defName: `<${string}>`;
+	const typesExtended: Record<string, string> = {};
+	const typesCheckers: Record<string, CssSyntaxTokenizer> = {};
+	let propsExtended: Record<string, string>;
+	let ref: string | undefined = undefined;
+	let caseSensitive = false;
+	let ebnf: Record<string, string | string[]> | null = null;
+
+	if (typeof type === 'string') {
+		defName = type;
+		propsExtended = {};
+	} else {
+		defName = type.syntax.apply;
+		ebnf = type.syntax.ebnf || null;
+
+		if (ebnf) {
+			// Work in progress
+			return matched();
+		}
+
+		const types = {
+			...tokenizers,
+			...type.syntax.def,
+		};
+		Object.keys(types).forEach(key => {
+			const valueOrChecker = types[key];
+			if (typeof valueOrChecker === 'string') {
+				typesExtended[key] = valueOrChecker;
+			} else {
+				typesCheckers[key] = valueOrChecker;
+			}
+		});
+		propsExtended = { ...type.syntax.properties };
+		if (type.caseSensitive) {
+			caseSensitive = true;
+			Object.keys(typesExtended).forEach(key => eachMimicCases(key, typesExtended));
+			Object.keys(propsExtended).forEach(key => eachMimicCases(key, propsExtended));
+			value = mimicCases(value);
+		}
+		ref = type.ref;
+	}
+
+	// @ts-ignore
+	const lexer = csstree.fork({
+		types: typesExtended,
+		properties: propsExtended,
+	}).lexer;
+
+	Object.keys(typesCheckers).forEach(key => {
+		const checker = typesCheckers[key];
+		lexer.addType_(key, (token: CSSSyntaxToken, getNextToken: GetNextToken) =>
+			checker(token, getNextToken, cssSyntaxMatch),
+		);
+	});
+
+	const { isProp, name, matcher } = defToMatcher(lexer, defName);
+	const refParam = isProp ? 'Property' : 'Type';
+	ref = ref || `https://csstree.github.io/docs/syntax/#${refParam}:${name}`;
+
+	// eslint-disable-next-line no-console
+	const _w = console.warn;
+	// eslint-disable-next-line no-console
+	console.warn = warn => log('WARNING: %s (by %s => %s)', warn, value, type);
+
+	const tokens = prepareTokens(value, lexer.syntax);
+	const result = matchAsTree(tokens, matcher.match, lexer);
+
+	if (caseSensitive) {
+		if (result.tokens && Array.isArray(result.tokens)) {
+			let reducer = 0;
+			result.tokens = result.tokens.map((token: CSSSyntaxToken) => {
+				const value = token.value;
+				const originValue = deMimicCases(value || '');
+				const isMimiced = value !== originValue;
+				reducer += isMimiced ? 'mimiccases------mimiccases'.length : 0;
+				token.value = originValue;
+				token.balance = token.balance - reducer;
+				return token;
+			});
+		}
+	}
+
+	log('css-tree/result: %O', result);
+	// eslint-disable-next-line no-console
+	console.warn = _w;
+
+	if (result.match) {
+		log('css-tree/result.match: %s', JSON.stringify(result.match, null, 2));
+		return matched();
+	}
+
+	const error: SyntaxMatchError = new SyntaxMatchError(result.reason, matcher.syntax, value, result);
+
+	if (caseSensitive) {
+		error.message = deMimicCases(error.message);
+		error.syntax = deMimicCases(error.syntax);
+	}
+
+	log('css-tree/SyntaxMatchError: %O', error);
+
+	return {
+		matched: false,
+		ref,
+		raw: origin.slice(error.mismatchOffset, error.mismatchOffset + error.mismatchLength),
+		offset: error.mismatchOffset,
+		length: error.mismatchLength,
+		line: error.line,
+		column: error.column,
+		expects: [
+			{
+				type: 'syntax',
+				value: error.syntax,
+			},
+		],
+		partName: error.mismatchOffset === 0 ? undefined : 'value',
+		reason: 'syntax-error',
+	};
+}
+
+function defToMatcher(lexer: any, def: `<${string}>`) {
+	const isProp = def.search("<'") === 0;
+	const name = def.replace(/^<'?|'?>$/g, '');
+	const matcher = isProp ? lexer.properties[name] : lexer.types[name];
+	return {
+		isProp,
+		name,
+		matcher,
+	};
+}
+
+function eachMimicCases(key: string, obj: Record<string, string>) {
+	const value = obj[key];
+	obj[key] = mimicCases(value);
+}
+
+function mimicCases(value: string) {
+	return value.replace(/[A-Z]/g, $0 => `mimiccases---${$0}---mimiccases`);
+}
+
+function deMimicCases(value: string) {
+	return value.replace(/mimiccases---([A-Z])---mimiccases/g, (_, $1) => $1);
+}

package/src/debug.ts

@@ -0,0 +1,3 @@
+import debug from 'debug';
+
+export const log = debug('@markuplint/types');