@gkatsev Use fonts 2.0 that do not require wrapping codepoints. closes #3252

CHANGELOG.md

@@ -3,6 +3,7 @@ CHANGELOG
 
 ## HEAD (Unreleased)
 * @nickygerritsen Pass tech options to source handlers ([view](https://github.com/videojs/video.js/pull/3245))
+* @gkatsev Use fonts 2.0 that do not require wrapping codepoints ([view](https://github.com/videojs/video.js/pull/3252))
 
 --------------------
 

build/grunt.js

@@ -159,7 +159,7 @@ module.exports = function(grunt) {
       },
       skin: {
         files: ['src/css/**/*'],
-        tasks: ['sass', 'wrapcodepoints']
+        tasks: ['sass']
       },
       jshint: {
         files: ['src/**/*', 'test/unit/**/*.js', 'Gruntfile.js'],
@@ -464,7 +464,6 @@ module.exports = function(grunt) {
     'uglify',
 
     'sass',
-    'wrapcodepoints',
     'version:css',
     'cssmin',
 
@@ -489,18 +488,7 @@ module.exports = function(grunt) {
     'zip:dist'
   ]);
 
-  // Sass turns unicode codepoints into utf8 characters.
-  // We don't want that so we unwrapped them in the templates/scss.hbs file.
-  // After sass has generated our css file, we need to wrap the codepoints
-  // in quotes for it to work.
-  grunt.registerTask('wrapcodepoints', function() {
-    const sassConfig = grunt.config.get('sass.build.files');
-    const cssPath = Object.keys(sassConfig)[0];
-    const css = grunt.file.read(cssPath);
-    grunt.file.write(cssPath, css.replace(/(\\f\w+);/g, "'$1';"));
-  });
-
-  grunt.registerTask('skin', ['sass', 'wrapcodepoints']);
+  grunt.registerTask('skin', ['sass']);
 
   // Default task - build and test
   grunt.registerTask('default', ['test']);

package.json

@@ -28,7 +28,7 @@
     "object.assign": "^4.0.1",
     "safe-json-parse": "^4.0.0",
     "tsml": "1.0.1",
-    "videojs-font": "1.5.1",
+    "videojs-font": "^2.0.0",
     "videojs-ie8": "1.1.2",
     "videojs-swf": "5.0.1",
     "videojs-vtt.js": "^0.12.1",

src/css/_variables.scss

@@ -1,2 +1 @@
 $icon-font-path: 'font' !default;
-$icon-codepoints: false !default;

src/css/video-js.scss

@@ -2,11 +2,7 @@
 @import "private-variables";
 @import "utilities";
 
-@if $icon-codepoints {
-  @import "node_modules/videojs-font/scss/icons-codepoints";
-} @else {
-  @import "node_modules/videojs-font/scss/icons";
-}
+@import "node_modules/videojs-font/scss/icons";
 
 @import "components/layout";
 @import "components/big-play";

src/css/vjs.scss

@@ -1,3 +1 @@
-$icon-codepoints: true;
-
 @import "video-js";