You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
219 lines
5.3 KiB
219 lines
5.3 KiB
'use strict'; |
|
|
|
var names = require('../utils/names.js'); |
|
|
|
// 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 |
|
}; |
|
|
|
// can be used wherever <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> values are allowed |
|
// https://drafts.csswg.org/css-values/#calc-notation |
|
function isCalc(node) { |
|
if (node.data.type !== 'Function') { |
|
return false; |
|
} |
|
|
|
var keyword = names.keyword(node.data.name); |
|
|
|
// check the function name |
|
return ( |
|
keyword.name === 'calc' || |
|
keyword.name === '-moz-calc' || |
|
keyword.name === '-webkit-calc' |
|
); |
|
} |
|
|
|
function astNode(type) { |
|
return function(node) { |
|
return node.data.type === type; |
|
}; |
|
} |
|
|
|
function dimension(type) { |
|
return function(node) { |
|
return isCalc(node) || |
|
(node.data.type === 'Dimension' && type.hasOwnProperty(node.data.unit.toLowerCase())); |
|
}; |
|
} |
|
|
|
function zeroUnitlessDimension(type) { |
|
return function(node) { |
|
return isCalc(node) || |
|
(node.data.type === 'Dimension' && type.hasOwnProperty(node.data.unit.toLowerCase())) || |
|
(node.data.type === 'Number' && Number(node.data.value) === 0); |
|
}; |
|
} |
|
|
|
function attr(node) { |
|
return node.data.type === 'Function' && node.data.name.toLowerCase() === 'attr'; |
|
} |
|
|
|
function number(node) { |
|
return isCalc(node) || node.data.type === 'Number'; |
|
} |
|
|
|
function numberZeroOne(node) { |
|
if (isCalc(node) || node.data.type === 'Number') { |
|
var value = Number(node.data.value); |
|
|
|
return value >= 0 && value <= 1; |
|
} |
|
|
|
return false; |
|
} |
|
|
|
function numberOneOrGreater(node) { |
|
if (isCalc(node) || node.data.type === 'Number') { |
|
return Number(node.data.value) >= 1; |
|
} |
|
|
|
return false; |
|
} |
|
|
|
// TODO: fail on 10e-2 |
|
function integer(node) { |
|
return isCalc(node) || |
|
(node.data.type === 'Number' && node.data.value.indexOf('.') === -1); |
|
} |
|
|
|
// TODO: fail on 10e-2 |
|
function positiveInteger(node) { |
|
return isCalc(node) || |
|
(node.data.type === 'Number' && node.data.value.indexOf('.') === -1 && node.data.value.charAt(0) !== '-'); |
|
} |
|
|
|
function percentage(node) { |
|
return isCalc(node) || |
|
node.data.type === 'Percentage'; |
|
} |
|
|
|
function hexColor(node) { |
|
if (node.data.type !== 'HexColor') { |
|
return false; |
|
} |
|
|
|
var hex = node.data.value; |
|
|
|
return /^[0-9a-fA-F]{3,8}$/.test(hex) && |
|
(hex.length === 3 || hex.length === 4 || hex.length === 6 || hex.length === 8); |
|
} |
|
|
|
function expression(node) { |
|
return node.data.type === 'Function' && node.data.name.toLowerCase() === 'expression'; |
|
} |
|
|
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident |
|
// https://drafts.csswg.org/css-values-4/#identifier-value |
|
function customIdent(node) { |
|
if (node.data.type !== 'Identifier') { |
|
return false; |
|
} |
|
|
|
var name = node.data.name.toLowerCase(); |
|
|
|
// § 3.2. Author-defined Identifiers: the <custom-ident> type |
|
// The CSS-wide keywords are not valid <custom-ident>s |
|
if (name === 'unset' || name === 'initial' || name === 'inherit') { |
|
return false; |
|
} |
|
|
|
// The default keyword is reserved and is also not a valid <custom-ident> |
|
if (name === 'default') { |
|
return false; |
|
} |
|
|
|
// TODO: ignore property specific keywords (as described https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident) |
|
|
|
return true; |
|
} |
|
|
|
module.exports = { |
|
'angle': zeroUnitlessDimension(ANGLE), |
|
'attr()': attr, |
|
'custom-ident': customIdent, |
|
'decibel': dimension(DECIBEL), |
|
'dimension': astNode('Dimension'), |
|
'frequency': dimension(FREQUENCY), |
|
'flex': dimension(FLEX), |
|
'hex-color': hexColor, |
|
'id-selector': astNode('IdSelector'), // element( <id-selector> ) |
|
'ident': astNode('Identifier'), |
|
'integer': integer, |
|
'length': zeroUnitlessDimension(LENGTH), |
|
'number': number, |
|
'number-zero-one': numberZeroOne, |
|
'number-one-or-greater': numberOneOrGreater, |
|
'percentage': percentage, |
|
'positive-integer': positiveInteger, |
|
'resolution': dimension(RESOLUTION), |
|
'semitones': dimension(SEMITONES), |
|
'string': astNode('String'), |
|
'time': dimension(TIME), |
|
'unicode-range': astNode('UnicodeRange'), |
|
'url': astNode('Url'), |
|
|
|
// old IE stuff |
|
'progid': astNode('Raw'), |
|
'expression': expression |
|
};
|
|
|