From 7a6d4bc0d7fa614d3ac469ca35352a23aaef8232 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=A0=20/=20green?= Date: Sat, 1 Oct 2022 18:00:37 +0900 Subject: [PATCH] test: add sugarss sourcemap test (#10303) --- .../__tests__/css-sourcemap.spec.ts | 210 +----------------- playground/css-sourcemap/imported.sss | 2 + playground/css-sourcemap/index.html | 4 + playground/css-sourcemap/package.json | 3 +- pnpm-lock.yaml | 2 + 5 files changed, 16 insertions(+), 205 deletions(-) create mode 100644 playground/css-sourcemap/imported.sss diff --git a/playground/css-sourcemap/__tests__/css-sourcemap.spec.ts b/playground/css-sourcemap/__tests__/css-sourcemap.spec.ts index d7e9a5e8ecd71d..4b2331e8836d4c 100644 --- a/playground/css-sourcemap/__tests__/css-sourcemap.spec.ts +++ b/playground/css-sourcemap/__tests__/css-sourcemap.spec.ts @@ -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, @@ -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') - }) -}) diff --git a/playground/css-sourcemap/imported.sss b/playground/css-sourcemap/imported.sss new file mode 100644 index 00000000000000..56084992472c47 --- /dev/null +++ b/playground/css-sourcemap/imported.sss @@ -0,0 +1,2 @@ +.imported-sugarss + color: red diff --git a/playground/css-sourcemap/index.html b/playground/css-sourcemap/index.html index a943c1d113a9b4..6f81e0322e47be 100644 --- a/playground/css-sourcemap/index.html +++ b/playground/css-sourcemap/index.html @@ -24,6 +24,8 @@

CSS Sourcemap

<imported less> with string additionalData

<imported stylus>

+ +

<imported sugarss>

diff --git a/playground/css-sourcemap/package.json b/playground/css-sourcemap/package.json index d61c74d04eab04..3c60c0f1aa40e4 100644 --- a/playground/css-sourcemap/package.json +++ b/playground/css-sourcemap/package.json @@ -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" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 088899102f8c76..965ac298184bd6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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: {}