@fec/postcss-url-mapping

@fec/postcss-url-mapping

Plugin for PostCSS to transform URLs using a mapping object.

Created by 👨‍💻 Florian Eckerstorfer in 🎡 Vienna, Europe.

Usage and Synergies

I have created this plugin in order to use hashed file names in my CSS files. I use a plugin for Eleventy that I created, @fec/eleventy-plugin-asset-pipeline, to add a hash of the file content to its name and store those mappings in a JSON file. This plugin can use these mappings and update every URL used in my CSS via PostCSS.

Installation and Configuration

First you should install the plugin using NPM:

npm install -D @fec/postcss-url-mapping

Then you can configure the plugin in your PostCSS setup:

const postCSSUrlMapping = require("@fec/postcss-url-mapping");

// read mappings, for example
const mappings = JSON.parse(readFileSync("./mappings.json"));

postcss([postCSSUrlMapping({ mappings })])
  .process(inputContent, { from: inputFile })
  .then((result) => result.css);

The mappings.json file should look like this:

{
  "/css/main.css":"/css/main.07179313.css",
  "/time/time.css":"/time/time.f3d903f2.css"
  "/time/time.js":"/time/time.f4de862d.js"
}

This would replace every occurrence of the left side inside an url() function with the right side in your inputContent.

Change log

See CHANGELOG

Code of Conduct

See CODE_OF_CONDUCT

License

See LICENSE