mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-11-08 17:12:25 +05:30
#90: pass the icon fonts through fontgen-loader. Restore hmr functionality
This commit is contained in:
SleepWalker
parent
4404968df2
commit
88999d7dbe
@ -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",
|
||||
|
||||
@ -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)$/
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
@ -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));
|
||||
});
|
||||
};
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user