packages/playground/assets/index.html

<!DOCTYPE html>

<head>
  <meta charset="UTF-8" />
</head>

<link rel="icon" href="data:," />
<link rel="stylesheet" href="/raw.css" />

<h1>Assets</h1>

<p class="base"></p>

<h2>Raw References from publicDir</h2>
<ul>
  <li class="raw-js"></li>
  <script src="/raw.js"></script>
  <li class="raw-css">
    Raw CSS from publicDir should load (this should be red)
  </li>
</ul>

<h2>Asset Imports from JS</h2>
<ul>
  <li>Relative: <code class="asset-import-relative"></code></li>
  <li>Absolute: <code class="asset-import-absolute"></code></li>
  <li>From publicDir: <code class="public-import"></code></li>
</ul>

<h2>CSS url references</h2>
<div>Font should be loaded (all text should be italic)</div>
<div class="css-url-absolute">
  <span style="background: #fff">CSS background (absolute)</span>
</div>
<div class="css-url-relative">
  <span style="background: #fff">CSS background (relative)</span>
</div>
<div class="css-image-set-relative">
  <span style="background: #fff"
    >CSS background with image-set() (relative)</span
  >
</div>
<div class="css-image-set-without-url-call">
  <span style="background: #fff"
    >CSS background with image-set() (relative)</span
  >
</div>
<div class="css-url-relative-at-imported">
  <span style="background: #fff"
    >CSS background (relative from @imported file in different dir)</span
  >
</div>
<div class="css-url-public">
  <span style="background: #fff">CSS background (public)</span>
</div>
<div class="css-url-data-uri">
  <span style="background: #fff">CSS background (data URI)</span>
</div>
<div class="css-url-base64-inline">
  <span style="background: #fff">CSS background (base64 inline in prod)</span>
</div>
<div class="css-url-quotes-base64-inline">
  <span style="background: #fff">CSS background (base64 inline in prod)</span>
</div>
<div class="css-url-same-line">
  <span style="background: #fff"
    >CSS background (multiple urls on same line)</span
  >
</div>
<div class="css-url-aliased">
  <span style="background: #fff">CSS background (aliased)</span>
</div>

<h2>Unicode URL</h2>
<div>
  <code class="unicode-url"></code>
  <img src="./nested/テスト-測試-white space.png" />
</div>

<h2>encodeURI for the address</h2>
<div>
  <img
    class="encodeURI"
    src="./nested/%E3%83%86%E3%82%B9%E3%83%88-%E6%B8%AC%E8%A9%A6-white%20space.png"
  />
</div>

<h2>Image Src Set</h2>
<div>
  <img
    class="img-src-set"
    src="./nested/asset.png"
    srcset="./nested/asset.png 1x, ./nested/asset.png 2x"
    alt=""
  />
</div>

<h2>SVG Fragments</h2>
<div>
  <img
    class="svg-frag-img"
    src="./nested/fragment.svg#icon-clock-view"
    alt=""
  />
  <img
    class="svg-frag-img"
    src="./nested/fragment.svg#icon-heart-view"
    alt=""
  />
  <img
    class="svg-frag-img"
    src="./nested/fragment.svg#icon-arrow-right-view"
    alt=""
  />
</div>

<h2>SVG Fragments via CSS background url</h2>
<div>
  <span class="icon icon-clock"></span>
  <span class="icon icon-heart"></span>
  <span class="icon icon-arrow-right"></span>
</div>

<h2>SVG Fragments via JS Import</h2>
<div>
  <p>Imported path: <code class="svg-frag-import-path"></code></p>
  <img class="svg-frag-import" alt="" />
</div>

<h2>?raw import</h2>
<code class="raw"></code>

<h2>?url import</h2>
<code class="url"></code>

<h2>new URL('...', import.meta.url)</h2>
<img class="import-meta-url-img" />
<code class="import-meta-url"></code>

<h2>new URL('...', import.meta.url,) (with comma)</h2>
<img class="import-meta-url-img-comma" />
<code class="import-meta-url-comma"></code>

<h2>new URL('...', import.meta.url,) (with comma + new line)</h2>
<img class="import-meta-url-img-comma-nl" />
<code class="import-meta-url-comma-nl"></code>

<h2>new URL(`./${dynamic}`, import.meta.url)</h2>
<p>
  <img class="dynamic-import-meta-url-img-1" />
  <code class="dynamic-import-meta-url-1"></code>
