tailwindcss/tests/source-maps.test.js

import { runWithSourceMaps as run, html, css } from './util/run'
import { parseSourceMaps } from './util/source-maps'

it('apply generates source maps', async () => {
  let config = {
    content: [
      {
        raw: html`
          <div class="with-declaration"></div>
          <div class="with-comment"></div>
          <div class="just-apply"></div>
        `,
      },
    ],
    corePlugins: { preflight: false },
  }

  let input = css`
    .with-declaration {
      background-color: red;
      @apply h-4 w-4 bg-green-500;
    }

    .with-comment {
      /* sourcemap will work here too */
      @apply h-4 w-4 bg-red-500;
    }

    .just-apply {
      @apply h-4 w-4 bg-black;
    }
  `

  let result = await run(input, config)
  let { sources, annotations } = parseSourceMaps(result)

  // All CSS generated by Tailwind CSS should be annotated with source maps
  // And always be able to point to the original source file
  expect(sources).not.toContain('<no source>')
  expect(sources.length).toBe(1)

  // It would make the tests nicer to read and write
  expect(annotations).toMatchSnapshot()
})

it('preflight + base have source maps', async () => {
  let config = {
    content: [],
  }

  let input = css`
    @tailwind base;
  `

  let result = await run(input, config)
  let { sources, annotations } = parseSourceMaps(result)

  // All CSS generated by Tailwind CSS should be annotated with source maps
  // And always be able to point to the original source file
  expect(sources).not.toContain('<no source>')
  expect(sources.length).toBe(1)

  // It would make the tests nicer to read and write
  expect(annotations).toMatchSnapshot()
})

it('utilities have source maps', async () => {
  let config = {
    content: [{ raw: `text-red-500` }],
  }

  let input = css`
    @tailwind utilities;
  `

  let result = await run(input, config)
  let { sources, annotations } = parseSourceMaps(result)

  // All CSS generated by Tailwind CSS should be annotated with source maps
  // And always be able to point to the original source file
  expect(sources).not.toContain('<no source>')
  expect(sources.length).toBe(1)

  // It would make the tests nicer to read and write
  expect(annotations).toStrictEqual(['2:4 -> 1:0', '2:4-23 -> 2:4-24', '2:4 -> 3:4', '2:23 -> 4:0'])
})

it('components have source maps', async () => {
  let config = {
    content: [{ raw: `container` }],
  }

  let input = css`
    @tailwind components;
  `

  let result = await run(input, config)
  let { sources, annotations } = parseSourceMaps(result)

  // All CSS generated by Tailwind CSS should be annotated with source maps
  // And always be able to point to the original source file
  expect(sources).not.toContain('<no source>')
  expect(sources.length).toBe(1)

  // It would make the tests nicer to read and write
  expect(annotations).toMatchSnapshot()
})