archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity
tailwindcss/tests/source-maps.test.js
Robin Malfait 8e60a3c7e8
Use Lightning CSS in the PostCSS Plugin (#10399) 
* bump lightningcss

* use `lightningcss` in the main PostCss Plugin

* use lightningcss in our custom matchers

Now that we are using `lightningcss` and nesting in the new `oxide`
engine, the generated output _will_ be different in the majority of test
cases.

Using a combination of `prettier` and `lightningcss` will make the
output consistent.

The moment we are fully using the `oxide` engine, we can drop
`lightningcss` or `prettier` again to improve the performance of the
tests.

* update tests to apply `lightningcss` related changes

* update changelog

* add `lightningcss` and `browserslist` as dev dependencies to stable package.json

* only use `lightningcss` in tests (without prettier)

We will only fallback to prettier if lightningcss fails somehow.

* apply side effect chagnes due to only using lightningcss for tests

* make CI happy (integration tests)

Apply changes to integration tests now that we are using lightningcss

* transform `lightningcss` for Node 12 when running tests

* run prettier on failing tests for `toMatchFormattedCss`

This will result in better diffs because diffs are typically per block
and/or per line. But lightningcss will simplify certain selectors and
the diff won't be as clear.

We will only apply the prettier formatting for failing tests in the diff
view so that diffs are cleaner and we don't pay for the additional
prettier calls when tests pass.
2023-01-23 20:44:31 +01:00

526 lines
13 KiB
JavaScript
Raw Blame History

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 -> 28:1',
'2:6 -> 30:0',
'2:6-20 -> 31:2-26',
'2:6-20 -> 32:2-40',
'2:6-20 -> 33:2-26',
'2:6-20 -> 34:2-21',
'2:6-20 -> 35:2-230',
'2:6-20 -> 36:2-39',
'2:20 -> 37:0',
'2:6 -> 39:0',
'2:20 -> 42:1',
'2:6 -> 44:0',
'2:6-20 -> 45:2-19',
'2:6-20 -> 46:2-30',
'2:20 -> 47:0',
'2:6 -> 49:0',
'2:20 -> 53:1',
'2:6 -> 55:0',
'2:6-20 -> 56:2-19',
'2:6-20 -> 57:2-24',
'2:6-20 -> 58:2-31',
'2:20 -> 59:0',
'2:6 -> 61:0',
'2:20 -> 63:1',
'2:6 -> 65:0',
'2:6-20 -> 66:2-35',
'2:20 -> 67:0',
'2:6 -> 69:0',
'2:20 -> 71:1',
'2:6 -> 73:0',
'2:6-20 -> 79:2-20',
'2:6-20 -> 80:2-22',
'2:20 -> 81:0',
'2:6 -> 83:0',
'2:20 -> 85:1',
'2:6 -> 87:0',
'2:6-20 -> 88:2-16',
'2:6-20 -> 89:2-26',
'2:20 -> 90:0',
'2:6 -> 92:0',
'2:20 -> 94:1',
'2:6 -> 96:0',
'2:6-20 -> 98:2-21',
'2:20 -> 99:0',
'2:6 -> 101:0',
'2:20 -> 104:1',
'2:6 -> 106:0',
'2:6-20 -> 110:2-121',
'2:6-20 -> 111:2-24',
'2:20 -> 112:0',
'2:6 -> 114:0',
'2:20 -> 116:1',
'2:6 -> 118:0',
'2:6-20 -> 119:2-16',
'2:20 -> 120:0',
'2:6 -> 122:0',
'2:20 -> 124:1',
'2:6 -> 126:0',
'2:6-20 -> 128:2-16',
'2:6-20 -> 129:2-16',
'2:6-20 -> 130:2-20',
'2:6-20 -> 131:2-26',
'2:20 -> 132:0',
'2:6 -> 134:0',
'2:6-20 -> 135:2-17',
'2:20 -> 136:0',
'2:6 -> 138:0',
'2:6-20 -> 139:2-13',
'2:20 -> 140:0',
'2:6 -> 142:0',
'2:20 -> 146:1',
'2:6 -> 148:0',
'2:6-20 -> 149:2-24',
'2:6-20 -> 150:2-31',
'2:6-20 -> 151:2-35',
'2:20 -> 152:0',
'2:6 -> 154:0',
'2:20 -> 158:1',
'2:6 -> 160:0',
'2:6-20 -> 165:2-30',
'2:6-20 -> 166:2-25',
'2:6-20 -> 167:2-30',
'2:6-20 -> 168:2-30',
'2:6-20 -> 169:2-24',
'2:6-20 -> 170:2-19',
'2:6-20 -> 171:2-20',
'2:20 -> 172:0',
'2:6 -> 174:0',
'2:20 -> 176:1',
'2:6 -> 178:0',
'2:6-20 -> 180:2-22',
'2:20 -> 181:0',
'2:6 -> 183:0',
'2:20 -> 186:1',
'2:6 -> 188:0',
'2:6-20 -> 192:2-36',
'2:6-20 -> 193:2-39',
'2:6-20 -> 194:2-32',
'2:20 -> 195:0',
'2:6 -> 197:0',
'2:20 -> 199:1',
'2:6 -> 201:0',
'2:6-20 -> 202:2-15',
'2:20 -> 203:0',
'2:6 -> 205:0',
'2:20 -> 207:1',
'2:6 -> 209:0',
'2:6-20 -> 210:2-18',
'2:20 -> 211:0',
'2:6 -> 213:0',
'2:20 -> 215:1',
'2:6 -> 217:0',
'2:6-20 -> 218:2-26',
'2:20 -> 219:0',
'2:6 -> 221:0',
'2:20 -> 223:1',
'2:6 -> 225:0',
'2:6-20 -> 227:2-14',
'2:20 -> 228:0',
'2:6 -> 230:0',
'2:20 -> 233:1',
'2:6 -> 235:0',
'2:6-20 -> 236:2-39',
'2:6-20 -> 237:2-30',
'2:20 -> 238:0',
'2:6 -> 240:0',
'2:20 -> 242:1',
'2:6 -> 244:0',
'2:6-20 -> 245:2-26',
'2:20 -> 246:0',
'2:6 -> 248:0',
'2:20 -> 251:1',
'2:6 -> 253:0',
'2:6-20 -> 254:2-36',
'2:6-20 -> 255:2-23',
'2:20 -> 256:0',
'2:6 -> 258:0',
'2:20 -> 260:1',
'2:6 -> 262:0',
'2:6-20 -> 263:2-20',
'2:20 -> 264:0',
'2:6 -> 266:0',
'2:20 -> 268:1',
'2:6 -> 270:0',
'2:6-20 -> 283:2-11',
'2:20 -> 284:0',
'2:6 -> 286:0',
'2:6-20 -> 287:2-11',
'2:6-20 -> 288:2-12',
'2:20 -> 289:0',
'2:6 -> 291:0',
'2:6-20 -> 292:2-12',
'2:20 -> 293:0',
'2:6 -> 295:0',
'2:6-20 -> 298:2-18',
'2:6-20 -> 299:2-11',
'2:6-20 -> 300:2-12',
'2:20 -> 301:0',
'2:6 -> 303:0',
'2:20 -> 305:1',
'2:6 -> 307:0',
'2:6-20 -> 308:2-18',
'2:20 -> 309:0',
'2:6 -> 311:0',
'2:20 -> 314:1',
'2:6 -> 316:0',
'2:6-20 -> 318:2-20',
'2:6-20 -> 319:2-24',
'2:20 -> 320:0',
'2:6 -> 322:0',
'2:20 -> 324:1',
'2:6 -> 326:0',
'2:6-20 -> 328:2-17',
'2:20 -> 329:0',
'2:6 -> 331:0',
'2:20 -> 333:1',
'2:6 -> 334:0',
'2:6-20 -> 335:2-17',
'2:20 -> 336:0',
'2:6 -> 338:0',
'2:20 -> 342:1',
'2:6 -> 344:0',
'2:6-20 -> 352:2-24',
'2:6-20 -> 353:2-32',
'2:20 -> 354:0',
'2:6 -> 356:0',
'2:20 -> 358:1',
'2:6 -> 360:0',
'2:6-20 -> 362:2-17',
'2:6-20 -> 363:2-14',
'2:20 -> 364:0',
'2:6-20 -> 366:0-72',
'2:6 -> 367:0',
'2:6-20 -> 368:2-15',
'2:20 -> 369:0',
'2:6 -> 371:0',
'2:6-20 -> 372:2-26',
'2:6-20 -> 373:2-26',
'2:6-20 -> 374:2-21',
'2:6-20 -> 375:2-21',
'2:6-20 -> 376:2-16',
'2:6-20 -> 377:2-16',
'2:6-20 -> 378:2-16',
'2:6-20 -> 379:2-17',
'2:6-20 -> 380:2-17',
'2:6-20 -> 381:2-15',
'2:6-20 -> 382:2-15',
'2:6-20 -> 383:2-20',
'2:6-20 -> 384:2-40',
'2:6-20 -> 385:2-17',
'2:6-20 -> 386:2-22',
'2:6-20 -> 387:2-24',
'2:6-20 -> 388:2-25',
'2:6-20 -> 389:2-26',
'2:6-20 -> 390:2-20',
'2:6-20 -> 391:2-29',
'2:6-20 -> 392:2-30',
'2:6-20 -> 393:2-40',
'2:6-20 -> 394:2-36',
'2:6-20 -> 395:2-29',
'2:6-20 -> 396:2-24',
'2:6-20 -> 397:2-32',
'2:6-20 -> 398:2-14',
'2:6-20 -> 399:2-20',
'2:6-20 -> 400:2-18',
'2:6-20 -> 401:2-19',
'2:6-20 -> 402:2-20',
'2:6-20 -> 403:2-16',
'2:6-20 -> 404:2-18',
'2:6-20 -> 405:2-15',
'2:6-20 -> 406:2-21',
'2:6-20 -> 407:2-23',
'2:6-20 -> 408:2-29',
'2:6-20 -> 409:2-27',
'2:6-20 -> 410:2-28',
'2:6-20 -> 411:2-29',
'2:6-20 -> 412:2-25',
'2:6-20 -> 413:2-26',
'2:6-20 -> 414:2-27',
'2:6 -> 415:2',
'2:20 -> 416:0',
'2:6 -> 418:0',
'2:6-20 -> 419:2-26',
'2:6-20 -> 420:2-26',
'2:6-20 -> 421:2-21',
'2:6-20 -> 422:2-21',
'2:6-20 -> 423:2-16',
'2:6-20 -> 424:2-16',
'2:6-20 -> 425:2-16',
'2:6-20 -> 426:2-17',
'2:6-20 -> 427:2-17',
'2:6-20 -> 428:2-15',
'2:6-20 -> 429:2-15',
'2:6-20 -> 430:2-20',
'2:6-20 -> 431:2-40',
'2:6-20 -> 432:2-17',
'2:6-20 -> 433:2-22',
'2:6-20 -> 434:2-24',
'2:6-20 -> 435:2-25',
'2:6-20 -> 436:2-26',
'2:6-20 -> 437:2-20',
'2:6-20 -> 438:2-29',
'2:6-20 -> 439:2-30',
'2:6-20 -> 440:2-40',
'2:6-20 -> 441:2-36',
'2:6-20 -> 442:2-29',
'2:6-20 -> 443:2-24',
'2:6-20 -> 444:2-32',
'2:6-20 -> 445:2-14',
'2:6-20 -> 446:2-20',
'2:6-20 -> 447:2-18',
'2:6-20 -> 448:2-19',
'2:6-20 -> 449:2-20',
'2:6-20 -> 450:2-16',
'2:6-20 -> 451:2-18',
'2:6-20 -> 452:2-15',
'2:6-20 -> 453:2-21',
'2:6-20 -> 454:2-23',
'2:6-20 -> 455:2-29',
'2:6-20 -> 456:2-27',
'2:6-20 -> 457:2-28',
'2:6-20 -> 458:2-29',
'2:6-20 -> 459:2-25',
'2:6-20 -> 460:2-26',
'2:6-20 -> 461:2-27',
'2:6 -> 462:2',
'2:20 -> 463: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` }],
}
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',
])
}
)
})
Reference in New Issue View Git Blame Copy Permalink