From f010896382148ba0f1d0f8f78db2f590384a82cb Mon Sep 17 00:00:00 2001 From: HD-CMS Date: Wed, 15 Mar 2017 09:32:52 +0100 Subject: [PATCH 1/7] Add ability to add scss, sass and less font-path variables (#357) * Create scss and less variables. Fixes #348 * Add fontPathVariables to readme --- Gruntfile.js | 9 +++++++++ Readme.md | 27 +++++++++++++++++++++++++++ tasks/templates/bem.css | 3 +++ tasks/templates/bootstrap.css | 3 +++ tasks/webfont.js | 26 +++++++++++++++++++++++--- test/webfont_test.js | 20 ++++++++++++++++++++ 6 files changed, 85 insertions(+), 3 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index cf394fe..4efcd11 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -339,6 +339,15 @@ module.exports = function(grunt) { }] } }, + enabled_template_variables: { + src: 'test/src/*.svg', + dest: 'test/tmp/enabled_template_variables', + options: { + relativeFontPath: '../iamrelative', + fontPathVariables: true, + stylesheets: ['css', 'scss', 'less'] + } + }, }, nodeunit: { all: ['test/webfont_test.js'] diff --git a/Readme.md b/Readme.md index a6dab8d..1bbbebb 100644 --- a/Readme.md +++ b/Readme.md @@ -271,6 +271,16 @@ Type: `string` Default: `null` Custom font path. Will be used instead of `destCss` *in* CSS file. Useful with CSS preprocessors. +#### fontPathVariables + +Type: `boolean` Default: `false` + +Create font-path variables for `less`, `scss` and `sass` files. Can be used to override the `relativeFontPath` +in custom preprocessor tasks or configs. + +The variable name is a combination of the `font` name appended with `-font-path`. + + #### version Type: `string` Default: `false` @@ -620,6 +630,23 @@ And finally, the third, for `icon-web-home.html`, a file that has access to the You can change CSS file syntax using `stylesheet` option (see above). It change file extension (so you can specify any) with some tweaks. Replace all comments with single line comments (which will be removed after compilation). +### Dynamic font-path +You can enable the `fontPathVariables` in combination with `relativeFontPath` to create a overridable font-path. + +For example scss: +```scss +$icons-font-path= "/relativeFontPath/" !default; +@font-face { + font-family:"icons"; + src:url($icons-font-path + "icons.eot"); + src:url($icons-font-path + "icons.eot?#iefix") format("embedded-opentype"), + url($icons-font-path + "icons.woff") format("woff"), + url($icons-font-path + "icons.ttf") format("truetype"); + font-weight:normal; + font-style:normal; +} +``` + ### Sass If `stylesheet` option is `sass` or `scss`, `_` will prefix the file (so it can be a used as a partial). diff --git a/tasks/templates/bem.css b/tasks/templates/bem.css index 6cce3a5..82598d5 100644 --- a/tasks/templates/bem.css +++ b/tasks/templates/bem.css @@ -1,6 +1,9 @@ /* Generated by grunt-webfont */ <% if (fontfaceStyles) { %> +<% if (fontPathVariables && stylesheet !== 'css') { %> +<%= fontPathVariable %> +<% } %> <% if (fontSrc1 && embed.length) { %> @font-face { font-family:"<%= fontFamilyName %>"; diff --git a/tasks/templates/bootstrap.css b/tasks/templates/bootstrap.css index 83c979a..2b73847 100644 --- a/tasks/templates/bootstrap.css +++ b/tasks/templates/bootstrap.css @@ -2,6 +2,9 @@ /* Based on https://github.com/endtwist/fontcustom/blob/master/lib/fontcustom/templates/fontcustom.css */ <% if (fontfaceStyles) { %> +<% if (fontPathVariables && stylesheet !== 'css') { %> +<%= fontPathVariable %> +<% } %> <% if (fontSrc1 && embed.length) { %> @font-face { font-family:"<%= fontFamilyName %>"; diff --git a/tasks/webfont.js b/tasks/webfont.js index 9a4cf0f..aed577a 100755 --- a/tasks/webfont.js +++ b/tasks/webfont.js @@ -87,6 +87,7 @@ module.exports = function(grunt) { destStyl: options.destStyl || params.destStyl || params.destCss || params.dest, dest: options.dest || params.dest, relativeFontPath: options.relativeFontPath, + fontPathVariables: options.fontPathVariables || false, addHashes: options.hashes !== false, addLigatures: options.ligatures === true, template: options.template, @@ -355,7 +356,7 @@ module.exports = function(grunt) { if (!has(o.types, type)) return; wf.fontsSrcsMap[type].forEach(function(font, idx) { if (font) { - fontSrcs[idx].push(generateFontSrc(type, font)); + fontSrcs[idx].push(generateFontSrc(type, font, stylesheet)); } }); }); @@ -680,17 +681,32 @@ module.exports = function(grunt) { * * @param {String} type Type of font * @param {Object} font URL or Base64 string + * @param {String} stylesheet type: css, scss, ... * @return {String} */ - function generateFontSrc(type, font) { + function generateFontSrc(type, font, stylesheet) { var filename = template(o.fontFilename + font.ext, o); + var fontPathVariableName = o.fontFamilyName + '-font-path'; var url; if (font.embeddable && has(o.embed, type)) { url = embedFont(path.join(o.dest, filename)); } else { - url = o.relativeFontPath + filename; + if (o.fontPathVariables && stylesheet !== 'css') { + if (stylesheet === 'less') { + fontPathVariableName = '@' + fontPathVariableName; + o.fontPathVariable = fontPathVariableName + ': "' + o.relativeFontPath + '";'; + } + else { + fontPathVariableName = '$' + fontPathVariableName; + o.fontPathVariable = fontPathVariableName + '= "' + o.relativeFontPath + '" !default;'; + } + url = filename; + } + else { + url = o.relativeFontPath + filename; + } if (o.addHashes) { if (url.indexOf('#iefix') === -1) { // Do not add hashes for OldIE // Put hash at the end of an URL or before #hash @@ -700,6 +716,10 @@ module.exports = function(grunt) { } var src = 'url("' + url + '")'; + if (o.fontPathVariables && stylesheet !== 'css') { + src = 'url(' + fontPathVariableName + ' + "' + url + '")'; + } + if (font.format) src += ' format("' + font.format + '")'; return src; diff --git a/test/webfont_test.js b/test/webfont_test.js index f918068..d9dc7a0 100644 --- a/test/webfont_test.js +++ b/test/webfont_test.js @@ -307,6 +307,26 @@ exports.webfont = { test.done(); }, + enabled_template_variables: function(test) { + var cssFilename = 'test/tmp/enabled_template_variables/_icons.scss'; + + var css = grunt.file.read(cssFilename); + + // There should be a variable declaration for scss preprocessor + test.ok( + find(css, '$icons-font-path= "../iamrelative/" !default;'), + 'SCSS enable template variables: variable exists.' + ); + + // The variable declaration should be used + test.ok( + find(css, 'url($icons-font-path + "'), + 'SCSS enable template variables: variable used.' + ); + + test.done(); + }, + html_template: function(test) { var demo = grunt.file.read('test/tmp/html_template/icons.html'); From 71e294cedcda16ab8fceb91d5c00a1b733a7cdee Mon Sep 17 00:00:00 2001 From: Harrinson Mosquera Bastidas Date: Wed, 15 Mar 2017 09:33:53 +0100 Subject: [PATCH 2/7] Fixing bug that avoids to generate the .eot files (#356) This little bug avoids to the plugin for generating the eot files --- tasks/bin/eotlitetool.py | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tasks/bin/eotlitetool.py b/tasks/bin/eotlitetool.py index 1fa4983..7fc1e5b 100644 --- a/tasks/bin/eotlitetool.py +++ b/tasks/bin/eotlitetool.py @@ -373,7 +373,7 @@ def make_eot_name_headers(fontdata, nameTableDir): else: nameheaders.append(struct.pack('4x')) # len = 0, padding = 0 - return b''.join(nameheaders) + return ''.join(nameheaders) # just return a null-string (len = 0) def make_root_string(): @@ -445,11 +445,11 @@ def make_eot_header(fontdata): *([eotSize, fontDataSize, version, flags] + panose + [charset, italic] + [weight, fsType, magicNumber] + urange + codepage + [checkSumAdjustment])) - return b''.join((fixed, nameheaders, rootstring)) + return ''.join((fixed, nameheaders, rootstring)) def write_eot_font(eot, header, data): - open(eot,'wb').write(b''.join((header, data))) + open(eot,'wb').write(''.join((header, data))) return def main(): From 12eb7811312a414979b8b8ce1b7de9a4d78b1305 Mon Sep 17 00:00:00 2001 From: Artem Sapegin Date: Wed, 15 Mar 2017 09:45:56 +0100 Subject: [PATCH 3/7] Create Pull_Request_Template.md --- Pull_Request_Template.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 Pull_Request_Template.md diff --git a/Pull_Request_Template.md b/Pull_Request_Template.md new file mode 100644 index 0000000..7d94109 --- /dev/null +++ b/Pull_Request_Template.md @@ -0,0 +1,12 @@ +**PROJECT IS NOT ACTIVELY MAINTAINED** + +Which means I will not receive a notification about this pull request. + +If you want your pull request to be merged: + +1. Explain the use case or bug you’re solving. +2. Add tests. +3. Add docs. +4. Mention sapegin. + +If you want to maintain the project, please contact me: http://sapegin.me/ From 223bb897d3a7df41acf1ee574c780bc3394f9fa8 Mon Sep 17 00:00:00 2001 From: HD-CMS Date: Wed, 15 Mar 2017 10:23:33 +0100 Subject: [PATCH 4/7] [BUGFIX] Set correct scss variable (#359) --- Readme.md | 2 +- tasks/webfont.js | 4 ++-- test/webfont_test.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/Readme.md b/Readme.md index 1bbbebb..30b83c7 100644 --- a/Readme.md +++ b/Readme.md @@ -635,7 +635,7 @@ You can enable the `fontPathVariables` in combination with `relativeFontPath` to For example scss: ```scss -$icons-font-path= "/relativeFontPath/" !default; +$icons-font-path : "/relativeFontPath/" !default; @font-face { font-family:"icons"; src:url($icons-font-path + "icons.eot"); diff --git a/tasks/webfont.js b/tasks/webfont.js index aed577a..742c458 100755 --- a/tasks/webfont.js +++ b/tasks/webfont.js @@ -696,11 +696,11 @@ module.exports = function(grunt) { if (o.fontPathVariables && stylesheet !== 'css') { if (stylesheet === 'less') { fontPathVariableName = '@' + fontPathVariableName; - o.fontPathVariable = fontPathVariableName + ': "' + o.relativeFontPath + '";'; + o.fontPathVariable = fontPathVariableName + ' : "' + o.relativeFontPath + '";'; } else { fontPathVariableName = '$' + fontPathVariableName; - o.fontPathVariable = fontPathVariableName + '= "' + o.relativeFontPath + '" !default;'; + o.fontPathVariable = fontPathVariableName + ' : "' + o.relativeFontPath + '" !default;'; } url = filename; } diff --git a/test/webfont_test.js b/test/webfont_test.js index d9dc7a0..f8bde54 100644 --- a/test/webfont_test.js +++ b/test/webfont_test.js @@ -314,7 +314,7 @@ exports.webfont = { // There should be a variable declaration for scss preprocessor test.ok( - find(css, '$icons-font-path= "../iamrelative/" !default;'), + find(css, '$icons-font-path : "../iamrelative/" !default;'), 'SCSS enable template variables: variable exists.' ); From fa081a760c4e61f99f0093fe15787456b1113df1 Mon Sep 17 00:00:00 2001 From: Dmitry Gorelenkov Date: Wed, 29 Mar 2017 08:56:37 +0200 Subject: [PATCH 5/7] readme.md typo fix: glpyhs -> glyphs (#360) --- Readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Readme.md b/Readme.md index 30b83c7..4c77afa 100644 --- a/Readme.md +++ b/Readme.md @@ -618,7 +618,7 @@ And finally, the third, for `icon-web-home.html`, a file that has access to the

<%= homeHeading %>

<%= homeMessage %>

    - <% for (var i = 0; i < glpyhs.length; i++) { %> + <% for (var i = 0; i < glyphs.length; i++) { %>
  • <%= glyphs[i] %>
    • <% } %>
From 36a5693cb0fcc71a33826d62e39cee235039be69 Mon Sep 17 00:00:00 2001 From: Eric Peters Date: Wed, 29 Mar 2017 08:36:32 -0700 Subject: [PATCH 6/7] Remove vertical-align css override (#235) (#361) --- tasks/templates/bem.css | 1 - tasks/templates/bootstrap.css | 1 - 2 files changed, 2 deletions(-) diff --git a/tasks/templates/bem.css b/tasks/templates/bem.css index 82598d5..3098fe9 100644 --- a/tasks/templates/bem.css +++ b/tasks/templates/bem.css @@ -25,7 +25,6 @@ font-family:"<%= fontFamilyName %>"; <% if (stylesheet === 'less') { %>}<% } %> display:inline-block; - vertical-align:middle; line-height:1; font-weight:normal; font-style:normal; diff --git a/tasks/templates/bootstrap.css b/tasks/templates/bootstrap.css index 2b73847..dfe9b20 100644 --- a/tasks/templates/bootstrap.css +++ b/tasks/templates/bootstrap.css @@ -29,7 +29,6 @@ .ligature-icons<% } %> { font-family:"<%= fontFamilyName %>"; display:inline-block; - vertical-align:middle; line-height:1; font-weight:normal; font-style:normal; From 015ad38206c1ff552f9a189a497ae345bb11a393 Mon Sep 17 00:00:00 2001 From: Martynas Barzda Date: Mon, 8 May 2017 16:18:36 +0300 Subject: [PATCH 7/7] added getNextCodepoint() fix; (#364) added tests --- Gruntfile.js | 10 ++++++++++ tasks/webfont.js | 2 +- test/src_filename_length/length.svg | 2 ++ test/webfont_test.js | 14 ++++++++++++++ 4 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 test/src_filename_length/length.svg diff --git a/Gruntfile.js b/Gruntfile.js index 4efcd11..febecc5 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -348,6 +348,16 @@ module.exports = function(grunt) { stylesheets: ['css', 'scss', 'less'] } }, + filename_length: { + src: 'test/src_filename_length/*.svg', + dest: 'test/tmp/filename_length', + options: { + autoHint: false, + engine: 'node', + hashes: false, + types: 'woff' + } + }, }, nodeunit: { all: ['test/webfont_test.js'] diff --git a/tasks/webfont.js b/tasks/webfont.js index 742c458..e793f21 100755 --- a/tasks/webfont.js +++ b/tasks/webfont.js @@ -622,7 +622,7 @@ module.exports = function(grunt) { * @return {Integer} */ function getNextCodepoint() { - while (_.includes(o.codepoints, currentCodepoint)) { + while (_.invert(o.codepoints).hasOwnProperty(currentCodepoint)) { currentCodepoint++; } return currentCodepoint; diff --git a/test/src_filename_length/length.svg b/test/src_filename_length/length.svg new file mode 100644 index 0000000..b87aebe --- /dev/null +++ b/test/src_filename_length/length.svg @@ -0,0 +1,2 @@ + +length diff --git a/test/webfont_test.js b/test/webfont_test.js index f8bde54..550c79c 100644 --- a/test/webfont_test.js +++ b/test/webfont_test.js @@ -915,6 +915,20 @@ exports.webfont = { // Files should render with custom context variables test.ok(fs.existsSync('test/tmp/custom_output/context-test.html')); + test.done(); + }, + + filename_length: function(test) { + + // File should have been created. + test.ok(fs.existsSync('test/tmp/filename_length/icons.css')); + + // File should have been created. + test.ok(fs.existsSync('test/tmp/filename_length/icons.woff')); + + // File should have been created. + test.ok(fs.existsSync('test/tmp/filename_length/icons.html')); + test.done(); }