index.html — vite Source File

Source Code

<link rel="stylesheet" href="./linked.css" />

<div class="wrapper">
  <h1>Lightning CSS</h1>

  <p class="linked">&lt;link&gt;: This should be blue</p>
  <p class="linked-at-import">@import in &lt;link&gt;: This should be red</p>

  <p class="imported">import from js: This should be green</p>
  <p class="imported-at-import">
    @import in import from js: This should be purple
  </p>

  <p class="modules">CSS modules: this should be turquoise</p>
  <p>Imported CSS module:</p>
  <pre class="modules-code"></pre>

  <p>Imported compose/from CSS module:</p>
  <p class="path-resolved-modules-css">
    CSS modules composes path resolving: this should be turquoise
  </p>
  <pre class="path-resolved-modules-code"></pre>

  <p>Inline CSS module:</p>
  <pre class="modules-inline"></pre>

  <p>External URL</p>
  <div class="external"></div>

  <p>Assets relative to nested CSS</p>
  <div class="nested-css-relative-asset"></div>

  <div class="css-url-aliased">
    <span style="background: #fff">CSS background (aliased)</span>
  </div>
  <div class="css-url-preinlined-svg">
    <span style="background: #fff">CSS background (pre inlined SVG)</span>
  </div>
</div>

<script type="module" src="./main.js"></script>