From 1be8169c888d1a8e3531e79ebe1e1ef53d7821e7 Mon Sep 17 00:00:00 2001 From: Alexey Lavinsky Date: Fri, 2 Oct 2020 15:29:40 +0300 Subject: [PATCH] fix: source maps (#290) --- src/index.js | 4 +- .../sourceMap-options.test.js.snap | 56 +++++++++++++++++++ test/fixtures/source-map/index.styl | 5 ++ test/sourceMap-options.test.js | 36 ++++++++++++ 4 files changed, 99 insertions(+), 2 deletions(-) create mode 100644 test/fixtures/source-map/index.styl diff --git a/src/index.js b/src/index.js index 5b4fe12..951820c 100644 --- a/src/index.js +++ b/src/index.js @@ -62,7 +62,7 @@ export default async function stylusLoader(source) { useSourceMap ? { comment: false, - sourceRoot: this.rootContext, + sourceRoot: stylusOptions.dest, basePath: this.rootContext, } : stylusOptions.sourcemap @@ -154,7 +154,7 @@ export default async function stylusLoader(source) { let map = styl.sourcemap; if (map && useSourceMap) { - map = normalizeSourceMap(map, this.rootContext); + map = normalizeSourceMap(map, stylusOptions.dest); try { map.sourcesContent = await Promise.all( diff --git a/test/__snapshots__/sourceMap-options.test.js.snap b/test/__snapshots__/sourceMap-options.test.js.snap index b89eb3f..f9ea71e 100644 --- a/test/__snapshots__/sourceMap-options.test.js.snap +++ b/test/__snapshots__/sourceMap-options.test.js.snap @@ -1,5 +1,61 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`"sourceMap" options should generate nested source maps when value is "true": css 1`] = ` +".other { + font-family: serif; +} +body { + font: 12px Helvetica, Arial, sans-serif; +} +a.button { + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} +.some-class { + margin: 10px; +} +" +`; + +exports[`"sourceMap" options should generate nested source maps when value is "true": errors 1`] = `Array []`; + +exports[`"sourceMap" options should generate nested source maps when value is "true": source map 1`] = ` +Object { + "mappings": "AAAA;EACC,aAAY,MAAZ;;ACID;EACE,MAAmB,kCAAnB;;AAEF;EAPE,uBAAsB,IAAtB;EACA,oBAAmB,IAAnB;EACA,eAAc,IAAd;;ACAF;EACE,QAAQ,KAAR", + "names": Array [], + "sourceRoot": "", + "sources": Array [ + "test/fixtures/paths/in-paths.styl", + "test/fixtures/basic.styl", + "test/fixtures/source-map/index.styl", + ], + "sourcesContent": Array [ + ".other + font-family serif", + "border-radius() + -webkit-border-radius arguments + -moz-border-radius arguments + border-radius arguments + +body + font 12px Helvetica, Arial, sans-serif + +a.button + border-radius 5px", + "@import 'in-paths' +@import '../basic' + +.some-class + margin: 10px +", + ], + "version": 3, +} +`; + +exports[`"sourceMap" options should generate nested source maps when value is "true": warnings 1`] = `Array []`; + exports[`"sourceMap" options should generate source maps when the "devtool" value is "source-map": css 1`] = ` ".other { font-family: serif; diff --git a/test/fixtures/source-map/index.styl b/test/fixtures/source-map/index.styl new file mode 100644 index 0000000..86aa823 --- /dev/null +++ b/test/fixtures/source-map/index.styl @@ -0,0 +1,5 @@ +@import 'in-paths' +@import '../basic' + +.some-class + margin: 10px diff --git a/test/sourceMap-options.test.js b/test/sourceMap-options.test.js index ba75211..3af92f3 100644 --- a/test/sourceMap-options.test.js +++ b/test/sourceMap-options.test.js @@ -211,4 +211,40 @@ describe('"sourceMap" options', () => { expect(getWarnings(stats)).toMatchSnapshot('warnings'); expect(getErrors(stats)).toMatchSnapshot('errors'); }); + + it('should generate nested source maps when value is "true"', async () => { + const testId = './source-map/index.styl'; + const compiler = getCompiler(testId, { + sourceMap: true, + stylusOptions: { + paths: ['test/fixtures/paths'], + }, + }); + const stats = await compile(compiler); + const codeFromBundle = getCodeFromBundle(stats, compiler); + const { css, map } = codeFromBundle; + + map.sourceRoot = ''; + map.sources = map.sources.map((source) => { + expect(path.isAbsolute(source)).toBe(true); + expect(source).toBe(path.normalize(source)); + expect(fs.existsSync(path.resolve(map.sourceRoot, source))).toBe(true); + + return path + .relative(path.resolve(__dirname, '..'), source) + .replace(/\\/g, '/'); + }); + + const codeFromStylus = await getCodeFromStylus(testId, { + stylusOptions: { + paths: ['test/fixtures/paths'], + }, + }); + + expect(codeFromBundle.css).toBe(codeFromStylus.css); + expect(css).toMatchSnapshot('css'); + expect(map).toMatchSnapshot('source map'); + expect(getWarnings(stats)).toMatchSnapshot('warnings'); + expect(getErrors(stats)).toMatchSnapshot('errors'); + }); });