tailwindcss/tests/source-maps.test.js

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

test('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(2)

  expect(annotations).toMatchInlineSnapshot(`
    [
      "2:4 -> 1:0-65",
      "2:0 -> 2:0",
      "3:2-20 -> 3:2-20",
      "4:2-23 -> 4:2-23",
      "5:2-57 -> 5:2-57",
      "6:2-13 -> 6:2-13",
      "7:2-14 -> 7:2-14",
      "8:0 -> 8:0",
      "10:0 -> 10:0",
      "11:2-20 -> 11:2-20",
      "12:2-57 -> 12:2-57",
      "13:2-13 -> 13:2-13",
      "14:2-14 -> 14:2-14",
      "15:0 -> 15:0",
      "17:0 -> 17:0",
      "18:2-20 -> 18:2-20",
      "19:2-53 -> 19:2-53",
      "20:2-13 -> 20:2-13",
      "21:2-14 -> 21:2-14",
      "22:0 -> 22:0",
    ]
  `)
})

test('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(2)

  expect(annotations).toMatchInlineSnapshot(`
    [
      "2:4 -> 1:0-65",
      "2:0 -> 2:0",
      "3:2-24 -> 3:2-24",
      "4:2-25 -> 4:2-25",
      "5:0 -> 5:0",
      "7:0 -> 7:0",
      "8:2-18 -> 8:2-18",
      "9:0 -> 9:0",
      "11:0 -> 11:0",
      "12:2-32 -> 12:2-32",
      "13:2-13 -> 13:2-13",
      "14:2-31 -> 14:2-31",
      "15:2-33 -> 15:2-33",
      "16:2-42 -> 16:2-42",
      "17:2-121 -> 17:2-121",
      "18:2-18 -> 18:2-18",
      "19:0 -> 19:0",
      "21:0 -> 21:0",
      "22:2-22 -> 22:2-22",
      "23:2-11 -> 23:2-11",
      "24:0 -> 24:0",
      "26:0 -> 26:0",
      "27:2-16 -> 27:2-16",
      "28:2-23 -> 28:2-23",
      "29:2-11 -> 29:2-11",
      "30:0 -> 30:0",
      "32:0 -> 32:0",
      "33:2-43 -> 33:2-43",
      "34:2-35 -> 34:2-35",
      "35:0 -> 35:0",
      "37:0 -> 37:0",
      "38:2-20 -> 38:2-20",
      "39:2-22 -> 39:2-22",
      "40:0 -> 40:0",
      "42:0 -> 42:0",
      "43:2-16 -> 43:2-16",
      "44:2-34 -> 44:2-34",
      "45:2-26 -> 45:2-26",
      "46:0 -> 46:0",
      "48:0 -> 48:0",
      "49:2-21 -> 49:2-21",
      "50:0 -> 50:0",
      "52:0 -> 52:0",
      "53:2-31 -> 53:2-31",
      "54:2-33 -> 54:2-33",
      "55:2-109 -> 55:2-109",
      "56:2-16 -> 56:2-16",
      "57:0 -> 57:0",
      "59:0 -> 59:0",
      "60:2-16 -> 60:2-16",
      "61:0 -> 61:0",
      "63:0 -> 63:0",
      "64:2-26 -> 64:2-26",
      "65:2-16 -> 65:2-16",
      "66:2-16 -> 66:2-16",
      "67:2-20 -> 67:2-20",
      "68:0 -> 68:0",
      "70:0 -> 70:0",
      "71:2-16 -> 71:2-16",
      "72:0 -> 72:0",
      "74:0 -> 74:0",
      "75:2-12 -> 75:2-12",
      "76:0 -> 76:0",
      "78:0 -> 78:0",
      "79:2-16 -> 79:2-16",
      "80:2-23 -> 80:2-23",
      "81:2-27 -> 81:2-27",
      "82:0 -> 82:0",
      "84:0 -> 84:0",
      "85:2-32 -> 85:2-32",
      "86:2-34 -> 86:2-34",
      "87:2-22 -> 87:2-22",
      "88:2-17 -> 88:2-17",
      "89:2-22 -> 89:2-22",
      "90:2-22 -> 90:2-22",
      "91:2-16 -> 91:2-16",
      "92:2-11 -> 92:2-11",
      "93:2-12 -> 93:2-12",
      "94:0 -> 94:0",
      "96:0 -> 96:0",
      "97:2-22 -> 97:2-22",
      "98:0 -> 98:0",
      "100:0 -> 100:0",
      "101:2-28 -> 101:2-28",
      "102:2-25 -> 102:2-25",
      "103:2-24 -> 103:2-24",
      "104:0 -> 104:0",
      "106:0 -> 106:0",
      "107:2-15 -> 107:2-15",
      "108:0 -> 108:0",
      "110:0 -> 110:0",
      "111:2-18 -> 111:2-18",
      "112:0 -> 112:0",
      "114:0 -> 114:0",
      "115:2-26 -> 115:2-26",
      "116:0 -> 116:0",
      "118:0 -> 118:0",
      "119:2-14 -> 119:2-14",
      "120:0 -> 120:0",
      "122:0 -> 122:0",
      "123:2-14 -> 123:2-14",
      "124:0 -> 124:0",
      "126:0 -> 126:0",
      "127:2-31 -> 127:2-31",
      "128:2-22 -> 128:2-22",
      "129:0 -> 129:0",
      "131:0 -> 131:0",
      "132:2-26 -> 132:2-26",
      "133:0 -> 133:0",
      "135:0 -> 135:0",
      "136:2-28 -> 136:2-28",
      "137:2-15 -> 137:2-15",
      "138:0 -> 138:0",
      "140:0 -> 140:0",
      "141:2-20 -> 141:2-20",
      "142:0 -> 142:0",
      "144:0 -> 144:0",
      "145:2-11 -> 145:2-11",
      "146:0 -> 146:0",
      "148:0 -> 148:0",
      "149:2-11 -> 149:2-11",
      "150:2-12 -> 150:2-12",
      "151:0 -> 151:0",
      "153:0 -> 153:0",
      "154:2-12 -> 154:2-12",
      "155:0 -> 155:0",
      "157:0 -> 157:0",
      "158:2-11 -> 158:2-11",
      "159:2-12 -> 159:2-12",
      "160:2-18 -> 160:2-18",
      "161:0 -> 161:0",
      "163:0 -> 163:0",
      "164:2-12 -> 164:2-12",
      "165:0 -> 165:0",
      "167:0 -> 167:0",
      "168:2-18 -> 168:2-18",
      "169:0 -> 169:0",
      "171:0 -> 171:0",
      "172:2-12 -> 172:2-12",
      "173:2-16 -> 173:2-16",
      "174:0 -> 174:0",
      "176:0 -> 176:0",
      "177:2-17 -> 177:2-17",
      "178:0 -> 178:0",
      "180:0 -> 180:0",
      "181:2-17 -> 181:2-17",
      "182:0 -> 182:0",
      "184:0 -> 184:0",
      "185:2-24 -> 185:2-24",
      "186:2-16 -> 186:2-16",
      "187:0 -> 187:0",
      "189:0 -> 189:0",
      "190:2-17 -> 190:2-17",
      "191:2-14 -> 191:2-14",
      "192:0 -> 192:0",
      "194:0 -> 194:0",
      "195:2-15 -> 195:2-15",
      "196:0 -> 196:0",
      "198:0 -> 198:0",
      "199:2-26 -> 199:2-26",
      "200:2-26 -> 200:2-26",
      "201:2-21 -> 201:2-21",
      "202:2-21 -> 202:2-21",
      "203:2-16 -> 203:2-16",
      "204:2-16 -> 204:2-16",
      "205:2-16 -> 205:2-16",
      "206:2-17 -> 206:2-17",
      "207:2-17 -> 207:2-17",
      "208:2-14 -> 208:2-14",
      "209:2-14 -> 209:2-14",
      "210:2-19 -> 210:2-19",
      "211:2-40 -> 211:2-40",
      "212:2-31 -> 212:2-31",
      "213:2-30 -> 213:2-30",
      "214:2-29 -> 214:2-29",
      "215:2-16 -> 215:2-16",
      "216:2-21 -> 216:2-21",
      "217:2-23 -> 217:2-23",
      "218:2-24 -> 218:2-24",
      "219:2-25 -> 219:2-25",
      "220:2-19 -> 220:2-19",
      "221:2-29 -> 221:2-29",
      "222:2-30 -> 222:2-30",
      "223:2-28 -> 223:2-28",
      "224:2-36 -> 224:2-36",
      "225:2-29 -> 225:2-29",
      "226:2-24 -> 226:2-24",
      "227:2-32 -> 227:2-32",
      "228:2-13 -> 228:2-13",
      "229:2-19 -> 229:2-19",
      "230:2-17 -> 230:2-17",
      "231:2-18 -> 231:2-18",
      "232:2-19 -> 232:2-19",
      "233:2-15 -> 233:2-15",
      "234:2-17 -> 234:2-17",
      "235:2-14 -> 235:2-14",
      "236:2-20 -> 236:2-20",
      "237:2-22 -> 237:2-22",
      "238:2-28 -> 238:2-28",
      "239:2-26 -> 239:2-26",
      "240:2-27 -> 240:2-27",
      "241:2-28 -> 241:2-28",
      "242:2-24 -> 242:2-24",
      "243:2-25 -> 243:2-25",
      "244:2-26 -> 244:2-26",
      "245:2-23 -> 245:2-23",
      "246:0 -> 246:0",
      "248:0 -> 248:0",
      "249:2-26 -> 249:2-26",
      "250:2-26 -> 250:2-26",
      "251:2-21 -> 251:2-21",
      "252:2-21 -> 252:2-21",
      "253:2-16 -> 253:2-16",
      "254:2-16 -> 254:2-16",
      "255:2-16 -> 255:2-16",
      "256:2-17 -> 256:2-17",
      "257:2-17 -> 257:2-17",
      "258:2-14 -> 258:2-14",
      "259:2-14 -> 259:2-14",
      "260:2-19 -> 260:2-19",
      "261:2-40 -> 261:2-40",
      "262:2-31 -> 262:2-31",
      "263:2-30 -> 263:2-30",
      "264:2-29 -> 264:2-29",
      "265:2-16 -> 265:2-16",
      "266:2-21 -> 266:2-21",
      "267:2-23 -> 267:2-23",
      "268:2-24 -> 268:2-24",
      "269:2-25 -> 269:2-25",
      "270:2-19 -> 270:2-19",
      "271:2-29 -> 271:2-29",
      "272:2-30 -> 272:2-30",
      "273:2-28 -> 273:2-28",
      "274:2-36 -> 274:2-36",
      "275:2-29 -> 275:2-29",
      "276:2-24 -> 276:2-24",
      "277:2-32 -> 277:2-32",
      "278:2-13 -> 278:2-13",
      "279:2-19 -> 279:2-19",
      "280:2-17 -> 280:2-17",
      "281:2-18 -> 281:2-18",
      "282:2-19 -> 282:2-19",
      "283:2-15 -> 283:2-15",
      "284:2-17 -> 284:2-17",
      "285:2-14 -> 285:2-14",
      "286:2-20 -> 286:2-20",
      "287:2-22 -> 287:2-22",
      "288:2-28 -> 288:2-28",
      "289:2-26 -> 289:2-26",
      "290:2-27 -> 290:2-27",
      "291:2-28 -> 291:2-28",
      "292:2-24 -> 292:2-24",
      "293:2-25 -> 293:2-25",
      "294:2-26 -> 294:2-26",
      "295:2-23 -> 295:2-23",
      "296:0 -> 296:0",
    ]
  `)
})

