diff --git a/playground/css-sourcemap/__tests__/css-sourcemap.spec.ts b/playground/css-sourcemap/__tests__/css-sourcemap.spec.ts index f943143187ee51..ec343e011ca79e 100644 --- a/playground/css-sourcemap/__tests__/css-sourcemap.spec.ts +++ b/playground/css-sourcemap/__tests__/css-sourcemap.spec.ts @@ -51,26 +51,29 @@ describe.runIf(isServe)('serve', () => { ) const css = await res.text() const map = extractSourcemap(css) - expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` - { - "mappings": "AAAA;EACE,UAAU;AACZ;;ACAA;EACE,UAAU;AACZ", - "sources": [ - "be-imported.css", - "linked-with-import.css", - ], - "sourcesContent": [ - ".be-imported { + expect(formatSourcemapForSnapshot(map, css)).toMatchInlineSnapshot(` + SourceMap { + content: { + "mappings": "AAAA;EACE,UAAU;AACZ;;ACAA;EACE,UAAU;AACZ", + "sources": [ + "be-imported.css", + "linked-with-import.css", + ], + "sourcesContent": [ + ".be-imported { color: red; } ", - "@import '@/be-imported.css'; + "@import '@/be-imported.css'; .linked-with-import { color: red; } ", - ], - "version": 3, + ], + "version": 3, + }, + visualization: "https://evanw.github.io/source-map-visualization/#NzAALmJlLWltcG9ydGVkIHsKICBjb2xvcjogcmVkOwp9CgoubGlua2VkLXdpdGgtaW1wb3J0IHsKICBjb2xvcjogcmVkOwp9CjI1NAB7Im1hcHBpbmdzIjoiQUFBQTtFQUNFLFVBQVU7QUFDWjs7QUNBQTtFQUNFLFVBQVU7QUFDWiIsInNvdXJjZXMiOlsiYmUtaW1wb3J0ZWQuY3NzIiwibGlua2VkLXdpdGgtaW1wb3J0LmNzcyJdLCJzb3VyY2VzQ29udGVudCI6WyIuYmUtaW1wb3J0ZWQge1xuICBjb2xvcjogcmVkO1xufVxuIiwiQGltcG9ydCAnQC9iZS1pbXBvcnRlZC5jc3MnO1xuXG4ubGlua2VkLXdpdGgtaW1wb3J0IHtcbiAgY29sb3I6IHJlZDtcbn1cbiJdLCJ2ZXJzaW9uIjozfQ==" } `) }) @@ -89,19 +92,22 @@ describe.runIf(isServe)('serve', () => { test('imported css', async () => { const css = await getStyleTagContentIncluding('.imported ') const map = extractSourcemap(css) - expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` - { - "mappings": "AAAA,CAAC,QAAQ,CAAC;AACV,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG;AACZ;", - "sources": [ - "/root/imported.css", - ], - "sourcesContent": [ - ".imported { + expect(formatSourcemapForSnapshot(map, css)).toMatchInlineSnapshot(` + SourceMap { + content: { + "mappings": "AAAA,CAAC,QAAQ,CAAC;AACV,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG;AACZ;", + "sources": [ + "/root/imported.css", + ], + "sourcesContent": [ + ".imported { color: red; } ", - ], - "version": 3, + ], + "version": 3, + }, + visualization: "https://evanw.github.io/source-map-visualization/#MjgALmltcG9ydGVkIHsKICBjb2xvcjogcmVkOwp9CjE3MwB7InZlcnNpb24iOjMsInNvdXJjZXMiOlsiL3Jvb3QvaW1wb3J0ZWQuY3NzIl0sInNvdXJjZXNDb250ZW50IjpbIi5pbXBvcnRlZCB7XG4gIGNvbG9yOiByZWQ7XG59XG4iXSwibWFwcGluZ3MiOiJBQUFBLENBQUMsUUFBUSxDQUFDO0FBQ1YsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLEdBQUc7QUFDWjsifQ==" } `) }) @@ -109,26 +115,29 @@ describe.runIf(isServe)('serve', () => { 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 { + expect(formatSourcemapForSnapshot(map, css)).toMatchInlineSnapshot(` + SourceMap { + content: { + "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'; + "@import '@/be-imported.css'; .imported-with-import { color: red; } ", - ], - "version": 3, + ], + "version": 3, + }, + visualization: "https://evanw.github.io/source-map-visualization/#NzIALmJlLWltcG9ydGVkIHsKICBjb2xvcjogcmVkOwp9CgouaW1wb3J0ZWQtd2l0aC1pbXBvcnQgewogIGNvbG9yOiByZWQ7Cn0KMjcwAHsibWFwcGluZ3MiOiJBQUFBO0VBQ0UsVUFBVTtBQUNaOztBQ0FBO0VBQ0UsVUFBVTtBQUNaIiwic291cmNlcyI6WyIvcm9vdC9iZS1pbXBvcnRlZC5jc3MiLCIvcm9vdC9pbXBvcnRlZC13aXRoLWltcG9ydC5jc3MiXSwic291cmNlc0NvbnRlbnQiOlsiLmJlLWltcG9ydGVkIHtcbiAgY29sb3I6IHJlZDtcbn1cbiIsIkBpbXBvcnQgJ0AvYmUtaW1wb3J0ZWQuY3NzJztcblxuLmltcG9ydGVkLXdpdGgtaW1wb3J0IHtcbiAgY29sb3I6IHJlZDtcbn1cbiJdLCJ2ZXJzaW9uIjozfQ==" } `) }) @@ -136,25 +145,28 @@ describe.runIf(isServe)('serve', () => { test('imported sass', async () => { const css = await getStyleTagContentIncluding('.imported-sass ') const map = extractSourcemap(css) - expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` - { - "mappings": "AAGE;EACE,OCJM", - "sourceRoot": "", - "sources": [ - "/root/imported.sass", - "/root/imported-nested.sass", - ], - "sourcesContent": [ - "@use "/imported-nested.sass" + expect(formatSourcemapForSnapshot(map, css)).toMatchInlineSnapshot(` + SourceMap { + content: { + "mappings": "AAGE;EACE,OCJM", + "sourceRoot": "", + "sources": [ + "/root/imported.sass", + "/root/imported-nested.sass", + ], + "sourcesContent": [ + "@use "/imported-nested.sass" .imported &-sass color: imported-nested.$primary ", - "$primary: red + "$primary: red ", - ], - "version": 3, + ], + "version": 3, + }, + visualization: "https://evanw.github.io/source-map-visualization/#MzMALmltcG9ydGVkLXNhc3MgewogIGNvbG9yOiByZWQ7Cn0KMjUyAHsidmVyc2lvbiI6Mywic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiL3Jvb3QvaW1wb3J0ZWQuc2FzcyIsIi9yb290L2ltcG9ydGVkLW5lc3RlZC5zYXNzIl0sIm1hcHBpbmdzIjoiQUFHRTtFQUNFLE9DSk0iLCJzb3VyY2VzQ29udGVudCI6WyJAdXNlIFwiL2ltcG9ydGVkLW5lc3RlZC5zYXNzXCJcblxuLmltcG9ydGVkXG4gICYtc2Fzc1xuICAgIGNvbG9yOiBpbXBvcnRlZC1uZXN0ZWQuJHByaW1hcnlcbiIsIiRwcmltYXJ5OiByZWRcbiJdfQ==" } `) }) @@ -162,20 +174,23 @@ describe.runIf(isServe)('serve', () => { test('imported sass module', async () => { const css = await getStyleTagContentIncluding('._imported-sass-module_') const map = extractSourcemap(css) - expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` - { - "ignoreList": [], - "mappings": "AACE;EACE", - "sources": [ - "/root/imported.module.sass", - ], - "sourcesContent": [ - ".imported + expect(formatSourcemapForSnapshot(map, css)).toMatchInlineSnapshot(` + SourceMap { + content: { + "ignoreList": [], + "mappings": "AACE;EACE", + "sources": [ + "/root/imported.module.sass", + ], + "sourcesContent": [ + ".imported &-sass-module color: red ", - ], - "version": 3, + ], + "version": 3, + }, + visualization: "https://evanw.github.io/source-map-visualization/#NDkALl9pbXBvcnRlZC1zYXNzLW1vZHVsZV9yMXFjcF8xIHsKICBjb2xvcjogcmVkOwp9CjE1OQB7InZlcnNpb24iOjMsIm1hcHBpbmdzIjoiQUFDRTtFQUNFIiwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOlsiL3Jvb3QvaW1wb3J0ZWQubW9kdWxlLnNhc3MiXSwic291cmNlc0NvbnRlbnQiOlsiLmltcG9ydGVkXG4gICYtc2Fzcy1tb2R1bGVcbiAgICBjb2xvcjogcmVkXG4iXX0=" } `) }) @@ -183,22 +198,25 @@ describe.runIf(isServe)('serve', () => { test('imported less', async () => { const css = await getStyleTagContentIncluding('.imported-less ') const map = extractSourcemap(css) - expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` - { - "ignoreList": [], - "mappings": "AACE,SAAC;EACC", - "sources": [ - "/root/imported.less", - ], - "sourcesContent": [ - ".imported { + expect(formatSourcemapForSnapshot(map, css)).toMatchInlineSnapshot(` + SourceMap { + content: { + "ignoreList": [], + "mappings": "AACE,SAAC;EACC", + "sources": [ + "/root/imported.less", + ], + "sourcesContent": [ + ".imported { &-less { color: @color; } } ", - ], - "version": 3, + ], + "version": 3, + }, + visualization: "https://evanw.github.io/source-map-visualization/#MzMALmltcG9ydGVkLWxlc3MgewogIGNvbG9yOiByZWQ7Cn0KMTY2AHsidmVyc2lvbiI6MywibWFwcGluZ3MiOiJBQUNFLFNBQUM7RUFDQyIsImlnbm9yZUxpc3QiOltdLCJzb3VyY2VzIjpbIi9yb290L2ltcG9ydGVkLmxlc3MiXSwic291cmNlc0NvbnRlbnQiOlsiLmltcG9ydGVkIHtcbiAgJi1sZXNzIHtcbiAgICBjb2xvcjogQGNvbG9yO1xuICB9XG59XG4iXX0=" } `) }) @@ -206,20 +224,23 @@ describe.runIf(isServe)('serve', () => { test('imported stylus', async () => { const css = await getStyleTagContentIncluding('.imported-stylus ') const map = extractSourcemap(css) - expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` - { - "ignoreList": [], - "mappings": "AACE;EACE,OAAM,QAAN", - "sources": [ - "/root/imported.styl", - ], - "sourcesContent": [ - ".imported + expect(formatSourcemapForSnapshot(map, css)).toMatchInlineSnapshot(` + SourceMap { + content: { + "ignoreList": [], + "mappings": "AACE;EACE,OAAM,QAAN", + "sources": [ + "/root/imported.styl", + ], + "sourcesContent": [ + ".imported &-stylus color blue-red-mixed ", - ], - "version": 3, + ], + "version": 3, + }, + visualization: "https://evanw.github.io/source-map-visualization/#MzkALmltcG9ydGVkLXN0eWx1cyB7CiAgY29sb3I6ICM4MDAwODA7Cn0KMTY3AHsidmVyc2lvbiI6MywibWFwcGluZ3MiOiJBQUNFO0VBQ0UsT0FBTSxRQUFOIiwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOlsiL3Jvb3QvaW1wb3J0ZWQuc3R5bCJdLCJzb3VyY2VzQ29udGVudCI6WyIuaW1wb3J0ZWRcbiAgJi1zdHlsdXNcbiAgICBjb2xvciBibHVlLXJlZC1taXhlZFxuIl19" } `) }) @@ -227,18 +248,21 @@ describe.runIf(isServe)('serve', () => { test('imported sugarss', async () => { const css = await getStyleTagContentIncluding('.imported-sugarss ') const map = extractSourcemap(css) - expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` - { - "mappings": "AAAA;EACE;AADe", - "sources": [ - "/root/imported.sss", - ], - "sourcesContent": [ - ".imported-sugarss + expect(formatSourcemapForSnapshot(map, css)).toMatchInlineSnapshot(` + SourceMap { + content: { + "mappings": "AAAA;EACE;AADe", + "sources": [ + "/root/imported.sss", + ], + "sourcesContent": [ + ".imported-sugarss color: red ", - ], - "version": 3, + ], + "version": 3, + }, + visualization: "https://evanw.github.io/source-map-visualization/#MzUALmltcG9ydGVkLXN1Z2Fyc3MgewogIGNvbG9yOiByZWQKfQoxMjkAeyJtYXBwaW5ncyI6IkFBQUE7RUFDRTtBQURlIiwic291cmNlcyI6WyIvcm9vdC9pbXBvcnRlZC5zc3MiXSwic291cmNlc0NvbnRlbnQiOlsiLmltcG9ydGVkLXN1Z2Fyc3NcbiAgY29sb3I6IHJlZFxuIl0sInZlcnNpb24iOjN9" } `) }) diff --git a/playground/css-sourcemap/__tests__/lightningcss/lightningcss.spec.ts b/playground/css-sourcemap/__tests__/lightningcss/lightningcss.spec.ts index 98f128cdd4ff29..2bc2a29235e803 100644 --- a/playground/css-sourcemap/__tests__/lightningcss/lightningcss.spec.ts +++ b/playground/css-sourcemap/__tests__/lightningcss/lightningcss.spec.ts @@ -51,27 +51,30 @@ describe.runIf(isServe)('serve', () => { ) const css = await res.text() const map = extractSourcemap(css) - expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` - { - "mappings": "ACAA;;;;ADEA", - "sourceRoot": null, - "sources": [ - "linked-with-import.css", - "be-imported.css", - ], - "sourcesContent": [ - "@import '@/be-imported.css'; + expect(formatSourcemapForSnapshot(map, css)).toMatchInlineSnapshot(` + SourceMap { + content: { + "mappings": "ACAA;;;;ADEA", + "sourceRoot": null, + "sources": [ + "linked-with-import.css", + "be-imported.css", + ], + "sourcesContent": [ + "@import '@/be-imported.css'; .linked-with-import { color: red; } ", - ".be-imported { + ".be-imported { color: red; } ", - ], - "version": 3, + ], + "version": 3, + }, + visualization: "https://evanw.github.io/source-map-visualization/#NzAALmJlLWltcG9ydGVkIHsKICBjb2xvcjogcmVkOwp9CgoubGlua2VkLXdpdGgtaW1wb3J0IHsKICBjb2xvcjogcmVkOwp9CjI0NAB7InZlcnNpb24iOjMsInNvdXJjZVJvb3QiOm51bGwsIm1hcHBpbmdzIjoiQUNBQTs7OztBREVBIiwic291cmNlcyI6WyJsaW5rZWQtd2l0aC1pbXBvcnQuY3NzIiwiYmUtaW1wb3J0ZWQuY3NzIl0sInNvdXJjZXNDb250ZW50IjpbIkBpbXBvcnQgJ0AvYmUtaW1wb3J0ZWQuY3NzJztcblxuLmxpbmtlZC13aXRoLWltcG9ydCB7XG4gIGNvbG9yOiByZWQ7XG59XG4iLCIuYmUtaW1wb3J0ZWQge1xuICBjb2xvcjogcmVkO1xufVxuIl19" } `) }) @@ -90,20 +93,23 @@ describe.runIf(isServe)('serve', () => { test('imported css', async () => { const css = await getStyleTagContentIncluding('.imported ') const map = extractSourcemap(css) - expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` - { - "mappings": "AAAA", - "sourceRoot": null, - "sources": [ - "imported.css", - ], - "sourcesContent": [ - ".imported { + expect(formatSourcemapForSnapshot(map, css)).toMatchInlineSnapshot(` + SourceMap { + content: { + "mappings": "AAAA", + "sourceRoot": null, + "sources": [ + "imported.css", + ], + "sourcesContent": [ + ".imported { color: red; } ", - ], - "version": 3, + ], + "version": 3, + }, + visualization: "https://evanw.github.io/source-map-visualization/#MjgALmltcG9ydGVkIHsKICBjb2xvcjogcmVkOwp9CjEyOQB7InZlcnNpb24iOjMsInNvdXJjZVJvb3QiOm51bGwsIm1hcHBpbmdzIjoiQUFBQSIsInNvdXJjZXMiOlsiaW1wb3J0ZWQuY3NzIl0sInNvdXJjZXNDb250ZW50IjpbIi5pbXBvcnRlZCB7XG4gIGNvbG9yOiByZWQ7XG59XG4iXX0=" } `) }) @@ -111,27 +117,30 @@ describe.runIf(isServe)('serve', () => { test('imported css with import', async () => { const css = await getStyleTagContentIncluding('.imported-with-import ') const map = extractSourcemap(css) - expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` - { - "mappings": "ACAA;;;;ADEA", - "sourceRoot": null, - "sources": [ - "imported-with-import.css", - "be-imported.css", - ], - "sourcesContent": [ - "@import '@/be-imported.css'; + expect(formatSourcemapForSnapshot(map, css)).toMatchInlineSnapshot(` + SourceMap { + content: { + "mappings": "ACAA;;;;ADEA", + "sourceRoot": null, + "sources": [ + "imported-with-import.css", + "be-imported.css", + ], + "sourcesContent": [ + "@import '@/be-imported.css'; .imported-with-import { color: red; } ", - ".be-imported { + ".be-imported { color: red; } ", - ], - "version": 3, + ], + "version": 3, + }, + visualization: "https://evanw.github.io/source-map-visualization/#NzIALmJlLWltcG9ydGVkIHsKICBjb2xvcjogcmVkOwp9CgouaW1wb3J0ZWQtd2l0aC1pbXBvcnQgewogIGNvbG9yOiByZWQ7Cn0KMjQ4AHsidmVyc2lvbiI6Mywic291cmNlUm9vdCI6bnVsbCwibWFwcGluZ3MiOiJBQ0FBOzs7O0FERUEiLCJzb3VyY2VzIjpbImltcG9ydGVkLXdpdGgtaW1wb3J0LmNzcyIsImJlLWltcG9ydGVkLmNzcyJdLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICdAL2JlLWltcG9ydGVkLmNzcyc7XG5cbi5pbXBvcnRlZC13aXRoLWltcG9ydCB7XG4gIGNvbG9yOiByZWQ7XG59XG4iLCIuYmUtaW1wb3J0ZWQge1xuICBjb2xvcjogcmVkO1xufVxuIl19" } `) }) @@ -139,22 +148,25 @@ describe.runIf(isServe)('serve', () => { test('imported sass', async () => { const css = await getStyleTagContentIncluding('.imported-sass ') const map = extractSourcemap(css) - expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` - { - "ignoreList": [], - "mappings": "AAGE", - "sources": [ - "/root/imported.sass", - ], - "sourcesContent": [ - "@use "/imported-nested.sass" + expect(formatSourcemapForSnapshot(map, css)).toMatchInlineSnapshot(` + SourceMap { + content: { + "ignoreList": [], + "mappings": "AAGE", + "sources": [ + "/root/imported.sass", + ], + "sourcesContent": [ + "@use "/imported-nested.sass" .imported &-sass color: imported-nested.$primary ", - ], - "version": 3, + ], + "version": 3, + }, + visualization: "https://evanw.github.io/source-map-visualization/#MzMALmltcG9ydGVkLXNhc3MgewogIGNvbG9yOiByZWQ7Cn0KMTk1AHsidmVyc2lvbiI6MywibWFwcGluZ3MiOiJBQUdFIiwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOlsiL3Jvb3QvaW1wb3J0ZWQuc2FzcyJdLCJzb3VyY2VzQ29udGVudCI6WyJAdXNlIFwiL2ltcG9ydGVkLW5lc3RlZC5zYXNzXCJcblxuLmltcG9ydGVkXG4gICYtc2Fzc1xuICAgIGNvbG9yOiBpbXBvcnRlZC1uZXN0ZWQuJHByaW1hcnlcbiJdfQ==" } `) }) @@ -162,20 +174,23 @@ describe.runIf(isServe)('serve', () => { test('imported sass module', async () => { const css = await getStyleTagContentIncluding('_imported-sass-module') const map = extractSourcemap(css) - expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` - { - "ignoreList": [], - "mappings": "AACE", - "sources": [ - "/root/imported.module.sass", - ], - "sourcesContent": [ - ".imported + expect(formatSourcemapForSnapshot(map, css)).toMatchInlineSnapshot(` + SourceMap { + content: { + "ignoreList": [], + "mappings": "AACE", + "sources": [ + "/root/imported.module.sass", + ], + "sourcesContent": [ + ".imported &-sass-module color: red ", - ], - "version": 3, + ], + "version": 3, + }, + visualization: "https://evanw.github.io/source-map-visualization/#NDcALmhvUU10V19pbXBvcnRlZC1zYXNzLW1vZHVsZSB7CiAgY29sb3I6IHJlZDsKfQoxNTQAeyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IkFBQ0UiLCJpZ25vcmVMaXN0IjpbXSwic291cmNlcyI6WyIvcm9vdC9pbXBvcnRlZC5tb2R1bGUuc2FzcyJdLCJzb3VyY2VzQ29udGVudCI6WyIuaW1wb3J0ZWRcbiAgJi1zYXNzLW1vZHVsZVxuICAgIGNvbG9yOiByZWRcbiJdfQ==" } `) }) @@ -183,22 +198,25 @@ describe.runIf(isServe)('serve', () => { test('imported less', async () => { const css = await getStyleTagContentIncluding('.imported-less ') const map = extractSourcemap(css) - expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` - { - "ignoreList": [], - "mappings": "AACE", - "sources": [ - "/root/imported.less", - ], - "sourcesContent": [ - ".imported { + expect(formatSourcemapForSnapshot(map, css)).toMatchInlineSnapshot(` + SourceMap { + content: { + "ignoreList": [], + "mappings": "AACE", + "sources": [ + "/root/imported.less", + ], + "sourcesContent": [ + ".imported { &-less { color: @color; } } ", - ], - "version": 3, + ], + "version": 3, + }, + visualization: "https://evanw.github.io/source-map-visualization/#MzMALmltcG9ydGVkLWxlc3MgewogIGNvbG9yOiByZWQ7Cn0KMTU2AHsidmVyc2lvbiI6MywibWFwcGluZ3MiOiJBQUNFIiwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOlsiL3Jvb3QvaW1wb3J0ZWQubGVzcyJdLCJzb3VyY2VzQ29udGVudCI6WyIuaW1wb3J0ZWQge1xuICAmLWxlc3Mge1xuICAgIGNvbG9yOiBAY29sb3I7XG4gIH1cbn1cbiJdfQ==" } `) }) @@ -206,20 +224,23 @@ describe.runIf(isServe)('serve', () => { test('imported stylus', async () => { const css = await getStyleTagContentIncluding('.imported-stylus ') const map = extractSourcemap(css) - expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` - { - "ignoreList": [], - "mappings": "AACE", - "sources": [ - "/root/imported.styl", - ], - "sourcesContent": [ - ".imported + expect(formatSourcemapForSnapshot(map, css)).toMatchInlineSnapshot(` + SourceMap { + content: { + "ignoreList": [], + "mappings": "AACE", + "sources": [ + "/root/imported.styl", + ], + "sourcesContent": [ + ".imported &-stylus color blue-red-mixed ", - ], - "version": 3, + ], + "version": 3, + }, + visualization: "https://evanw.github.io/source-map-visualization/#MzgALmltcG9ydGVkLXN0eWx1cyB7CiAgY29sb3I6IHB1cnBsZTsKfQoxNTIAeyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IkFBQ0UiLCJpZ25vcmVMaXN0IjpbXSwic291cmNlcyI6WyIvcm9vdC9pbXBvcnRlZC5zdHlsIl0sInNvdXJjZXNDb250ZW50IjpbIi5pbXBvcnRlZFxuICAmLXN0eWx1c1xuICAgIGNvbG9yIGJsdWUtcmVkLW1peGVkXG4iXX0=" } `) }) @@ -227,19 +248,22 @@ describe.runIf(isServe)('serve', () => { test('imported sugarss', async () => { const css = await getStyleTagContentIncluding('.imported-sugarss ') const map = extractSourcemap(css) - expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` - { - "ignoreList": [], - "mappings": "AAAA", - "sources": [ - "/root/imported.sss", - ], - "sourcesContent": [ - ".imported-sugarss + expect(formatSourcemapForSnapshot(map, css)).toMatchInlineSnapshot(` + SourceMap { + content: { + "ignoreList": [], + "mappings": "AAAA", + "sources": [ + "/root/imported.sss", + ], + "sourcesContent": [ + ".imported-sugarss color: red ", - ], - "version": 3, + ], + "version": 3, + }, + visualization: "https://evanw.github.io/source-map-visualization/#MzYALmltcG9ydGVkLXN1Z2Fyc3MgewogIGNvbG9yOiByZWQ7Cn0KMTM1AHsidmVyc2lvbiI6MywibWFwcGluZ3MiOiJBQUFBIiwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOlsiL3Jvb3QvaW1wb3J0ZWQuc3NzIl0sInNvdXJjZXNDb250ZW50IjpbIi5pbXBvcnRlZC1zdWdhcnNzXG4gIGNvbG9yOiByZWRcbiJdfQ==" } `) }) diff --git a/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts b/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts index 510b64d65921cb..326b972ebdaa4a 100644 --- a/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts +++ b/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts @@ -20,17 +20,20 @@ if (!isBuild) { const res = await page.request.get(new URL('./foo.js', page.url()).href) const js = await res.text() const map = extractSourcemap(js) - expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` - { - "mappings": "AAAA,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG;", - "sources": [ - "foo.js", - ], - "sourcesContent": [ - "export const foo = 'foo' + expect(formatSourcemapForSnapshot(map, js)).toMatchInlineSnapshot(` + SourceMap { + content: { + "mappings": "AAAA,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG;", + "sources": [ + "foo.js", + ], + "sourcesContent": [ + "export const foo = 'foo' ", - ], - "version": 3, + ], + "version": 3, + }, + visualization: "https://evanw.github.io/source-map-visualization/#MjUAZXhwb3J0IGNvbnN0IGZvbyA9ICdmb28nCjE1MQB7InZlcnNpb24iOjMsInNvdXJjZXMiOlsiZm9vLmpzIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBjb25zdCBmb28gPSAnZm9vJ1xuIl0sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxHQUFHOyJ9" } `) }) @@ -41,17 +44,20 @@ if (!isBuild) { expect(js).toContain('// add comment') const map = extractSourcemap(js) - expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` - { - "mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;", - "sources": [ - "zoo.js", - ], - "sourcesContent": [ - "export const zoo = 'zoo' + expect(formatSourcemapForSnapshot(map, js)).toMatchInlineSnapshot(` + SourceMap { + content: { + "mappings": "AAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;", + "sources": [ + "zoo.js", + ], + "sourcesContent": [ + "export const zoo = 'zoo' ", - ], - "version": 3, + ], + "version": 3, + }, + visualization: "https://evanw.github.io/source-map-visualization/#NDAAZXhwb3J0IGNvbnN0IHpvbyA9ICd6b28nCi8vIGFkZCBjb21tZW50CjIxNgB7InZlcnNpb24iOjMsInNvdXJjZXMiOlsiem9vLmpzIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBjb25zdCB6b28gPSAnem9vJ1xuIl0sIm1hcHBpbmdzIjoiQUFBQSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7In0=" } `) }) @@ -67,13 +73,16 @@ if (!isBuild) { expect(sourcemapComments).toBe(1) const map = extractSourcemap(js) - expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` - { - "mappings": "AAAA,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG", - "sources": [ - "", - ], - "version": 3, + expect(formatSourcemapForSnapshot(map, js)).toMatchInlineSnapshot(` + SourceMap { + content: { + "mappings": "AAAA,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG", + "sources": [ + "", + ], + "version": 3, + }, + visualization: "https://evanw.github.io/source-map-visualization/#NzMAZXhwb3J0IGNvbnN0IGZvbyA9ICdmb28nCi8vIGRlZmF1bHQgYm91bmRhcnkgc291cmNlbWFwIHdpdGggbWFnaWMtc3RyaW5nCjk2AHsidmVyc2lvbiI6Mywic291cmNlcyI6WyIiXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcifQ==" } `) }) @@ -82,17 +91,20 @@ if (!isBuild) { const res = await page.request.get(new URL('./bar.ts', page.url()).href) const js = await res.text() const map = extractSourcemap(js) - expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` - { - "mappings": "AAAO,aAAM,MAAM;", - "sources": [ - "bar.ts", - ], - "sourcesContent": [ - "export const bar = 'bar' + expect(formatSourcemapForSnapshot(map, js)).toMatchInlineSnapshot(` + SourceMap { + content: { + "mappings": "AAAO,aAAM,MAAM;", + "sources": [ + "bar.ts", + ], + "sourcesContent": [ + "export const bar = 'bar' ", - ], - "version": 3, + ], + "version": 3, + }, + visualization: "https://evanw.github.io/source-map-visualization/#MjYAZXhwb3J0IGNvbnN0IGJhciA9ICJiYXIiOwoxMTEAeyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJhci50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgY29uc3QgYmFyID0gJ2JhcidcbiJdLCJtYXBwaW5ncyI6IkFBQU8sYUFBTSxNQUFNOyJ9" } `) }) @@ -101,24 +113,27 @@ if (!isBuild) { const res = await page.request.get( new URL('./with-multiline-import.ts', page.url()).href, ) - const multi = await res.text() - const map = extractSourcemap(multi) - expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` - { - "mappings": "AACA;AAAA,EACE;AAAA,OACK;AAEP,QAAQ,IAAI,yBAAyB,GAAG;", - "sources": [ - "with-multiline-import.ts", - ], - "sourcesContent": [ - "// prettier-ignore + const js = await res.text() + const map = extractSourcemap(js) + expect(formatSourcemapForSnapshot(map, js)).toMatchInlineSnapshot(` + SourceMap { + content: { + "mappings": "AACA;AAAA,EACE;AAAA,OACK;AAEP,QAAQ,IAAI,yBAAyB,GAAG;", + "sources": [ + "with-multiline-import.ts", + ], + "sourcesContent": [ + "// prettier-ignore import { foo } from '@vitejs/test-importee-pkg' console.log('with-multiline-import', foo) ", - ], - "version": 3, + ], + "version": 3, + }, + visualization: "https://evanw.github.io/source-map-visualization/#MjMxAGltcG9ydCBfX3ZpdGVfX2Nqc0ltcG9ydDBfX3ZpdGVqc190ZXN0SW1wb3J0ZWVQa2cgZnJvbSAiL25vZGVfbW9kdWxlcy8udml0ZS9kZXBzL0B2aXRlanNfdGVzdC1pbXBvcnRlZS1wa2cuanM/dj0wMDAwMDAwMCI7IGNvbnN0IGZvbyA9IF9fdml0ZV9fY2pzSW1wb3J0MF9fdml0ZWpzX3Rlc3RJbXBvcnRlZVBrZ1siZm9vIl0KCjsKY29uc29sZS5sb2coIndpdGgtbXVsdGlsaW5lLWltcG9ydCIsIGZvbyk7CjI1OAB7InZlcnNpb24iOjMsInNvdXJjZXMiOlsid2l0aC1tdWx0aWxpbmUtaW1wb3J0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbIi8vIHByZXR0aWVyLWlnbm9yZVxuaW1wb3J0IHtcbiAgZm9vXG59IGZyb20gJ0B2aXRlanMvdGVzdC1pbXBvcnRlZS1wa2cnXG5cbmNvbnNvbGUubG9nKCd3aXRoLW11bHRpbGluZS1pbXBvcnQnLCBmb28pXG4iXSwibWFwcGluZ3MiOiJBQUNBO0FBQUEsRUFDRTtBQUFBLE9BQ0s7QUFFUCxRQUFRLElBQUkseUJBQXlCLEdBQUc7In0=" } `) }) @@ -138,26 +153,30 @@ describe.runIf(isBuild)('build tests', () => { }) test('sourcemap is correct when preload information is injected', async () => { + const js = findAssetFile(/after-preload-dynamic-[-\w]{8}\.js$/) const map = findAssetFile(/after-preload-dynamic-[-\w]{8}\.js\.map/) - expect(formatSourcemapForSnapshot(JSON.parse(map))).toMatchInlineSnapshot(` - { - "debugId": "00000000-0000-0000-0000-000000000000", - "ignoreList": [], - "mappings": ";4kCAAA,OAAO,2BAAuB,0BAE9B,QAAQ,IAAI,uBAAuB", - "sources": [ - "../../after-preload-dynamic.js", - ], - "sourcesContent": [ - "import('./dynamic/dynamic-foo') - - console.log('after preload dynamic') - ", - ], - "version": 3, - } - `) + expect(formatSourcemapForSnapshot(JSON.parse(map), js)) + .toMatchInlineSnapshot(` + SourceMap { + content: { + "debugId": "00000000-0000-0000-0000-000000000000", + "ignoreList": [], + "mappings": ";4kCAAA,OAAO,2BAAuB,0BAE9B,QAAQ,IAAI,uBAAuB", + "sources": [ + "../../after-preload-dynamic.js", + ], + "sourcesContent": [ + "import('./dynamic/dynamic-foo') + + console.log('after preload dynamic') + ", + ], + "version": 3, + }, + visualization: "https://evanw.github.io/source-map-visualization/#MTQ2NgBjb25zdCBfX3ZpdGVfX21hcERlcHM9KGksbT1fX3ZpdGVfX21hcERlcHMsZD0obS5mfHwobS5mPVsiYXNzZXRzL2R5bmFtaWMtZm9vLUZfYXJUX3E1LmpzIiwiYXNzZXRzL2R5bmFtaWMtZm9vLURzcUtSckV5LmNzcyJdKSkpPT5pLm1hcChpPT5kW2ldKTsKY29uc3QgcD0ibW9kdWxlcHJlbG9hZCIsdj1mdW5jdGlvbihsKXtyZXR1cm4iLyIrbH0sdT17fSxFPWZ1bmN0aW9uKGQsYyx5KXtsZXQgaT1Qcm9taXNlLnJlc29sdmUoKTtpZihjJiZjLmxlbmd0aD4wKXtsZXQgZj1mdW5jdGlvbihlKXtyZXR1cm4gUHJvbWlzZS5hbGwoZS5tYXAobz0+UHJvbWlzZS5yZXNvbHZlKG8pLnRoZW4ocz0+KHtzdGF0dXM6ImZ1bGZpbGxlZCIsdmFsdWU6c30pLHM9Pih7c3RhdHVzOiJyZWplY3RlZCIscmVhc29uOnN9KSkpKX07ZG9jdW1lbnQuZ2V0RWxlbWVudHNCeVRhZ05hbWUoImxpbmsiKTtjb25zdCBuPWRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoIm1ldGFbcHJvcGVydHk9Y3NwLW5vbmNlXSIpLHQ9bj8ubm9uY2V8fG4/LmdldEF0dHJpYnV0ZSgibm9uY2UiKTtpPWYoYy5tYXAoZT0+e2lmKGU9dihlKSxlIGluIHUpcmV0dXJuO3VbZV09ITA7Y29uc3Qgbz1lLmVuZHNXaXRoKCIuY3NzIikscz1vPydbcmVsPSJzdHlsZXNoZWV0Il0nOiIiO2lmKGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoYGxpbmtbaHJlZj0iJHtlfSJdJHtzfWApKXJldHVybjtjb25zdCByPWRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImxpbmsiKTtpZihyLnJlbD1vPyJzdHlsZXNoZWV0IjpwLG98fChyLmFzPSJzY3JpcHQiKSxyLmNyb3NzT3JpZ2luPSIiLHIuaHJlZj1lLHQmJnIuc2V0QXR0cmlidXRlKCJub25jZSIsdCksZG9jdW1lbnQuaGVhZC5hcHBlbmRDaGlsZChyKSxvKXJldHVybiBuZXcgUHJvbWlzZSgobSxoKT0+e3IuYWRkRXZlbnRMaXN0ZW5lcigibG9hZCIsbSksci5hZGRFdmVudExpc3RlbmVyKCJlcnJvciIsKCk9PmgobmV3IEVycm9yKGBVbmFibGUgdG8gcHJlbG9hZCBDU1MgZm9yICR7ZX1gKSkpfSl9KSl9ZnVuY3Rpb24gYShuKXtjb25zdCB0PW5ldyBFdmVudCgidml0ZTpwcmVsb2FkRXJyb3IiLHtjYW5jZWxhYmxlOiEwfSk7aWYodC5wYXlsb2FkPW4sd2luZG93LmRpc3BhdGNoRXZlbnQodCksIXQuZGVmYXVsdFByZXZlbnRlZCl0aHJvdyBufXJldHVybiBpLnRoZW4obj0+e2Zvcihjb25zdCB0IG9mIG58fFtdKXQuc3RhdHVzPT09InJlamVjdGVkIiYmYSh0LnJlYXNvbik7cmV0dXJuIGQoKS5jYXRjaChhKX0pfTtFKCgpPT5pbXBvcnQoIi4vZHluYW1pYy1mb28tRl9hclRfcTUuanMiKSxfX3ZpdGVfX21hcERlcHMoWzAsMV0pKTtjb25zb2xlLmxvZygiYWZ0ZXIgcHJlbG9hZCBkeW5hbWljIik7ZXhwb3J0e0UgYXMgX307Ci8vIyBkZWJ1Z0lkPThjNDM0NWFiLWYxMzAtNGZmMi05NWRlLTA3NWI2ZTBhOGZjNgovLyMgc291cmNlTWFwcGluZ1VSTD1hZnRlci1wcmVsb2FkLWR5bmFtaWMtQ3E4cGpBT0wuanMubWFwCjI3NQB7InZlcnNpb24iOjMsIm1hcHBpbmdzIjoiOzRrQ0FBQSxPQUFPLDJCQUF1QiwwQkFFOUIsUUFBUSxJQUFJLHVCQUF1QiIsImlnbm9yZUxpc3QiOltdLCJzb3VyY2VzIjpbIi4uLy4uL2FmdGVyLXByZWxvYWQtZHluYW1pYy5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQoJy4vZHluYW1pYy9keW5hbWljLWZvbycpXG5cbmNvbnNvbGUubG9nKCdhZnRlciBwcmVsb2FkIGR5bmFtaWMnKVxuIl0sImRlYnVnSWQiOiIwMDAwMDAwMC0wMDAwLTAwMDAtMDAwMC0wMDAwMDAwMDAwMDAifQ==" + } + `) // verify sourcemap comment is preserved at the last line - const js = findAssetFile(/after-preload-dynamic-[-\w]{8}\.js$/) expect(js).toMatch( /\n\/\/# sourceMappingURL=after-preload-dynamic-[-\w]{8}\.js\.map\n$/, ) @@ -177,32 +196,42 @@ describe.runIf(isBuild)('build tests', () => { }) test('sourcemap is correct when using object as "define" value', async () => { + const js = findAssetFile(/with-define-object.*\.js$/) const map = findAssetFile(/with-define-object.*\.js\.map/) - expect(formatSourcemapForSnapshot(JSON.parse(map))).toMatchInlineSnapshot(` - { - "debugId": "00000000-0000-0000-0000-000000000000", - "mappings": "qBAEA,SAASA,GAAO,CACJC,EAAA,CACZ,CAEA,SAASA,GAAY,CAEX,QAAA,MAAM,qBAAsBC,CAAkB,CACxD,CAEAF,EAAK", - "sources": [ - "../../with-define-object.ts", - ], - "sourcesContent": [ - "// test complicated stack since broken sourcemap - // might still look correct with a simple case - function main() { - mainInner() - } + expect(formatSourcemapForSnapshot(JSON.parse(map), js)) + .toMatchInlineSnapshot(` + SourceMap { + content: { + "debugId": "00000000-0000-0000-0000-000000000000", + "mappings": "qBAEA,SAASA,GAAO,CACJC,EAAA,CACZ,CAEA,SAASA,GAAY,CAEX,QAAA,MAAM,qBAAsBC,CAAkB,CACxD,CAEAF,EAAK", + "names": [ + "main", + "mainInner", + "define_testDefineObject_default", + ], + "sources": [ + "../../with-define-object.ts", + ], + "sourcesContent": [ + "// test complicated stack since broken sourcemap + // might still look correct with a simple case + function main() { + mainInner() + } - function mainInner() { - // @ts-expect-error "define" - console.trace('with-define-object', __testDefineObject) - } + function mainInner() { + // @ts-expect-error "define" + console.trace('with-define-object', __testDefineObject) + } - main() - ", - ], - "version": 3, - } - `) + main() + ", + ], + "version": 3, + }, + visualization: "https://evanw.github.io/source-map-visualization/#MTk5AHZhciBlPXtoZWxsbzoidGVzdCJ9O2Z1bmN0aW9uIG4oKXt0KCl9ZnVuY3Rpb24gdCgpe2NvbnNvbGUudHJhY2UoIndpdGgtZGVmaW5lLW9iamVjdCIsZSl9bigpOwovLyMgZGVidWdJZD1iZDM5NjJmYy1lZGI1LTRhNmQtYTVkYS1mMjdhMWU1ZjMyNjgKLy8jIHNvdXJjZU1hcHBpbmdVUkw9d2l0aC1kZWZpbmUtb2JqZWN0LWhBU2RrZG55LmpzLm1hcAo1NjQAeyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3dpdGgtZGVmaW5lLW9iamVjdC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyIvLyB0ZXN0IGNvbXBsaWNhdGVkIHN0YWNrIHNpbmNlIGJyb2tlbiBzb3VyY2VtYXBcbi8vIG1pZ2h0IHN0aWxsIGxvb2sgY29ycmVjdCB3aXRoIGEgc2ltcGxlIGNhc2VcbmZ1bmN0aW9uIG1haW4oKSB7XG4gIG1haW5Jbm5lcigpXG59XG5cbmZ1bmN0aW9uIG1haW5Jbm5lcigpIHtcbiAgLy8gQHRzLWV4cGVjdC1lcnJvciBcImRlZmluZVwiXG4gIGNvbnNvbGUudHJhY2UoJ3dpdGgtZGVmaW5lLW9iamVjdCcsIF9fdGVzdERlZmluZU9iamVjdClcbn1cblxubWFpbigpXG4iXSwibmFtZXMiOlsibWFpbiIsIm1haW5Jbm5lciIsImRlZmluZV90ZXN0RGVmaW5lT2JqZWN0X2RlZmF1bHQiXSwibWFwcGluZ3MiOiJxQkFFQSxTQUFTQSxHQUFPLENBQ0pDLEVBQUEsQ0FDWixDQUVBLFNBQVNBLEdBQVksQ0FFWCxRQUFBLE1BQU0scUJBQXNCQyxDQUFrQixDQUN4RCxDQUVBRixFQUFLIiwiZGVidWdJZCI6IjAwMDAwMDAwLTAwMDAtMDAwMC0wMDAwLTAwMDAwMDAwMDAwMCJ9" + } + `) }) test('correct sourcemap during ssr dev when using object as "define" value', async () => { diff --git a/playground/test-utils.ts b/playground/test-utils.ts index 39ce32fecf34ef..a406d29394257e 100644 --- a/playground/test-utils.ts +++ b/playground/test-utils.ts @@ -11,10 +11,10 @@ import type { } from 'playwright-chromium' import type { DepOptimizationMetadata, Manifest } from 'vite' import { normalizePath } from 'vite' -import { fromComment } from 'convert-source-map' +import { fromComment, removeComments } from 'convert-source-map' import { expect } from 'vitest' import type { ResultPromise as ExecaResultPromise } from 'execa' -import { isWindows, page, testDir } from './vitestSetup' +import { isWindows, page, sourcemapSnapshot, testDir } from './vitestSetup' export * from './vitestSetup' @@ -337,11 +337,13 @@ export const extractSourcemap = (content: string): any => { return fromComment(lines[lines.length - 1]).toObject() } -export const formatSourcemapForSnapshot = (map: any): any => { +export const formatSourcemapForSnapshot = (map: any, code: string): any => { const root = normalizePath(testDir) const m = { ...map } delete m.file - delete m.names + if (m.names && m.names.length === 0) { + delete m.names + } if (m.debugId) { m.debugId = '00000000-0000-0000-0000-000000000000' } @@ -349,7 +351,8 @@ export const formatSourcemapForSnapshot = (map: any): any => { if (m.sourceRoot) { m.sourceRoot = m.sourceRoot.replace(root, '/root') } - return m + const c = removeComments(code.replace(/\?v=[\da-f]{8}/, '?v=00000000')) + return { map: m, code: c, [sourcemapSnapshot]: true } } // helper function to kill process, uses taskkill on windows to ensure child process is killed too diff --git a/playground/vitestSetup.ts b/playground/vitestSetup.ts index 6ee74427c09ed5..7d6482fef31fdd 100644 --- a/playground/vitestSetup.ts +++ b/playground/vitestSetup.ts @@ -22,7 +22,30 @@ import { import type { Browser, Page } from 'playwright-chromium' import type { RollupError, RollupWatcher, RollupWatcherEvent } from 'rollup' import type { RunnerTestFile } from 'vitest' -import { beforeAll, inject } from 'vitest' +import { beforeAll, expect, inject } from 'vitest' + +// #region serializer + +export const sourcemapSnapshot = Symbol() + +const generateVisualizationLink = (code: string, map: string) => { + const hash = `${code.length}\0${code}${map.length}\0${map}` + return `https://evanw.github.io/source-map-visualization/#${btoa(hash)}` +} + +expect.addSnapshotSerializer({ + serialize(val, config, indentation, depth, refs, printer) { + return `${indentation}SourceMap { +${indentation}${config.indent}content: ${printer(val.map, config, indentation + config.indent, depth, refs)}, +${indentation}${config.indent}visualization: ${JSON.stringify(generateVisualizationLink(val.code, JSON.stringify(val.map)))} +${indentation}}` + }, + test(val) { + return typeof val === 'object' && val && val[sourcemapSnapshot] === true + }, +}) + +// #endregion // #region env