CSS Asset Path Normalizer

A utility that processes CSS files and normalizes all asset paths (URLs in url() functions) to be relative to a target output directory, handling cross-platform path differences.

Capabilities

Normalizes relative asset paths

• Given a CSS file with background: url('../images/logo.png') located at src/styles/main.css, when rebasing to output directory dist/, the URL becomes url('images/logo.png') @test
• Given a CSS file with background: url('../../fonts/icon.woff') located at src/components/button/style.css, when rebasing to dist/css/, the URL becomes url('../fonts/icon.woff') @test

Preserves absolute and remote URLs

• Given a CSS file with background: url('https://cdn.example.com/bg.jpg'), the URL remains unchanged after rebasing @test
• Given a CSS file with background: url('/assets/logo.png'), the URL remains unchanged after rebasing @test

Preserves data URIs

• Given a CSS file with background: url('data:image/png;base64,iVBORw0KG...'), the data URI remains unchanged after rebasing @test

Handles cross-platform paths correctly

• Given a CSS file on Windows with backslash paths, the output uses forward slashes in URLs @test

Implementation

@generates

API

/**
 * Normalizes CSS asset paths relative to a target output directory.
 *
 * @param {string} cssFilePath - Path to the CSS file being processed
 * @param {string} cssContent - The CSS content as a string
 * @param {string} targetDir - The target output directory path
 * @returns {string} CSS content with normalized asset paths
 */
function normalizeAssetPaths(cssFilePath, cssContent, targetDir) {
  // IMPLEMENTATION HERE
}

module.exports = { normalizeAssetPaths };

Dependencies { .dependencies }

clean-css { .dependency }

Provides CSS minification and URL rebasing support.

@satisfied-by