diff --git a/package.json b/package.json index b4a2639..443475c 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ "exports-loader": "^0.6.3", "extract-text-webpack-plugin": "^0.9.1", "file-loader": "^0.8.5", + "fontgen-loader": "^0.2.1", "html-loader": "^0.4.3", "html-webpack-plugin": "^2.0.0", "imports-loader": "^0.6.5", @@ -77,6 +78,7 @@ "phantomjs-prebuilt": "^2.0.0", "postcss-loader": "^0.8.0", "postcss-url": "^5.1.1", + "raw-loader": "^0.5.1", "react-addons-test-utils": "^15.0.2", "sass-loader": "^3.1.2", "sinon": "^1.15.3", diff --git a/webpack.config.js b/webpack.config.js index 3a8a963..24f75f3 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -162,7 +162,7 @@ var webpackConfig = { }, { test: /\.json$/, - exclude: /intl\.json/, + exclude: /(intl|font)\.json/, loader: 'json' }, { @@ -171,21 +171,24 @@ var webpackConfig = { }, { test: /\.intl\.json$/, - loader: 'babel!intl-loader!json' + loader: 'babel!intl!json' + }, + { + test: /\.font\.(js|json)$/, + loader: 'raw!fontgen' } ] }, resolveLoader: { alias: { - 'intl-loader': path.resolve('./webpack/intl-loader') + 'intl': path.resolve('./webpack/intl-loader') } }, sassLoader: { importer: iconfontImporter({ - test: /\.font.(js|json)$/, - types: ['woff', 'eot', 'ttf'] + test: /\.font.(js|json)$/ }) }, diff --git a/webpack/node-sass-iconfont-importer.js b/webpack/node-sass-iconfont-importer.js index b82b2cd..abe0722 100644 --- a/webpack/node-sass-iconfont-importer.js +++ b/webpack/node-sass-iconfont-importer.js @@ -1,217 +1,34 @@ -var path = require("path"); - -var glob = require('glob'); var loaderUtils = require("loader-utils"); -var fontgen = require("webfonts-generator"); module.exports = function createImporter(options) { return function(url, fileContext, done) { if (options.test.test(url)) { - var context = this.options.includePaths; var request = loaderUtils.urlToRequest(url); - compiler.resolvers.normal.resolve(context, request, function(err, resourcePath) { + loaderContext.loadModule(request, function(err, source) { if (err) return done(new Error(err)); - var context = path.dirname(resourcePath); - var config = require(resourcePath); - - generate( - config, - options, - resourcePath, - context, - function(err, content) { - if (err) return done(new Error(err)); - - done({ - contents: content - }); - } - ); + done({ + contents: loaderContext.exec(source) + }); }); } else { done(false); } }; -} +}; +var loaderContext; var Plugin = module.exports.Plugin = function() {}; Plugin.prototype.apply = function(compiler) { - setCompiler(compiler); // inject compiler to use in importer - - compiler.plugin("emit", function(compilation, callback) { - Object.keys(emitQueue).forEach(function(url) { - compilation.assets[url] = emitQueue[url]; - }); - - callback(); + compiler.plugin('compilation', function(compilation) { + compilation.plugin('normal-module-loader', setLoaderContext); }); }; -var compiler; - -function setCompiler(instance) { - // inject compiler instance for importer function - compiler = instance; +function setLoaderContext(instance) { + // inject loaderContext instance for importer function + loaderContext = instance; } - -var emitQueue = {}; -var RawSource = require('webpack-sources').RawSource; -function emitFile(url, content) { - // TODO: support multiple plugin instances? - emitQueue[url] = new RawSource(content); -} - -/** - * Partially modified code of fontgen goes next - */ -var mimeTypes = { - 'eot': 'application/vnd.ms-fontobject', - 'svg': 'image/svg+xml', - 'ttf': 'application/x-font-ttf', - 'woff': 'application/font-woff' -}; - -function absolute(from, to) { - if (arguments.length < 2) { - return function (to) { - return path.resolve(from, to); - }; - } - return path.resolve(from, to); -} - -function getFilesAndDeps(patterns, context) { - var files = []; - var filesDeps = []; - var directoryDeps = []; - - - function addFile(file) { - filesDeps.push(file); - files.push(absolute(context, file)); - } - - function addByGlob(globExp) { - var globOptions = {cwd: context}; - - var foundFiles = glob.sync(globExp, globOptions); - files = files.concat(foundFiles.map(absolute(context))); - - var globDirs = glob.sync(path.dirname(globExp) + '/', globOptions); - directoryDeps = directoryDeps.concat(globDirs.map(absolute(context))); - - - } - - // Re-work the files array. - patterns.forEach(function (pattern) { - if (glob.hasMagic(pattern)) { - addByGlob(pattern); - } - else { - addFile(pattern); - } - }); - - return { - files: files, - dependencies: { - directories: directoryDeps, - files: filesDeps - } - }; - -} - -function generate(config, params, resourcePath, context, cb) { - config.__dirname = path.dirname(resourcePath); - - var filesAndDeps = getFilesAndDeps(config.files, context); - config.files = filesAndDeps.files; - - // With everything set up, let's make an ACTUAL config. - var formats = params.types || ['eot', 'woff', 'ttf', 'svg']; - if (formats.constructor !== Array) { - formats = [formats]; - } - - var fontconf = { - files: config.files, - fontName: config.fontName, - types: formats, - order: formats, - fontHeight: config.fontHeight || 1000, // Fixes conversion issues with small svgs - templateOptions: { - baseClass: config.baseClass || "icon", - classPrefix: 'classPrefix' in config ? config.classPrefix : "icon-" - }, - rename: (typeof config.rename == "function" ? config.rename : function (f) { - return path.basename(f, ".svg"); - }), - dest: "", - writeFiles: false - }; - - if (config.cssTemplate) { - fontconf.cssTemplate = absolute(context, config.cssTemplate); - } - - for (var option in config.templateOptions) { - if (config.templateOptions.hasOwnProperty(option)) { - fontconf.templateOptions[option] = config.templateOptions[option]; - } - } - - // svgicons2svgfont stuff - var keys = [ - "fixedWidth", - "centerHorizontally", - "normalize", - "fontHeight", - "round", - "descent" - ]; - for (var x in keys) { - if (typeof config[keys[x]] != "undefined") { - fontconf[keys[x]] = config[keys[x]]; - } - } - - var pub = compiler.options.output.publicPath || '/'; - var embed = !!params.embed; - - fontgen(fontconf, function (err, res) { - if (err) { - return cb(err); - } - var urls = {}; - for (var i in formats) { - var format = formats[i]; - if (!embed) { - var filename = config.fileName || params.fileName || "[hash]-[fontname][ext]"; - filename = filename - .replace("[fontname]", fontconf.fontName) - .replace("[ext]", "." + format); - var url = loaderUtils.interpolateName(this, - filename, - { - context: params.context || this.context, - content: res[format] - } - ); - urls[format] = path.join(pub, url).replace(/\\/g, '/'); - emitFile(url, res[format]); - } else { - urls[format] = 'data:' - + mimeTypes[format] - + ';charset=utf-8;base64,' - + (new Buffer(res[format]).toString('base64')); - } - } - cb(null, res.generateCss(urls)); - }); -}; diff --git a/webpack/package.json b/webpack/package.json index 49d5370..f7af96d 100644 --- a/webpack/package.json +++ b/webpack/package.json @@ -5,9 +5,6 @@ "keywords": [], "author": "", "dependencies": { - "glob": "^6.0.3", - "loader-utils": "^0.2.12", - "webfonts-generator": "^0.3.1", - "webpack-sources": "^0.1.0" + "loader-utils": "^0.2.12" } }