test('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(2)

  expect(annotations).toMatchInlineSnapshot(`
    [
      "2:4 -> 1:0-65",
      "2:0 -> 2:0",
      "3:2-22 -> 3:2-22",
      "4:2-48 -> 4:2-48",
      "5:0 -> 5:0",
    ]
  `)
})

test('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(2)

  expect(annotations).toMatchInlineSnapshot(`
    [
      "2:4 -> 1:0-65",
      "2:0 -> 2:0",
      "3:2-13 -> 3:2-13",
      "4:0 -> 4:0",
      "6:0 -> 6:0",
      "7:2 -> 7:2",
      "8:4-20 -> 8:4-20",
      "9:2 -> 9:2",
      "10:0 -> 10:0",
      "12:0 -> 12:0",
      "13:2 -> 13:2",
      "14:4-20 -> 14:4-20",
      "15:2 -> 15:2",
      "16:0 -> 16:0",
      "18:0 -> 18:0",
      "19:2 -> 19:2",
      "20:4-21 -> 20:4-21",
      "21:2 -> 21:2",
      "22:0 -> 22:0",
      "24:0 -> 24:0",
      "25:2 -> 25:2",
      "26:4-21 -> 26:4-21",
      "27:2 -> 27:2",
      "28:0 -> 28:0",
      "30:0 -> 30:0",
      "31:2 -> 31:2",
      "32:4-21 -> 32:4-21",
      "33:2 -> 33:2",
      "34:0 -> 34:0",
    ]
  `)
})

