"
+ slug = slug.replace(/\[.*\]/, '')
+ return `${span}`;
+ }
+ }
+ case 'Multiplier': {
+ // link to the Value Definition Symtax and provide a tooltip
+ let key = name;
+ if (name.startsWith('{')) {
+ key = '{}';
+ }
+ const info = syntaxDescriptions[key];
+ return `${name}`;
+ }
+ case 'Keyword': {
+ return `${name}`;
}
+ case 'Function': {
+ return `${name}`;
+ }
+ case 'Token': {
+ if (name === ')') {
+ // this is a closing bracket
+ return `${name}`;
+ }
+ }
+ case 'Group': {
+ // link from brackets to the value definition syntax docs
+ const info = syntaxDescriptions['[]'];
+ name = name.replace(/^\[/, `[`);
+ name = name.replace(/\]$/, `]`);
+
+ // link from combinators (except " ") to the value definition syntax docs
+ if (node.combinator && (node.combinator !== ' ')) {
+ const info = syntaxDescriptions[node.combinator];
+ // note that we are replacing the combinator surrounded by spaces, like " | "
+ name = name.replaceAll(` ${node.combinator} `, ` ${node.combinator} `);
+ }
+
+ return name;
+ }
+ default:
+ return name;
+ }
+}
- var formattedSyntax = rawSyntax;
- operators.forEach(function(operator) {
- if (formattedSyntax.indexOf("\n") !== -1 &&
- operator.title === "Curly braces") {
- return "";
- }
-
- formattedSyntax = formattedSyntax.replace(operator.regexp,
- function(match, text) {
- var linkText = match;
- if (match.indexOf("*") !== -1) {
- linkText = "*";
- } else if (match.indexOf("}") !== -1) {
- linkText = "}";
- } else if (typeof text === "string") {
- linkText = text;
- }
-
- var output = "" + linkText + "";
- if (linkText === "|") {
- output = " " + output + " ";
- } else if (linkText === "*" || linkText === "}") {
- output = text + output;
- }
-
- return output;
- });
+/**
+ * Generate the markup for every term in a syntax definition,
+ * ensuring that the terms are visually aligned
+ */
+function renderTerms(terms, combinator) {
+ let output = '';
+ const renderedTerms = [];
+
+ for (const term of terms) {
+ // figure out the lengths of the translated terms, without markup
+ // this is just so we can align the terms properly
+ const termTextLength = definitionSyntax.generate(term).length;
+ // get the translated terms, with markup
+ const termText = definitionSyntax.generate(term, { decorate: renderNode});
+ renderedTerms.push({
+ text: termText,
+ length: termTextLength
});
- formattedSyntax = await string.asyncReplace(
- formattedSyntax,
- /<([a-z0-9()'-]+?( \[-?(\d+|∞),(\d+|∞)\])?)>/gi,
- buildLink
- );
+ }
- return formattedSyntax;
+ const maxTermLength = Math.max(...renderedTerms.map(t => t.length));
+
+ // write out the translated terms, padding with spaces for alignment
+ // and separating terms using their combinator symbol
+ for (let i = 0; i < renderedTerms.length; i++) {
+ const termText = renderedTerms[i].text;
+ const spaceCount = (maxTermLength + 2) - renderedTerms[i].length;
+ let combinatorText = '';
+ if (combinator && combinator !== " ") {
+ const info = syntaxDescriptions[combinator];
+ // link from combinators (except " ") to the value definition syntax docs
+ combinatorText = `${combinator}`;
+ }
+ // omit the combinator for the final term
+ combinatorText = (i < renderedTerms.length-1 ? combinatorText : '');
+ output += ` ${termText}${' '.repeat(spaceCount)}${combinatorText}
`;
+ }
+
+ return output;
}
-async function formatTypesSyntax(formattedSyntax, describedTypes) {
- var formattedTypesSyntax = "";
- var types = [];
- var typeAnchorAttributes = formattedSyntax.match(/href=".+?"/g);
- if (typeAnchorAttributes) {
- typeAnchorAttributes.forEach(function(typeAnchorAttribute) {
- var type = typeAnchorAttribute.match(/href="(?:#|.*\/)(.+?)"/);
- if (types.indexOf(type[1]) === -1 &&
- type[1].indexOf(s_syntax_value_definition) === -1) {
- // Some data type page names have '_value' appended,
- // which needs to be removed in order to find the syntax
- var subType = type[1].replace("_value", "");
- // Describe this type if it exists in "syntaxes" and
- // it *does not* exist in externallyDescribedTypes
- if ((Object.prototype.hasOwnProperty.call(data.syntaxes, subType)) &&
- (!Object.prototype.hasOwnProperty.call(data.externallyDescribedTypes, subType))) {
- types.push(subType);
- }
- }
- });
-
- var typesSyntax = "";
- if (types.length > 0) {
- for(let index = 0; index < types.length; index++) {
- let type = types[index];
- // Avoid recursions by checking whether a type was already
- // described before
- // check whether https://github.com/mdn/data/pull/66 was merged
- var syntax = data.syntaxes[type].syntax || data.syntaxes[type];
- if (describedTypes.indexOf(type) === -1) {
- typesSyntax += "<" + type +
- "> = " + await formatSyntax(syntax);
- if (index < types.length - 1) {
- typesSyntax += "
";
- }
- describedTypes.push(type);
- }
- }
-
- if (typesSyntax !== "") {
- formattedTypesSyntax += "" + s_where +
- "
" + typesSyntax +
- "
";
- }
- }
-
- return formattedTypesSyntax + await formatTypesSyntax(typesSyntax, describedTypes);
+/**
+ * Render the syntax for a single type.
+ */
+function renderSyntax(type, syntax) {
+ // write out the name of this type
+ let output = `${type} =
`;
+
+ const ast = definitionSyntax.parse(syntax);
+ // if the combinator is ' ', write the complete type syntax in a single line
+ if (ast.combinator === ' ') {
+ output += renderTerms([ast], ast.combinator);
+ } else {
+ // otherwise write out each direct child in its own line
+ output += renderTerms(ast.terms, ast.combinator);
+ }
+
+ return output;
+}
+
+/**
+ * Get names of all the types in a given set of syntaxes
+ */
+function getTypesForSyntaxes(syntaxes, constituents) {
+
+ function processNode(node) {
+ if (node.type === 'Type' &&
+ (!constituents.includes(node.name))) {
+ constituents.push(node.name);
}
+ }
+
+ for (const syntax of syntaxes) {
+ let ast = definitionSyntax.parse(syntax);
+ definitionSyntax.walk(ast, processNode);
+ }
- return formattedTypesSyntax;
}
-if (!atRule) {
- var matches = null;
- if (slug) {
- matches = slug.match(/\/CSS\/(@.+?)(?=\/)/);
+/**
+ * Given an item (such as a CSS property), fetch all the types that participate
+ * in its formal syntax definition, either directly or transitively.
+ */
+function getConstituentTypes(propertySyntax) {
+ const allConstituents = [];
+ let oldConstituentsLength = 0;
+ // get all the types in the top-level syntax
+ let constituentSyntaxes = [propertySyntax];
+
+ // while an iteration added more types...
+ while (true) {
+ oldConstituentsLength = allConstituents.length;
+ getTypesForSyntaxes(constituentSyntaxes, allConstituents);
+
+ if (allConstituents.length <= oldConstituentsLength) {
+ break;
}
+ // get the syntaxes for all newly added constituents,
+ // and then get the types in those syntaxes
+ constituentSyntaxes = [];
+ for (let constituent of allConstituents.slice(oldConstituentsLength)) {
+
+ let constituentSyntaxEntry = valuespaces[`<${constituent}>`];
- if (matches) {
- atRule = matches[1];
+ if (constituentSyntaxEntry && constituentSyntaxEntry.value) {
+ constituentSyntaxes.push(constituentSyntaxEntry.value);
+ }
}
+ }
+ return allConstituents;
}
-if (name === "preview-wiki-content") {
- formattedSyntax = "" +
- localize(localStrings, "info_in_preview_not_available") + "";
-} else {
- if (atRule) {
- if (data.atRules[atRule] && data.atRules[atRule].descriptors && data.atRules[atRule].descriptors[name]) {
- rawSyntax = data.atRules[atRule].descriptors[name].syntax;
- }
- } else if (name[0] === "@") {
- if (data.atRules[name] && data.atRules[name].syntax) {
- rawSyntax = data.atRules[name].syntax;
- }
- } else if (name[0] === ":" && typeof data.selectors[name] !== 'undefined') {
- rawSyntax = data.selectors[name].syntax;
- } else if (data.properties[name]) {
- rawSyntax = data.properties[name].syntax;
- } else if (data.syntaxes[addBrackets(name)]) {
- rawSyntax = data.syntaxes[addBrackets(name)].syntax;
+/**
+ * Write out the complete formal syntax for a property.
+ *
+ * This includes the property's own syntax, described in `propertySyntax`,
+ * and also the syntax for any types that participate in the definition of
+ * the property.
+ */
+function writeFormalSyntax(propertySyntax) {
+ let output = '';
+ output += '';
+ // write the syntax for the property
+ output += renderSyntax(propertyName, propertySyntax);
+ output += '
';
+ // collect all the constituent types for the property
+ const types = getConstituentTypes(propertySyntax);
+
+ // and write each one out
+ for (const type of types) {
+ if (valuespaces[`<${type}>`] && valuespaces[`<${type}>`].value) {
+ output += renderSyntax(`<${type}>`, valuespaces[`<${type}>`].value);
+ output += '
';
}
+ }
- formattedSyntax = await formatSyntax(rawSyntax);
- formattedSyntax += await formatTypesSyntax(formattedSyntax, []);
+ output += '
';
+ return output;
}
-let out = '';
+let output = '';
-if (!formattedSyntax) {
- out = "No syntax available
No value found in the database.