gui/pkgs/compiler/static-tests/tests/__snapshots__/webpack.test.tsx.snap

// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`webpack-tests > 1. extracts to a div for simple views, flat transforms 1`] = `
<div>
  <span
    class="t_dark _dsp_contents"
  >
    <span
      class=" t_dark is_Theme"
      style="color: var(--color); display: contents;"
    >
      <span
        class="_dsp_contents  font_body"
      >
        <div
          class="is_View _tr-0hover-scale21281 _fd-column _fg-1 _fs-1 _fb-0px _bg-red _bxsh-0px0px10px0946673987 test1"
          rounded="100"
        >
          <span
            class="is_Text _col-color"
          >
            hello world
          </span>
        </div>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</div>
`;

exports[`webpack-tests > 2. extracts className for complex views but keeps other props 1`] = `
<div>
  <span
    class="t_dark _dsp_contents"
  >
    <span
      class=" t_dark is_Theme"
      style="color: var(--color); display: contents;"
    >
      <span
        class="_dsp_contents  font_body"
      >
        <div
          class="is_View _fd-row _ox-hidden _oy-hidden who"
        />
        <div
          class="is_View ease-in-out-top _fd-row _pt-2px _pb-2px _bg-fff35 _t--14px"
        >
          <span
            class="is_Text _col-color"
          >
            hello world
          </span>
        </div>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</div>
`;

exports[`webpack-tests > 2. extracts className for complex views but keeps other props 2`] = `
<div>
  <span
    class="t_dark _dsp_contents"
  >
    <span
      class=" t_dark is_Theme"
      style="color: var(--color); display: contents;"
    >
      <span
        class="_dsp_contents  font_body"
      >
        <div
          class="is_View _fd-row _ox-hidden _oy-hidden who"
        />
        <div
          class="is_View _fd-row _bg-00035 _pt-2px _pb-2px _t-0px ease-in-out-top"
        >
          <span
            class="is_Text _col-color"
          >
            hello world
          </span>
        </div>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</div>
`;

exports[`webpack-tests > 5. spread conditional 1`] = `
<div>
  <span
    class="t_dark _dsp_contents"
  >
    <span
      class=" t_dark is_Theme"
      style="color: var(--color); display: contents;"
    >
      <span
        class="_dsp_contents  font_body"
      >
        <div
          class="is_View _fd-column _ox-hidden _oy-hidden _bg-blue"
        >
          <div
            class="is_View hello-world _fd-column _ox-hidden _oy-hidden _bg-blue"
          />
        </div>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</div>
`;

exports[`webpack-tests > 6. spread ternary 1`] = `
<div>
  <span
    class="t_dark _dsp_contents"
  >
    <span
      class=" t_dark is_Theme"
      style="color: var(--color); display: contents;"
    >
      <span
        class="_dsp_contents  font_body"
      >
        <div
          class="is_View _fd-column _ox-hidden _oy-hidden _bg-blue"
        >
          <span
            class="is_Text _col-color"
          >
            hello world
          </span>
        </div>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</div>
`;

exports[`webpack-tests > 6. spread ternary 2`] = `
<div>
  <span
    class="t_dark _dsp_contents"
  >
    <span
      class=" t_dark is_Theme"
      style="color: var(--color); display: contents;"
    >
      <span
        class="_dsp_contents  font_body"
      >
        <div
          class="is_View _fd-column _ox-hidden _oy-hidden _bg-red"
        >
          <span
            class="is_Text _col-color"
          >
            hello world
          </span>
        </div>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</div>
`;

exports[`webpack-tests > 7. ternary + data-is 1`] = `
<div>
  <span
    class="t_dark _dsp_contents"
  >
    <span
      class=" t_dark is_Theme"
      style="color: var(--color); display: contents;"
    >
      <span
        class="_dsp_contents  font_body"
      >
        <div
          class="is_View _fd-column _pr-11px _pl-11px _pb-10px _w-6637"
          maxw="30%"
          minw="500"
        >
          <div
            class="is_View _fd-column _h-10px _w-10px"
          />
        </div>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</div>
