Using null-loader to remove/skip fonts specified using url() will corrupt the generated .css file

[cyparu]

In my project I'm using Font-Awessome (with scss-loader + file-loader) .... and everything goes fine, and the fonts are put into the proper directory. But I'm looking to "remove some fat" and keep just the .*woff2 files from all of font formats.

I've tried to use "null-loader" to "skip" all other fonts {test: /.(woff|eot|ttf|otf|svg)$/, use: "null-loader"} ... but while the font files are removed, this will corrupt the url() declaration into the generated css file resulting in url([object Object ]) kind of source ...

• Operating System: Windows
• Node Version: 9.11.1
• NPM Version: 5.8.0
• webpack Version: 4.6.0
• null-loader Version: 0.1.1

This issue is for a:

• bug
• feature request
• modification request

Code

webpack.config.js

  // try to keep just woff2 font and remove all the others
  {  test: /\.woff2$/,  use: "file-loader?name=fonts/[name].[ext]" },
  {  test: /\.(woff|eot|ttf|otf|svg)$/,  use: "null-loader" }

Expected Behavior

1. The fonts folder should include just fontawesome-webfont.woff2
2. The generated .css should include just the src: url(fonts/fontawesome-webfont.woff2) format("woff2") declaration:

@font-face {
  font-family: 'FontAwesome';
  src: url(fonts/fontawesome-webfont.woff2) format("woff2")
  font-weight: normal;
  font-style: normal;
}

Actual Behavior

1. This is 🆗 , so just the woff2 font file will be copied
2. The generated .css will include for ALL non skipped formats an odd url name ( url([object Object]) ) instead of removing the declaration

@font-face {
  font-family: 'FontAwesome';
  src: url([object Object]);
  src: url([object Object]) format("embedded-opentype"), url(fonts/fontawesome-webfont.woff2) format("woff2"), url([object Object]) format("woff"), url([object Object]) format("truetype"), url([object Object]) format("svg");
  font-weight: normal;
  font-style: normal;
}

How Do We Reproduce?

The project reproducing this issue is located here: http://www.github.com/cyparu/null_loader_css_url_bug

Steps to execute:

yarn
yarn build

check build/index.css for wrongly generated CSS content

[alexander-akait]

@cyparu why you use null-loader for this? You should use postcss-loader with plugin(s) for remove something for css.

[cyparu]

@evilebottnawi 10x for the suggestion ... I thought that null-loader will be good for such feature ...Any idea on how can I achieve the same using postcss-loader (some ref, example, link) ?
10x in advance for any support.

[alexander-akait]

@cyparu
plugin for postcss - https://github.com/ben-eb/postcss-discard-font-face
loader - https://github.com/postcss/postcss-loader

[cyparu]

10x a lot for the fast reply ... It seems to perfectly match my expectation ... I'll test it now

[cyparu]

Thanks to @evilebottnawi I've implemented the solution using postcss-loader & postcss-discard-font-face here: webpack-fa-woff2-playground

[alexander-akait]

@cyparu great! Can we close issue?

[cyparu]

Since null-plugin should not be abused to solve the issues that postcss easily solved ... I'll close the issue. 10x for your great support 👍