fix(macros/CSSRef): include level two functions

[OnkarRuikar]

• fixes CSS Sidebar: many functions are not listed #10731

@estelle reported that CSS functions that are deeper in files/en-us/web/css tree are not getting rendered in the sidebar.

Solution

Include the docs at level 2 as well. At level 3 there are only z-index guide example pages. There is no level 4.
After the change, 61 new functions are getting added to the sidebar. Following is the HTML code that gets added:

Added HTML Code

<li><a href="/en-US/docs/Web/CSS/animation-timeline/scroll">scroll()</a><abbr
                            class="icon icon-experimental"
                            title="Experimental. Expect behavior to change in the future.">
                            <span class="visually-hidden">Experimental</span>
                        </abbr></li>
                    <li><a href="/en-US/docs/Web/CSS/animation-timeline/view">view()</a><abbr
                            class="icon icon-experimental"
                            title="Experimental. Expect behavior to change in the future.">
                            <span class="visually-hidden">Experimental</span>
                        </abbr></li>
                    <li><a href="/en-US/docs/Web/CSS/basic-shape/circle">circle()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/basic-shape/ellipse">ellipse()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/basic-shape/inset">inset()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/basic-shape/polygon">polygon()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/basic-shape/rect">rect()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/basic-shape/xywh">xywh()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/color_value/color">color()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/color_value/color-contrast">color-contrast()</a><abbr
                            class="icon icon-experimental"
                            title="Experimental. Expect behavior to change in the future.">
                            <span class="visually-hidden">Experimental</span>
                        </abbr></li>
                    <li><a href="/en-US/docs/Web/CSS/color_value/color-mix">color-mix()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/color_value/device-cmyk">device-cmyk()</a></li>
                    <li><em><a href="/en-US/docs/Web/CSS/color_value/hsl" aria-current="page">hsl()</a></em></li>
                    <li><a href="/en-US/docs/Web/CSS/color_value/hwb">hwb()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/color_value/lab">lab()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/color_value/lch">lch()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/color_value/light-dark">light-dark()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/color_value/oklab">oklab()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/color_value/oklch">oklch()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/color_value/rgb">rgb()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/filter-function/blur">blur()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/filter-function/brightness">brightness()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/filter-function/contrast">contrast()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/filter-function/drop-shadow">drop-shadow()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/filter-function/grayscale">grayscale()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/filter-function/hue-rotate">hue-rotate()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/filter-function/invert">invert()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/filter-function/opacity">opacity()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/filter-function/saturate">saturate()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/filter-function/sepia">sepia()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/font-palette/palette-mix">palette-mix()</a><abbr
                            class="icon icon-experimental"
                            title="Experimental. Expect behavior to change in the future.">
                            <span class="visually-hidden">Experimental</span>
                        </abbr></li>
                    <li><a href="/en-US/docs/Web/CSS/gradient/conic-gradient">conic-gradient()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/gradient/linear-gradient">linear-gradient()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/gradient/radial-gradient">radial-gradient()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/gradient/repeating-conic-gradient">repeating-conic-gradient()</a>
                    </li>
                    <li><a href="/en-US/docs/Web/CSS/gradient/repeating-linear-gradient">repeating-linear-gradient()</a>
                    </li>
                    <li><a href="/en-US/docs/Web/CSS/gradient/repeating-radial-gradient">repeating-radial-gradient()</a>
                    </li>
                    <li><a href="/en-US/docs/Web/CSS/image/image">image()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/image/image-set">image-set()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/image/paint">paint()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/transform-function/matrix">matrix()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/transform-function/perspective">perspective()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/transform-function/rotate">rotate()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/transform-function/rotateX">rotateX()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/transform-function/rotateY">rotateY()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/transform-function/rotateZ">rotateZ()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/transform-function/scale">scale()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/transform-function/scale3d">scale3d()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/transform-function/scaleX">scaleX()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/transform-function/scaleY">scaleY()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/transform-function/skew">skew()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/transform-function/skewX">skewX()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/transform-function/skewY">skewY()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/transform-function/translate">translate()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/transform-function/translateX">translateX()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/transform-function/translateY">translateY()</a></li>
                    <li><a href="/en-US/docs/Web/CSS/transform-function/translateZ">translateZ()</a></li>

Screenshots

Before

After

[estelle]

Thank you @OnkarRuikar.

similar issue: #8755

fixes #10731

[caugner]

LGTU (@argl @fiji-flo @caugner), just some comments.