vite/playground/css-sourcemap/index.html

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

<style>
  .inline {
    color: red;
  }
</style>

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

  <p class="inline">&lt;inline&gt;</p>

  <p class="linked">&lt;linked&gt;: no import</p>
  <p class="linked-with-import">&lt;linked&gt;: with import</p>

  <p class="imported">&lt;imported&gt;: no import</p>
  <p class="imported-with-import">&lt;imported&gt;: with import</p>

  <p class="imported-sass">&lt;imported sass&gt;</p>
  <p class="imported-sass-module">&lt;imported sass&gt; with module</p>

  <p class="imported-less">&lt;imported less&gt; with string additionalData</p>

  <p class="imported-stylus">&lt;imported stylus&gt;</p>

  <p class="imported-sugarss">&lt;imported sugarss&gt;</p>

  <p class="input-map">&lt;input source-map&gt;</p>
</div>

<script type="module">
  import './imported.css'
  import './imported-with-import.css'

  import './imported.sass'
  import sassModule from './imported.module.sass'

  document
    .querySelector('.imported-sass-module')
    .classList.add(sassModule['imported-sass-module'])

  import './imported.less'

  import './imported.styl'

  import './imported.sss'

  import './input-map.css'
</script>

<iframe src="virtual.html"></iframe>