update snapshots

kumascript/src/lib/css-syntax.ts

@@ -288,7 +288,9 @@ export async function getCSSSyntax(
   function renderNode(name, node) {
     switch (node.type) {
       case "Property": {
-        return `<span class="token property">${name}</span>`;
+        let encoded = name.replaceAll("<", "&lt;");
+        encoded = encoded.replaceAll(">", "&gt;");
+        return `<span class="token property">${encoded}</span>`;
       }
       case "Type": {
         // encode < and >

kumascript/tests/lib/__snapshots__/css-syntax.test.ts.snap

@@ -4,13 +4,13 @@ exports[`CSSSyntax renders at-rule: @import 1`] = `"<pre><span class="token prop
 
 exports[`CSSSyntax renders at-rule-descriptor: @font-face/src 1`] = `"<pre><span class="token property" id="src">src = </span><br/>  <a href="/en-US/docs/Web/CSS/font-src-list"><span class="token property">&lt;font-src-list&gt;</span></a>  <br/><br/></pre>"`;
 
-exports[`CSSSyntax renders function: polygon 1`] = `"<pre><span class="token property" id="&lt;polygon()&gt;">&lt;polygon()&gt; = </span><br/>  <span class="token function">polygon(</span> <span class="token property"><'fill-rule'></span><a href="/en-US/docs/Web/CSS/Value_definition_syntax#question_mark" title="Question mark: the entity is optional">?</a> , <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[</a> <span class="token property">&lt;length-percentage&gt;</span> <span class="token property">&lt;length-percentage&gt;</span> <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">]</a><a href="/en-US/docs/Web/CSS/Value_definition_syntax#hash_mark" title="Hash mark: the entity is repeated one or several times, each occurence separated by a comma">#</a> <span class="token function">)</span>  <br/><br/><span class="token property" id="&lt;length-percentage&gt;">&lt;length-percentage&gt; = </span><br/>  <a href="/en-US/docs/Web/CSS/length"><span class="token property">&lt;length&gt;</span></a>      <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a><br/>  <a href="/en-US/docs/Web/CSS/percentage"><span class="token property">&lt;percentage&gt;</span></a>  <br/><br/></pre>"`;
+exports[`CSSSyntax renders function: polygon 1`] = `"<pre><span class="token property" id="&lt;polygon()&gt;">&lt;polygon()&gt; = </span><br/>  <span class="token function">polygon(</span> <span class="token property">&lt;'fill-rule'&gt;</span><a href="/en-US/docs/Web/CSS/Value_definition_syntax#question_mark" title="Question mark: the entity is optional">?</a> , <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[</a> <span class="token property">&lt;length-percentage&gt;</span> <span class="token property">&lt;length-percentage&gt;</span> <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">]</a><a href="/en-US/docs/Web/CSS/Value_definition_syntax#hash_mark" title="Hash mark: the entity is repeated one or several times, each occurence separated by a comma">#</a> <span class="token function">)</span>  <br/><br/><span class="token property" id="&lt;fill-rule&gt;">&lt;fill-rule&gt; = </span><br/>  <span class="token keyword">nonzero</span>  <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a><br/>  <span class="token keyword">evenodd</span>  <br/><br/><span class="token property" id="&lt;length-percentage&gt;">&lt;length-percentage&gt; = </span><br/>  <a href="/en-US/docs/Web/CSS/length"><span class="token property">&lt;length&gt;</span></a>      <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a><br/>  <a href="/en-US/docs/Web/CSS/percentage"><span class="token property">&lt;percentage&gt;</span></a>  <br/><br/></pre>"`;
 
 exports[`CSSSyntax renders function: sin 1`] = `"<pre><span class="token property" id="&lt;sin()&gt;">&lt;sin()&gt; = </span><br/>  <span class="token function">sin(</span> <span class="token property">&lt;calc-sum&gt;</span> <span class="token function">)</span>  <br/><br/><span class="token property" id="&lt;calc-sum&gt;">&lt;calc-sum&gt; = </span><br/>  <span class="token property">&lt;calc-product&gt;</span> <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[</a> <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[</a> '+' <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a> '-' <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">]</a> <span class="token property">&lt;calc-product&gt;</span> <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">]</a><a href="/en-US/docs/Web/CSS/Value_definition_syntax#asterisk" title="Asterisk: the entity may occur zero, one or several times">*</a>  <br/><br/><span class="token property" id="&lt;calc-product&gt;">&lt;calc-product&gt; = </span><br/>  <span class="token property">&lt;calc-value&gt;</span> <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[</a> <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[</a> '*' <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a> '/' <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">]</a> <span class="token property">&lt;calc-value&gt;</span> <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">]</a><a href="/en-US/docs/Web/CSS/Value_definition_syntax#asterisk" title="Asterisk: the entity may occur zero, one or several times">*</a>  <br/><br/><span class="token property" id="&lt;calc-value&gt;">&lt;calc-value&gt; = </span><br/>  <a href="/en-US/docs/Web/CSS/number"><span class="token property">&lt;number&gt;</span></a>        <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a><br/>  <a href="/en-US/docs/Web/CSS/dimension"><span class="token property">&lt;dimension&gt;</span></a>     <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a><br/>  <a href="/en-US/docs/Web/CSS/percentage"><span class="token property">&lt;percentage&gt;</span></a>    <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a><br/>  <span class="token property">&lt;calc-keyword&gt;</span>  <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a><br/>  ( <span class="token property">&lt;calc-sum&gt;</span> <span class="token function">)</span>  <br/><br/><span class="token property" id="&lt;calc-keyword&gt;">&lt;calc-keyword&gt; = </span><br/>  <span class="token keyword">e</span>          <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a><br/>  <span class="token keyword">pi</span>         <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a><br/>  <span class="token keyword">infinity</span>   <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a><br/>  <span class="token keyword">-infinity</span>  <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a><br/>  <span class="token keyword">NaN</span>        <br/><br/></pre>"`;
 
-exports[`CSSSyntax renders property: box-shadow 1`] = `"<pre><span class="token property" id="box-shadow">box-shadow = </span><br/>  <span class="token property">&lt;spread-shadow&gt;</span><a href="/en-US/docs/Web/CSS/Value_definition_syntax#hash_mark" title="Hash mark: the entity is repeated one or several times, each occurence separated by a comma">#</a>  <br/><br/><span class="token property" id="&lt;spread-shadow&gt;">&lt;spread-shadow&gt; = </span><br/>  <span class="token property"><'box-shadow-color'></span><a href="/en-US/docs/Web/CSS/Value_definition_syntax#question_mark" title="Question mark: the entity is optional">?</a>                               <a href="/en-US/docs/Web/CSS/Value_definition_syntax#double_ampersand" title="Double ampersand: all of the entities must be present, in any order">&&</a><br/>  <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[</a> <span class="token property"><'box-shadow-offset'></span> <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[</a> <span class="token property"><'box-shadow-blur'></span> <span class="token property"><'box-shadow-spread'></span><a href="/en-US/docs/Web/CSS/Value_definition_syntax#question_mark" title="Question mark: the entity is optional">?</a> <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">]</a><a href="/en-US/docs/Web/CSS/Value_definition_syntax#question_mark" title="Question mark: the entity is optional">?</a> <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">]</a>  <a href="/en-US/docs/Web/CSS/Value_definition_syntax#double_ampersand" title="Double ampersand: all of the entities must be present, in any order">&&</a><br/>  <span class="token property"><'box-shadow-position'></span><a href="/en-US/docs/Web/CSS/Value_definition_syntax#question_mark" title="Question mark: the entity is optional">?</a>                            <br/><br/></pre>"`;
+exports[`CSSSyntax renders property: box-shadow 1`] = `"<pre><span class="token property" id="box-shadow">box-shadow = </span><br/>  <span class="token property">&lt;spread-shadow&gt;</span><a href="/en-US/docs/Web/CSS/Value_definition_syntax#hash_mark" title="Hash mark: the entity is repeated one or several times, each occurence separated by a comma">#</a>  <br/><br/><span class="token property" id="&lt;spread-shadow&gt;">&lt;spread-shadow&gt; = </span><br/>  <span class="token property">&lt;'box-shadow-color'&gt;</span><a href="/en-US/docs/Web/CSS/Value_definition_syntax#question_mark" title="Question mark: the entity is optional">?</a>                               <a href="/en-US/docs/Web/CSS/Value_definition_syntax#double_ampersand" title="Double ampersand: all of the entities must be present, in any order">&&</a><br/>  <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[</a> <span class="token property">&lt;'box-shadow-offset'&gt;</span> <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[</a> <span class="token property">&lt;'box-shadow-blur'&gt;</span> <span class="token property">&lt;'box-shadow-spread'&gt;</span><a href="/en-US/docs/Web/CSS/Value_definition_syntax#question_mark" title="Question mark: the entity is optional">?</a> <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">]</a><a href="/en-US/docs/Web/CSS/Value_definition_syntax#question_mark" title="Question mark: the entity is optional">?</a> <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">]</a>  <a href="/en-US/docs/Web/CSS/Value_definition_syntax#double_ampersand" title="Double ampersand: all of the entities must be present, in any order">&&</a><br/>  <span class="token property">&lt;'box-shadow-position'&gt;</span><a href="/en-US/docs/Web/CSS/Value_definition_syntax#question_mark" title="Question mark: the entity is optional">?</a>                            <br/><br/><span class="token property" id="&lt;box-shadow-color&gt;">&lt;box-shadow-color&gt; = </span><br/>  <a href="/en-US/docs/Web/CSS/color_value"><span class="token property">&lt;color&gt;</span></a><a href="/en-US/docs/Web/CSS/Value_definition_syntax#hash_mark" title="Hash mark: the entity is repeated one or several times, each occurence separated by a comma">#</a>  <br/><br/><span class="token property" id="&lt;box-shadow-offset&gt;">&lt;box-shadow-offset&gt; = </span><br/>  <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[</a> <span class="token keyword">none</span> <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a> <a href="/en-US/docs/Web/CSS/length"><span class="token property">&lt;length&gt;</span></a><a href="/en-US/docs/Web/CSS/Value_definition_syntax#curly_braces" title="Curly braces: encloses two integers defining the minimal and maximal numbers of occurrences of the entity, or a single integer defining the exact number required">{2}</a> <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">]</a><a href="/en-US/docs/Web/CSS/Value_definition_syntax#hash_mark" title="Hash mark: the entity is repeated one or several times, each occurence separated by a comma">#</a>  <br/><br/><span class="token property" id="&lt;box-shadow-blur&gt;">&lt;box-shadow-blur&gt; = </span><br/>  <span class="token property">&lt;length [0,∞]&gt;</span><a href="/en-US/docs/Web/CSS/Value_definition_syntax#hash_mark" title="Hash mark: the entity is repeated one or several times, each occurence separated by a comma">#</a>  <br/><br/><span class="token property" id="&lt;box-shadow-spread&gt;">&lt;box-shadow-spread&gt; = </span><br/>  <a href="/en-US/docs/Web/CSS/length"><span class="token property">&lt;length&gt;</span></a><a href="/en-US/docs/Web/CSS/Value_definition_syntax#hash_mark" title="Hash mark: the entity is repeated one or several times, each occurence separated by a comma">#</a>  <br/><br/><span class="token property" id="&lt;box-shadow-position&gt;">&lt;box-shadow-position&gt; = </span><br/>  <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[</a> <span class="token keyword">outset</span> <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a> <span class="token keyword">inset</span> <a href="/en-US/docs/Web/CSS/Value_definition_syntax#brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">]</a><a href="/en-US/docs/Web/CSS/Value_definition_syntax#hash_mark" title="Hash mark: the entity is repeated one or several times, each occurence separated by a comma">#</a>  <br/><br/></pre>"`;
 
-exports[`CSSSyntax renders shorthand-property: overflow 1`] = `"<pre><span class="token property" id="overflow">overflow = </span><br/>  <span class="token property"><'overflow-block'></span><a href="/en-US/docs/Web/CSS/Value_definition_syntax#curly_braces" title="Curly braces: encloses two integers defining the minimal and maximal numbers of occurrences of the entity, or a single integer defining the exact number required">{1,2}</a>  <br/><br/></pre>"`;
+exports[`CSSSyntax renders shorthand-property: overflow 1`] = `"<pre><span class="token property" id="overflow">overflow = </span><br/>  <span class="token property">&lt;'overflow-block'&gt;</span><a href="/en-US/docs/Web/CSS/Value_definition_syntax#curly_braces" title="Curly braces: encloses two integers defining the minimal and maximal numbers of occurrences of the entity, or a single integer defining the exact number required">{1,2}</a>  <br/><br/><span class="token property" id="&lt;overflow-block&gt;">&lt;overflow-block&gt; = </span><br/>  <span class="token keyword">visible</span>  <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a><br/>  <span class="token keyword">hidden</span>   <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a><br/>  <span class="token keyword">clip</span>     <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a><br/>  <span class="token keyword">scroll</span>   <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a><br/>  <span class="token keyword">auto</span>     <br/><br/></pre>"`;
 
 exports[`CSSSyntax renders type: alpha-value 1`] = `"<pre><span class="token property" id="&lt;alpha-value&gt;">&lt;alpha-value&gt; = </span><br/>  <a href="/en-US/docs/Web/CSS/number"><span class="token property">&lt;number&gt;</span></a>      <a href="/en-US/docs/Web/CSS/Value_definition_syntax#single_bar" title="Single bar: exactly one of the entities must be present">|</a><br/>  <a href="/en-US/docs/Web/CSS/percentage"><span class="token property">&lt;percentage&gt;</span></a>  <br/><br/></pre>"`;