CSS bundling optimization not handling transitive relative url(...) references

[thescientist13]

Type of Change

Bug

Summary

So there is an issue if you @import a CSS file and that CSS file has references to other files via url(...), the CSS bundling will not pick it up. For example, give a dependency on font-awesome

/* src/styles/main.css */
@import "../node_modules/font-awesome/css/font-awesome.css";

It has references to its own font files

/* /node_modules/font-awesome/css/font-awesome.css */
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

However, in the browser we will get a 404 for these assets and of course none of the icons will show

You can see the repo here - https://github.com/AnalogStudiosRI/www.analogstudios.net

Details

Admittedly I was aware of this short coming for some time, hence why I had made a dedicated third party plugin for resolving and managing font-awesome related assets, but after the work coming out of #1326 and #1338 this is indeed a solvable problem, and now I can see it working here - AnalogStudiosRI/www.analogstudios.net#101