`;

exports[`webpack-tests > 8. styleExpansions 1`] = `
<div>
  <span
    class="t_dark _dsp_contents"
  >
    <span
      class=" t_dark is_Theme"
      style="color: var(--color); display: contents;"
    >
      <span
        class="_dsp_contents  font_body"
      >
        <div
          class="is_View _fd-column _pos-relative _t-0px _r-0px _b-0px _l-0px"
        >
          <div
            class="is_View _fd-column _bg-red"
          >
            <div
              class="is_View _fd-column _pos-relative _t-0px _r-0px _b-0px _l-0px _bg-white _col-blue"
            />
          </div>
        </div>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</div>
`;

exports[`webpack-tests > 9. combines with classname 1`] = `
<div>
  <span
    class="t_dark _dsp_contents"
  >
    <span
      class=" t_dark is_Theme"
      style="color: var(--color); display: contents;"
    >
      <span
        class="_dsp_contents  font_body"
      >
        <div
          class="is_View _fd-column _pt-15px _pb-15px home-top-dish"
        />
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</div>
`;

exports[`webpack-tests > 10. extracts Text 1`] = `
<div>
  <span
    class="t_dark _dsp_contents"
  >
    <span
      class=" t_dark is_Theme"
      style="color: var(--color); display: contents;"
    >
      <span
        class="_dsp_contents  font_body"
      >
        <span
          class="is_Text _col-color _fos-10px"
        >
          <span
            class="is_Text _col-color"
            data-slot="text"
            select="auto"
          >
            <span
              class="is_Text _col-00035 _fos-15px _fow-600"
              data-slot="text"
            >
              hello
            </span>
          </span>
        </span>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</div>
`;

exports[`webpack-tests > 12. ternary multiple on same key 1`] = `
<div>
  <span
    class="t_dark _dsp_contents"
  >
    <span
      class=" t_dark is_Theme"
      style="color: var(--color); display: contents;"
    >
      <span
        class="_dsp_contents  font_body"
      >
        <div
          class="is_View _fd-column _tr- _o-1"
        />
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</div>
`;

exports[`webpack-tests > 14. extracts pseudo styles and evaluates constants 1`] = `
<div>
  <span
    class="t_dark _dsp_contents"
  >
    <span
      class=" t_dark is_Theme"
      style="color: var(--color); display: contents;"
    >
      <span
        class="_dsp_contents  font_body"
      >
        <div
          class="is_View _bg-0hover-red _bg-0active-blue _fd-column"
        />
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</div>
`;

exports[`webpack-tests > 15. extracts spacer (complex expansion) 1`] = `
<div>
  <span
    class="t_dark _dsp_contents"
  >
    <span
      class=" t_dark is_Theme"
      style="color: var(--color); display: contents;"
    >
      <span
        class="_dsp_contents  font_body"
      >
        <span
          class="is_Spacer is_View _pe-none _w-t-space-tru101 _h-t-space-tru101 _miw-t-space-tru101 _mih-t-space-tru101"
        />
        <span
          class="is_Spacer is_View _pe-none _fg-1 _fs-1 _fb-0px _w-10px _h-10px _miw-10px _mih-10px"
        />
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</div>
`;

exports[`webpack-tests > 16. deopt when spreading multiple 1`] = `
<div>
  <span
    class="t_dark _dsp_contents"
  >
    <span
      class=" t_dark is_Theme"
      style="color: var(--color); display: contents;"
    >
      <span
        class="_dsp_contents  font_body"
      >
        <div
          class="is_View _fd-column _fg-1 _fs-1 _fb-0px _bg-red"
        />
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</div>
`;

exports[`webpack-tests > 18. extracts flexWrap property 1`] = `
<div>
  <span
    class="t_dark _dsp_contents"
  >
    <span
      class=" t_dark is_Theme"
      style="color: var(--color); display: contents;"
    >
      <span
        class="_dsp_contents  font_body"
      >
        <div
          class="is_View _fwr-wrap _fd-row _gap-t-space-2"
        >
          <span
            class="is_Text _col-color"
          >
            hello world
          </span>
        </div>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</div>
