|
|
- var tokenizer = require('../tokenizer');
- var isIdentifierStart = tokenizer.isIdentifierStart;
- var isHexDigit = tokenizer.isHexDigit;
- var isDigit = tokenizer.isDigit;
- var cmpStr = tokenizer.cmpStr;
- var consumeNumber = tokenizer.consumeNumber;
- var TYPE = tokenizer.TYPE;
- var anPlusB = require('./generic-an-plus-b');
- var urange = require('./generic-urange');
-
- var cssWideKeywords = ['unset', 'initial', 'inherit'];
- var calcFunctionNames = ['calc(', '-moz-calc(', '-webkit-calc('];
-
- // https://www.w3.org/TR/css-values-3/#lengths
- var LENGTH = {
- // absolute length units
- 'px': true,
- 'mm': true,
- 'cm': true,
- 'in': true,
- 'pt': true,
- 'pc': true,
- 'q': true,
-
- // relative length units
- 'em': true,
- 'ex': true,
- 'ch': true,
- 'rem': true,
-
- // viewport-percentage lengths
- 'vh': true,
- 'vw': true,
- 'vmin': true,
- 'vmax': true,
- 'vm': true
- };
-
- var ANGLE = {
- 'deg': true,
- 'grad': true,
- 'rad': true,
- 'turn': true
- };
-
- var TIME = {
- 's': true,
- 'ms': true
- };
-
- var FREQUENCY = {
- 'hz': true,
- 'khz': true
- };
-
- // https://www.w3.org/TR/css-values-3/#resolution (https://drafts.csswg.org/css-values/#resolution)
- var RESOLUTION = {
- 'dpi': true,
- 'dpcm': true,
- 'dppx': true,
- 'x': true // https://github.com/w3c/csswg-drafts/issues/461
- };
-
- // https://drafts.csswg.org/css-grid/#fr-unit
- var FLEX = {
- 'fr': true
- };
-
- // https://www.w3.org/TR/css3-speech/#mixing-props-voice-volume
- var DECIBEL = {
- 'db': true
- };
-
- // https://www.w3.org/TR/css3-speech/#voice-props-voice-pitch
- var SEMITONES = {
- 'st': true
- };
-
- // safe char code getter
- function charCode(str, index) {
- return index < str.length ? str.charCodeAt(index) : 0;
- }
-
- function eqStr(actual, expected) {
- return cmpStr(actual, 0, actual.length, expected);
- }
-
- function eqStrAny(actual, expected) {
- for (var i = 0; i < expected.length; i++) {
- if (eqStr(actual, expected[i])) {
- return true;
- }
- }
-
- return false;
- }
-
- // IE postfix hack, i.e. 123\0 or 123px\9
- function isPostfixIeHack(str, offset) {
- if (offset !== str.length - 2) {
- return false;
- }
-
- return (
- str.charCodeAt(offset) === 0x005C && // U+005C REVERSE SOLIDUS (\)
- isDigit(str.charCodeAt(offset + 1))
- );
- }
-
- function outOfRange(opts, value, numEnd) {
- if (opts && opts.type === 'Range') {
- var num = Number(
- numEnd !== undefined && numEnd !== value.length
- ? value.substr(0, numEnd)
- : value
- );
-
- if (isNaN(num)) {
- return true;
- }
-
- if (opts.min !== null && num < opts.min) {
- return true;
- }
-
- if (opts.max !== null && num > opts.max) {
- return true;
- }
- }
-
- return false;
- }
-
- function consumeFunction(token, getNextToken) {
- var startIdx = token.index;
- var length = 0;
-
- // balanced token consuming
- do {
- length++;
-
- if (token.balance <= startIdx) {
- break;
- }
- } while (token = getNextToken(length));
-
- return length;
- }
-
- // TODO: implement
- // can be used wherever <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> values are allowed
- // https://drafts.csswg.org/css-values/#calc-notation
- function calc(next) {
- return function(token, getNextToken, opts) {
- if (token === null) {
- return 0;
- }
-
- if (token.type === TYPE.Function && eqStrAny(token.value, calcFunctionNames)) {
- return consumeFunction(token, getNextToken);
- }
-
- return next(token, getNextToken, opts);
- };
- }
-
- function tokenType(expectedTokenType) {
- return function(token) {
- if (token === null || token.type !== expectedTokenType) {
- return 0;
- }
-
- return 1;
- };
- }
-
- function func(name) {
- name = name + '(';
-
- return function(token, getNextToken) {
- if (token !== null && eqStr(token.value, name)) {
- return consumeFunction(token, getNextToken);
- }
-
- return 0;
- };
- }
-
- // =========================
- // Complex types
- //
-
- // https://drafts.csswg.org/css-values-4/#custom-idents
- // 4.2. Author-defined Identifiers: the <custom-ident> type
- // Some properties accept arbitrary author-defined identifiers as a component value.
- // This generic data type is denoted by <custom-ident>, and represents any valid CSS identifier
- // that would not be misinterpreted as a pre-defined keyword in that property’s value definition.
- //
- // See also: https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident
- function customIdent(token) {
- if (token === null || token.type !== TYPE.Ident) {
- return 0;
- }
-
- var name = token.value.toLowerCase();
-
- // The CSS-wide keywords are not valid <custom-ident>s
- if (eqStrAny(name, cssWideKeywords)) {
- return 0;
- }
-
- // The default keyword is reserved and is also not a valid <custom-ident>
- if (eqStr(name, 'default')) {
- return 0;
- }
-
- // TODO: ignore property specific keywords (as described https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident)
- // Specifications using <custom-ident> must specify clearly what other keywords
- // are excluded from <custom-ident>, if any—for example by saying that any pre-defined keywords
- // in that property’s value definition are excluded. Excluded keywords are excluded
- // in all ASCII case permutations.
-
- return 1;
- }
-
- // https://drafts.csswg.org/css-variables/#typedef-custom-property-name
- // A custom property is any property whose name starts with two dashes (U+002D HYPHEN-MINUS), like --foo.
- // The <custom-property-name> production corresponds to this: it’s defined as any valid identifier
- // that starts with two dashes, except -- itself, which is reserved for future use by CSS.
- // NOTE: Current implementation treat `--` as a valid name since most (all?) major browsers treat it as valid.
- function customPropertyName(token) {
- // ... defined as any valid identifier
- if (token === null || token.type !== TYPE.Ident) {
- return 0;
- }
-
- // ... that starts with two dashes (U+002D HYPHEN-MINUS)
- if (charCode(token.value, 0) !== 0x002D || charCode(token.value, 1) !== 0x002D) {
- return 0;
- }
-
- return 1;
- }
-
- // https://drafts.csswg.org/css-color-4/#hex-notation
- // The syntax of a <hex-color> is a <hash-token> token whose value consists of 3, 4, 6, or 8 hexadecimal digits.
- // In other words, a hex color is written as a hash character, "#", followed by some number of digits 0-9 or
- // letters a-f (the case of the letters doesn’t matter - #00ff00 is identical to #00FF00).
- function hexColor(token) {
- if (token === null || token.type !== TYPE.Hash) {
- return 0;
- }
-
- var length = token.value.length;
-
- // valid values (length): #rgb (4), #rgba (5), #rrggbb (7), #rrggbbaa (9)
- if (length !== 4 && length !== 5 && length !== 7 && length !== 9) {
- return 0;
- }
-
- for (var i = 1; i < length; i++) {
- if (!isHexDigit(token.value.charCodeAt(i))) {
- return 0;
- }
- }
-
- return 1;
- }
-
- function idSelector(token) {
- if (token === null || token.type !== TYPE.Hash) {
- return 0;
- }
-
- if (!isIdentifierStart(charCode(token.value, 1), charCode(token.value, 2), charCode(token.value, 3))) {
- return 0;
- }
-
- return 1;
- }
-
- // https://drafts.csswg.org/css-syntax/#any-value
- // It represents the entirety of what a valid declaration can have as its value.
- function declarationValue(token, getNextToken) {
- if (!token) {
- return 0;
- }
-
- var length = 0;
- var level = 0;
- var startIdx = token.index;
-
- // The <declaration-value> production matches any sequence of one or more tokens,
- // so long as the sequence ...
- scan:
- do {
- switch (token.type) {
- // ... does not contain <bad-string-token>, <bad-url-token>,
- case TYPE.BadString:
- case TYPE.BadUrl:
- break scan;
-
- // ... unmatched <)-token>, <]-token>, or <}-token>,
- case TYPE.RightCurlyBracket:
- case TYPE.RightParenthesis:
- case TYPE.RightSquareBracket:
- if (token.balance > token.index || token.balance < startIdx) {
- break scan;
- }
-
- level--;
- break;
-
- // ... or top-level <semicolon-token> tokens
- case TYPE.Semicolon:
- if (level === 0) {
- break scan;
- }
-
- break;
-
- // ... or <delim-token> tokens with a value of "!"
- case TYPE.Delim:
- if (token.value === '!' && level === 0) {
- break scan;
- }
-
- break;
-
- case TYPE.Function:
- case TYPE.LeftParenthesis:
- case TYPE.LeftSquareBracket:
- case TYPE.LeftCurlyBracket:
- level++;
- break;
- }
-
- length++;
-
- // until balance closing
- if (token.balance <= startIdx) {
- break;
- }
- } while (token = getNextToken(length));
-
- return length;
- }
-
- // https://drafts.csswg.org/css-syntax/#any-value
- // The <any-value> production is identical to <declaration-value>, but also
- // allows top-level <semicolon-token> tokens and <delim-token> tokens
- // with a value of "!". It represents the entirety of what valid CSS can be in any context.
- function anyValue(token, getNextToken) {
- if (!token) {
- return 0;
- }
-
- var startIdx = token.index;
- var length = 0;
-
- // The <any-value> production matches any sequence of one or more tokens,
- // so long as the sequence ...
- scan:
- do {
- switch (token.type) {
- // ... does not contain <bad-string-token>, <bad-url-token>,
- case TYPE.BadString:
- case TYPE.BadUrl:
- break scan;
-
- // ... unmatched <)-token>, <]-token>, or <}-token>,
- case TYPE.RightCurlyBracket:
- case TYPE.RightParenthesis:
- case TYPE.RightSquareBracket:
- if (token.balance > token.index || token.balance < startIdx) {
- break scan;
- }
-
- break;
- }
-
- length++;
-
- // until balance closing
- if (token.balance <= startIdx) {
- break;
- }
- } while (token = getNextToken(length));
-
- return length;
- }
-
- // =========================
- // Dimensions
- //
-
- function dimension(type) {
- return function(token, getNextToken, opts) {
- if (token === null || token.type !== TYPE.Dimension) {
- return 0;
- }
-
- var numberEnd = consumeNumber(token.value, 0);
-
- // check unit
- if (type !== null) {
- // check for IE postfix hack, i.e. 123px\0 or 123px\9
- var reverseSolidusOffset = token.value.indexOf('\\', numberEnd);
- var unit = reverseSolidusOffset === -1 || !isPostfixIeHack(token.value, reverseSolidusOffset)
- ? token.value.substr(numberEnd)
- : token.value.substring(numberEnd, reverseSolidusOffset);
-
- if (type.hasOwnProperty(unit.toLowerCase()) === false) {
- return 0;
- }
- }
-
- // check range if specified
- if (outOfRange(opts, token.value, numberEnd)) {
- return 0;
- }
-
- return 1;
- };
- }
-
- // =========================
- // Percentage
- //
-
- // §5.5. Percentages: the <percentage> type
- // https://drafts.csswg.org/css-values-4/#percentages
- function percentage(token, getNextToken, opts) {
- // ... corresponds to the <percentage-token> production
- if (token === null || token.type !== TYPE.Percentage) {
- return 0;
- }
-
- // check range if specified
- if (outOfRange(opts, token.value, token.value.length - 1)) {
- return 0;
- }
-
- return 1;
- }
-
- // =========================
- // Numeric
- //
-
- // https://drafts.csswg.org/css-values-4/#numbers
- // The value <zero> represents a literal number with the value 0. Expressions that merely
- // evaluate to a <number> with the value 0 (for example, calc(0)) do not match <zero>;
- // only literal <number-token>s do.
- function zero(next) {
- if (typeof next !== 'function') {
- next = function() {
- return 0;
- };
- }
-
- return function(token, getNextToken, opts) {
- if (token !== null && token.type === TYPE.Number) {
- if (Number(token.value) === 0) {
- return 1;
- }
- }
-
- return next(token, getNextToken, opts);
- };
- }
-
- // § 5.3. Real Numbers: the <number> type
- // https://drafts.csswg.org/css-values-4/#numbers
- // Number values are denoted by <number>, and represent real numbers, possibly with a fractional component.
- // ... It corresponds to the <number-token> production
- function number(token, getNextToken, opts) {
- if (token === null) {
- return 0;
- }
-
- var numberEnd = consumeNumber(token.value, 0);
- var isNumber = numberEnd === token.value.length;
- if (!isNumber && !isPostfixIeHack(token.value, numberEnd)) {
- return 0;
- }
-
- // check range if specified
- if (outOfRange(opts, token.value, numberEnd)) {
- return 0;
- }
-
- return 1;
- }
-
- // §5.2. Integers: the <integer> type
- // https://drafts.csswg.org/css-values-4/#integers
- function integer(token, getNextToken, opts) {
- // ... corresponds to a subset of the <number-token> production
- if (token === null || token.type !== TYPE.Number) {
- return 0;
- }
-
- // The first digit of an integer may be immediately preceded by `-` or `+` to indicate the integer’s sign.
- var i = token.value.charCodeAt(0) === 0x002B || // U+002B PLUS SIGN (+)
- token.value.charCodeAt(0) === 0x002D ? 1 : 0; // U+002D HYPHEN-MINUS (-)
-
- // When written literally, an integer is one or more decimal digits 0 through 9 ...
- for (; i < token.value.length; i++) {
- if (!isDigit(token.value.charCodeAt(i))) {
- return 0;
- }
- }
-
- // check range if specified
- if (outOfRange(opts, token.value, i)) {
- return 0;
- }
-
- return 1;
- }
-
- module.exports = {
- // token types
- 'ident-token': tokenType(TYPE.Ident),
- 'function-token': tokenType(TYPE.Function),
- 'at-keyword-token': tokenType(TYPE.AtKeyword),
- 'hash-token': tokenType(TYPE.Hash),
- 'string-token': tokenType(TYPE.String),
- 'bad-string-token': tokenType(TYPE.BadString),
- 'url-token': tokenType(TYPE.Url),
- 'bad-url-token': tokenType(TYPE.BadUrl),
- 'delim-token': tokenType(TYPE.Delim),
- 'number-token': tokenType(TYPE.Number),
- 'percentage-token': tokenType(TYPE.Percentage),
- 'dimension-token': tokenType(TYPE.Dimension),
- 'whitespace-token': tokenType(TYPE.WhiteSpace),
- 'CDO-token': tokenType(TYPE.CDO),
- 'CDC-token': tokenType(TYPE.CDC),
- 'colon-token': tokenType(TYPE.Colon),
- 'semicolon-token': tokenType(TYPE.Semicolon),
- 'comma-token': tokenType(TYPE.Comma),
- '[-token': tokenType(TYPE.LeftSquareBracket),
- ']-token': tokenType(TYPE.RightSquareBracket),
- '(-token': tokenType(TYPE.LeftParenthesis),
- ')-token': tokenType(TYPE.RightParenthesis),
- '{-token': tokenType(TYPE.LeftCurlyBracket),
- '}-token': tokenType(TYPE.RightCurlyBracket),
-
- // token type aliases
- 'string': tokenType(TYPE.String),
- 'ident': tokenType(TYPE.Ident),
-
- // complex types
- 'custom-ident': customIdent,
- 'custom-property-name': customPropertyName,
- 'hex-color': hexColor,
- 'id-selector': idSelector, // element( <id-selector> )
- 'an-plus-b': anPlusB,
- 'urange': urange,
- 'declaration-value': declarationValue,
- 'any-value': anyValue,
-
- // dimensions
- 'dimension': calc(dimension(null)),
- 'angle': calc(dimension(ANGLE)),
- 'decibel': calc(dimension(DECIBEL)),
- 'frequency': calc(dimension(FREQUENCY)),
- 'flex': calc(dimension(FLEX)),
- 'length': calc(zero(dimension(LENGTH))),
- 'resolution': calc(dimension(RESOLUTION)),
- 'semitones': calc(dimension(SEMITONES)),
- 'time': calc(dimension(TIME)),
-
- // percentage
- 'percentage': calc(percentage),
-
- // numeric
- 'zero': zero(),
- 'number': calc(number),
- 'integer': calc(integer),
-
- // old IE stuff
- '-ms-legacy-expression': func('expression')
- };
|