diff --git a/kumascript/src/lib/css-syntax.ts b/kumascript/src/lib/css-syntax.ts index d512bb3d0834..236c9ef7247b 100644 --- a/kumascript/src/lib/css-syntax.ts +++ b/kumascript/src/lib/css-syntax.ts @@ -99,9 +99,18 @@ export async function getCSSSyntax( const parsedWebRef = await getParsedWebRef(); // get all the value syntaxes - let valuespaces = {}; + let values = {}; for (const spec of Object.values(parsedWebRef)) { - valuespaces = { ...valuespaces, ...spec.valuespaces }; + // Add parent values. + values = { ...values, ...spec.values }; + // Add child values. + [...Object.values(spec.properties), ...Object.values(spec.values)].forEach( + (value) => { + if ("values" in value && Array.isArray(value.values)) { + values = { ...byName(value.values), ...values }; + } + } + ); } /** @@ -216,16 +225,16 @@ export async function getCSSSyntax( itemName = itemName.replace("_value", ""); } // not all types have an entry in the syntax - if (valuespaces[itemName]) { - itemSyntax = valuespaces[itemName].value; + if (values[itemName]) { + itemSyntax = values[itemName].value; } itemName = `<${itemName}>`; break; case "css-function": itemName = `${itemName}()`; // not all functions have an entry in the syntax - if (valuespaces[itemName]) { - itemSyntax = valuespaces[itemName].value; + if (values[itemName]) { + itemSyntax = values[itemName].value; } itemName = `<${itemName}>`; break; @@ -291,7 +300,7 @@ export async function getCSSSyntax( // If the type is not included in the syntax, or is in "typesToLink", // link to its dedicated page (don't expand it) const key = name.replace(/(^<|>$)/g, ""); - if (valuespaces[key]?.value && !typesToLink.includes(name)) { + if (values[key]?.value && !typesToLink.includes(name)) { return span; } else { let slug; @@ -469,7 +478,7 @@ export async function getCSSSyntax( // and then get the types in those syntaxes constituentSyntaxes = []; for (const constituent of allConstituents.slice(oldConstituentsLength)) { - const constituentSyntaxEntry = valuespaces[constituent]; + const constituentSyntaxEntry = values[constituent]; if (constituentSyntaxEntry?.value) { constituentSyntaxes.push(constituentSyntaxEntry.value); @@ -497,8 +506,8 @@ export async function getCSSSyntax( // and write each one out for (const type of types) { - if (valuespaces[type] && valuespaces[type].value) { - output += renderSyntax(`<${type}>`, valuespaces[type].value); + if (values[type] && values[type].value) { + output += renderSyntax(`<${type}>`, values[type].value); output += "
"; } } @@ -531,7 +540,7 @@ async function getParsedWebRef(): Promise { spec, properties: byName(properties), atrules: byName(atrules), - valuespaces: byName(values), + values: byName(values), }, ] ) @@ -540,10 +549,14 @@ async function getParsedWebRef(): Promise { function byName(items: T[]): Record { return Object.fromEntries( - items.map((item) => [item.name.replace(/(^<|>$)/g, ""), item]) + items.map((item) => [normalizeName(item.name), item]) ); } +function normalizeName(name: string): string { + return name.replace(/(^<|>$)/g, ""); +} + async function getRawWebRefData(): Promise { return (await webRefData.listAll()) as WebRefArrayData; } @@ -555,7 +568,7 @@ interface WebRefObjectDataItem { spec: WebRefSpecEntry; properties: Record; atrules: Record; - valuespaces: Record; + values: Record; } // @webref/css v6 interfaces. diff --git a/kumascript/tests/lib/__snapshots__/css-syntax.test.ts.snap b/kumascript/tests/lib/__snapshots__/css-syntax.test.ts.snap index bcfcadf68646..3e61721237ed 100644 --- a/kumascript/tests/lib/__snapshots__/css-syntax.test.ts.snap +++ b/kumascript/tests/lib/__snapshots__/css-syntax.test.ts.snap @@ -4,10 +4,16 @@ 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: 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 shorthand-property: overflow 1`] = `"
overflow = 
  <'overflow-block'>{1,2}

"`; -exports[`CSSSyntax renders type: ratio 1`] = `"
<ratio> = 
  <number [0,∞]> [ / <number [0,∞]> ]?

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

"`; + +exports[`CSSSyntax renders type: content-replacement 1`] = `"
<content-replacement> = 
  <image>  

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

"`; + +exports[`CSSSyntax renders type: ratio 1`] = `"
<ratio> = 
  <number [0,∞]> [ / <number [0,∞]> ]?

"`; diff --git a/kumascript/tests/lib/css-syntax.test.ts b/kumascript/tests/lib/css-syntax.test.ts index f74e0fa117ea..93c07cf00da6 100644 --- a/kumascript/tests/lib/css-syntax.test.ts +++ b/kumascript/tests/lib/css-syntax.test.ts @@ -25,6 +25,9 @@ describe("CSSSyntax", () => { }); it("renders function", async () => { + expect( + await render("Web/CSS/basic-shape/polygon", "css-function") + ).toMatchSnapshot("polygon"); expect(await render("Web/CSS/sin", "css-function")).toMatchSnapshot("sin"); }); @@ -42,5 +45,12 @@ describe("CSSSyntax", () => { it("renders type", async () => { expect(await render("Web/CSS/ratio", "css-type")).toMatchSnapshot("ratio"); + expect(await render("Web/CSS/alpha-value", "css-type")).toMatchSnapshot( + "alpha-value" + ); + // Note that Web/CSS/content-replacement doesn't really exist. + expect( + await render("Web/CSS/content-replacement", "css-type") + ).toMatchSnapshot("content-replacement"); }); });