</p>
<p>
  <img class="dynamic-import-meta-url-img-2" />
  <code class="dynamic-import-meta-url-2"></code>
</p>

<h2>new URL(`./${dynamic}`, import.meta.url,) (with comma)</h2>
<p>
  <img class="dynamic-import-meta-url-img-1-comma" />
  <code class="dynamic-import-meta-url-1-comma"></code>
</p>
<p>
  <img class="dynamic-import-meta-url-img-2-comma" />
  <code class="dynamic-import-meta-url-2-comma"></code>
</p>

<h2>simple script tag import-expression</h2>
<code class="import-expression"></code>
<script>
  import('./static/import-expression.js')
  import('/import-expression.js')
</script>
<h2>url in style tag</h2>
<h3>url</h3>
<style class="style-url">
  .style-url-assets {
    background: url('./nested/asset.png');
    background-size: 10px 10px;
  }
</style>
<div style="background: url('./nested/asset.png'); background-size: 10px 10px">
  inline style
</div>
<div class="style-url-assets">use style class</div>

<h3>base64</h3>
<style class="style-base64">
  .style-base64-assets {
    background: url('./static/icon.png');
  }
</style>
<p class="inline-style-base64" style="background: url(./static/icon.png)">
  inline style
</p>
<p class="style-base64-assets">use style class</p>

<h3 class="import-css">@import</h3>
<style class="style-import">
  @import url('./css/import.css');
</style>

<script type="module">
  import './css/fonts.css'
  import './css/css-url.css'
  import './css/icons.css'

  text('.base', `import.meta.${``}env.BASE_URL: ${import.meta.env.BASE_URL}`)

  import url from './nested/asset.png'
  text('.asset-import-relative', url)

  import absoluteUrl from '/nested/asset.png'
  text('.asset-import-absolute', absoluteUrl)

  import publicUrl from '/icon.png'
  text('.public-import', publicUrl)

  import svgFrag from './nested/fragment.svg'
  text('.svg-frag-import-path', svgFrag)
  document.querySelector('.svg-frag-import').src = svgFrag + '#icon-heart-view'

  import rawSvg from './nested/fragment.svg?raw'
  text('.raw', rawSvg)

  import fooUrl from './foo.js?url'
  text('.url', fooUrl)

  import unicodeUrl from './テスト-測試-white space.js?url'
  text('.unicode-url', unicodeUrl)

  // const url = new URL('non_existent_file.png', import.meta.url)
  const metaUrl = new URL('./nested/asset.png', import.meta.url)
  text('.import-meta-url', metaUrl)
  document.querySelector('.import-meta-url-img').src = metaUrl

  // prettier-ignore
  const metaUrlWithComma = new URL('./nested/asset.png', import.meta.url,)
  text('.import-meta-url-comma', metaUrlWithComma)
  document.querySelector('.import-meta-url-img-comma').src = metaUrlWithComma

  // testing trailing comma and new line
  // prettier-ignore
  const metaUrlWithCommaNL = new URL(
    './nested/asset.png',
    import.meta.url,
  )
  text('.import-meta-url-comma-nl', metaUrlWithCommaNL)
  document.querySelector('.import-meta-url-img-comma-nl').src =
    metaUrlWithCommaNL

  /**
   * don't process the code in the comment
   * const url = new URL('non_existent_file.png', import.meta.url)
   */

  function testDynamicImportMetaUrl(name, i) {
    const metaUrl = new URL(`./nested/${name}.png`, import.meta.url)
    text(`.dynamic-import-meta-url-${i}`, metaUrl)
    document.querySelector(`.dynamic-import-meta-url-img-${i}`).src = metaUrl
  }

  testDynamicImportMetaUrl('icon', 1)
  testDynamicImportMetaUrl('asset', 2)

  function testDynamicImportMetaUrlWithComma(name, i) {
    // prettier-ignore
    const metaUrl = new URL(`./nested/${name}.png`, import.meta.url,)
    text(`.dynamic-import-meta-url-${i}-comma`, metaUrl)
    document.querySelector(`.dynamic-import-meta-url-img-${i}-comma`).src =
      metaUrl
  }

  testDynamicImportMetaUrlWithComma('icon', 1)
  testDynamicImportMetaUrlWithComma('asset', 2)

  function text(el, text) {
    document.querySelector(el).textContent = text
  }
</script>