diff --git a/lib/subfont.js b/lib/subfont.js index 30926535..f8acfae9 100644 --- a/lib/subfont.js +++ b/lib/subfont.js @@ -94,7 +94,8 @@ module.exports = async function subfont( 'HtmlIFrame', 'HtmlFrame', 'JavaScriptSourceMappingUrl', - 'CssSourceMappingUrl', + 'SourceMapFile', + 'SourceMapSource', ]; let followRelationsQuery; diff --git a/lib/subsetFonts.js b/lib/subsetFonts.js index 0792f895..41bcc5fb 100644 --- a/lib/subsetFonts.js +++ b/lib/subsetFonts.js @@ -591,6 +591,8 @@ async function subsetFonts( const htmlAssetTextsWithProps = []; const subsetUrl = urltools.ensureTrailingSlash(assetGraph.root + subsetPath); + await assetGraph.applySourceMaps({ type: 'Css' }); + await assetGraph.populate({ followRelations: { $or: [ @@ -1527,6 +1529,14 @@ These glyphs are used on your site, but they don't exist in the font you applied await cssAsset.minify(); } + await assetGraph.serializeSourceMaps(undefined, { + type: 'Css', + outgoingRelations: { + $where: (relations) => + relations.some((relation) => relation.type === 'CssSourceMappingUrl'), + }, + }); + for (const asset of potentiallyOrphanedAssets) { if (asset.incomingRelations.length === 0) { assetGraph.removeAsset(asset); diff --git a/test/subsetFonts.js b/test/subsetFonts.js index e641300c..bca1287b 100644 --- a/test/subsetFonts.js +++ b/test/subsetFonts.js @@ -4648,7 +4648,7 @@ describe('subsetFonts', function () { describe('with a CSS source map for a file that gets updated', function () { describe('external', function () { - it.only('should update the source map', async function () { + it('should update the source map', async function () { // lessc --source-map testdata/subsetFonts/css-source-map-external/styles.{less,css} const assetGraph = new AssetGraph({ root: pathModule.resolve( @@ -4704,6 +4704,54 @@ describe('subsetFonts', function () { describe('inline', function () { it('should update the source map', async function () { // lessc --source-map-inline testdata/subsetFonts/css-source-map-external/styles.{less,css} + const assetGraph = new AssetGraph({ + root: pathModule.resolve( + __dirname, + '../testdata/subsetFonts/css-source-map-inline/' + ), + }); + await assetGraph.loadAssets('index.html'); + await assetGraph.populate(); + function checkSourceMap() { + const [sourceMap] = assetGraph.findAssets({ type: 'SourceMap' }); + const cssAsset = sourceMap.incomingRelations[0].from; + const generatedPosition = new LinesAndColumns( + cssAsset.text + ).locationForIndex( + cssAsset.text.indexOf('border: 1px solid black') + ); + console.log(cssAsset.text); + console.log('generatedPosition', generatedPosition); + console.log( + 'generated text', + cssAsset.text.slice( + cssAsset.text.indexOf('border: 1px solid black') + ) + ); + const originalPosition = sourceMap.originalPositionFor({ + line: generatedPosition.line + 1, // source-map's line numbers are 1-based, lines-and-column's are 0-based + column: generatedPosition.column, + }); + console.log('originalPosition', originalPosition); + const lessAsset = sourceMap.outgoingRelations.find( + (relation) => relation.type === 'SourceMapSource' + ).to; + const lessText = lessAsset.rawSrc.toString('utf-8'); + const originalIndex = new LinesAndColumns( + lessText + ).indexForLocation({ + line: originalPosition.line - 1, + column: originalPosition.column, + }); + expect( + lessText.slice(originalIndex), + 'to begin with', + 'border: 1px solid black' + ); + } + checkSourceMap(); + await subsetFonts(assetGraph); + checkSourceMap(); }); }); });