diff --git a/kumascript/src/lib/css-syntax.ts b/kumascript/src/lib/css-syntax.ts index 4475aa25dee0..b89689ce4bb7 100644 --- a/kumascript/src/lib/css-syntax.ts +++ b/kumascript/src/lib/css-syntax.ts @@ -288,7 +288,9 @@ export async function getCSSSyntax( function renderNode(name, node) { switch (node.type) { case "Property": { - return `${name}`; + let encoded = name.replaceAll("<", "<"); + encoded = encoded.replaceAll(">", ">"); + return `${encoded}`; } case "Type": { // encode < and > diff --git a/kumascript/tests/lib/__snapshots__/css-syntax.test.ts.snap b/kumascript/tests/lib/__snapshots__/css-syntax.test.ts.snap index 3e61721237ed..f43ea3f92e93 100644 --- a/kumascript/tests/lib/__snapshots__/css-syntax.test.ts.snap +++ b/kumascript/tests/lib/__snapshots__/css-syntax.test.ts.snap @@ -4,13 +4,13 @@ exports[`CSSSyntax renders at-rule: @import 1`] = `"
src = 
  <font-src-list>

"`; -exports[`CSSSyntax renders function: polygon 1`] = `"
<polygon()> = 
  polygon( <'fill-rule'>? , [ <length-percentage> <length-percentage> ]# )  

<length-percentage> = 
  <length>      |
  <percentage>

"`; +exports[`CSSSyntax renders function: polygon 1`] = `"
<polygon()> = 
  polygon( <'fill-rule'>? , [ <length-percentage> <length-percentage> ]# )  

<fill-rule> = 
  nonzero  |
  evenodd  

<length-percentage> = 
  <length>      |
  <percentage>

"`; exports[`CSSSyntax renders function: sin 1`] = `"
<sin()> = 
  sin( <calc-sum> )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

"`; -exports[`CSSSyntax renders property: box-shadow 1`] = `"
box-shadow = 
  <spread-shadow>#  

<spread-shadow> = 
  <'box-shadow-color'>?                               &&
  [ <'box-shadow-offset'> [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ]  &&
  <'box-shadow-position'>?

"`; +exports[`CSSSyntax renders property: box-shadow 1`] = `"
box-shadow = 
  <spread-shadow>#  

<spread-shadow> = 
  <'box-shadow-color'>?                               &&
  [ <'box-shadow-offset'> [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ]  &&
  <'box-shadow-position'>?                            

<box-shadow-color> = 
  <color>#  

<box-shadow-offset> = 
  [ none | <length>{2} ]#  

<box-shadow-blur> = 
  <length [0,∞]>#  

<box-shadow-spread> = 
  <length>#  

<box-shadow-position> = 
  [ outset | inset ]#

"`; -exports[`CSSSyntax renders shorthand-property: overflow 1`] = `"
overflow = 
  <'overflow-block'>{1,2}

"`; +exports[`CSSSyntax renders shorthand-property: overflow 1`] = `"
overflow = 
  <'overflow-block'>{1,2}  

<overflow-block> = 
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto

"`; exports[`CSSSyntax renders type: alpha-value 1`] = `"
<alpha-value> = 
  <number>      |
  <percentage>

"`;