Don't break CSS source maps

Munter · Jul 8, 2020 · 1d97d16 · 1d97d16
1 parent 29c95d2
commit 1d97d16
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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();
         });
       });
     });