tailwindcss/tests/source-maps.test.js
Robin Malfait 9f591a5586
Always prepend the license comment (#11476)
* always prepend the Tailwind License

Even when you are not using preflight.

* drop the Tailwind License from the preflight plugin

* drop the license in the tests

This allows us to focus on the actual generated CSS without the license.
The license also includes the version number which we would have to
update every time we release a new version.

* update the source maps snapshots

* always prepend the license when using the CLI

* update Tailwind CLI integration test
2023-06-22 16:41:37 -04:00

591 lines
15 KiB
JavaScript

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-208 -> 16:2-208",
"17:2-18 -> 17:2-18",
"18:0 -> 18:0",
"20:0 -> 20:0",
"21:2-22 -> 21:2-22",
"22:2-11 -> 22:2-11",
"23:0 -> 23:0",
"25:0 -> 25:0",
"26:2-16 -> 26:2-16",
"27:2-23 -> 27:2-23",
"28:2-11 -> 28:2-11",
"29:0 -> 29:0",
"31:0 -> 31:0",
"32:2-43 -> 32:2-43",
"33:2-35 -> 33:2-35",
"34:0 -> 34:0",
"36:0 -> 36:0",
"37:2-20 -> 37:2-20",
"38:2-22 -> 38:2-22",
"39:0 -> 39:0",
"41:0 -> 41:0",
"42:2-16 -> 42:2-16",
"43:2-34 -> 43:2-34",
"44:2-26 -> 44:2-26",
"45:0 -> 45:0",
"47:0 -> 47:0",
"48:2-21 -> 48:2-21",
"49:0 -> 49:0",
"51:0 -> 51:0",
"52:2-109 -> 52:2-109",
"53:2-16 -> 53:2-16",
"54:0 -> 54:0",
"56:0 -> 56:0",
"57:2-16 -> 57:2-16",
"58:0 -> 58:0",
"60:0 -> 60:0",
"61:2-26 -> 61:2-26",
"62:2-16 -> 62:2-16",
"63:2-16 -> 63:2-16",
"64:2-20 -> 64:2-20",
"65:0 -> 65:0",
"67:0 -> 67:0",
"68:2-16 -> 68:2-16",
"69:0 -> 69:0",
"71:0 -> 71:0",
"72:2-12 -> 72:2-12",
"73:0 -> 73:0",
"75:0 -> 75:0",
"76:2-16 -> 76:2-16",
"77:2-23 -> 77:2-23",
"78:2-27 -> 78:2-27",
"79:0 -> 79:0",
"81:0 -> 81:0",
"82:2-32 -> 82:2-32",
"83:2-34 -> 83:2-34",
"84:2-22 -> 84:2-22",
"85:2-17 -> 85:2-17",
"86:2-22 -> 86:2-22",
"87:2-22 -> 87:2-22",
"88:2-16 -> 88:2-16",
"89:2-11 -> 89:2-11",
"90:2-12 -> 90:2-12",
"91:0 -> 91:0",
"93:0 -> 93:0",
"94:2-22 -> 94:2-22",
"95:0 -> 95:0",
"97:0 -> 97:0",
"98:2-28 -> 98:2-28",
"99:2-25 -> 99:2-25",
"100:2-24 -> 100:2-24",
"101:0 -> 101:0",
"103:0 -> 103:0",
"104:2-15 -> 104:2-15",
"105:0 -> 105:0",
"107:0 -> 107:0",
"108:2-18 -> 108:2-18",
"109:0 -> 109:0",
"111:0 -> 111:0",
"112:2-26 -> 112:2-26",
"113:0 -> 113:0",
"115:0 -> 115:0",
"116:2-14 -> 116:2-14",
"117:0 -> 117:0",
"119:0 -> 119:0",
"120:2-31 -> 120:2-31",
"121:2-22 -> 121:2-22",
"122:0 -> 122:0",
"124:0 -> 124:0",
"125:2-26 -> 125:2-26",
"126:0 -> 126:0",
"128:0 -> 128:0",
"129:2-28 -> 129:2-28",
"130:2-15 -> 130:2-15",
"131:0 -> 131:0",
"133:0 -> 133:0",
"134:2-20 -> 134:2-20",
"135:0 -> 135:0",
"137:0 -> 137:0",
"138:2-11 -> 138:2-11",
"139:0 -> 139:0",
"141:0 -> 141:0",
"142:2-11 -> 142:2-11",
"143:2-12 -> 143:2-12",
"144:0 -> 144:0",
"146:0 -> 146:0",
"147:2-12 -> 147:2-12",
"148:0 -> 148:0",
"150:0 -> 150:0",
"151:2-11 -> 151:2-11",
"152:2-12 -> 152:2-12",
"153:2-18 -> 153:2-18",
"154:0 -> 154:0",
"156:0 -> 156:0",
"157:2-12 -> 157:2-12",
"158:0 -> 158:0",
"160:0 -> 160:0",
"161:2-18 -> 161:2-18",
"162:0 -> 162:0",
"164:0 -> 164:0",
"165:2-12 -> 165:2-12",
"166:2-16 -> 166:2-16",
"167:0 -> 167:0",
"169:0 -> 169:0",
"170:2-17 -> 170:2-17",
"171:0 -> 171:0",
"173:0 -> 173:0",
"174:2-17 -> 174:2-17",
"175:0 -> 175:0",
"177:0 -> 177:0",
"178:2-24 -> 178:2-24",
"179:2-16 -> 179:2-16",
"180:0 -> 180:0",
"182:0 -> 182:0",
"183:2-17 -> 183:2-17",
"184:2-14 -> 184:2-14",
"185:0 -> 185:0",
"187:0 -> 187:0",
"188:2-15 -> 188:2-15",
"189:0 -> 189:0",
"191:0 -> 191:0",
"192:2-26 -> 192:2-26",
"193:2-26 -> 193:2-26",
"194:2-21 -> 194:2-21",
"195:2-21 -> 195:2-21",
"196:2-16 -> 196:2-16",
"197:2-16 -> 197:2-16",
"198:2-16 -> 198:2-16",
"199:2-17 -> 199:2-17",
"200:2-17 -> 200:2-17",
"201:2-14 -> 201:2-14",
"202:2-14 -> 202:2-14",
"203:2-19 -> 203:2-19",
"204:2-40 -> 204:2-40",
"205:2-31 -> 205:2-31",
"206:2-30 -> 206:2-30",
"207:2-29 -> 207:2-29",
"208:2-16 -> 208:2-16",
"209:2-21 -> 209:2-21",
"210:2-23 -> 210:2-23",
"211:2-24 -> 211:2-24",
"212:2-25 -> 212:2-25",
"213:2-19 -> 213:2-19",
"214:2-29 -> 214:2-29",
"215:2-30 -> 215:2-30",
"216:2-28 -> 216:2-28",
"217:2-36 -> 217:2-36",
"218:2-29 -> 218:2-29",
"219:2-24 -> 219:2-24",
"220:2-32 -> 220:2-32",
"221:2-13 -> 221:2-13",
"222:2-19 -> 222:2-19",
"223:2-17 -> 223:2-17",
"224:2-18 -> 224:2-18",
"225:2-19 -> 225:2-19",
"226:2-15 -> 226:2-15",
"227:2-17 -> 227:2-17",
"228:2-14 -> 228:2-14",
"229:2-20 -> 229:2-20",
"230:2-22 -> 230:2-22",
"231:2-28 -> 231:2-28",
"232:2-26 -> 232:2-26",
"233:2-27 -> 233:2-27",
"234:2-28 -> 234:2-28",
"235:2-24 -> 235:2-24",
"236:2-25 -> 236:2-25",
"237:2-26 -> 237:2-26",
"238:2-23 -> 238:2-23",
"239:0 -> 239:0",
"241:0 -> 241:0",
"242:2-26 -> 242:2-26",
"243:2-26 -> 243:2-26",
"244:2-21 -> 244:2-21",
"245:2-21 -> 245:2-21",
"246:2-16 -> 246:2-16",
"247:2-16 -> 247:2-16",
"248:2-16 -> 248:2-16",
"249:2-17 -> 249:2-17",
"250:2-17 -> 250:2-17",
"251:2-14 -> 251:2-14",
"252:2-14 -> 252:2-14",
"253:2-19 -> 253:2-19",
"254:2-40 -> 254:2-40",
"255:2-31 -> 255:2-31",
"256:2-30 -> 256:2-30",
"257:2-29 -> 257:2-29",
"258:2-16 -> 258:2-16",
"259:2-21 -> 259:2-21",
"260:2-23 -> 260:2-23",
"261:2-24 -> 261:2-24",
"262:2-25 -> 262:2-25",
"263:2-19 -> 263:2-19",
"264:2-29 -> 264:2-29",
"265:2-30 -> 265:2-30",
"266:2-28 -> 266:2-28",
"267:2-36 -> 267:2-36",
"268:2-29 -> 268:2-29",
"269:2-24 -> 269:2-24",
"270:2-32 -> 270:2-32",
"271:2-13 -> 271:2-13",
"272:2-19 -> 272:2-19",
"273:2-17 -> 273:2-17",
"274:2-18 -> 274:2-18",
"275:2-19 -> 275:2-19",
"276:2-15 -> 276:2-15",
"277:2-17 -> 277:2-17",
"278:2-14 -> 278:2-14",
"279:2-20 -> 279:2-20",
"280:2-22 -> 280:2-22",
"281:2-28 -> 281:2-28",
"282:2-26 -> 282:2-26",
"283:2-27 -> 283:2-27",
"284:2-28 -> 284:2-28",
"285:2-24 -> 285:2-24",
"286:2-25 -> 286:2-25",
"287:2-26 -> 287:2-26",
"288:2-23 -> 288:2-23",
"289:0 -> 289:0",
"291:0 -> 291:0",
"292:2-26 -> 292:2-26",
"293:2-26 -> 293:2-26",
"294:2-21 -> 294:2-21",
"295:2-21 -> 295:2-21",
"296:2-16 -> 296:2-16",
"297:2-16 -> 297:2-16",
"298:2-16 -> 298:2-16",
"299:2-17 -> 299:2-17",
"300:2-17 -> 300:2-17",
"301:2-14 -> 301:2-14",
"302:2-14 -> 302:2-14",
"303:2-19 -> 303:2-19",
"304:2-40 -> 304:2-40",
"305:2-31 -> 305:2-31",
"306:2-30 -> 306:2-30",
"307:2-29 -> 307:2-29",
"308:2-16 -> 308:2-16",
"309:2-21 -> 309:2-21",
"310:2-23 -> 310:2-23",
"311:2-24 -> 311:2-24",
"312:2-25 -> 312:2-25",
"313:2-19 -> 313:2-19",
"314:2-29 -> 314:2-29",
"315:2-30 -> 315:2-30",
"316:2-28 -> 316:2-28",
"317:2-36 -> 317:2-36",
"318:2-29 -> 318:2-29",
"319:2-24 -> 319:2-24",
"320:2-32 -> 320:2-32",
"321:2-13 -> 321:2-13",
"322:2-19 -> 322:2-19",
"323:2-17 -> 323:2-17",
"324:2-18 -> 324:2-18",
"325:2-19 -> 325:2-19",
"326:2-15 -> 326:2-15",
"327:2-17 -> 327:2-17",
"328:2-14 -> 328:2-14",
"329:2-20 -> 329:2-20",
"330:2-22 -> 330:2-22",
"331:2-28 -> 331:2-28",
"332:2-26 -> 332:2-26",
"333:2-27 -> 333:2-27",
"334:2-28 -> 334:2-28",
"335:2-24 -> 335:2-24",
"336:2-25 -> 336:2-25",
"337:2-26 -> 337:2-26",
"338:2-23 -> 338:2-23",
"339:0 -> 339: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` }],
}
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",
]
`)
})
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",
]
`)
})