317fba1d6b
* Refactor * Keep traversing sibling nodes * Make sure the root node has a source location for the end * Add source map test for at-rule variants * Update changelog
553 lines
14 KiB
JavaScript
553 lines
14 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-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",
|
|
]
|
|
`)
|
|
})
|