Introduction

Subresources like images and fonts referenced by a CSS StyleSheet are a common example of a dependency relationship where both the dependency and the requestor are non-JavaScript resources. It's important to be able to process assets used by stylesheets in order to hash or rebase their URLs, and apply optimizations like inlining. Subresources capable of being represented as dependencies can also be found in HTML, SVG, JSON and other formats.

The Test

This test checks to see if CSS subresources like images and fonts can be processed as part of the build. In order to pass the test, the tool should be able to discover resources and update their usage locations to reflect any transformations, including URL hashing which is enabled in each tool.

index.js

import cssURL from './styles.css';
document.head.insertAdjacentHTML(
  'afterend',
  `<link rel="stylesheet" href="${cssURL}">`,
);

style.css

@font-face {
  src: url('./font.ttf');
  font-family: 'testfont';
}
body {
  background: url('./image.png');
}

font.ttf

<binary data>

image.png

<binary data>

In addition to the bundled JavaScript, the build result should include each of the three non-JavaScript resources with hashed filenames. The generated CSS file should reference its font and image subresources by their hashed URLs.

Conclusion

browserify

Using gulp-rev-all, all assets passed through Gulp are transformed to replace any source file locations with their corresponding hashed final URLs. Assets must be passed through Gulp directly, rather than stylesheet subresources being automatically discovered.

parcel

Parcel processes stylesheets referenced from HTML files or imported from JavaScript. CSS is parsed and any subresources are passed through any transformations registered for each file type. The resulting assets are emitted with hashed URLs referenced by the generated stylesheet.

rollup

Plugin authors can use Rollup's emitFile method to add assets into the graph.

Although there are Rollup plugins like rollup-plugin-postcss to handle CSS, their support for outputting CSS files, and crawling dependencies is spotty. A custom wrapper around PostCSS is used in this test.

webpack

Webpack's css-loader parses CSS and generates a JavaScript module that exports the CSS stylesheet as a String. Any subresources are converted into dependency imports, which means CSS subresources follow the semantics of JavaScript dependencies.

tooling.report

Basic

Introduction

The Test

Conclusion