typefaces icon indicating copy to clipboard operation
typefaces copied to clipboard

Add SCSS support (for configuring font paths)

Open davidjb opened this issue 5 years ago • 0 comments

This implements #79.

This adds support to typeface packages by adding _typeface.scss partial for setting a font-path variable. This is to enable support of Sass-centric build systems (eg sass directly, Bootstrap, etc) where files will be copied/put into a known location by another process (but not 'discovered' as in webpack).

The implementation means this is possible:

$open-sans-font-path:          "../dist/fonts/open-sans" !default;
@import "typeface-open-sans/typeface";

and the resulting CSS is populated with the correct font-path as set.

The naming of the imported partial is arbitrary -- it could just as easily be fonts or something else, but typeface seemed logical since it is the whole typeface. Ideally, it would have been ideal to name it index.scss or _index.scss to enable a simple @import "typeface-open-sans" from within Sass, but this causes ambiguity with the existing index.css file. As such, Sass won't build if both files are present (it used to be a warning and is now an error).

The choice to have typeface-specific variable names (eg $open-sans-font-path) gives flexibility over one generic $font-path variable so you can set different paths for different typefaces. Plus, being more specific means less chance of a conflict in existing projects.

The implementation in the code itself adds only a few minor changes to the build script and templates. There are no changes to the existing CSS builds for full backward compatibility.

davidjb avatar Jan 16 '20 03:01 davidjb