Skip to content

Commit 7a6d4bc

Browse files
sapphi-redsapphi-red
authored
test: add sugarss sourcemap test (#10303)
1 parent a60529f commit 7a6d4bc

File tree

5 files changed

+16
-205
lines changed

5 files changed

+16
-205
lines changed

‎playground/css-sourcemap/__tests__/css-sourcemap.spec.ts

+6-204
Original file line numberDiff line numberDiff line change
@@ -231,210 +231,18 @@ describe.runIf(isServe)('serve', () => {
231231
`)
232232
})
233233

234-
test('should not output missing source file warning', () => {
235-
serverLogs.forEach((log) => {
236-
expect(log).not.toMatch(/Sourcemap for .+ points to missing source files/)
237-
})
238-
})
239-
})
240-
241-
describe.runIf(isServe)('serve', () => {
242-
const getStyleTagContentIncluding = async (content: string) => {
243-
const styles = await page.$$('style')
244-
for (const style of styles) {
245-
const text = await style.textContent()
246-
if (text.includes(content)) {
247-
return text
248-
}
249-
}
250-
throw new Error('Not found')
251-
}
252-
253-
test('linked css', async () => {
254-
const res = await page.request.get(
255-
new URL('./linked.css', page.url()).href,
256-
{
257-
headers: {
258-
accept: 'text/css'
259-
}
260-
}
261-
)
262-
const css = await res.text()
263-
const map = extractSourcemap(css)
264-
expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
265-
{
266-
"mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACT,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACb,CAAC;",
267-
"sources": [
268-
"/root/linked.css",
269-
],
270-
"sourcesContent": [
271-
".linked {
272-
color: red;
273-
}
274-
",
275-
],
276-
"version": 3,
277-
}
278-
`)
279-
})
280-
281-
test('linked css with import', async () => {
282-
const res = await page.request.get(
283-
new URL('./linked-with-import.css', page.url()).href,
284-
{
285-
headers: {
286-
accept: 'text/css'
287-
}
288-
}
289-
)
290-
const css = await res.text()
291-
const map = extractSourcemap(css)
292-
expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
293-
{
294-
"mappings": "AAAA;EACE,UAAU;AACZ;;ACAA;EACE,UAAU;AACZ",
295-
"sources": [
296-
"/root/be-imported.css",
297-
"/root/linked-with-import.css",
298-
],
299-
"sourcesContent": [
300-
".be-imported {
301-
color: red;
302-
}
303-
",
304-
"@import '@/be-imported.css';
305-
306-
.linked-with-import {
307-
color: red;
308-
}
309-
",
310-
],
311-
"version": 3,
312-
}
313-
`)
314-
})
315-
316-
test('imported css', async () => {
317-
const css = await getStyleTagContentIncluding('.imported ')
318-
const map = extractSourcemap(css)
319-
expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
320-
{
321-
"mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACX,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACb,CAAC;",
322-
"sources": [
323-
"/root/imported.css",
324-
],
325-
"sourcesContent": [
326-
".imported {
327-
color: red;
328-
}
329-
",
330-
],
331-
"version": 3,
332-
}
333-
`)
334-
})
335-
336-
test('imported css with import', async () => {
337-
const css = await getStyleTagContentIncluding('.imported-with-import ')
338-
const map = extractSourcemap(css)
339-
expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
340-
{
341-
"mappings": "AAAA;EACE,UAAU;AACZ;;ACAA;EACE,UAAU;AACZ",
342-
"sources": [
343-
"/root/be-imported.css",
344-
"/root/imported-with-import.css",
345-
],
346-
"sourcesContent": [
347-
".be-imported {
348-
color: red;
349-
}
350-
",
351-
"@import '@/be-imported.css';
352-
353-
.imported-with-import {
354-
color: red;
355-
}
356-
",
357-
],
358-
"version": 3,
359-
}
360-
`)
361-
})
362-
363-
test('imported sass', async () => {
364-
const css = await getStyleTagContentIncluding('.imported-sass ')
365-
const map = extractSourcemap(css)
366-
expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
367-
{
368-
"mappings": "AACE;EACE",
369-
"sources": [
370-
"/root/imported.sass",
371-
],
372-
"sourcesContent": [
373-
".imported
374-
&-sass
375-
color: red
376-
",
377-
],
378-
"version": 3,
379-
}
380-
`)
381-
})
382-
383-
test('imported sass module', async () => {
384-
const css = await getStyleTagContentIncluding('._imported-sass-module_')
385-
const map = extractSourcemap(css)
386-
expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
387-
{
388-
"mappings": "AACE;EACE",
389-
"sources": [
390-
"/root/imported.module.sass",
391-
],
392-
"sourcesContent": [
393-
".imported
394-
&-sass-module
395-
color: red
396-
",
397-
],
398-
"version": 3,
399-
}
400-
`)
401-
})
402-
403-
test('imported less', async () => {
404-
const css = await getStyleTagContentIncluding('.imported-less ')
234+
test('imported sugarss', async () => {
235+
const css = await getStyleTagContentIncluding('.imported-sugarss ')
405236
const map = extractSourcemap(css)
406237
expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
407238
{
408-
"mappings": "AACE;EACE",
239+
"mappings": "AAAA;EACE;AADc",
409240
"sources": [
410-
"/root/imported.less",
241+
"/root/imported.sss",
411242
],
412243
"sourcesContent": [
413-
".imported {
414-
&-less {
415-
color: @color;
416-
}
417-
}
418-
",
419-
],
420-
"version": 3,
421-
}
422-
`)
423-
})
424-
425-
test('imported stylus', async () => {
426-
const css = await getStyleTagContentIncluding('.imported-stylus ')
427-
const map = extractSourcemap(css)
428-
expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
429-
{
430-
"mappings": "AACE;EACE,cAAM",
431-
"sources": [
432-
"/root/imported.styl",
433-
],
434-
"sourcesContent": [
435-
".imported
436-
&-stylus
437-
color blue-red-mixed
244+
".imported-sugarss
245+
color: red
438246
",
439247
],
440248
"version": 3,
@@ -448,9 +256,3 @@ describe.runIf(isServe)('serve', () => {
448256
})
449257
})
450258
})
451-
452-
test.runIf(isBuild)('should not output sourcemap warning (#4939)', () => {
453-
serverLogs.forEach((log) => {
454-
expect(log).not.toMatch('Sourcemap is likely to be incorrect')
455-
})
456-
})

‎playground/css-sourcemap/imported.sss

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.imported-sugarss
2+
color: red

‎playground/css-sourcemap/index.html

+4
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ <h1>CSS Sourcemap</h1>
2424
<p class="imported-less">&lt;imported less&gt; with string additionalData</p>
2525

2626
<p class="imported-stylus">&lt;imported stylus&gt;</p>
27+
28+
<p class="imported-sugarss">&lt;imported sugarss&gt;</p>
2729
</div>
2830

2931
<script type="module">
@@ -40,6 +42,8 @@ <h1>CSS Sourcemap</h1>
4042
import './imported.less'
4143

4244
import './imported.styl'
45+
46+
import './imported.sss'
4347
</script>
4448

4549
<iframe src="virtual.html"></iframe>

‎playground/css-sourcemap/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"less": "^4.1.3",
1313
"magic-string": "^0.26.4",
1414
"sass": "^1.55.0",
15-
"stylus": "^0.59.0"
15+
"stylus": "^0.59.0",
16+
"sugarss": "^4.0.1"
1617
}
1718
}

‎pnpm-lock.yaml

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)