Skip to content

Commit 8ff664b

Browse files
jantimonjantimon
authored
feat(postcss-plugin): Add support for postcss-loader 2.x (#7)
1 parent af73c81 commit 8ff664b

File tree

16 files changed

+256
-257
lines changed

16 files changed

+256
-257
lines changed

‎.travis.yml‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
language: node_js
22
node_js:
3-
- "4"
4-
- "5"
53
- "6"
64
script:
75
- npm test
86
- npm run example:default
97
after_success:
10-
- './node_modules/.bin/nyc report --reporter=text-lcov | ./node_modules/.bin/coveralls'
8+
- './node_modules/.bin/nyc report --reporter=text-lcov | ./node_modules/.bin/coveralls'

‎README.md‎

Lines changed: 38 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@ This plugin tries to keep the usage and maintenance of icon fonts as simple as p
55

66
Browser Support: IE9 - IE11 and all modern browsers
77

8+
# Requirements
9+
10+
This plugin requires webpack 2+ and postcss-loader 2+
11+
Some dependencies for this plugin require node 6+
12+
13+
Please use the iconfont-webpack-plugin 0.0.12 for older webpack / postcss-loader versions.
14+
815
## Installation
916

1017
```
@@ -14,44 +21,57 @@ npm i --save-dev iconfont-webpack-plugin
1421
## Configuration
1522

1623
```js
17-
var IconfontWebpackPlugin = require('iconfont-webpack-plugin');
24+
const IconfontWebpackPlugin = require('iconfont-webpack-plugin');
1825

19-
// make sure you use the postcss loader:
2026
module: {
21-
loaders: [
27+
rules: [
2228
{
2329
test: /\.css$/,
24-
loader: 'css-loader!postcss-loader'
30+
use: [
31+
'css-loader',
32+
{
33+
loader: 'postcss-loader',
34+
options: {
35+
plugins: (loader) => [
36+
// Add the plugin
37+
new IconfontWebpackPlugin(loader)
38+
]
39+
}
40+
}
41+
]
2542
}
2643
]
2744
},
28-
// add the plugin
29-
plugins: [
30-
new IconfontWebpackPlugin()
31-
]
3245
```
3346

3447
## Advanced Configuration
3548

3649

3750
```js
38-
var IconfontWebpackPlugin = require('iconfont-webpack-plugin');
51+
vconst IconfontWebpackPlugin = require('iconfont-webpack-plugin');
3952

40-
// make sure you use the postcss loader:
4153
module: {
42-
loaders: [
54+
rules: [
4355
{
4456
test: /\.css$/,
45-
loader: 'css-loader!postcss-loader'
57+
use: [
58+
'css-loader',
59+
{
60+
loader: 'postcss-loader',
61+
options: {
62+
plugins: (loader) => [
63+
// Add the plugin
64+
new IconfontWebpackPlugin({
65+
resolve: loader.resolve,
66+
fontNamePrefix: 'custom-',
67+
})
68+
]
69+
}
70+
}
71+
]
4672
}
4773
]
4874
},
49-
// add the plugin
50-
plugins: [
51-
new IconfontWebpackPlugin({
52-
fontNamePrefix: 'custom-'
53-
})
54-
]
5575
```
5676

5777
## Usage

‎appveyor.yml‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@
33

44
environment:
55
matrix:
6-
- nodejs_version: 4
7-
- nodejs_version: 5
86
- nodejs_version: 6
97

108
version: "{build}"

‎example/default/dist/bundle.js‎

Lines changed: 42 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,80 @@
11
/******/ (function(modules) { // webpackBootstrap
22
/******/ // The module cache
33
/******/ var installedModules = {};
4-
4+
/******/
55
/******/ // The require function
66
/******/ function __webpack_require__(moduleId) {
7-
7+
/******/
88
/******/ // Check if module is in cache
9-
/******/ if(installedModules[moduleId])
9+
/******/ if(installedModules[moduleId]) {
1010
/******/ return installedModules[moduleId].exports;
11-
11+
/******/ }
1212
/******/ // Create a new module (and put it into the cache)
1313
/******/ var module = installedModules[moduleId] = {
14-
/******/ exports: {},
15-
/******/ id: moduleId,
16-
/******/ loaded: false
14+
/******/ i: moduleId,
15+
/******/ l: false,
16+
/******/ exports: {}
1717
/******/ };
18-
18+
/******/
1919
/******/ // Execute the module function
2020
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21-
21+
/******/
2222
/******/ // Flag the module as loaded
23-
/******/ module.loaded = true;
24-
23+
/******/ module.l = true;
24+
/******/
2525
/******/ // Return the exports of the module
2626
/******/ return module.exports;
2727
/******/ }
28-
29-
28+
/******/
29+
/******/
3030
/******/ // expose the modules object (__webpack_modules__)
3131
/******/ __webpack_require__.m = modules;
32-
32+
/******/
3333
/******/ // expose the module cache
3434
/******/ __webpack_require__.c = installedModules;
35-
35+
/******/
36+
/******/ // define getter function for harmony exports
37+
/******/ __webpack_require__.d = function(exports, name, getter) {
38+
/******/ if(!__webpack_require__.o(exports, name)) {
39+
/******/ Object.defineProperty(exports, name, {
40+
/******/ configurable: false,
41+
/******/ enumerable: true,
42+
/******/ get: getter
43+
/******/ });
44+
/******/ }
45+
/******/ };
46+
/******/
47+
/******/ // getDefaultExport function for compatibility with non-harmony modules
48+
/******/ __webpack_require__.n = function(module) {
49+
/******/ var getter = module && module.__esModule ?
50+
/******/ function getDefault() { return module['default']; } :
51+
/******/ function getModuleExports() { return module; };
52+
/******/ __webpack_require__.d(getter, 'a', getter);
53+
/******/ return getter;
54+
/******/ };
55+
/******/
56+
/******/ // Object.prototype.hasOwnProperty.call
57+
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
58+
/******/
3659
/******/ // __webpack_public_path__
3760
/******/ __webpack_require__.p = "";
38-
61+
/******/
3962
/******/ // Load entry module and return exports
40-
/******/ return __webpack_require__(0);
63+
/******/ return __webpack_require__(__webpack_require__.s = 0);
4164
/******/ })
4265
/************************************************************************/
4366
/******/ ([
4467
/* 0 */
4568
/***/ (function(module, exports, __webpack_require__) {
4669

47-
__webpack_require__(1);
70+
__webpack_require__(1);
4871

4972

5073
/***/ }),
5174
/* 1 */
5275
/***/ (function(module, exports) {
5376

54-
// removed by extract-text-webpack-plugin
77+
// removed by extract-text-webpack-plugin
5578

5679
/***/ })
5780
/******/ ]);

‎example/default/dist/styles.css‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
1-
@font-face {
2-
font-family: u84c0f;
3-
src: url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQwAAsAAAAABkwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIwleU9TLzIAAAFEAAAAPwAAAFYvsjszY21hcAAAAYQAAABKAAABcOEoo6pnbHlmAAAB0AAAAJcAAACkBXkxZWhlYWQAAAJoAAAALgAAADYLpPaZaGhlYQAAApgAAAAeAAAAJAPxAe9obXR4AAACuAAAAAgAAAAIAe7//2xvY2EAAALAAAAABgAAAAYAUgAAbWF4cAAAAsgAAAAeAAAAIAENAEBuYW1lAAAC6AAAASkAAAIWm5e+CnBvc3QAAAQUAAAAGwAAACxqPAEEeJxjYGRgYOBiMGCwY2DKSSzJY+BzcfMJYZBiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCAClZBUgAeJxjYGT4zjiBgZWBgdGSMY2BgcEdSn9lkGRoYWBgYmBlZsAKAtJcUxgcHjA8AKoBAj0mZgZGIA3CDACcLwhKAHic7ZCxDYAwEAPPykOBGIEqNbNQsb/YJPkY2CKWzpJPXz2wACU5kwDdiJErrewLm31QfRPDP7T2d+5wo5WZ3X18y796QR0aJglRAAB4nB2IQQrCMBAAs5s0mzZpY6KmkoNFkYoiSik04KHe/IGf8PX+QIMzMIdh8M3ABzkbGRumlH3AP2O6QRrT1Oc3Qxs6sNCStCBzeIehDVQIY7xbrrV7d1bUxAkRqGz85RC3m6KUCIILqUpnzb1QlSDh3Xl3DU2DiMfZ9j5GZX3tSavGvCKqirRRGobF/nmqjF0F9gOdHRIIAHicY2BkYGAA4v0iIbrx/DZfGbiZGEDgqnfUWRj9HwgYPzAxA7kcDGBpAD0mDI0AAHicY2BkYGBiAAHGd//////H+IGBkQEVMAEAg2cF4gAAAAAAAAHu//8AAAAAAFIAAHicY2BkYGBgYjBhANEgFgMDFxAyMPwH8xkADasBTgAAeJxlkD1uwkAUhMdgSAJSghQpKbNVCiKZn5IDQE9Bl8KYtTGyvdZ6QaLLCXKEHCGniHKCHChj82hgLT9/M2/e7soABviFh3p5uG1qvVq4oTpxm/Qg7JOfhTvo40W4S38o3MMbpsJ9POKdO3j+HZ0BSuEW7vEh3Kb/KeyTv4Q7eMK3cJf+j3APK/wJ9/HqDdPIFLEp3FIn+yy0Z3n+rrStUlOoSTA+WwtdaBs6vVHro6oOydS5WMXW5GrOrs4yo0prdjpywda5cjYaxeIHkcmRIoJBgbipDktoJNgjQwh71b3UK6YtKvq1VpggwPgqtWCqaJIhlcaGyTWOrBUOPG1K1zGt+FrO5KS5zGreJCMr/u+6t6MT0Q+wbaZKzDDiE1/kg+YO+T89EV6oAAAAeJxjYGKAAFYG7ICJkYmRmYEp04CBAQADvgCsAA==") format('woff');
4-
font-weight: normal;
5-
font-style: normal;
6-
}
1+
@font-face { font-family: u84c0f; src:url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQwAAsAAAAABkwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPwAAAFYvsjszY21hcAAAAYQAAABKAAABcOEoo6pnbHlmAAAB0AAAAJcAAACkBXkxZWhlYWQAAAJoAAAALwAAADYMV/uxaGhlYQAAApgAAAAeAAAAJAPxAe9obXR4AAACuAAAAAgAAAAIAe7//2xvY2EAAALAAAAABgAAAAYAUgAAbWF4cAAAAsgAAAAeAAAAIAENAEBuYW1lAAAC6AAAASkAAAIWm5e+CnBvc3QAAAQUAAAAGwAAACxqPAEEeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGT4zjiBgZWBgdGSMY2BgcEdSn9lkGRoYWBgYmBlZsAKAtJcUxgcHjA8AKoBAj0mZgZGIA3CDACcLwhKAHic7ZCxDYAwEAPPykOBGIEqNbNQsb/YJPkY2CKWzpJPXz2wACU5kwDdiJErrewLm31QfRPDP7T2d+5wo5WZ3X18y796QR0aJglRAAB4nB2IQQrCMBAAs5s0mzZpY6KmkoNFkYoiSik04KHe/IGf8PX+QIMzMIdh8M3ABzkbGRumlH3AP2O6QRrT1Oc3Qxs6sNCStCBzeIehDVQIY7xbrrV7d1bUxAkRqGz85RC3m6KUCIILqUpnzb1QlSDh3Xl3DU2DiMfZ9j5GZX3tSavGvCKqirRRGobF/nmqjF0F9gOdHRIIAHicY2BkYGAA4r0bPH/H89t8ZeBmYgCBq0vuRsLo/0DA+IGJGcjlYABLAwCOBg66AHicY2BkYGBiAAHGd//////H+IGBkQEVMAEAg2cF4gAAAAAAAAHu//8AAAAAAFIAAHicY2BkYGBgYjBhANEgFgMDFxAyMPwH8xkADasBTgAAeJxlkD1uwkAUhMdgSAJSghQpKbNVCiKZn5IDQE9Bl8KYtTGyvdZ6QaLLCXKEHCGniHKCHChj82hgLT9/M2/e7soABviFh3p5uG1qvVq4oTpxm/Qg7JOfhTvo40W4S38o3MMbpsJ9POKdO3j+HZ0BSuEW7vEh3Kb/KeyTv4Q7eMK3cJf+j3APK/wJ9/HqDdPIFLEp3FIn+yy0Z3n+rrStUlOoSTA+WwtdaBs6vVHro6oOydS5WMXW5GrOrs4yo0prdjpywda5cjYaxeIHkcmRIoJBgbipDktoJNgjQwh71b3UK6YtKvq1VpggwPgqtWCqaJIhlcaGyTWOrBUOPG1K1zGt+FrO5KS5zGreJCMr/u+6t6MT0Q+wbaZKzDDiE1/kg+YO+T89EV6oAAAAeJxjYGKAAFYG7ICJkYmRmYEp04CBAQADvgCsAA==") format('woff');font-weight: normal;font-style: normal;}
72

83
a:before {
94
text-rendering: auto;

‎example/default/webpack.config.js‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,26 @@ module.exports = {
1010
filename: 'bundle.js'
1111
},
1212
module: {
13-
loaders: [
13+
rules: [
1414
{ test: /\.css$/,
15-
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
15+
use: ExtractTextPlugin.extract({
16+
fallback: 'style-loader',
17+
use: [
18+
'css-loader',
19+
{
20+
loader: 'postcss-loader',
21+
options: {
22+
plugins: (loader) => [
23+
new IconfontWebpackPlugin(loader)
24+
]
25+
}
26+
}
27+
]
28+
})
1629
}
1730
]
1831
},
1932
plugins: [
20-
new IconfontWebpackPlugin(),
2133
new ExtractTextPlugin('styles.css')
2234
]
2335
};

‎index.js‎

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,33 @@
11
'use strict';
2-
var _ = require('lodash');
2+
let _ = require('lodash');
3+
let assert = require('assert');
34

4-
function IconfontWebpackPlugin (options) {
5+
module.exports = function IconfontWebpackPlugin (userOptions) {
56
// Default options
6-
this.options = _.extend({
7-
fontNamePrefix: ''
8-
}, options);
9-
}
7+
const options = _.extend({
108

11-
IconfontWebpackPlugin.prototype.apply = function (compiler) {
12-
compiler.plugin('compilation', (compilation) =>
13-
compilation.plugin('postcss-loader-before-processing',
14-
(plugins) => (plugins || []).concat(
15-
require('./lib/postcss-plugin')({
16-
compiler: compiler,
17-
pluginOptions: this.options
18-
})
19-
)
20-
)
9+
// allows to prefix the font name to prevent collisions
10+
fontNamePrefix: '',
11+
12+
// resolve function to translate webpack urls into absolute filepaths
13+
// e.g. url('demo.svg') -> '/Users/me/project-x/demo.svg'
14+
// usually you should pass on the postcss loader
15+
// https://webpack.js.org/api/loaders/#this-resolve
16+
resolve: undefined
17+
18+
}, userOptions);
19+
20+
// Verify resolve function
21+
assert(typeof options.resolve === 'function',
22+
'Please pass a resolve function to the IconFontWebpackPlugin.\n' +
23+
'For example: \n' +
24+
'{\n' +
25+
' loader: \'postcss-loader\',\n' +
26+
' options: {\n' +
27+
' plugins: (loader) => [\n' +
28+
' require(\'iconfont-webpack-plugin\')({ resolve: loader.resolve }), \n\n'
2129
);
22-
};
2330

24-
module.exports = IconfontWebpackPlugin;
31+
// Call postcss plugin
32+
return require('./lib/postcss-plugin')(options);
33+
};

‎lib/icons-to-woff.js‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
var assert = require('assert');
2-
var path = require('path');
3-
var svgicons2svgfont = require('svgicons2svgfont');
4-
var svg2ttf = require('svg2ttf');
5-
var ttf2woff = require('ttf2woff');
6-
var Readable = require('stream').Readable;
1+
'use strict';
2+
const assert = require('assert');
3+
const path = require('path');
4+
const svgicons2svgfont = require('svgicons2svgfont');
5+
const svg2ttf = require('svg2ttf');
6+
const ttf2woff = require('ttf2woff');
7+
const Readable = require('stream').Readable;
78

89
/**
910
* @param {InputFileSystem} fs An input file system
@@ -15,16 +16,16 @@ module.exports = function createIconFont (fs, icons, options) {
1516
assert(typeof options === 'object', 'Options are mandatory.');
1617
icons = icons.map((iconPath) => path.resolve('.', iconPath));
1718
return new Promise((resolve, reject) => {
18-
var fontStream = svgicons2svgfont({
19+
const fontStream = svgicons2svgfont({
1920
name: options.name,
2021
normalize: true,
2122
log: function () {},
2223
error: function (err) {
2324
reject(err);
2425
}
2526
});
26-
var fontIconHeight;
27-
var svgFont = '';
27+
let fontIconHeight;
28+
let svgFont = '';
2829
fontStream
2930
.on('finish', function () {
3031
resolve(svgFont);
@@ -36,7 +37,7 @@ module.exports = function createIconFont (fs, icons, options) {
3637
reject(err);
3738
});
3839
icons.forEach((filename, i) => {
39-
var glyph = new Readable();
40+
const glyph = new Readable();
4041
glyph._read = function noop () {};
4142
glyph.metadata = {
4243
unicode: [String.fromCodePoint('\ue000'.charCodeAt(0) + i)],
@@ -48,10 +49,10 @@ module.exports = function createIconFont (fs, icons, options) {
4849
return reject(err);
4950
}
5051
result = result.toString();
51-
var iconHeight = getSvgHeight(result, filename);
52+
const iconHeight = getSvgHeight(result, filename);
5253
if (fontIconHeight && fontIconHeight !== iconHeight) {
53-
return reject(`SVG font generation failed as not all icons have the same height. ` +
54-
`Found: "${fontIconHeight}" and "${iconHeight}".`);
54+
return reject(new Error(`SVG font generation failed as not all icons have the same height. ` +
55+
`Found: "${fontIconHeight}" and "${iconHeight}".`));
5556
}
5657
fontIconHeight = iconHeight;
5758
// prevent svgs with fill="none" from beeing translated into an empty symbol
@@ -64,7 +65,7 @@ module.exports = function createIconFont (fs, icons, options) {
6465
})
6566
.then((svgFont) => svg2ttf(svgFont, {}).buffer)
6667
.then((ttfFont) => ttf2woff(ttfFont).buffer)
67-
.then((woffFont) => new Buffer(woffFont).toString('base64'));
68+
.then((woffFont) => Buffer.from(woffFont).toString('base64'));
6869
};
6970

7071
/**

0 commit comments

Comments
 (0)