Skip to content

Commit 5e1e7fa

Browse files
jantimonjantimon
committed
feat(loader): Add support for css-modules
1 parent 65196ae commit 5e1e7fa

File tree

13 files changed

+228
-20
lines changed

13 files changed

+228
-20
lines changed

‎README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,12 @@ const IconfontWebpackPlugin = require('iconfont-webpack-plugin');
4646

4747
## Advanced Configuration
4848

49+
|Name|Type|Default|Description|
50+
|:--:|:--:|:-----:|:----------|
51+
|**`resolve`**|`{Function}`||Required - A function which resolves the svg paths. See [resolve](https://webpack.js.org/api/loaders/#this-resolve)|
52+
|**`fontNamePrefix`**|`{String}`|`''`| Allows to prefix the generated font name |
53+
|**`modules`**|`{Boolean}`|`false`|Enable/Disable CSS Modules - should be equal to your css-loader settings |
54+
4955

5056
```js
5157
vconst IconfontWebpackPlugin = require('iconfont-webpack-plugin');
@@ -64,6 +70,7 @@ vconst IconfontWebpackPlugin = require('iconfont-webpack-plugin');
6470
new IconfontWebpackPlugin({
6571
resolve: loader.resolve,
6672
fontNamePrefix: 'custom-',
73+
modules: false,
6774
})
6875
]
6976
}

‎example/default/dist/styles.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
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;}
1+
@font-face { font-family: u84c0f; src:url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQwAAsAAAAABkwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPwAAAFYvsjszY21hcAAAAYQAAABKAAABcOEoo6pnbHlmAAAB0AAAAJcAAACkBXkxZWhlYWQAAAJoAAAALgAAADYMYvNJaGhlYQAAApgAAAAeAAAAJAPxAe9obXR4AAACuAAAAAgAAAAIAe7//2xvY2EAAALAAAAABgAAAAYAUgAAbWF4cAAAAsgAAAAeAAAAIAENAEBuYW1lAAAC6AAAASkAAAIWm5e+CnBvc3QAAAQUAAAAGwAAACxqPAEEeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGT4zjiBgZWBgdGSMY2BgcEdSn9lkGRoYWBgYmBlZsAKAtJcUxgcHjA8AKoBAj0mZgZGIA3CDACcLwhKAHic7ZCxDYAwEAPPykOBGIEqNbNQsb/YJPkY2CKWzpJPXz2wACU5kwDdiJErrewLm31QfRPDP7T2d+5wo5WZ3X18y796QR0aJglRAAB4nB2IQQrCMBAAs5s0mzZpY6KmkoNFkYoiSik04KHe/IGf8PX+QIMzMIdh8M3ABzkbGRumlH3AP2O6QRrT1Oc3Qxs6sNCStCBzeIehDVQIY7xbrrV7d1bUxAkRqGz85RC3m6KUCIILqUpnzb1QlSDh3Xl3DU2DiMfZ9j5GZX3tSavGvCKqirRRGobF/nmqjF0F9gOdHRIIAHicY2BkYGAA4r2zok7H89t8ZeBmYgCBq6siVWH0fyBg/MDEDORyMIClAWQYDSEAAHicY2BkYGBiAAHGd//////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;}
22

33
a:before {
44
text-rendering: auto;

‎example/module/account.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎example/module/dist/bundle.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/******/ (function(modules) { // webpackBootstrap
2+
/******/ // The module cache
3+
/******/ var installedModules = {};
4+
/******/
5+
/******/ // The require function
6+
/******/ function __webpack_require__(moduleId) {
7+
/******/
8+
/******/ // Check if module is in cache
9+
/******/ if(installedModules[moduleId]) {
10+
/******/ return installedModules[moduleId].exports;
11+
/******/ }
12+
/******/ // Create a new module (and put it into the cache)
13+
/******/ var module = installedModules[moduleId] = {
14+
/******/ i: moduleId,
15+
/******/ l: false,
16+
/******/ exports: {}
17+
/******/ };
18+
/******/
19+
/******/ // Execute the module function
20+
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21+
/******/
22+
/******/ // Flag the module as loaded
23+
/******/ module.l = true;
24+
/******/
25+
/******/ // Return the exports of the module
26+
/******/ return module.exports;
27+
/******/ }
28+
/******/
29+
/******/
30+
/******/ // expose the modules object (__webpack_modules__)
31+
/******/ __webpack_require__.m = modules;
32+
/******/
33+
/******/ // expose the module cache
34+
/******/ __webpack_require__.c = installedModules;
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+
/******/
59+
/******/ // __webpack_public_path__
60+
/******/ __webpack_require__.p = "";
61+
/******/
62+
/******/ // Load entry module and return exports
63+
/******/ return __webpack_require__(__webpack_require__.s = 0);
64+
/******/ })
65+
/************************************************************************/
66+
/******/ ([
67+
/* 0 */
68+
/***/ (function(module, exports, __webpack_require__) {
69+
70+
__webpack_require__(1);
71+
72+
73+
/***/ }),
74+
/* 1 */
75+
/***/ (function(module, exports) {
76+
77+
// removed by extract-text-webpack-plugin
78+
79+
/***/ })
80+
/******/ ]);

‎example/module/dist/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<link rel="stylesheet" type="text/css" href="./styles.css">
2+
<script src="bundle.js"></script>
3+
<a href="#">click me</a>

‎example/module/dist/styles.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@font-face { font-family: Jb5067; src:url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQwAAsAAAAABkwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPwAAAFYvsjszY21hcAAAAYQAAABKAAABcOEoo6pnbHlmAAAB0AAAAJcAAACkBXkxZWhlYWQAAAJoAAAALgAAADYMYvM5aGhlYQAAApgAAAAeAAAAJAPxAe9obXR4AAACuAAAAAgAAAAIAe7//2xvY2EAAALAAAAABgAAAAYAUgAAbWF4cAAAAsgAAAAeAAAAIAENAEBuYW1lAAAC6AAAASkAAAIWm5e+CnBvc3QAAAQUAAAAGwAAACxqPAEEeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGT4zjiBgZWBgdGSMY2BgcEdSn9lkGRoYWBgYmBlZsAKAtJcUxgcHjA8AKoBAj0mZgZGIA3CDACcLwhKAHic7ZCxDYAwEAPPykOBGIEqNbNQsb/YJPkY2CKWzpJPXz2wACU5kwDdiJErrewLm31QfRPDP7T2d+5wo5WZ3X18y796QR0aJglRAAB4nB2IQQrCMBAAs5s0mzZpY6KmkoNFkYoiSik04KHe/IGf8PX+QIMzMIdh8M3ABzkbGRumlH3AP2O6QRrT1Oc3Qxs6sNCStCBzeIehDVQIY7xbrrV7d1bUxAkRqGz85RC3m6KUCIILqUpnzb1QlSDh3Xl3DU2DiMfZ9j5GZX3tSavGvCKqirRRGobF/nmqjF0F9gOdHRIIAHicY2BkYGAA4r2zol7H89t8ZeBmYgCBq6siZWH0fyBg/MDEDORyMIClAWgIDTEAAHicY2BkYGBiAAHGd//////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;}
2+
3+
a:before {
4+
text-rendering: auto;
5+
-webkit-font-smoothing: auto;
6+
-moz-osx-font-smoothing: auto;
7+
font-family: Jb5067;
8+
font-weight: normal;
9+
content: '\E000';
10+
transition: 0.5s color;
11+
}
12+
13+
a:hover:before {
14+
color: red;
15+
}
16+
17+
a:after {
18+
text-rendering: auto;
19+
-webkit-font-smoothing: auto;
20+
-moz-osx-font-smoothing: auto;
21+
font: normal normal normal 50%/1 Jb5067;
22+
content: '\E000';
23+
}

‎example/module/example.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
require('./main.css');

‎example/module/main.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
a:before {
2+
font-icon: url('./account.svg');
3+
transition: 0.5s color;
4+
}
5+
6+
a:hover:before {
7+
color: red;
8+
}
9+
10+
a:after {
11+
font-icon: 50% url('./account.svg');
12+
}

‎example/module/webpack.config.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
var path = require('path');
2+
var IconfontWebpackPlugin = require('../../');
3+
var ExtractTextPlugin = require('extract-text-webpack-plugin');
4+
5+
module.exports = {
6+
entry: './example.js',
7+
output: {
8+
path: path.join(__dirname, 'dist/'),
9+
publicPath: '',
10+
filename: 'bundle.js'
11+
},
12+
module: {
13+
rules: [
14+
{ test: /\.css$/,
15+
use: ExtractTextPlugin.extract({
16+
fallback: 'style-loader',
17+
use: [
18+
{
19+
loader: 'css-loader',
20+
options: {
21+
modules: true
22+
}
23+
},
24+
{
25+
loader: 'postcss-loader',
26+
options: {
27+
plugins: (loader) => [
28+
new IconfontWebpackPlugin({
29+
resolve: loader.resolve,
30+
modules: true
31+
})
32+
]
33+
}
34+
}
35+
]
36+
})
37+
}
38+
]
39+
},
40+
plugins: [
41+
new ExtractTextPlugin('styles.css')
42+
]
43+
};
44+
45+
// The following lines are only for mocking a real webpack environment
46+
// please don't use them for your configuration
47+
module.exports.context = __dirname;
48+
module.exports.bail = true;

‎lib/loader.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ module.exports = function () {
1616
this.cacheable();
1717
}
1818
const callback = this.async();
19+
// The query is built in postcss-plugin.js in addFontDeclaration
20+
// it contains the following values:
21+
// { svgs: resolvedRelativeSvgs, name: fontName };
1922
const query = loaderUtils.parseQuery(this.query);
2023
// Add svgs to webpack file watching:
2124
query.svgs.forEach((svg) => this.addDependency(path.resolve(svg)));

0 commit comments

Comments
 (0)