Skip to content

Commit

Permalink
test: add sugarss sourcemap test (#10303)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sapphi-red
sapphi-red committed Oct 1, 2022
1 parent a60529f commit 7a6d4bc
Show file tree
Hide file tree
Showing 5 changed files with 16 additions and 205 deletions.
210 changes: 6 additions & 204 deletions playground/css-sourcemap/__tests__/css-sourcemap.spec.ts
View file
Expand Up @@ -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()
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;",
"sources": [
"/root/linked.css",
],
"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 ')
test('imported sugarss', async () => {
const css = await getStyleTagContentIncluding('.imported-sugarss ')
const map = extractSourcemap(css)
expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
{
"mappings": "AACE;EACE",
"mappings": "AAAA;EACE;AADc",
"sources": [
"/root/imported.less",
"/root/imported.sss",
],
"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,
Expand All @@ -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')
})
})
2 changes: 2 additions & 0 deletions playground/css-sourcemap/imported.sss
View file
@@ -0,0 +1,2 @@
.imported-sugarss
color: red
4 changes: 4 additions & 0 deletions playground/css-sourcemap/index.html
View file
Expand Up @@ -24,6 +24,8 @@ <h1>CSS Sourcemap</h1>
<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">
Expand All @@ -40,6 +42,8 @@ <h1>CSS Sourcemap</h1>
import './imported.less'

import './imported.styl'

import './imported.sss'
</script>

<iframe src="virtual.html"></iframe>
3 changes: 2 additions & 1 deletion playground/css-sourcemap/package.json
View file
Expand Up @@ -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"
}
}
2 changes: 2 additions & 0 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 7a6d4bc

Please sign in to comment.