test: add sugarss sourcemap test (#10303)

This commit is contained in:
翠 / green 2022-10-01 18:00:37 +09:00 committed by GitHub
parent a60529fd80
commit 7a6d4bc0d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 16 additions and 205 deletions

View File

@ -231,210 +231,18 @@ describe.runIf(isServe)('serve', () => {
`)
})
test('should not output missing source file warning', () => {
serverLogs.forEach((log) => {
expect(log).not.toMatch(/Sourcemap for .+ points to missing source files/)
})
})
})
describe.runIf(isServe)('serve', () => {
const getStyleTagContentIncluding = async (content: string) => {
const styles = await page.$$('style')
for (const style of styles) {
const text = await style.textContent()
if (text.includes(content)) {
return text
}
}
throw new Error('Not found')
}
test('linked css', async () => {
const res = await page.request.get(
new URL('./linked.css', page.url()).href,
{
headers: {
accept: 'text/css'
}
}
)
const css = await res.text()
test('imported sugarss', async () => {
const css = await getStyleTagContentIncluding('.imported-sugarss ')
const map = extractSourcemap(css)
expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
{
"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;",
"mappings": "AAAA;EACE;AADc",
"sources": [
"/root/linked.css",
"/root/imported.sss",
],
"sourcesContent": [
".linked {
color: red;
}
",
],
"version": 3,
}
`)
})
test('linked css with import', async () => {
const res = await page.request.get(
new URL('./linked-with-import.css', page.url()).href,
{
headers: {
accept: 'text/css'
}
}
)
const css = await res.text()
const map = extractSourcemap(css)
expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
{
"mappings": "AAAA;EACE,UAAU;AACZ;;ACAA;EACE,UAAU;AACZ",
"sources": [
"/root/be-imported.css",
"/root/linked-with-import.css",
],
"sourcesContent": [
".be-imported {
color: red;
}
",
"@import '@/be-imported.css';
.linked-with-import {
color: red;
}
",
],
"version": 3,
}
`)
})
test('imported css', async () => {
const css = await getStyleTagContentIncluding('.imported ')
const map = extractSourcemap(css)
expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
{
"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;",
"sources": [
"/root/imported.css",
],
"sourcesContent": [
".imported {
color: red;
}
",
],
"version": 3,
}
`)
})
test('imported css with import', async () => {
const css = await getStyleTagContentIncluding('.imported-with-import ')
const map = extractSourcemap(css)
expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
{
"mappings": "AAAA;EACE,UAAU;AACZ;;ACAA;EACE,UAAU;AACZ",
"sources": [
"/root/be-imported.css",
"/root/imported-with-import.css",
],
"sourcesContent": [
".be-imported {
color: red;
}
",
"@import '@/be-imported.css';
.imported-with-import {
color: red;
}
",
],
"version": 3,
}
`)
})
test('imported sass', async () => {
const css = await getStyleTagContentIncluding('.imported-sass ')
const map = extractSourcemap(css)
expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
{
"mappings": "AACE;EACE",
"sources": [
"/root/imported.sass",
],
"sourcesContent": [
".imported
&-sass
color: red
",
],
"version": 3,
}
`)
})
test('imported sass module', async () => {
const css = await getStyleTagContentIncluding('._imported-sass-module_')
const map = extractSourcemap(css)
expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
{
"mappings": "AACE;EACE",
"sources": [
"/root/imported.module.sass",
],
"sourcesContent": [
".imported
&-sass-module
color: red
",
],
"version": 3,
}
`)
})
test('imported less', async () => {
const css = await getStyleTagContentIncluding('.imported-less ')
const map = extractSourcemap(css)
expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
{
"mappings": "AACE;EACE",
"sources": [
"/root/imported.less",
],
"sourcesContent": [
".imported {
&-less {
color: @color;
}
}
",
],
"version": 3,
}
`)
})
test('imported stylus', async () => {
const css = await getStyleTagContentIncluding('.imported-stylus ')
const map = extractSourcemap(css)
expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
{
"mappings": "AACE;EACE,cAAM",
"sources": [
"/root/imported.styl",
],
"sourcesContent": [
".imported
&-stylus
color blue-red-mixed
".imported-sugarss
color: red
",
],
"version": 3,
@ -448,9 +256,3 @@ describe.runIf(isServe)('serve', () => {
})
})
})
test.runIf(isBuild)('should not output sourcemap warning (#4939)', () => {
serverLogs.forEach((log) => {
expect(log).not.toMatch('Sourcemap is likely to be incorrect')
})
})

View File

@ -0,0 +1,2 @@
.imported-sugarss
color: red

View File

@ -24,6 +24,8 @@
<p class="imported-less">&lt;imported less&gt; with string additionalData</p>
<p class="imported-stylus">&lt;imported stylus&gt;</p>
<p class="imported-sugarss">&lt;imported sugarss&gt;</p>
</div>
<script type="module">
@ -40,6 +42,8 @@
import './imported.less'
import './imported.styl'
import './imported.sss'
</script>
<iframe src="virtual.html"></iframe>

View File

@ -12,6 +12,7 @@
"less": "^4.1.3",
"magic-string": "^0.26.4",
"sass": "^1.55.0",
"stylus": "^0.59.0"
"stylus": "^0.59.0",
"sugarss": "^4.0.1"
}
}

View File

@ -420,11 +420,13 @@ importers:
magic-string: ^0.26.4
sass: ^1.55.0
stylus: ^0.59.0
sugarss: ^4.0.1
devDependencies:
less: 4.1.3
magic-string: 0.26.4
sass: 1.55.0
stylus: 0.59.0
sugarss: 4.0.1
playground/css/css-dep:
specifiers: {}