Postcss Url

PostCSS plugin to rebase url(), inline or copy asset.
Alternatives To Postcss Url
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Posthtml2,8698,9084312 months ago53February 25, 202213mitJavaScript
PostHTML is a tool to transform HTML/XML with JS plugins
Postcss Js6204,789173a month ago17January 05, 20222mitJavaScript
PostCSS for React Inline Styles, Free Style and other CSS-in-JS
Postcss Scss60720,9404,1574 months ago37April 24, 20222mitJavaScript
SCSS parser for PostCSS.
Postcss Inline Svg452754304a month ago25October 29, 202013mitJavaScript
PostCSS plugin to reference an SVG file and control its attributes with CSS syntax
Postcss Url32051,3535,9582 years ago56March 19, 202121mitJavaScript
PostCSS plugin to rebase url(), inline or copy asset.
Postcss Easy Import1921,667301a year ago6February 25, 202211mitJavaScript
PostCSS plugin to inline @import rules content with extra features
Postcss Svg121
3 years ago1January 12, 20165cc0-1.0JavaScript
PostCSS plug-in which to insert inline SVG to CSS and allows you to manage it colors.
Postcss Inline Media431252 years ago12November 18, 20206mitJavaScript
Media queries shortcut, built on PostCSS, example: font-size: 20px @1200 18px @480 16px;
Postcss If Media312296 years ago4June 09, 2017mitJavaScript
A PostCSS plugin to inline or nest media queries within CSS rules & properties.
Postcss Strip Inline Comments24
6 years agomitJavaScript
Remove inline comments from postcss-scss parser
Alternatives To Postcss Url
Select To Compare

Alternative Project Comparisons


Travis Build Status AppVeyor Build Status dependencies Status devDependencies Status

PostCSS plugin to rebase, inline or copy on url().


$ npm install postcss postcss-url

Basic example - rebase

// dependencies
const fs = require("fs")
const postcss = require("postcss")
const url = require("postcss-url")

// css to be processed
const css = fs.readFileSync("input.css", "utf8")

// process css
const output = postcss()
    url: "rebase"
  .process(css, {
    from: "src/stylesheet/index.css",
    to: "dist/index.css"


.element {
    background: url('images/sprite.png');


.element {
    /* rebasing path by new destination */
    background: url('../src/stylesheet/images/sprite.png');


// postcss-url options
const options = {
    url: 'inline'

  .process(css, {
    from: "src/stylesheet/index.css",
    to: "dist/index.css"


.element {
    background: url('/images/sprite.png');
    filter: url('/images/circle.svg');


.element {
    /* inlined png as base64 */
    background: url('data:image/png;base64,R0lGODlhAQABAJH/AP///wAAAP///wAAACH/C0FET0JFOklSMS4');
    /* inlined svg as encodeURIComponent */
    filter: url('data:image/svg+xml,%3Csvg');


// postcss-url options
const options = {
    url: 'copy',
    // base path to search assets from
    basePath: path.resolve('node_modules/bootstrap'),
    // dir to copy assets
    assetsPath: 'img',
    // using hash names for assets (generates from asset content)
    useHash: true

  .process(css, {
    from: "src/stylesheet/index.css",
    to: "dist/index.css"


.element {
    background: url('/images/sprite.png');


.element {
    /* copy 'sprite.png' from 'node_modules/bootstrap/images/' to 'dist/img/' */
    /* and rename it by hash function */
    background: url('img/a2ds3kfu.png');

Multiple options

process first matched option by default. multi: true in custom will processing with other options

const options = [
    { filter: '**/assets/copy/*.png', url: 'copy', assetsPath: 'img', useHash: true },
    { filter: '**/assets/inline/*.svg', url: 'inline' },
    { filter: '**/assets/**/*.gif', url: 'rebase' },
    // using custom function to build url
    { filter: 'cdn/**/*', url: (asset) => `https://cdn.url/${asset.url}` }


Checkout tests for examples.

Options combinations

  • rebase - default
    • assetsPath - directory to copy assets (relative to to or absolute)
  • inline
    • basePath - path or array of paths to search assets (relative to from, or absolute)
    • encodeType - base64, encodeURI, encodeURIComponent
    • includeUriFragment - include the fragment identifer at the end of the URI
    • maxSize - file size in kbytes
    • fallback - copy, rebase or custom function for files > maxSize
    • ignoreFragmentWarning - do not warn when an SVG URL with a fragment is inlined
    • optimizeSvgEncode - reduce size of inlined svg (IE9+, Android 3+)
  • copy
    • basePath - path or array of paths to search assets (relative to from, or absolute)
    • assetsPath - directory to copy assets (relative to to or absolute)
    • useHash - use filehash(xxhash) for naming
    • hashOptions - options for hash function
  • custom {Function}
    • multi - processing with other options

Options list


rebase - (default)

Allow you to fix url() according to postcss to and/or from options (rebase to to first if available, otherwise from or process.cwd()).


Allow you to inline assets using base64 encoding. Can use postcss from option to find ressources.


Allow you to copy and rebase assets according to postcss to, assetsPath and from options (assetsPath is relative to the option to).

url: {Function}

Custom transform function. Takes following arguments:

  • asset
    • url - original url
    • pathname - url pathname (url without search or hash)
    • absolutePath - absolute path to asset
    • relativePath - current relative path to asset
    • search - search from url, ex. ?query=1 from ./image.png?query=1
    • hash - hash from url, ex. #spriteLink from ../asset.svg#spriteLink
  • dir
    • from - postcss option from
    • to - postcss option to
    • file - decl file path
  • options - postcss-url matched options
  • decl - related postcss declaration object
  • warn - wrapped function result.warn for current decl
  • result – postcss result object

And should return the transformed url. You can use this option to adjust urls for CDN.


Specify the maximum file size to inline (in kbytes)


(default: false)

Do not warn when an SVG URL with a fragment is inlined. PostCSS-URL does not support partial inlining. The entire SVG file will be inlined. By default a warning will be issued when this occurs.

NOTE: Only files less than the maximum size will be inlined.


A regular expression e.g. /\.svg$/, a minimatch string e.g. '**/*.svg' or a custom filter function to determine wether a file should be inlined.


The url fallback method to use if max size is exceeded or url contains a hash. Custom transform functions are supported.


(default: false)

Specifies whether the URL's fragment identifer value, if present, will be added to the inlined data URI.


Specify the base path or list of base paths where to search images from


(default: false)

If you specify an assetsPath, the assets files will be copied in that destination


(default: false)

If set to true the copy method is going to rename the path of the files by a hash name



(default: xxhash32)

Hash method xxhash32|xxhash64 or custom function (accept file buffer)


(default: 8)

Result hash shrink count


(default: false)

Prepend the original filename in resulting filename


Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.

$ git clone
$ git checkout -b patch-1
$ npm install
$ npm test



Popular Inline Projects
Popular Postcss Projects
Popular Text Processing Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.