fix: handle 2-bytes to 6-bytes unicode characters (#58)

BREAKING CHANGE: automatically includes 2-byte unicode characters with autodetect

lib/index.js

@@ -10,7 +10,7 @@ const RawSource = require('webpack-sources').RawSource
 const FONT_REGEX = /\.(eot|ttf|svg|woff|woff2)(\?.+)?$/
 const TEXT_REGEX = /\.(js|css|html)$/
 const GLYPH_REGEX = /content\s*:[^};]*?('|")(.*?)\s*('|"|;)/g
-const UNICODE_REGEX = /\\([0-9a-f]{4,6})/i
+const UNICODE_REGEX = /\\([0-9a-f]{2,6})/i
 const FONTMIN_EXTENSIONS = ['eot', 'woff', 'woff2', 'svg']
 
 function getSurrogatePair(astralCodePoint) {
@@ -129,7 +129,7 @@ class FontminPlugin {
             const unicodeHex = unicodeMatch[1]
             const numericValue = parseInt(unicodeHex, 16)
             const character = String.fromCharCode(numericValue)
-            if (unicodeHex.length === 4) {
+            if (unicodeHex.length === 2 || unicodeHex.length === 4) {
               return character
             }
             const multiCharacter = getSurrogatePair(numericValue)

test/fixtures/custom-icon.css

@@ -0,0 +1,34 @@
+@font-face {
+  font-family: 'custom-icon';
+  src:  url('./custom-icon/custom-icon.eot');
+  src:  url('./custom-icon/custom-icon.eot#iefix') format('embedded-opentype'),
+    url('./custom-icon/custom-icon.ttf') format('truetype'),
+    url('./custom-icon/custom-icon.woff') format('woff'),
+    url('./custom-icon/custom-icon.svg#custom-icon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="custom-icon-"], [class*=" custom-icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'custom-icon' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.custom-icon-coffee:before {
+  content: "\e900";
+}
+
+.custom-icon-plus:before {
+  content: "\2b";
+}

test/fixtures/custom-icon.js

@@ -0,0 +1 @@
+require('./custom-icon.css')

test/fixtures/entry.css

@@ -30,6 +30,10 @@
   content: '\f0ce';
 }
 
+.custom-content {
+  content: '\f0'; /* ð */
+}
+
 .entry {
   background: white;
 }

test/fixtures/webpack.custom-icon.config.js

@@ -0,0 +1,14 @@
+const FontminPlugin = require('../../lib')
+
+module.exports = {
+  entry: `${__dirname}/custom-icon.js`,
+  output: {filename: 'out.js', path: `${__dirname}/dist`, publicPath: '/test/fixtures/dist/'},
+  module: {
+    rules: [
+      {test: /\.(woff|woff2)(\?v=.+)?$/, use: ['file-loader']},
+      {test: /\.(svg|ttf|eot|png)(\?v=.+)?$/, use: ['file-loader']},
+      {test: /\.css$/, use: ['style-loader', 'css-loader'], include: __dirname},
+    ],
+  },
+  plugins: [new FontminPlugin()],
+}

test/index.test.js

@@ -9,6 +9,7 @@ const Plugin = require('../lib')
 
 const DIST_FOLDER = path.join(__dirname, 'fixtures/dist/')
 const FONT_AWESOME_FOLDER = path.join(__dirname, '../node_modules/font-awesome')
+const CUSTOM_ICON_FOLDER = path.join(__dirname, 'fixtures/custom-icon')
 
 function getFilenameWithoutQueryString(filename) {
   return filename.split('?', 2)[0]
@@ -19,13 +20,20 @@ describe('FontminPlugin', () => {
   const baseConfig = require('./fixtures/webpack.config')
   const baseExtractConfig = require('./fixtures/webpack.extract-text.config')
   const baseUnicodeConfig = require('./fixtures/webpack.unicode.config')
+  const customIconConfig = require('./fixtures/webpack.custom-icon.config')
   const originalStats = collectFontStats(FONT_AWESOME_FOLDER + '/fonts', {
     'fontawesome-webfont.eot': true,
     'fontawesome-webfont.ttf': true,
     'fontawesome-webfont.svg': true,
     'fontawesome-webfont.woff': true,
     'fontawesome-webfont.woff2': true,
   })
+  const customIconOriginalStats = collectFontStats(CUSTOM_ICON_FOLDER, {
+    'custom-icon.eot': true,
+    'custom-icon.ttf': true,
+    'custom-icon.svg': true,
+    'custom-icon.woff': true,
+  })
 
   function collectFontStats(directory, files) {
     return _.keys(files)
@@ -260,4 +268,57 @@ describe('FontminPlugin', () => {
       fontStats.forEach(file => expect(out.match(file.filename.replace(/-([a-z]|[0-9])+\./, '.'))).to.not.be.ok)
     })
   })
+
+  describe('Custom Icon pack', () => {
+    it('should run successfully', function (done) {
+      this.timeout(10000)
+      const plugin = new Plugin({autodetect: true})
+      const config = _.cloneDeep(customIconConfig)
+      testWithConfig(_.assign(config, {plugins: [plugin]}), done)
+    })
+
+    before(done => rimraf(DIST_FOLDER, done))
+    after(done => rimraf(DIST_FOLDER, done))
+
+    it('should contain the right glyphs', () => {
+      const glyphs = getGlyphs()
+      expect(glyphs).to.not.contain('cloud-lightning')
+      expect(glyphs).to.contain('coffee')
+      expect(glyphs).to.contain('plus')
+    })
+
+    it('should minify eot', () => {
+      const original = _.find(customIconOriginalStats, {extension: '.eot'})
+      const eot = _.find(fontStats, {extension: '.eot'})
+      expect(eot.stats.size)
+        .to.be.greaterThan(500)
+        .lessThan(original.stats.size)
+    })
+
+    it('should minify svg', () => {
+      const glyphs = getGlyphs()
+      expect(glyphs).to.eql(['plus', 'coffee'])
+      const original = _.find(customIconOriginalStats, {extension: '.svg'})
+      const svg = _.find(fontStats, {extension: '.svg'})
+      expect(svg.stats.size)
+        .to.be.greaterThan(500)
+        .lessThan(original.stats.size)
+    })
+
+    it('should minify tff', () => {
+      const original = _.find(customIconOriginalStats, {extension: '.ttf'})
+      const ttf = _.find(fontStats, {extension: '.ttf'})
+      expect(ttf.stats.size)
+        .to.be.greaterThan(500)
+        .lessThan(original.stats.size)
+    })
+
+    it('should minify woff', () => {
+      const original = _.find(customIconOriginalStats, {extension: '.woff'})
+      const woff = _.find(fontStats, {extension: '.woff'})
+      expect(woff.stats.size)
+        .to.be.greaterThan(500)
+        .lessThan(original.stats.size)
+    })
+  })
 })