Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

test: add sugarss sourcemap test #10303

Merged
merged 2 commits into from
Oct 1, 2022
Merged

test: add sugarss sourcemap test #10303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1ddc24d
test: remove duplicate css sourcemap test
sapphi-red Oct 1, 2022
b9953da
test: add sugarss sourcemap test
sapphi-red Oct 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
210 changes: 6 additions & 204 deletions playground/css-sourcemap/__tests__/css-sourcemap.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
.imported-sugarss
color: red
4 changes: 4 additions & 0 deletions playground/css-sourcemap/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop

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