postcss-url
Advanced tools
Package description
The postcss-url npm package is a PostCSS plugin used to process URLs in CSS. It allows developers to adjust asset URLs, inline images, or copy assets to a different location during the build process.
Rebasing URLs
This feature allows you to adjust URLs based on the output directory, ensuring that they are correct in the built CSS.
postcss([ require('postcss-url')({ url: 'rebase' }) ]) // This will rebase all URLs according to the destination directoryInlining images
This feature enables the inlining of images into your CSS, reducing the number of HTTP requests needed for loading assets.
postcss([ require('postcss-url')({ url: 'inline' }) ]) // This will inline images as base64 data URIsCopying assets
This feature allows you to copy assets from your source CSS to a specified directory, which can be useful for organizing your build output.
postcss([ require('postcss-url')({ url: 'copy', assetsPath: 'img' }) ]) // This will copy referenced assets to a specified directorycssnano is a modular minifier for CSS that includes functionalities for optimizing and transforming values, which can include URL rebasing. It differs from postcss-url in that it is more focused on overall CSS optimization rather than just URL processing.
gulp-rev is a gulp plugin for asset revisioning by appending content hash to filenames. It can rewrite asset references in CSS, which is similar to some of the functionalities of postcss-url, but it is designed to work within the gulp ecosystem.
webpack-url-loader is a loader for webpack that can inline files as data URIs or copy them to the output directory, similar to postcss-url's inlining and copying features. However, it is specifically tailored for webpack's module bundling system.
Readme
PostCSS plugin to rebase or inline on url().
$ npm install postcss-url
// dependencies
var fs = require("fs")
var postcss = require("postcss")
var url = require("postcss-url")
// css to be processed
var css = fs.readFileSync("input.css", "utf8")
// process css
var output = postcss()
.use(url({
url: "rebase" // or "inline"
}))
.process(css, {
// "rebase" mode need at least one of those options
// "inline" mode might need `from` option only
from: "src/stylesheet/index.css"
to: "dist/index.css"
})
.css
Checkout tests for examples.
url (default: "rebase")url: "rebase"Allow you to fix url() according to postcss to and/or from options (rebase to to first if available, otherwise from or process.cwd()).
url: "inline"Allow you to inline assets using base64 syntax. Can use postcss from option to find ressources.
url: {Function}Custom transform function. Takes one argument (original url) and should return the transformed url.
You can use this option to adjust urls for CDN.
maxSize: "size in kbytes"Specify the maximum file size to inline
basePath: "basePath for images to inline"Specify the basePath from where to search images
Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.
$ git clone https://github.com/postcss/postcss-url.git
$ git checkout -b patch-1
$ npm install
$ npm test
FAQs
Unknown package
We found that postcss-url demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
![Massive Automated Spam Campaign Abuses GitHub to Flood npm Registry with Thousands of Garbage Tea[.]xyz Packages](https://cdn.sanity.io/images/cgdhsj6q/production/a74d1072ff2bb5cb96a404be58a649931ced2ba5-1024x1024.webp?w=400&fit=max&auto=format)
Security News
In a reprisal of their previous Tea[.]xyz spam campaign, a new wave of thousands of garbage packages are hitting npm, to artificially inflate the number of dependents for spammers' projects.
Security News
The maintainer of the node-ip project restored the GitHub repo after disputing an exaggerated CVE rating, highlighting the impact of bogus CVEs on open source projects.
Security News
pnpm 9.5 introduces a Catalogs feature, enabling shareable dependency version specifiers, reducing merge conflicts and improving support for monorepos.