How to fix bannertime CSS fontface getting stripped when you run gulp prod

Here's a quick fix to CSS @fontface declarations being stripped out when you run a gulp prod for Bannertime.

Last updated on 30 January, 2019, 1:13am by keston

Preface

I've recently worked on some ads built using the npm package called Bannertime. Bannertime offers some useful features for developers who create HTML5 banner ads, things such as a built-in timeline playback scrubber, preview page generator and build processes (curated scripts that use Gulp). I'm not 100% sold on this tool as it abstracts CSS (presentation) and HTML (content) configuration into it's own custom Javascript objects. This makes debugging more complicated. However, I might review Bannertime more fully in another post.

CSS @fontFace issue

In short, there's an issue where the gulp prod command, builds and zips up production files, stripping out the CSS declarations for @fontface selectors. This issue was noticed when working with dynamic copy via Flashtalking.

 

After some investigation it appears that bannertime 3.1.1 has a dependency on a package called cssnano, which by default strips out any CSS selectors it thinks are unused, then minimises to a .css file. You can locate the following file in your package install and add a flag to turn off this feature.

Go to gulpfile.js (folder) > tasks > sass.js and modify the following values discardUnused: false.

                        

.pipe(gulpif(process.env.NODE_ENV == 'production', nano({zindex: false})))

//add the following flag to the nano method.

.pipe(gulpif(process.env.NODE_ENV == 'production', nano({zindex: false, discardUnused: false})))

Now when you run a gulp prod, cssnano should still minimise your css, but it won't try to discard unused selectors and should leave the @fontFace selectors in.

 

Note: This issue might have been the result of banner copy being injected dynamically, hence causing cssnano to think the fonts were not being used. Will do some tests to verify whether the issue is limited to dynamic copy only.

Update

I did some tests and the original issue was NOT caused by working with dynamic text. The issue is specifically the result of the Bannertime setup. 

 

Bannertime abstracts the div element creation, into JS (which I personally am not a fan of). When cssnano scans the project, it looks in the SASS/CSS files to see if a font-family using the @font-face is being declared/used by any elements/classes. In this case, the font-family declaration is introduced in custom JS objects, effectively obscured from these checks. Hence, it looks like it's not in use.

 

Note: Bannertime JS/CSS code pattern below.

                        

this.header = this.smartObject({
    fontFamily: 'Your Cool Font',
    retina: true,
    parent: this.banner
  });

Note: If this font-family declaration was written in standard CSS3, cssnano (and any other script that expect presentation to be configured in CSS) could detect that this declaration is used.

                        

#header {
    font-family: 'Your Cool Font';
  }

In conclusion, cssnano works well and is doing it's job. If anything, the whole issue is an example of why general styling should be done in stylesheets and content should be placed in HTML - not Javascript.

 

Hope this helps,

Keston