faucet-pipeline-css 0.3.0 → 0.5.0

package/.woodpecker/test.yml

@@ -0,0 +1,15 @@
+when:
+- event: push
+
+matrix:
+    NODE_VERSION:
+    - 22-trixie
+    - 24-trixie
+    - latest
+
+steps:
+    test:
+        image: docker.io/library/node:${NODE_VERSION}
+        commands:
+        - node --version
+        - npm install-test

package/CHANGELOG.md

@@ -1,6 +1,38 @@
 faucet-pipeline-css version history
 ===================================
 
+v0.5.0
+------
+
+_2026-04-07_
+
+notable changes for end users:
+
+* **Breaking Change:** added fingerprint integration to `url`
+  and removed `asset-url`.
+* added support for transforming CSS nesting enabled by adding
+  `transform: ["nesting"]` to the configuration.
+* dropped support for Node 21 and below
+* update dependencies
+
+notable changes for developers:
+* moved from GitHub to Codeberg
+* switched from CJS  to ESM
+
+
+v0.4.0
+------
+
+_2025-10-26_
+
+notable changes for end users:
+
+* dropped support for Node 19 and below
+* update dependencies
+
+no significant changes for developers
+
+
 v0.3.0
 ------
 
@@ -26,7 +58,7 @@ notable changes for end users:
 
 * updated dependencies
 
-notable changes for end developers:
+notable changes for developers:
 
 * updated to new PostCSS API
 * switched to Github Actions and Dependabot

package/lib/index.js

@@ -1,23 +1,20 @@
-let { abort } = require("faucet-pipeline-core/lib/util");
-let path = require("path");
-let makePostCSS = require("./make-postcss");
+import { abort } from "faucet-pipeline-core/lib/util/index.js";
+import path from "node:path";
+import { makeESBuild } from "./make-esbuild.js";
 
-module.exports = {
-	key: "css",
-	bucket: "styles",
-	plugin: faucetCSS
-};
+export let key = "css";
+export let bucket = "styles";
 
-function faucetCSS(config, assetManager, { browsers, compact, sourcemaps } = {}) {
+export function plugin(config, assetManager, { compact, sourcemaps } = {}) {
 	let bundlers = config.map(bundleConfig => makeBundler(bundleConfig,
-			assetManager, { browsers, compact, sourcemaps }));
+			assetManager, { compact, sourcemaps }));
 
 	return filepaths => Promise.all(bundlers.
 		map(bundler => bundler(filepaths)));
 }
 
