add support for asset-url, closes #3

This allows users to look up URLs for assets in the manifest

Author: moonglum

lib/asset-url.js

@@ -0,0 +1,26 @@
+let postcss = require("postcss");
+let helpers = require("postcss-message-helpers");
+let ASSET_URL_PATTERN = /asset-url\(['"]?(.*?)['"]?\)/;
+
+module.exports = postcss.plugin("faucet-pipeline-css", ({ manifest }) => {
+	return declarationWalker(node => replaceAssetURL(node, manifest));
+});
+
+function replaceAssetURL(node, manifest) {
+	if(!node.value) {
+		return;
+	}
+
+	if(ASSET_URL_PATTERN.test(node.value)) {
+		node.value = node.value.replace(ASSET_URL_PATTERN,
+				(match, url) => `url("${manifest.get(url)}")`);
+	}
+}
+
+function declarationWalker(fn) {
+	return style => {
+		style.walkDecls(node => {
+			helpers.try(() => fn(node), node.source);
+		});
+	};
+}

lib/make-postcss.js

@@ -1,5 +1,6 @@
 let postcss = require("postcss");
 let atImport = require("postcss-import");
+let assetURL = require("./asset-url");
 let { promisify } = require("faucet-pipeline-core/lib/util");
 let readFile = promisify(require("fs").readFile);
 
@@ -9,7 +10,8 @@ module.exports = function(input, target, assetManager, sourcemaps, browsers, com
 	// console.error(`compiling CSS ${repr(filepath)} for ${browsers.join(", ")}`);
 
 	let plugins = [
-		atImport()
+		atImport(),
+		assetURL({ manifest: assetManager.manifest })
 	];
 
 	if(compact) {

package.json

@@ -23,11 +23,13 @@
 		"postcss": "~7.0.13",
 		"postcss-discard-comments": "~4.0.1",
 		"postcss-import": "~12.0.1",
+		"postcss-message-helpers": "~2.0.0",
 		"postcss-normalize-whitespace": "~4.0.1"
 	},
 	"devDependencies": {
 		"eslint-config-fnd": "^1.6.0",
 		"eslint-plugin-import": "^2.13.0",
+		"faucet-pipeline-static": "^1.0.0",
 		"json-diff": "^0.5.2",
 		"npm-run-all": "^4.1.5",
 		"release-util-fnd": "^1.1.1"

test/run

@@ -34,4 +34,9 @@ begin "$root/test_sourcemap"
 	assert_identical_sourcemap "./dist/bundle.css" "./expected.css" "./expected.css.map"
 end
 
+begin "$root/test_static_integration"
+	faucet
+	assert_identical "./dist/bundle.css" "./expected.css"
+end
+
 echo; echo "SUCCESS: all tests passed"

test/test_static_integration/expected.css

@@ -0,0 +1,4 @@
+.bla {
+	background: url("/assets/dist/spacer.gif");
+	color: green;
+}

test/test_static_integration/expected.json

@@ -0,0 +1 @@
+{"dist/spacer.gif":"/assets/dist/spacer-d89746888da2d9510b64a9f031eaecd5.gif","dist/bundle.css":"/assets/dist/bundle-3166b72ba211e69a0aab5bf612ded7d3.css"}

test/test_static_integration/faucet.config.js

@@ -0,0 +1,23 @@
+"use strict";
+let path = require("path");
+
+module.exports = {
+	css: [{
+		source: "./src/index.css",
+		target: "./dist/bundle.css"
+	}],
+	static: [{
+		source: "./src/spacer.gif",
+		target: "./dist/spacer.gif"
+	}],
+	manifest: {
+		target: "./dist/manifest.json",
+		value: f => `/assets/${f}`
+	},
+	plugins: {
+		css: {
+			plugin: path.resolve("../.."),
+			bucket: "styles"
+		}
+	}
+};

test/test_static_integration/src/index.css

@@ -0,0 +1,4 @@
+.bla {
+	background: asset-url("dist/spacer.gif");
+	color: green;
+}