test('source maps for layer rules are not rewritten to point to @tailwind directives', async () => {
  let config = {
    content: [{ raw: `font-normal foo hover:foo lg:foo` }],
  }

  let utilitiesFile = postcss.parse(
    css`
      @tailwind utilities;
    `,
    { from: 'components.css', map: { prev: map } }
  )

  let mainCssFile = postcss.parse(
    css`
      @layer utilities {
        .foo {
          background-color: red;
        }
      }
    `,
    { from: 'input.css', map: { prev: map } }
  )

  // Just pretend that there's an @import in `mainCssFile` that imports the nodes from `utilitiesFile`
  let input = postcss.root({
    nodes: [...utilitiesFile.nodes, ...mainCssFile.nodes],
    source: mainCssFile.source,
  })

  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>')

  // And we should see that the source map for the layer rule is not rewritten
  // to point to the @tailwind directive but instead points to the original
  expect(sources.length).toBe(2)
  expect(sources).toMatchInlineSnapshot(`
    [
      "components.css",
      "source-maps.test.js%3Ftest=c291cmNlIG1hcHMgZm9yIGxheWVyIHJ1bGVzIGFyZSBub3QgcmV3cml0dGVuIHRvIHBvaW50IHRvIEB0YWlsd2luZCBkaXJlY3RpdmVz",
    ]
  `)

  expect(annotations).toMatchInlineSnapshot(`
    [
      "2:6 -> 1:0-65",
      "2:0 -> 2:0",
      "3:2-18 -> 3:2-18",
      "4:0 -> 4:0",
      "6:0 -> 6:0",
      "7:2-23 -> 7:2-23",
      "8:0 -> 8:0",
      "10:0 -> 10:0",
      "11:2 -> 11:2",
      "12:4-25 -> 12:4-25",
      "13:2 -> 13:2",
      "14:0 -> 14:0",
    ]
  `)
})

test('it handles `map: true` correctly', async () => {
  let config = {
    content: [{ raw: `text-red-500` }],
  }

  let input = css`
    @tailwind utilities;
  `

  let result = await run(input, config, {
    map: true,
  })
  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(2)

  expect(annotations).toMatchInlineSnapshot(`
    [
      "2:4 -> 1:0-65",
      "2:0 -> 2:0",
      "3:2-22 -> 3:2-22",
      "4:2-48 -> 4:2-48",
      "5:0 -> 5:0",
    ]
  `)
})

test('it handles `map: { inline: true }` correctly', async () => {
  let config = {
    content: [{ raw: `text-red-500` }],
  }

  let input = css`
    @tailwind utilities;
  `

  let result = await run(input, config, {
    map: {
      inline: true,
    },
  })
  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(2)

  expect(annotations).toMatchInlineSnapshot(`
    [
      "2:4 -> 1:0-65",
      "2:0 -> 2:0",
      "3:2-22 -> 3:2-22",
      "4:2-48 -> 4:2-48",
      "5:0 -> 5:0",
    ]
  `)
})