-function makeBundler(config, assetManager, { browsers, compact, sourcemaps } = {}) {
-	let { browserslist, fingerprint } = config;
+function makeBundler(config, assetManager, { compact, sourcemaps } = {}) {
+	let { fingerprint } = config;
 
 	if(!config.source || !config.target) {
 		abort("ERROR: CSS configuration requires both target and source");
@@ -25,22 +22,15 @@ function makeBundler(config, assetManager, { browsers, compact, sourcemaps } = {
 
 	let source = assetManager.resolvePath(config.source);
 	let target = assetManager.resolvePath(config.target, { enforceRelative: true });
+	let { transform } = config;
 
-	if(browserslist === false) {
-		browsers = null;
-	} else if(browserslist) {
-		browsers = browsers[browserslist];
-	} else {
-		browsers = browsers.defaults;
-	}
-
-	let postCSS = makePostCSS(
+	let esbuild = makeESBuild(
 			source,
 			target,
 			assetManager,
 			sourcemaps,
-			browsers,
-			compact
+			compact,
+			transform
 	);
 
 	let previouslyIncludedFiles;
@@ -49,7 +39,7 @@ function makeBundler(config, assetManager, { browsers, compact, sourcemaps } = {
 		// If this is the first run or the changed file is one of the
 		// previously included ones, run the compiler
 		if(previouslyIncluded(filepaths, previouslyIncludedFiles)) {
-			return postCSS().
+			return esbuild().
 				then(result => {
 					previouslyIncludedFiles = result.stats.includedFiles.
 						map(filepath => path.normalize(filepath));

package/lib/make-esbuild.js

@@ -0,0 +1,43 @@
+import { build } from "esbuild";
+import { Resolver } from "./resolver.js";
+import { supportedFeaturesFor } from "./transforms.js";
+
+export function makeESBuild(input, target, assetManager, sourcemaps, compact, transform) {
+	let resolver = new Resolver(assetManager.manifest);
+
+	return async function() {
+		let { outputFiles, errors, warnings } = await build({
+			entryPoints: [input],
+			bundle: true,
+			write: false,
+			minifyWhitespace: compact,
+			sourcemap: sourcemaps ? "inline" : false,
+			supported: supportedFeaturesFor(transform),
+			plugins: [{
+				name: "faucet-resolver",
+				setup(build) {
+					build.onResolve({ filter: /.*/ }, resolver.resolve);
+				}
+			}],
+			outfile: target
+		});
+
+		// we treat warnings as errors, too
+		if(errors.length > 0 || warnings.length > 0) {
+			throw buildError([...errors, ...warnings]);
+		}
+
+		return {
+			css: outputFiles[0].contents,
+			stats: {
+				includedFiles: resolver.includedFiles
+			}
+		};
+	};
+}
+
+// builds an error for the first error
+function buildError(messages) {
+	let { location, text } = messages[0];
+	return new Error(`${location.file}:${location.line}:${location.column}: ${text}`);
+}

package/lib/resolver.js

@@ -0,0 +1,29 @@
+import { join, isAbsolute } from "path";
+
+export class Resolver {
+	constructor(manifest) {
+		this.manifest = manifest;
+		this._includedFiles = new Set();
+		this.resolve = this.resolve.bind(this);
+	}
+
+	resolve({ path, resolveDir, kind }) {
+		if(kind === "url-token") {
+			return {
+				external: true,
+				path: this.manifest.get(path)
+			};
+		}
+
+		if(!isAbsolute(path)) {
+			path = join(resolveDir, path);
+		}
+		this._includedFiles.add(path);
+
+		return { path };
+	}
+
+	get includedFiles() {
+		return Array.from(this._includedFiles);
+	}
+}

package/lib/transforms.js

@@ -0,0 +1,15 @@
+let SUPPORTED_TRANSFORMS = ["nesting"];
+
+// all transforms need to be converted into not supported features
+export function supportedFeaturesFor(transforms = []) {
+	let supported = {};
+
+	for(let transform of transforms) {
+		if(!SUPPORTED_TRANSFORMS.includes(transform)) {
+			throw new Error(`Unknown transform: '${transform}`);
+		}
+		supported[transform] = false;
+	}
+
+	return supported;
+}

package/package.json

@@ -1,8 +1,9 @@
 {
 	"name": "faucet-pipeline-css",
-	"version": "0.3.0",
+	"version": "0.5.0",
 	"description": "CSS for faucet-pipeline",
 	"main": "lib/index.js",
+	"type": "module",
 	"scripts": {
 		"test": "npm-run-all --parallel lint test:cli",
 		"test:cli": "./test/run",
@@ -10,28 +11,24 @@
 	},
 	"repository": {
 		"type": "git",
-		"url": "git+https://github.com/faucet-pipeline/faucet-pipeline-css.git"
+		"url": "git+https://codeberg.org/faucet-pipeline/faucet-pipeline-css.git"
 	},
 	"author": "Lucas Dohmen <lucas@dohmen.io> (https://lucas.dohmen.io/)",
 	"license": "Apache-2.0",
 	"bugs": {
-		"url": "https://github.com/faucet-pipeline/faucet-pipeline-css/issues"
+		"url": "https://codeberg.org/faucet-pipeline/faucet-pipeline-css/issues"
 	},
 	"homepage": "https://www.faucet-pipeline.org",
 	"engines": {
-		"node": ">= 14"
+		"node": ">= 22"
 	},
 	"dependencies": {
-		"faucet-pipeline-core": "^2.0.0",
-		"postcss": "~8.4.12",
-		"postcss-discard-comments": "~5.1.0",
-		"postcss-import": "~15.1.0",
-		"postcss-message-helpers": "~2.0.0",
-		"postcss-normalize-whitespace": "~5.1.0"
+		"esbuild": "^0.28.0",
+		"faucet-pipeline-core": "^2.1.0"
 	},
 	"devDependencies": {
 		"eslint-config-fnd": "^1.13.0",
-		"faucet-pipeline-static": "^2.1.0",
+		"faucet-pipeline-assets": "^0.2.0",
 		"json-diff": "^1.0.0",
 		"npm-run-all": "^4.1.5",
 		"release-util-fnd": "^3.0.0"

package/test/run

@@ -17,6 +17,11 @@ begin "$root/test_compact"
 	assert_identical "./dist/bundle.css" "./expected.css"
 end
 
+begin "$root/test_transform"
+	faucet
+	assert_identical "./dist/bundle.css" "./expected.css"
+end
+
 begin "$root/test_error"
 	faucet || echo "Crashed successfully"
 	assert_identical "./dist/bundle.css" "./expected.css"
@@ -24,7 +29,7 @@ end
 
 begin "$root/test_fingerprinting"
 	faucet --fingerprint
-	assert_identical "./dist/fingerprint/bundle-12c46b3f47e2c83fc4f31fb2d6564c51.css" "./expected.css"
+	assert_identical "./dist/fingerprint/bundle-c66c84866d9b31a4d434a2d15915d9f9.css" "./expected.css"
 	assert_identical "./dist/no-fingerprint/bundle.css" "./expected.css"
 	assert_json "./dist/manifest.json" "./expected.json"
 end
@@ -34,7 +39,7 @@ begin "$root/test_sourcemap"
 	assert_identical_sourcemap "./dist/bundle.css" "./expected.css" "./expected.css.map"
 end
 
-begin "$root/test_static_integration"
+begin "$root/test_assets_integration"
 	faucet
 	assert_identical "./dist/bundle.css" "./expected.css"
 end

package/test/test_assets_integration/expected.css

@@ -0,0 +1,5 @@
+/* src/index.css */
+.bla {
+  background: url(/assets/dist/spacer.gif);
+  color: green;
+}

package/test/test_assets_integration/faucet.config.js

@@ -0,0 +1,18 @@
+import { resolve } from "node:path";
+
+export const css = [{
+	source: "./src/index.css",
+	target: "./dist/bundle.css"
+}];
+
+export const assets = [{
+	source: "./src/spacer.gif",
+	target: "./dist/spacer.gif"
+}];
+
+export const manifest = {
+	target: "./dist/manifest.json",
+	value: f => `/assets/${f}`
+};
+
+export const plugins = [resolve(import.meta.dirname, "../..")];

package/test/test_assets_integration/src/index.css

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

package/test/test_basic/expected.css

@@ -1,7 +1,12 @@
+/* src/lib.css */
 .bar {
-	color: red;
+  color: red;
 }
 
+/* src/index.css */
 .foo {
-	color: green;
+  color: green;
+  .baz {
+    color: hotpink;
+  }
 }

package/test/test_basic/faucet.config.js

@@ -1,10 +1,8 @@
-"use strict";
-let path = require("path");
+import { resolve } from "node:path";
 
-module.exports = {
-	css: [{
-		source: "./src/index.css",
-		target: "./dist/bundle.css"
-	}],
-	plugins: [path.resolve("../..")]
-};
+export const css = [{
+	source: "./src/index.css",
+	target: "./dist/bundle.css"
+}];
+
+export const plugins = [resolve(import.meta.dirname, "../..")];

package/test/test_basic/src/index.css

@@ -2,4 +2,8 @@
 
 .foo {
 	color: green;
+
+	.baz {
+		color: hotpink;
+	}
 }

package/test/test_compact/expected.css

@@ -1 +1 @@
-.bar{color:red}.foo{color:green}
+.bar{color:red}.foo{color:green}

package/test/test_compact/faucet.config.js

@@ -1,10 +1,8 @@
-"use strict";
-let path = require("path");
+import { resolve } from "node:path";
 
-module.exports = {
-	css: [{
-		source: "./src/index.css",
-		target: "./dist/bundle.css"
-	}],
-	plugins: [path.resolve("../..")]
-};
+export const css = [{
+	source: "./src/index.css",
+	target: "./dist/bundle.css"
+}];
+
+export const plugins = [resolve(import.meta.dirname, "../..")];

package/test/test_error/expected.css

@@ -1,5 +1,5 @@
 body:before {
-	content: "\26a0  CSS Error: src/index.css:2:2: Unknown word";
+	content: "\26a0  CSS Error: src/index.css:2:7: Expected identifier but found whitespace";
 	font-weight: bold;
 	display: block;
 	border: 5px solid red;

package/test/test_error/faucet.config.js

@@ -1,10 +1,8 @@
-"use strict";
-let path = require("path");
+import { resolve } from "node:path";
 
-module.exports = {
-	css: [{
-		source: "./src/index.css",
-		target: "./dist/bundle.css"
-	}],
-	plugins: [path.resolve("../..")]
-};
+export const css = [{
+	source: "./src/index.css",
+	target: "./dist/bundle.css"
+}];
+
+export const plugins = [resolve(import.meta.dirname, "../..")];

package/test/test_fingerprinting/expected.css

@@ -1,7 +1,9 @@
+/* src/lib.css */
 .bar {
-	color: red;
+  color: red;
 }
 
+/* src/index.css */
 .foo {
-	color: green;
+  color: green;
 }

package/test/test_fingerprinting/expected.json

@@ -1 +1 @@
-{"dist/fingerprint/bundle.css":"/assets/dist/fingerprint/bundle-12c46b3f47e2c83fc4f31fb2d6564c51.css","dist/no-fingerprint/bundle.css":"/assets/dist/no-fingerprint/bundle.css"}
+{"dist/fingerprint/bundle.css":"/assets/dist/fingerprint/bundle-c66c84866d9b31a4d434a2d15915d9f9.css","dist/no-fingerprint/bundle.css":"/assets/dist/no-fingerprint/bundle.css"}

package/test/test_fingerprinting/faucet.config.js

@@ -1,18 +1,17 @@
-"use strict";
-let path = require("path");
+import { resolve } from "node:path";
 
-module.exports = {
-	css: [{
-		source: "./src/index.css",
-		target: "./dist/fingerprint/bundle.css"
-	}, {
-		source: "./src/index.css",
-		target: "./dist/no-fingerprint/bundle.css",
-		fingerprint: false
-	}],
-	manifest: {
-		target: "./dist/manifest.json",
-		value: f => `/assets/${f}`
-	},
-	plugins: [path.resolve("../..")]
+export const css = [{
+	source: "./src/index.css",
+	target: "./dist/fingerprint/bundle.css"
+}, {
+	source: "./src/index.css",
+	target: "./dist/no-fingerprint/bundle.css",
+	fingerprint: false
+}];
+
+export const manifest = {
+	target: "./dist/manifest.json",
+	value: f => `/assets/${f}`
 };
+
+export const plugins = [resolve(import.meta.dirname, "../..")];

package/test/test_sourcemap/expected.css

@@ -1,8 +1,9 @@
+/* src/lib.css */
 .bar {
-	color: red;
+  color: red;
 }
 
+/* src/index.css */
 .foo {
-	color: green;
+  color: green;
 }
-

package/test/test_sourcemap/expected.css.map

@@ -1,7 +1,7 @@
 {
 	"version":3,
 	"names":[],
-	"mappings":"AAAA;CACC,UAAU;AACX;;ACAA;CACC,YAAY;AACb",
+	"mappings":";AAAA,CAAC;AACA,SAAO;AACR;;;ACAA,CAAC;AACA,SAAO;AACR;",
 	"sourcesContent":[
 		".bar {\n\tcolor: red;\n}\n",
 		"@import \"./lib.css\";\n\n.foo {\n\tcolor: green;\n}\n"

package/test/test_sourcemap/faucet.config.js

@@ -1,10 +1,8 @@
-"use strict";
-let path = require("path");
+import { resolve } from "node:path";
 
-module.exports = {
-	css: [{
-		source: "./src/index.css",
-		target: "./dist/bundle.css"
-	}],
-	plugins: [path.resolve("../..")]
-};
+export const css = [{
+	source: "./src/index.css",
+	target: "./dist/bundle.css"
+}];
+
+export const plugins = [resolve(import.meta.dirname, "../..")];

package/test/test_transform/expected.css

@@ -0,0 +1,12 @@
+/* src/lib.css */
+.bar {
+  color: red;
+}
+
+/* src/index.css */
+.foo {
+  color: green;
+}
+.foo .baz {
+  color: hotpink;
+}

package/test/test_transform/faucet.config.js

@@ -0,0 +1,9 @@
+import { resolve } from "node:path";
+
+export const css = [{
+	source: "./src/index.css",
+	target: "./dist/bundle.css",
+	transform: ["nesting"]
+}];
+
+export const plugins = [resolve(import.meta.dirname, "../..")];

package/test/test_transform/src/index.css

@@ -0,0 +1,9 @@
+@import "./lib.css";
+
+.foo {
+	color: green;
+
+	.baz {
+		color: hotpink;
+	}
+}

package/test/test_transform/src/lib.css

@@ -0,0 +1,3 @@
+.bar {
+	color: red;
+}

package/.github/dependabot.yml

@@ -1,13 +0,0 @@
-version: 2
-updates:
-  # Maintain dependencies for GitHub Actions
-  - package-ecosystem: "github-actions"
-    directory: "/"
-    schedule:
-      interval: "daily"
-
-  # Maintain dependencies for npm
-  - package-ecosystem: "npm"
-    directory: "/"
-    schedule:
-      interval: "daily"

package/.github/workflows/tests.yml

@@ -1,20 +0,0 @@
-name: tests
-on:
-- push
-jobs:
-    build:
-        runs-on: ubuntu-latest
-        strategy:
-            matrix:
-                node-version:
-                - 14.x
-                - 18.x
-                - 19.x
-        steps:
-        - uses: actions/checkout@v3
-        - uses: actions/setup-node@v3
-          with:
-              node-version: ${{ matrix.node-version }}
-        - run: npm install-test
-          env:
-              CI: true

package/lib/asset-url.js

@@ -1,14 +0,0 @@
-let ASSET_URL_PATTERN = /asset-url\(['"]?(.*?)['"]?\)/;
-
-module.exports = ({ manifest }) => {
-	return {
-		postcssPlugin: "postcss-asset-url",
-		Declaration(decl) {
-			if(ASSET_URL_PATTERN.test(decl.value)) {
-				decl.value = decl.value.replace(ASSET_URL_PATTERN,
-						(match, url) => `url("${manifest.get(url)}")`);
-			}
-		}
-	};
-};
-module.exports.postcss = true;

package/lib/make-postcss.js

@@ -1,56 +0,0 @@
-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);
-
-module.exports = function(input, target, assetManager, sourcemaps, browsers, compact) {
-	let plugins = [
-		atImport(),
-		assetURL({ manifest: assetManager.manifest })
-	];
-
-	if(compact) {
-		plugins.push(
-				require("postcss-discard-comments")(),
-				require("postcss-normalize-whitespace")()
-		);
-	}
-
-	let processor = postcss(plugins);
-
-	let options = {
-		from: input,
-		target
-	};
-
-	if(sourcemaps) {
-		options.map = { inline: true };
-	}
-
-	return () => {
-		return readFile(input).then(code => {
-			return processor.process(code, options);
-		}).then(result => {
-			let warnings = result.warnings();
-
-			if(warnings.length > 0) {
-				let errorMessage = warnings.
-					map(warning => warning.toString()).
-					join("\n");
-				throw new Error(errorMessage);
-			}
-
-			let includedFiles = result.messages.
-				filter(message => message.type === "dependency").
-				map(message => message.file);
-
-			return {
-				css: result.css,
-				stats: {
-					includedFiles: [input].concat(includedFiles)
-				}
-			};
-		});
-	};
-};

package/test/test_static_integration/expected.css

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

package/test/test_static_integration/faucet.config.js

@@ -1,18 +0,0 @@
-"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: [path.resolve("../..")]
-};

package/test/test_static_integration/src/index.css

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