cssProperties ignore custom ordering in its JSON value array

[CetinSert]

Steps to Reproduce the Problem

1. open https://WebPDF.pro/:/0/API.html
2. select <pdf-page> from top right (👆🏻)
3. view
   1. Properties ✔️ (render in the file order)
   2. Events ✔️ (render in the file order)
   3. CSS Custom Properties ❌
      given and expected order: --scale, --width, --height
      render in the following order:
      

API.json

{
  "version": 1,
  "tags": [
    {
      "name": "script",
      "description": "<br><strong><a>script src=<u>\"//webpdf.pro/&lt;pdf&gt;\"</u> type=<u>module</u> ium</a></strong><br> enables Web<strong>PDF</strong>.<em>pro</em> elements on a web page.",
      "properties": [
        { "name": "src",     "attribute": "src",     "type": "URL",      "description": "<code>\"//webpdf.pro/&lt;pdf&gt;\"</code> ❄️<br><br>The source is fixed and backed by a ⛅ CDN.<br>We assume including web pages use <code>HTTPS</code>.<h5>On <code>HTTP</code>-only Web Pages</h5><p><code>\"<u>https:</u>//webpdf.pro/&lt;pdf&gt;\"</code> is required.</p>" },
        { "name": "ium",     "attribute": "ium",     "type": "boolean",  "description": "<a>script src=\"❄️\" type=module <strong>ium</strong></a> |<br><a>script src=\"❄️\" type=module <strong>♊</strong></a><br><br>Use a more accurate engine for rendering pages by default.<h5>Notes</h5><p>Requires files to be completely loaded before processing.</p><h5>🆕 Release</h5><p><code>2021-06-13</code> – coming soon!</p>" },
        { "name": "measure", "attribute": "measure", "type": "boolean 🧪",  "description": "<a>script src=\"️️❄️\" type=module <strong>measure</strong></a> |<br><a>script src=\"❄️\" type=module <strong>⏳</strong></a><br><br><code>performance.measure()</code> some operations.<h5>Get Entries</h5><p><code>performance.getEntriesByType('measure').filter(m => m.name.startsWith('🌐📄'))</code></p>" }
      ]
    },
    {
      "name": "pdf-file",
      "description": "<br><strong><a>pdf-file</a></strong> element embeds a PDF file.<br><a>pdf-file id src password</a><code>.save()</code>",
      "properties": [
        { "name": "src",             "attribute": "src",            "type": "URL",                   "description": "The PDF file URL.<h5>Events</h5><p>⚡<code>load</code>⦚<code>error</code></p>" },
        { "name": "data",                                           "type": "🔄 Uint8Array",         "description": "The PDF file bytes.<br><br>🔄 get: without user changes.<br>⬇ set: load a file from bytes.<h5>Events</h5><p>⚡<code>load</code>⦚<code>error</code></p>" },
        { "name": "saveData()",                                     "type": "️🔄 Uint8Array",         "description": "Save the PDF file bytes with user changes." },
        { "name": "save(name?)",                                    "type": "🔄 File",               "description": "Save a copy of the PDF file with user changes." },
        { "name": "name",                                           "type": "string",                "description": "<a>pdf-file <strong>src</strong></a> <u style=\"text-decoration: 2px underline; text-decoration-color: var(--ave-accent-color);\">file name</u> part.<br><code><a>pdf-file src=\"⋯/<u style=\"text-decoration: 2px underline; text-decoration-color: var(--ave-accent-color);\">f.pdf</u>?⋯\"</a></code><br><br>⬇ set: change <a>pdf-file <strong>src</strong></a>.<h5>Events</h5><p>⚡<code>load</code>⦚<code>error</code></p>" },
        { "name": "password",        "attribute": "password",       "type": "string",                "description": "Required if the PDF file is password-protected; ignored otherwise.<h5>Events</h5><p>⚡<code>load</code>⦚<code>error</code></p>" },
        { "name": "XFDF",                                           "type": "{[🔄 function]}",       "description": "<code>XML Forms Data Format</code>.<br><br><code>import(string | XMLDocument)</code><br><code>export({...}?): XMLDocument</code><br><code>save(name?)</code>" },
        { "name": "pages",                                          "type": "[<pdf-page>]",          "description": "Snapshot array of all document-connected <ol><li>referencing</li><li>descendant</li></ol><a>pdf-page</a> instances.<h5>⛓ Chain of Events</h5><p>1️⃣ <a>pdf-file</a>⚡<code>error</code>⦚<code>load</code> can trigger<br>2️⃣ <a>pdf-page</a>⚡<code>error</code>⦚<code>load</code>→⚡<code>render</code><br>for all document-connected pages of a file.</p>" }
      ],
      "events": [
        { "name": "load",  "description": "Fired on  load. Bubbles.<h5>Properties</h5><p><code>target</code> : <code>&lt;pdf-file&gt;</code></p>" },
        { "name": "error", "description": "Fired on error. Bubbles.<h5>Properties</h5><p><code>target</code> : <code>&lt;pdf-file&gt;</code><br><code>detail</code> : <code>error</code></p>" }
      ]
    },
    {
      "name": "pdf-page",
      "description": "<br><strong><a>pdf-page</a></strong> element embeds a PDF page.<br><a>pdf-page of no scale rotation svg</a>",
      "properties": [
        { "name": "of",       "attribute": "of",       "type": "id",                                 "description": "<a>pdf-file <strong>id</strong></a> reference.<br><h5>Events</h5><p>⚡<code>error</code>⦚<code>load</code>→⚡<code>render</code></p>" },
        { "name": "no",       "attribute": "no",       "type": "number",         "default": "+1",    "description": "<code>⋯ | -1 | +1 | ⋯</code><br><br>Page number.<br><span style=\"opacity: .5\">If negative, count from file end.</span><h5>Events</h5><p>⚡<code>error</code>⦚<code>load</code>→⚡<code>render</code></p>" },
        { "name": "scale",    "attribute": "scale",    "type": "number",         "default": "1.0",   "description": "<code>⋯ | 0.9 | 1.1 | ⋯</code><br><br>Image scale.<h5>Events</h5><p>⚡<code>render</code></p>" },
        { "name": "rotation", "attribute": "rotation", "type": "number",         "default": "📄??0", "description": "<code>&nbsp;+90 | +180 | +270</code> ↩<br><code>-270 | -180 | &nbsp;-90</code> ↪<br><br>Rotate viewport at right angles.<h5>Notes</h5><p>Other multiples of <code>±90</code> get normalized.</p><h5>Events</h5><p>⚡<code>render</code>⦚<code>error</code></p>" },
        { "name": "noText",   "attribute": "no-text",  "type": "boolean",        "default": false,   "description": "Omit text layer used for selections and search 🔍.<h5>Events</h5><p>⚡<code>render</code></p>" },
        { "name": "noAnno",   "attribute": "no-anno",  "type": "boolean",        "default": false,   "description": "Omit annotation/form layer.<h5>Events</h5><p>⚡<code>render</code></p>" },
        { "name": "canvas",   "attribute": "canvas",   "type": "string",                             "description": "<a>pdf-page</a>: use more accurate rendering¹<br><a>pdf-page canvas=.js</a>: use less accurate rendering<h5>Notes</h5><p>¹ requires <a>script src=\"❄️\" type=module <strong>ium</strong></a>.</p><h5>Events</h5><p>⚡<code>render</code></p>" },
        { "name": "svg",      "attribute": "svg",      "type": "boolean",        "default": false,   "description": "🧪 Use <a>svg</a> for vector rendering.<br><span style=\"opacity: .5\">If unset, use <a>canvas</a> for raster rendering.</span><h5>Events</h5><p>⚡<code>render</code></p>" },
        { "name": "file",                              "type": "<pdf-file>",                         "description": "Referenced or ancestor <a>pdf-file</a>." }
      ],
      "cssProperties": [
        { "name": "--scale",  "type": "<number>",   "default": "1.0", "description": "Image scale = <a>pdf-page <strong>scale</strong></a>.<h5>💡 Use for Resolution</h5><p><code>pdf-page { width: calc(var(--width) / var(--scale)); }</code></p><h5>Notes</h5><p>Value is not used internally.</p>" },
        { "name": "--width",  "type": "<dimension>",                  "description": "Image width = 📄 × <a>pdf-page <strong>scale</strong></a>.<h5>Notes</h5><p>Value is not used internally.</p>" },
        { "name": "--height", "type": "<dimension>",                  "description": "Image height = 📄 × <a>pdf-page <strong>scale</strong></a>.<h5>Notes</h5><p>Value is not used internally.</p>" }
      ],
      "events": [
        { "name": "load",   "description": "Fired on   load. Bubbles.<h5>Properties</h5><p><code>target</code> : <code>&lt;pdf-page&gt;</code></p>" },
        { "name": "error",  "description": "Fired on  error. Bubbles.<h5>Properties</h5><p><code>target</code> : <code>&lt;pdf-page&gt;</code><br><code>detail</code> : <code>error</code></p>" },
        { "name": "render", "description": "Fired on render. Bubbles.<h5>Properties</h5><p><code>target</code> : <code>&lt;pdf-page&gt;</code></p><code>detail</code> : <code>{ all, image, text, anno }</code> (all boolean indicating which layers rendered)</p>" }
      ]
    }
  ]
}

[web-padawan]

Depends on #61 as using CEM analyzer will enable us to drop the custom logic for sorting CSS custom properties.