`;

exports[`webpack-tests > 19. extracts flexWrap with conditional 1`] = `
<div>
  <span
    class="t_dark _dsp_contents"
  >
    <span
      class=" t_dark is_Theme"
      style="color: var(--color); display: contents;"
    >
      <span
        class="_dsp_contents  font_body"
      >
        <div
          class="is_View _fwr-wrap _fd-row"
          items="center"
          justify="space-between"
        >
          <span
            class="is_Text _col-color"
          >
            hello world
          </span>
        </div>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</div>
`;

exports[`webpack-tests > 19. extracts flexWrap with conditional 2`] = `
<div>
  <span
    class="t_dark _dsp_contents"
  >
    <span
      class=" t_dark is_Theme"
      style="color: var(--color); display: contents;"
    >
      <span
        class="_dsp_contents  font_body"
      >
        <div
          class="is_View _fwr-nowrap _fd-row"
          items="center"
          justify="space-between"
        >
          <span
            class="is_Text _col-color"
          >
            hello world
          </span>
        </div>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</div>
`;

exports[`webpack-tests > 20. extracts multiple flex properties together 1`] = `
<div>
  <span
    class="t_dark _dsp_contents"
  >
    <span
      class=" t_dark is_Theme"
      style="color: var(--color); display: contents;"
    >
      <span
        class="_dsp_contents  font_body"
      >
        <div
          class="is_View _fd-column _fwr-wrap _fg-1 _fs-0 _fb-auto _ai-stretch _jc-flex-start _ac-flex-start"
        >
          <span
            class="is_Text _col-color"
          >
            hello world
          </span>
        </div>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</div>
`;

exports[`webpack-tests > 21. complex real-world case - flexWrap with many conditionals and media queries 1`] = `
<div>
  <span
    class="t_dark _dsp_contents"
  >
    <span
      class=" t_dark is_Theme"
      style="color: var(--color); display: contents;"
    >
      <span
        class="_dsp_contents  font_body"
      >
        <div
          class="is_View _pr-_sm_t-space-0 _pl-_sm_t-space-0 _cur-0hover-pointer _bg-0hover-backgroundH3423444 _fd-row _fb-10037 _ox-hidden _oy-hidden _pt-4px _pr-4px _pb-4px _pl-4px _w-10037 _bg-background"
          maxw="100%"
          rounded="$0"
        >
          <div
            class="is_View _fd-column _fwr-wrap _gap-0px"
            justify="flex-start"
          >
            <span
              class="is_Text _col-color"
            >
              hello world
            </span>
          </div>
        </div>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</div>
`;

exports[`webpack-tests > 21. complex real-world case - flexWrap with many conditionals and media queries 2`] = `
<div>
  <span
    class="t_dark _dsp_contents"
  >
    <span
      class=" t_dark is_Theme"
      style="color: var(--color); display: contents;"
    >
      <span
        class="_dsp_contents  font_body"
      >
        <div
          class="is_View _pr-_sm_t-space-0 _pl-_sm_t-space-0 _cur-0hover-pointer _bg-0hover-backgroundH3423444 _fd-row _fb-auto _ox-hidden _oy-hidden _pt-4px _pr-4px _pb-4px _pl-4px _w-10037 _bg-background"
          maxw="100%"
          rounded="$0"
        >
          <div
            class="is_View _fd-column _fwr-wrap _gap-0px"
            justify="center"
          >
            <span
              class="is_Text _col-color"
            >
              hello world
            </span>
          </div>
        </div>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</div>
`;

exports[`webpack-tests > 22. flexWrap with media query conditionals 1`] = `
<div>
  <span
    class="t_dark _dsp_contents"
  >
    <span
      class=" t_dark is_Theme"
      style="color: var(--color); display: contents;"
    >
      <span
        class="_dsp_contents  font_body"
      >
        <div
          class="is_View _pt-_sm_t-space-4 _pr-_sm_t-space-4 _pb-_sm_t-space-4 _pl-_sm_t-space-4 _fwr-_sm_nowrap _fwr-wrap _gap-t-space-2 _fd-row"
        >
          <span
            class="is_Text _col-color"
          >
            hello world
          </span>
        </div>
        <div
          style="display: contents;"
        />
      </span>
    </span>
  </span>
</div>
`;