From 84f11eefb155537524f1876bc29d1b1c9003d478 Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Thu, 25 Apr 2024 13:55:51 +0200 Subject: [PATCH 1/5] feat(css-sytax): render more constituents The current code only considers css types as constituents. However, e.g. `margin` has a property as constituent. This change allows us to render constituents of type property. --- kumascript/src/lib/css-syntax.ts | 41 +++++++++++++++++++++++++------- 1 file changed, 32 insertions(+), 9 deletions(-) diff --git a/kumascript/src/lib/css-syntax.ts b/kumascript/src/lib/css-syntax.ts index b4fc1de435ee..fb3dfaa5e292 100644 --- a/kumascript/src/lib/css-syntax.ts +++ b/kumascript/src/lib/css-syntax.ts @@ -443,8 +443,16 @@ export async function getCSSSyntax( if (typesToLink.includes(`<${node.name}>`)) { return; } - if (node.type === "Type" && !constituents.includes(node.name)) { - constituents.push(node.name); + if ( + node.type === "Type" && + !constituents.some((n) => n.name === node.name && n.type === node.type) + ) { + constituents.push(node); + } else if ( + node.type === "Property" && + !constituents.some((n) => n.name === node.name && n.type === node.type) + ) { + constituents.push(node); } } @@ -477,10 +485,16 @@ export async function getCSSSyntax( // and then get the types in those syntaxes constituentSyntaxes = []; for (const constituent of allConstituents.slice(oldConstituentsLength)) { - const constituentSyntaxEntry = values[constituent]; + let constituentSyntaxEntry; + if (constituent.type === "Type") { + constituentSyntaxEntry = + values[constituent.name.replace(/^'|'$/g, "")]?.value; + } else if (constituent.type === "Property") { + constituentSyntaxEntry = getPropertySyntax(constituent.name); + } - if (constituentSyntaxEntry?.value) { - constituentSyntaxes.push(constituentSyntaxEntry.value); + if (constituentSyntaxEntry) { + constituentSyntaxes.push(constituentSyntaxEntry); } } } @@ -501,12 +515,21 @@ export async function getCSSSyntax( output += renderSyntax(itemName, itemSyntax); output += "
"; // collect all the constituent types for the property - const types = getConstituentTypes(itemSyntax); + const nodes = getConstituentTypes(itemSyntax); // and write each one out - for (const type of types) { - if (values[type] && values[type].value) { - output += renderSyntax(`<${type}>`, values[type].value); + for (const node of nodes) { + let value; + let name; + if (node.type === "Type") { + name = node.name; + value = values[node.name].value; + } else if (node.type === "Property") { + name = node.name; + value = getPropertySyntax(node.name); + } + if (name && value) { + output += renderSyntax(`<${name}>`, value); output += "
"; } } From f03d482ad9d6cb576550c9d67de885761239114b Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Thu, 25 Apr 2024 14:19:03 +0200 Subject: [PATCH 2/5] ? --- kumascript/src/lib/css-syntax.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/kumascript/src/lib/css-syntax.ts b/kumascript/src/lib/css-syntax.ts index fb3dfaa5e292..4475aa25dee0 100644 --- a/kumascript/src/lib/css-syntax.ts +++ b/kumascript/src/lib/css-syntax.ts @@ -523,7 +523,7 @@ export async function getCSSSyntax( let name; if (node.type === "Type") { name = node.name; - value = values[node.name].value; + value = values[node.name]?.value; } else if (node.type === "Property") { name = node.name; value = getPropertySyntax(node.name); From d90996ce240f664d140cb2995e89fc55e3c50dbe Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Thu, 25 Apr 2024 17:06:21 +0200 Subject: [PATCH 3/5] update snapshots --- kumascript/src/lib/css-syntax.ts | 4 +++- kumascript/tests/lib/__snapshots__/css-syntax.test.ts.snap | 6 +++--- 2 files changed, 6 insertions(+), 4 deletions(-) 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>

"`; From 01cd7fb653f23e695dce8ef77a3b7073cd85ddae Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Wed, 1 May 2024 15:45:18 +0200 Subject: [PATCH 4/5] link expanded properties --- kumascript/src/lib/css-syntax.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/kumascript/src/lib/css-syntax.ts b/kumascript/src/lib/css-syntax.ts index b89689ce4bb7..575ac3b93f76 100644 --- a/kumascript/src/lib/css-syntax.ts +++ b/kumascript/src/lib/css-syntax.ts @@ -288,9 +288,13 @@ export async function getCSSSyntax( function renderNode(name, node) { switch (node.type) { case "Property": { - let encoded = name.replaceAll("<", "<"); - encoded = encoded.replaceAll(">", ">"); - return `${encoded}`; + const encoded = name.replaceAll("<", "<").replaceAll(">", ">"); + const span = `${encoded}`; + const linkSlug = name.match(/^<'(.*)'>$/)?.[1]; + if (linkSlug) { + return `${span}`; + } + return span; } case "Type": { // encode < and > From 55815b99499a0e8b73892f9d7c73a453401262b5 Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Wed, 1 May 2024 15:57:51 +0200 Subject: [PATCH 5/5] update snapshot --- kumascript/tests/lib/__snapshots__/css-syntax.test.ts.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/kumascript/tests/lib/__snapshots__/css-syntax.test.ts.snap b/kumascript/tests/lib/__snapshots__/css-syntax.test.ts.snap index f43ea3f92e93..4607fef5cefe 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> ]# )  

<fill-rule> = 
  nonzero  |
  evenodd  

<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'>?                            

<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 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}  

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

"`; +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>

"`;