mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
06972065de
* feat(preflight): simplify sans-serif font stack `-apple-system` and `BlinkMacSystemFont` were historically needed for IE11 and chakra-based Edge (The one that wasn't chromium-based). https://caniuse.com/font-family-system-ui has more details around it. * further simplify `font-family` * update tests * update changelog --------- Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
547 lines
14 KiB
JavaScript
547 lines
14 KiB
JavaScript
import postcss from 'postcss'
|
|
import { parseSourceMaps } from './util/source-maps'
|
|
import { crosscheck, runWithSourceMaps as run, html, css, map } from './util/run'
|
|
|
|
crosscheck(({ stable, oxide }) => {
|
|
oxide.test.todo('apply generates source maps')
|
|
stable.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(1)
|
|
|
|
expect(annotations).toEqual([
|
|
'2:6 -> 2:6',
|
|
'3:8-29 -> 3:8-29',
|
|
'4:8-35 -> 4:8-20',
|
|
'4:8-35 -> 5:8-19',
|
|
'4:8-35 -> 6:8-26',
|
|
'4:8-35 -> 7:8-63',
|
|
'5:6 -> 8:6',
|
|
'7:6 -> 10:6',
|
|
'8:8-41 -> 11:8-41',
|
|
'9:8-33 -> 12:8-20',
|
|
'9:8-33 -> 13:8-19',
|
|
'9:8-33 -> 14:8-26',
|
|
'9:8-33 -> 15:8-63',
|
|
'10:6 -> 16:6',
|
|
'13:8 -> 18:6',
|
|
'13:8-31 -> 19:8-20',
|
|
'13:8-31 -> 20:8-19',
|
|
'13:8-31 -> 21:8-26',
|
|
'13:8 -> 22:8',
|
|
'13:31 -> 23:0',
|
|
])
|
|
})
|
|
|
|
oxide.test.todo('preflight + base have source maps')
|
|
stable.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(1)
|
|
|
|
expect(annotations).toEqual([
|
|
'2:6 -> 1:0',
|
|
'2:20-6 -> 3:1-2',
|
|
'2:20 -> 6:1',
|
|
'2:6 -> 8:0',
|
|
'2:6-20 -> 11:2-32',
|
|
'2:6-20 -> 12:2-25',
|
|
'2:6-20 -> 13:2-29',
|
|
'2:6-20 -> 14:2-31',
|
|
'2:20 -> 15:0',
|
|
'2:6 -> 17:0',
|
|
'2:6-20 -> 19:2-18',
|
|
'2:20 -> 20:0',
|
|
'2:6 -> 22:0',
|
|
'2:20 -> 29:1',
|
|
'2:6 -> 31:0',
|
|
'2:6-20 -> 33:2-26',
|
|
'2:6-20 -> 34:2-40',
|
|
'2:6-20 -> 35:2-26',
|
|
'2:6-20 -> 36:2-21',
|
|
'2:6-20 -> 37:2-137',
|
|
'2:6-20 -> 38:2-39',
|
|
'2:6-20 -> 39:2-41',
|
|
'2:20 -> 40:0',
|
|
'2:6 -> 42:0',
|
|
'2:20 -> 45:1',
|
|
'2:6 -> 47:0',
|
|
'2:6-20 -> 48:2-19',
|
|
'2:6-20 -> 49:2-30',
|
|
'2:20 -> 50:0',
|
|
'2:6 -> 52:0',
|
|
'2:20 -> 56:1',
|
|
'2:6 -> 58:0',
|
|
'2:6-20 -> 59:2-19',
|
|
'2:6-20 -> 60:2-24',
|
|
'2:6-20 -> 61:2-31',
|
|
'2:20 -> 62:0',
|
|
'2:6 -> 64:0',
|
|
'2:20 -> 66:1',
|
|
'2:6 -> 68:0',
|
|
'2:6-20 -> 69:2-35',
|
|
'2:20 -> 70:0',
|
|
'2:6 -> 72:0',
|
|
'2:20 -> 74:1',
|
|
'2:6 -> 76:0',
|
|
'2:6-20 -> 82:2-20',
|
|
'2:6-20 -> 83:2-22',
|
|
'2:20 -> 84:0',
|
|
'2:6 -> 86:0',
|
|
'2:20 -> 88:1',
|
|
'2:6 -> 90:0',
|
|
'2:6-20 -> 91:2-16',
|
|
'2:6-20 -> 92:2-26',
|
|
'2:20 -> 93:0',
|
|
'2:6 -> 95:0',
|
|
'2:20 -> 97:1',
|
|
'2:6 -> 99:0',
|
|
'2:6-20 -> 101:2-21',
|
|
'2:20 -> 102:0',
|
|
'2:6 -> 104:0',
|
|
'2:20 -> 109:1',
|
|
'2:6 -> 111:0',
|
|
'2:6-20 -> 115:2-121',
|
|
'2:6-20 -> 116:2-39',
|
|
'2:6-20 -> 117:2-41',
|
|
'2:6-20 -> 118:2-24',
|
|
'2:20 -> 119:0',
|
|
'2:6 -> 121:0',
|
|
'2:20 -> 123:1',
|
|
'2:6 -> 125:0',
|
|
'2:6-20 -> 126:2-16',
|
|
'2:20 -> 127:0',
|
|
'2:6 -> 129:0',
|
|
'2:20 -> 131:1',
|
|
'2:6 -> 133:0',
|
|
'2:6-20 -> 135:2-16',
|
|
'2:6-20 -> 136:2-16',
|
|
'2:6-20 -> 137:2-20',
|
|
'2:6-20 -> 138:2-26',
|
|
'2:20 -> 139:0',
|
|
'2:6 -> 141:0',
|
|
'2:6-20 -> 142:2-17',
|
|
'2:20 -> 143:0',
|
|
'2:6 -> 145:0',
|
|
'2:6-20 -> 146:2-13',
|
|
'2:20 -> 147:0',
|
|
'2:6 -> 149:0',
|
|
'2:20 -> 153:1',
|
|
'2:6 -> 155:0',
|
|
'2:6-20 -> 156:2-24',
|
|
'2:6-20 -> 157:2-31',
|
|
'2:6-20 -> 158:2-35',
|
|
'2:20 -> 159:0',
|
|
'2:6 -> 161:0',
|
|
'2:20 -> 165:1',
|
|
'2:6 -> 167:0',
|
|
'2:6-20 -> 172:2-30',
|
|
'2:6-20 -> 173:2-40',
|
|
'2:6-20 -> 174:2-42',
|
|
'2:6-20 -> 175:2-25',
|
|
'2:6-20 -> 176:2-30',
|
|
'2:6-20 -> 177:2-30',
|
|
'2:6-20 -> 178:2-24',
|
|
'2:6-20 -> 179:2-19',
|
|
'2:6-20 -> 180:2-20',
|
|
'2:20 -> 181:0',
|
|
'2:6 -> 183:0',
|
|
'2:20 -> 185:1',
|
|
'2:6 -> 187:0',
|
|
'2:6-20 -> 189:2-22',
|
|
'2:20 -> 190:0',
|
|
'2:6 -> 192:0',
|
|
'2:20 -> 195:1',
|
|
'2:6 -> 197:0',
|
|
'2:6-20 -> 201:2-36',
|
|
'2:6-20 -> 202:2-39',
|
|
'2:6-20 -> 203:2-32',
|
|
'2:20 -> 204:0',
|
|
'2:6 -> 206:0',
|
|
'2:20 -> 208:1',
|
|
'2:6 -> 210:0',
|
|
'2:6-20 -> 211:2-15',
|
|
'2:20 -> 212:0',
|
|
'2:6 -> 214:0',
|
|
'2:20 -> 216:1',
|
|
'2:6 -> 218:0',
|
|
'2:6-20 -> 219:2-18',
|
|
'2:20 -> 220:0',
|
|
'2:6 -> 222:0',
|
|
'2:20 -> 224:1',
|
|
'2:6 -> 226:0',
|
|
'2:6-20 -> 227:2-26',
|
|
'2:20 -> 228:0',
|
|
'2:6 -> 230:0',
|
|
'2:20 -> 232:1',
|
|
'2:6 -> 234:0',
|
|
'2:6-20 -> 236:2-14',
|
|
'2:20 -> 237:0',
|
|
'2:6 -> 239:0',
|
|
'2:20 -> 242:1',
|
|
'2:6 -> 244:0',
|
|
'2:6-20 -> 245:2-39',
|
|
'2:6-20 -> 246:2-30',
|
|
'2:20 -> 247:0',
|
|
'2:6 -> 249:0',
|
|
'2:20 -> 251:1',
|
|
'2:6 -> 253:0',
|
|
'2:6-20 -> 254:2-26',
|
|
'2:20 -> 255:0',
|
|
'2:6 -> 257:0',
|
|
'2:20 -> 260:1',
|
|
'2:6 -> 262:0',
|
|
'2:6-20 -> 263:2-36',
|
|
'2:6-20 -> 264:2-23',
|
|
'2:20 -> 265:0',
|
|
'2:6 -> 267:0',
|
|
'2:20 -> 269:1',
|
|
'2:6 -> 271:0',
|
|
'2:6-20 -> 272:2-20',
|
|
'2:20 -> 273:0',
|
|
'2:6 -> 275:0',
|
|
'2:20 -> 277:1',
|
|
'2:6 -> 279:0',
|
|
'2:6-20 -> 292:2-11',
|
|
'2:20 -> 293:0',
|
|
'2:6 -> 295:0',
|
|
'2:6-20 -> 296:2-11',
|
|
'2:6-20 -> 297:2-12',
|
|
'2:20 -> 298:0',
|
|
'2:6 -> 300:0',
|
|
'2:6-20 -> 301:2-12',
|
|
'2:20 -> 302:0',
|
|
'2:6 -> 304:0',
|
|
'2:6-20 -> 307:2-18',
|
|
'2:6-20 -> 308:2-11',
|
|
'2:6-20 -> 309:2-12',
|
|
'2:20 -> 310:0',
|
|
'2:6 -> 312:0',
|
|
'2:20 -> 314:1',
|
|
'2:6 -> 315:0',
|
|
'2:6-20 -> 316:2-12',
|
|
'2:20 -> 317:0',
|
|
'2:6 -> 319:0',
|
|
'2:20 -> 321:1',
|
|
'2:6 -> 323:0',
|
|
'2:6-20 -> 324:2-18',
|
|
'2:20 -> 325:0',
|
|
'2:6 -> 327:0',
|
|
'2:20 -> 330:1',
|
|
'2:6 -> 332:0',
|
|
'2:6-20 -> 334:2-20',
|
|
'2:6-20 -> 335:2-24',
|
|
'2:20 -> 336:0',
|
|
'2:6 -> 338:0',
|
|
'2:20 -> 340:1',
|
|
'2:6 -> 342:0',
|
|
'2:6-20 -> 344:2-17',
|
|
'2:20 -> 345:0',
|
|
'2:6 -> 347:0',
|
|
'2:20 -> 349:1',
|
|
'2:6 -> 350:0',
|
|
'2:6-20 -> 351:2-17',
|
|
'2:20 -> 352:0',
|
|
'2:6 -> 354:0',
|
|
'2:20 -> 358:1',
|
|
'2:6 -> 360:0',
|
|
'2:6-20 -> 368:2-24',
|
|
'2:6-20 -> 369:2-32',
|
|
'2:20 -> 370:0',
|
|
'2:6 -> 372:0',
|
|
'2:20 -> 374:1',
|
|
'2:6 -> 376:0',
|
|
'2:6-20 -> 378:2-17',
|
|
'2:6-20 -> 379:2-14',
|
|
'2:20 -> 380:0',
|
|
'2:6-20 -> 382:0-72',
|
|
'2:6 -> 383:0',
|
|
'2:6-20 -> 384:2-15',
|
|
'2:20 -> 385:0',
|
|
'2:6 -> 387:0',
|
|
'2:6-20 -> 388:2-26',
|
|
'2:6-20 -> 389:2-26',
|
|
'2:6-20 -> 390:2-21',
|
|
'2:6-20 -> 391:2-21',
|
|
'2:6-20 -> 392:2-16',
|
|
'2:6-20 -> 393:2-16',
|
|
'2:6-20 -> 394:2-16',
|
|
'2:6-20 -> 395:2-17',
|
|
'2:6-20 -> 396:2-17',
|
|
'2:6-20 -> 397:2-15',
|
|
'2:6-20 -> 398:2-15',
|
|
'2:6-20 -> 399:2-20',
|
|
'2:6-20 -> 400:2-40',
|
|
'2:6-20 -> 401:2-32',
|
|
'2:6-20 -> 402:2-31',
|
|
'2:6-20 -> 403:2-30',
|
|
'2:6-20 -> 404:2-17',
|
|
'2:6-20 -> 405:2-22',
|
|
'2:6-20 -> 406:2-24',
|
|
'2:6-20 -> 407:2-25',
|
|
'2:6-20 -> 408:2-26',
|
|
'2:6-20 -> 409:2-20',
|
|
'2:6-20 -> 410:2-29',
|
|
'2:6-20 -> 411:2-30',
|
|
'2:6-20 -> 412:2-40',
|
|
'2:6-20 -> 413:2-36',
|
|
'2:6-20 -> 414:2-29',
|
|
'2:6-20 -> 415:2-24',
|
|
'2:6-20 -> 416:2-32',
|
|
'2:6-20 -> 417:2-14',
|
|
'2:6-20 -> 418:2-20',
|
|
'2:6-20 -> 419:2-18',
|
|
'2:6-20 -> 420:2-19',
|
|
'2:6-20 -> 421:2-20',
|
|
'2:6-20 -> 422:2-16',
|
|
'2:6-20 -> 423:2-18',
|
|
'2:6-20 -> 424:2-15',
|
|
'2:6-20 -> 425:2-21',
|
|
'2:6-20 -> 426:2-23',
|
|
'2:6-20 -> 427:2-29',
|
|
'2:6-20 -> 428:2-27',
|
|
'2:6-20 -> 429:2-28',
|
|
'2:6-20 -> 430:2-29',
|
|
'2:6-20 -> 431:2-25',
|
|
'2:6-20 -> 432:2-26',
|
|
'2:6-20 -> 433:2-27',
|
|
'2:6 -> 434:2',
|
|
'2:20 -> 435:0',
|
|
'2:6 -> 437:0',
|
|
'2:6-20 -> 438:2-26',
|
|
'2:6-20 -> 439:2-26',
|
|
'2:6-20 -> 440:2-21',
|
|
'2:6-20 -> 441:2-21',
|
|
'2:6-20 -> 442:2-16',
|
|
'2:6-20 -> 443:2-16',
|
|
'2:6-20 -> 444:2-16',
|
|
'2:6-20 -> 445:2-17',
|
|
'2:6-20 -> 446:2-17',
|
|
'2:6-20 -> 447:2-15',
|
|
'2:6-20 -> 448:2-15',
|
|
'2:6-20 -> 449:2-20',
|
|
'2:6-20 -> 450:2-40',
|
|
'2:6-20 -> 451:2-32',
|
|
'2:6-20 -> 452:2-31',
|
|
'2:6-20 -> 453:2-30',
|
|
'2:6-20 -> 454:2-17',
|
|
'2:6-20 -> 455:2-22',
|
|
'2:6-20 -> 456:2-24',
|
|
'2:6-20 -> 457:2-25',
|
|
'2:6-20 -> 458:2-26',
|
|
'2:6-20 -> 459:2-20',
|
|
'2:6-20 -> 460:2-29',
|
|
'2:6-20 -> 461:2-30',
|
|
'2:6-20 -> 462:2-40',
|
|
'2:6-20 -> 463:2-36',
|
|
'2:6-20 -> 464:2-29',
|
|
'2:6-20 -> 465:2-24',
|
|
'2:6-20 -> 466:2-32',
|
|
'2:6-20 -> 467:2-14',
|
|
'2:6-20 -> 468:2-20',
|
|
'2:6-20 -> 469:2-18',
|
|
'2:6-20 -> 470:2-19',
|
|
'2:6-20 -> 471:2-20',
|
|
'2:6-20 -> 472:2-16',
|
|
'2:6-20 -> 473:2-18',
|
|
'2:6-20 -> 474:2-15',
|
|
'2:6-20 -> 475:2-21',
|
|
'2:6-20 -> 476:2-23',
|
|
'2:6-20 -> 477:2-29',
|
|
'2:6-20 -> 478:2-27',
|
|
'2:6-20 -> 479:2-28',
|
|
'2:6-20 -> 480:2-29',
|
|
'2:6-20 -> 481:2-25',
|
|
'2:6-20 -> 482:2-26',
|
|
'2:6-20 -> 483:2-27',
|
|
'2:6 -> 484:2',
|
|
'2:20 -> 485:0',
|
|
])
|
|
})
|
|
|
|
oxide.test.todo('utilities have source maps')
|
|
stable.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(1)
|
|
|
|
expect(annotations).toStrictEqual([
|
|
'2:6 -> 1:0',
|
|
'2:6-25 -> 2:4-24',
|
|
'2:6 -> 3:4',
|
|
'2:25 -> 4:0',
|
|
])
|
|
})
|
|
|
|
oxide.test.todo('components have source maps')
|
|
stable.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(1)
|
|
|
|
expect(annotations).toEqual([
|
|
'2:6 -> 1:0',
|
|
'2:6 -> 2:4',
|
|
'2:26 -> 3:0',
|
|
'2:6 -> 4:0',
|
|
'2:6 -> 5:4',
|
|
'2:6 -> 6:8',
|
|
'2:26 -> 7:4',
|
|
'2:26 -> 8:0',
|
|
'2:6 -> 9:0',
|
|
'2:6 -> 10:4',
|
|
'2:6 -> 11:8',
|
|
'2:26 -> 12:4',
|
|
'2:26 -> 13:0',
|
|
'2:6 -> 14:0',
|
|
'2:6 -> 15:4',
|
|
'2:6 -> 16:8',
|
|
'2:26 -> 17:4',
|
|
'2:26 -> 18:0',
|
|
'2:6 -> 19:0',
|
|
'2:6 -> 20:4',
|
|
'2:6 -> 21:8',
|
|
'2:26 -> 22:4',
|
|
'2:26 -> 23:0',
|
|
'2:6 -> 24:0',
|
|
'2:6 -> 25:4',
|
|
'2:6 -> 26:8',
|
|
'2:26 -> 27:4',
|
|
'2:26 -> 28:0',
|
|
])
|
|
})
|
|
|
|
oxide.test.todo('source maps for layer rules are not rewritten to point to @tailwind directives')
|
|
stable.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).toEqual(['components.css', 'input.css'])
|
|
|
|
expect(annotations).toEqual([
|
|
'2:10 -> 1:0',
|
|
'2:10 -> 2:14',
|
|
'2:29 -> 3:0',
|
|
'3:12 -> 4:12',
|
|
'4:14-35 -> 5:14-35',
|
|
'5:12 -> 6:12',
|
|
'3:12 -> 7:12',
|
|
'4:14-35 -> 8:14-35',
|
|
'5:12 -> 9:12',
|
|
'1:0 -> 10:12',
|
|
'3:12 -> 11:12',
|
|
'4:14-35 -> 12:14-35',
|
|
'5:12 -> 13:12',
|
|
'1:0 -> 14:0',
|
|
])
|
|
}
|
|
)
|
|
})
|