Small fixes for css font urls (#90)

* Added support for query and hash values in font urls * Added two missing font file formats
hostnet · Jul 30, 2018 · 0056d3e · 0056d3e
1 parent 3cd6869
commit 0056d3e
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 3 deletions.
diff --git a/spec/steps/css_rewrite.spec.js b/spec/steps/css_rewrite.spec.js
@@ -93,4 +93,82 @@ describe("css_rewrite.js", function () {
         expect(result.additionalFiles.length).toBe(0);
         expect(result.content.toString()).toBe(content.toString());
     });
+
+    it('execute with hash', function () {
+        let content = Buffer.from(
+            "@font-face {font-family: myFirstFont; src: url('sansation_light.svg#iconpicker');}"
+        );
+        let result = step(
+            new builder.File('foo.css', 'foo.css', content, 'foo.css'),
+            {paths: {out: '/foo/bar/', root: '/foo/'}}
+        );
+
+        expect(result.name).toBe('foo.css');
+        expect(result.module).toBe('foo.css');
+
+        expect(result.additionalFiles.length).toBe(1);
+        expect(result.additionalFiles[0].outputFile).toBe('/foo/bar/fonts/sansation_light.svg'.replace(/\//g, path.sep));
+        expect(result.additionalFiles[0].inputFiles.length).toBe(1);
+
+        expect(result.additionalFiles[0].inputFiles[0].path).toBe('/foo/sansation_light.svg'.replace(/\//g, path.sep));
+        expect(result.additionalFiles[0].inputFiles[0].extension).toBe('.svg');
+        expect(result.additionalFiles[0].inputFiles[0].needsRebuild).toBe(true);
+        expect(result.additionalFiles[0].inputFiles[0].skipFileSteps).toBe(false);
+
+        expect(result.content.toString()).toBe(
+            '@font-face {font-family: myFirstFont; src: url("fonts/sansation_light.svg#iconpicker");}'
+        );
+    });
+
+    it('execute with query', function () {
+        let content = Buffer.from(
+            "@font-face {font-family: myFirstFont; src: url('sansation_light.svg?90190138');}"
+        );
+        let result = step(
+            new builder.File('foo.css', 'foo.css', content, 'foo.css'),
+            {paths: {out: '/foo/bar/', root: '/foo/'}}
+        );
+
+        expect(result.name).toBe('foo.css');
+        expect(result.module).toBe('foo.css');
+
+        expect(result.additionalFiles.length).toBe(1);
+        expect(result.additionalFiles[0].outputFile).toBe('/foo/bar/fonts/sansation_light.svg'.replace(/\//g, path.sep));
+        expect(result.additionalFiles[0].inputFiles.length).toBe(1);
+
+        expect(result.additionalFiles[0].inputFiles[0].path).toBe('/foo/sansation_light.svg'.replace(/\//g, path.sep));
+        expect(result.additionalFiles[0].inputFiles[0].extension).toBe('.svg');
+        expect(result.additionalFiles[0].inputFiles[0].needsRebuild).toBe(true);
+        expect(result.additionalFiles[0].inputFiles[0].skipFileSteps).toBe(false);
+
+        expect(result.content.toString()).toBe(
+            '@font-face {font-family: myFirstFont; src: url("fonts/sansation_light.svg?90190138");}'
+        );
+    });
+
+    it('execute with hash and query', function () {
+        let content = Buffer.from(
+            "@font-face {font-family: myFirstFont; src: url('sansation_light.svg?90190138#iconpicker');}"
+        );
+        let result = step(
+            new builder.File('foo.css', 'foo.css', content, 'foo.css'),
+            {paths: {out: '/foo/bar/', root: '/foo/'}}
+        );
+
+        expect(result.name).toBe('foo.css');
+        expect(result.module).toBe('foo.css');
+
+        expect(result.additionalFiles.length).toBe(1);
+        expect(result.additionalFiles[0].outputFile).toBe('/foo/bar/fonts/sansation_light.svg'.replace(/\//g, path.sep));
+        expect(result.additionalFiles[0].inputFiles.length).toBe(1);
+
+        expect(result.additionalFiles[0].inputFiles[0].path).toBe('/foo/sansation_light.svg'.replace(/\//g, path.sep));
+        expect(result.additionalFiles[0].inputFiles[0].extension).toBe('.svg');
+        expect(result.additionalFiles[0].inputFiles[0].needsRebuild).toBe(true);
+        expect(result.additionalFiles[0].inputFiles[0].skipFileSteps).toBe(false);
+
+        expect(result.content.toString()).toBe(
+            '@font-face {font-family: myFirstFont; src: url("fonts/sansation_light.svg?90190138#iconpicker");}'
+        );
+    });
 });
diff --git a/src/Builder/js/steps/css_rewrite.js b/src/Builder/js/steps/css_rewrite.js
@@ -1,4 +1,5 @@
 let path = require('path');
+let url = require('url');
 
 module.exports = function (file, config) {
     let content = file.content.toString().replace(/@font-face\s*{([^}]+)}/g, function (match, content) {
@@ -10,8 +11,11 @@ module.exports = function (file, config) {
                 return match;
             }
 
-            let cssPath = path.join(config.paths.out, 'fonts', path.basename(originalFile));
-            let fontFile = path.normalize(path.join(config.paths.root, path.dirname(file.name), originalFile));
+            // strip away and store any query or hash stuff
+            let parsed = url.parse(originalFile);
+
+            let cssPath = path.join(config.paths.out, 'fonts', path.basename(parsed.pathname));
+            let fontFile = path.normalize(path.join(config.paths.root, path.dirname(file.name), parsed.pathname));
 
             file.addAdditionalFile(cssPath, [fontFile]);
 
@@ -20,6 +24,9 @@ module.exports = function (file, config) {
             // make sure to always use the '/' separator, since that is what CSS expects
             relativePath = relativePath.replace(new RegExp('\\' + path.sep, 'g'), '/');
 
+            // Add back any query and hash stuff
+            relativePath += (parsed.search || '') + (parsed.hash || '');
+
             return 'url(' + JSON.stringify(relativePath) + ')';
         });
         return '@font-face {' + rewrittenContent + '}';

diff --git a/src/Plugin/CssFontRewitePlugin.php b/src/Plugin/CssFontRewitePlugin.php
@@ -19,9 +19,11 @@ public function activate(PluginApi $plugin_api): void
     {
         $plugin_api->addBuildStep(new CssFontRewriteStep());
 
+        $plugin_api->addBuildStep(new IdentityBuildStep('.eot'));
         $plugin_api->addBuildStep(new IdentityBuildStep('.otf'));
         $plugin_api->addBuildStep(new IdentityBuildStep('.ttf'));
         $plugin_api->addBuildStep(new IdentityBuildStep('.woff'));
         $plugin_api->addBuildStep(new IdentityBuildStep('.woff2'));
+        $plugin_api->addBuildStep(new IdentityBuildStep('.svg'));
     }
 }
diff --git a/test/Plugin/CssFontRewitePluginTest.php b/test/Plugin/CssFontRewitePluginTest.php
@@ -25,7 +25,7 @@ public function testActivate()
         $plugin_api->addBuildStep(Argument::type(CssFontRewriteStep::class))->shouldBeCalled();
         $plugin_api->addBuildStep(Argument::that(function (AbstractBuildStep $step) {
             return $step instanceof IdentityBuildStep
-                && \in_array($step->acceptedExtension(), ['.otf', '.ttf', '.woff', '.woff2'], true);
+                && \in_array($step->acceptedExtension(), ['.otf', '.ttf', '.woff', '.woff2', '.eot', '.svg'], true);
         }))->shouldBeCalled();
 
         $css_font_rewite_plugin->activate($plugin_api->reveal());