e572dc645a
* bump `lightningcss` * allow for non-standard selector combinators such as `::deep` * just use Prettier when comparing CSS results We were using 2 different engines where the stable one was not using Lightning CSS and the Oxide one was using Lightning CSS. To ensure that we didn't have to rewrite every single test expectation, the `toMatchFormattedCss` parsed both the actual and expected value using Lightning CSS (to make the result similar), then it used Prettier to make it... pretty. Right now we _only_ use Lightning CSS, which means that we can drop the additional lightningcss format step and just use Prettier on both the actual and expected values. Pretty also only prettifies the CSS, it doesn't rewrite it. E.g.: `@media (min-width: 768px)` will not be optimized to `@media (width >= 768px)`, that's something that Lightning CSS does for us. This will require some changes in our test output, but it will be consistent afterwards because there won't be hidden transformation steps anymore. Because up until now it could be that the actual result was `color: black` but the tests showed `color: #000` (because it is shorter). This change will reflect reality. * update tests based on previous commit * only use `toMatchFormattedCss` instead of `toMatchCss` They both do the exact same thing right now. While `toMatchCss` is shorter, `toMatchFormattedCss` makes a bit more sense since we are comparing the Prettier results. * update integration tests
485 lines
12 KiB
JavaScript
485 lines
12 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",
|
|
"2:2-20 -> 2:2-20",
|
|
"3:2-23 -> 3:2-23",
|
|
"4:2-57 -> 4:2-57",
|
|
"5:2-13 -> 5:2-13",
|
|
"6:2-14 -> 6:2-14",
|
|
"7:0 -> 7:0",
|
|
"7:4 -> 9:0",
|
|
"10:2-20 -> 10:2-20",
|
|
"11:2-57 -> 11:2-57",
|
|
"12:2-13 -> 12:2-13",
|
|
"13:2-14 -> 13:2-14",
|
|
"14:0 -> 14:0",
|
|
"13:6 -> 16:0",
|
|
"17:2-20 -> 17:2-20",
|
|
"18:2-53 -> 18:2-53",
|
|
"19:2-13 -> 19:2-13",
|
|
"20:2-14 -> 20:2-14",
|
|
"21:0 -> 21: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",
|
|
"2:2-24 -> 2:2-24",
|
|
"3:2-25 -> 3:2-25",
|
|
"4:0 -> 4:0",
|
|
"2:4 -> 6:0",
|
|
"7:2-18 -> 7:2-18",
|
|
"8:0 -> 8:0",
|
|
"2:4 -> 10:0",
|
|
"11:2-32 -> 11:2-32",
|
|
"12:2-13 -> 12:2-13",
|
|
"13:2-31 -> 13:2-31",
|
|
"14:2-33 -> 14:2-33",
|
|
"15:2-208 -> 15:2-208",
|
|
"16:2-18 -> 16:2-18",
|
|
"17:0 -> 17:0",
|
|
"2:4 -> 19:0",
|
|
"20:2-22 -> 20:2-22",
|
|
"21:2-11 -> 21:2-11",
|
|
"22:0 -> 22:0",
|
|
"2:4 -> 24:0",
|
|
"25:2-16 -> 25:2-16",
|
|
"26:2-23 -> 26:2-23",
|
|
"27:2-11 -> 27:2-11",
|
|
"28:0 -> 28:0",
|
|
"2:4 -> 30:0",
|
|
"31:2-35 -> 31:2-35",
|
|
"32:0 -> 32:0",
|
|
"2:4 -> 34:0",
|
|
"35:2-20 -> 35:2-20",
|
|
"36:2-22 -> 36:2-22",
|
|
"37:0 -> 37:0",
|
|
"2:4 -> 39:0",
|
|
"40:2-16 -> 40:2-16",
|
|
"41:2-26 -> 41:2-26",
|
|
"42:0 -> 42:0",
|
|
"2:4 -> 44:0",
|
|
"45:2-21 -> 45:2-21",
|
|
"46:0 -> 46:0",
|
|
"2:4 -> 48:0",
|
|
"49:2-109 -> 49:2-109",
|
|
"50:2-16 -> 50:2-16",
|
|
"51:0 -> 51:0",
|
|
"2:4 -> 53:0",
|
|
"54:2-16 -> 54:2-16",
|
|
"55:0 -> 55:0",
|
|
"2:4 -> 57:0",
|
|
"58:2-26 -> 58:2-26",
|
|
"59:2-16 -> 59:2-16",
|
|
"60:2-16 -> 60:2-16",
|
|
"61:2-20 -> 61:2-20",
|
|
"62:0 -> 62:0",
|
|
"2:4 -> 64:0",
|
|
"65:2-16 -> 65:2-16",
|
|
"66:0 -> 66:0",
|
|
"2:4 -> 68:0",
|
|
"69:2-12 -> 69:2-12",
|
|
"70:0 -> 70:0",
|
|
"2:4 -> 72:0",
|
|
"73:2-16 -> 73:2-16",
|
|
"74:2-23 -> 74:2-23",
|
|
"75:2-27 -> 75:2-27",
|
|
"76:0 -> 76:0",
|
|
"2:4 -> 78:0",
|
|
"79:2-32 -> 79:2-32",
|
|
"80:2-34 -> 80:2-34",
|
|
"81:2-22 -> 81:2-22",
|
|
"82:2-17 -> 82:2-17",
|
|
"83:2-22 -> 83:2-22",
|
|
"84:2-22 -> 84:2-22",
|
|
"85:2-16 -> 85:2-16",
|
|
"86:2-11 -> 86:2-11",
|
|
"87:2-12 -> 87:2-12",
|
|
"88:0 -> 88:0",
|
|
"2:4 -> 90:0",
|
|
"91:2-22 -> 91:2-22",
|
|
"92:0 -> 92:0",
|
|
"2:4 -> 94:0",
|
|
"95:2-28 -> 95:2-28",
|
|
"96:2-25 -> 96:2-25",
|
|
"97:2-24 -> 97:2-24",
|
|
"98:0 -> 98:0",
|
|
"2:4 -> 100:0",
|
|
"101:2-15 -> 101:2-15",
|
|
"102:0 -> 102:0",
|
|
"2:4 -> 104:0",
|
|
"105:2-18 -> 105:2-18",
|
|
"106:0 -> 106:0",
|
|
"2:4 -> 108:0",
|
|
"109:2-26 -> 109:2-26",
|
|
"110:0 -> 110:0",
|
|
"2:4 -> 112:0",
|
|
"113:2-14 -> 113:2-14",
|
|
"114:0 -> 114:0",
|
|
"2:4 -> 116:0",
|
|
"117:2-31 -> 117:2-31",
|
|
"118:2-22 -> 118:2-22",
|
|
"119:0 -> 119:0",
|
|
"2:4 -> 121:0",
|
|
"122:2-26 -> 122:2-26",
|
|
"123:0 -> 123:0",
|
|
"2:4 -> 125:0",
|
|
"126:2-28 -> 126:2-28",
|
|
"127:2-15 -> 127:2-15",
|
|
"128:0 -> 128:0",
|
|
"2:4 -> 130:0",
|
|
"131:2-20 -> 131:2-20",
|
|
"132:0 -> 132:0",
|
|
"2:4 -> 134:0",
|
|
"135:2-11 -> 135:2-11",
|
|
"136:0 -> 136:0",
|
|
"2:4 -> 138:0",
|
|
"139:2-11 -> 139:2-11",
|
|
"140:2-12 -> 140:2-12",
|
|
"141:0 -> 141:0",
|
|
"2:4 -> 143:0",
|
|
"144:2-12 -> 144:2-12",
|
|
"145:0 -> 145:0",
|
|
"2:4 -> 147:0",
|
|
"148:2-11 -> 148:2-11",
|
|
"149:2-12 -> 149:2-12",
|
|
"150:2-18 -> 150:2-18",
|
|
"151:0 -> 151:0",
|
|
"2:4 -> 153:0",
|
|
"154:2-12 -> 154:2-12",
|
|
"155:0 -> 155:0",
|
|
"2:4 -> 157:0",
|
|
"158:2-18 -> 158:2-18",
|
|
"159:0 -> 159:0",
|
|
"2:4 -> 161:0",
|
|
"162:2-12 -> 162:2-12",
|
|
"163:2-16 -> 163:2-16",
|
|
"164:0 -> 164:0",
|
|
"2:4 -> 166:0",
|
|
"167:2-17 -> 167:2-17",
|
|
"168:0 -> 168:0",
|
|
"2:4 -> 170:0",
|
|
"171:2-17 -> 171:2-17",
|
|
"172:0 -> 172:0",
|
|
"2:4 -> 174:0",
|
|
"175:2-24 -> 175:2-24",
|
|
"176:2-16 -> 176:2-16",
|
|
"177:0 -> 177:0",
|
|
"2:4 -> 179:0",
|
|
"180:2-17 -> 180:2-17",
|
|
"181:2-14 -> 181:2-14",
|
|
"182:0 -> 182:0",
|
|
"2:4 -> 184:0",
|
|
"185:2-15 -> 185:2-15",
|
|
"186:0 -> 186:0",
|
|
"2:4 -> 188:0",
|
|
"189:2-26 -> 189:2-26",
|
|
"190:2-26 -> 190:2-26",
|
|
"191:2-21 -> 191:2-21",
|
|
"192:2-21 -> 192:2-21",
|
|
"193:2-16 -> 193:2-16",
|
|
"194:2-16 -> 194:2-16",
|
|
"195:2-16 -> 195:2-16",
|
|
"196:2-17 -> 196:2-17",
|
|
"197:2-17 -> 197:2-17",
|
|
"198:2-14 -> 198:2-14",
|
|
"199:2-14 -> 199:2-14",
|
|
"200:2-19 -> 200:2-19",
|
|
"201:2-40 -> 201:2-40",
|
|
"202:2-31 -> 202:2-31",
|
|
"203:2-30 -> 203:2-30",
|
|
"204:2-29 -> 204:2-29",
|
|
"205:2-16 -> 205:2-16",
|
|
"206:2-21 -> 206:2-21",
|
|
"207:2-23 -> 207:2-23",
|
|
"208:2-24 -> 208:2-24",
|
|
"209:2-25 -> 209:2-25",
|
|
"210:2-19 -> 210:2-19",
|
|
"211:2-29 -> 211:2-29",
|
|
"212:2-30 -> 212:2-30",
|
|
"213:2-28 -> 213:2-28",
|
|
"214:2-36 -> 214:2-36",
|
|
"215:2-29 -> 215:2-29",
|
|
"216:2-24 -> 216:2-24",
|
|
"217:2-32 -> 217:2-32",
|
|
"218:2-13 -> 218:2-13",
|
|
"219:2-19 -> 219:2-19",
|
|
"220:2-17 -> 220:2-17",
|
|
"221:2-18 -> 221:2-18",
|
|
"222:2-19 -> 222:2-19",
|
|
"223:2-15 -> 223:2-15",
|
|
"224:2-17 -> 224:2-17",
|
|
"225:2-14 -> 225:2-14",
|
|
"226:2-20 -> 226:2-20",
|
|
"227:2-22 -> 227:2-22",
|
|
"228:2-28 -> 228:2-28",
|
|
"229:2-26 -> 229:2-26",
|
|
"230:2-27 -> 230:2-27",
|
|
"231:2-28 -> 231:2-28",
|
|
"232:2-24 -> 232:2-24",
|
|
"233:2-25 -> 233:2-25",
|
|
"234:2-26 -> 234:2-26",
|
|
"235:2-23 -> 235:2-23",
|
|
"236:0 -> 236: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",
|
|
"2:2-22 -> 2:2-22",
|
|
"3:2-48 -> 3:2-48",
|
|
"4:0 -> 4: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",
|
|
"2:2-13 -> 2:2-13",
|
|
"3:0 -> 3:0",
|
|
"2:4 -> 5:0",
|
|
"2:4 -> 6:2",
|
|
"7:4-20 -> 7:4-20",
|
|
"8:2 -> 8:2",
|
|
"9:0 -> 9:0",
|
|
"2:4 -> 11:0",
|
|
"2:4 -> 12:2",
|
|
"13:4-20 -> 13:4-20",
|
|
"14:2 -> 14:2",
|
|
"15:0 -> 15:0",
|
|
"2:4 -> 17:0",
|
|
"2:4 -> 18:2",
|
|
"19:4-21 -> 19:4-21",
|
|
"20:2 -> 20:2",
|
|
"21:0 -> 21:0",
|
|
"2:4 -> 23:0",
|
|
"2:4 -> 24:2",
|
|
"25:4-21 -> 25:4-21",
|
|
"26:2 -> 26:2",
|
|
"27:0 -> 27:0",
|
|
"2:4 -> 29:0",
|
|
"2:4 -> 30:2",
|
|
"31:4-21 -> 31:4-21",
|
|
"32:2 -> 32:2",
|
|
"33:0 -> 33: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(3)
|
|
expect(sources).toMatchInlineSnapshot(`
|
|
[
|
|
"components.css",
|
|
"source-maps.test.js%3Ftest=c291cmNlIG1hcHMgZm9yIGxheWVyIHJ1bGVzIGFyZSBub3QgcmV3cml0dGVuIHRvIHBvaW50IHRvIEB0YWlsd2luZCBkaXJlY3RpdmVz",
|
|
"input.css",
|
|
]
|
|
`)
|
|
|
|
expect(annotations).toMatchInlineSnapshot(`
|
|
[
|
|
"2:6 -> 1:0",
|
|
"2:2-18 -> 2:2-18",
|
|
"3:0 -> 3:0",
|
|
"3:8 -> 5:0",
|
|
"6:2-23 -> 6:2-23",
|
|
"7:0 -> 7: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",
|
|
"2:2-22 -> 2:2-22",
|
|
"3:2-48 -> 3:2-48",
|
|
"4:0 -> 4: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",
|
|
"2:2-22 -> 2:2-22",
|
|
"3:2-48 -> 3:2-48",
|
|
"4:0 -> 4:0",
|
|
]
|
|
`)
|
|
})
|