Skip to content

PostCSS plugin to rebase or inline on url().

License

Notifications You must be signed in to change notification settings

akrawitz/postcss-url

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

postcss-url Build Status

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

Installation

$ npm install postcss-url

Usage

// 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" or "copy"
  }))
  .process(css, {
    // "rebase" mode need at least one of those options
    // "inline" mode might need `from` option only
    // "copy" mode need `from` and `to` option to work
    from: "src/stylesheet/index.css",
    to: "dist/index.css"
  })
  .css

Checkout tests for examples.

Options

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 encoding. Can use postcss from option to find ressources.

url: "copy"

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:

  • URL – original url
  • decl - related postcss declaration object
  • from - from postcss option
  • dirname – dirname of processing file
  • to – from postcss option
  • options – plugin options
  • result – postcss result object

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

maxSize

Specify the maximum file size to inline (in kbytes)

fallback

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

basePath

Specify the base path where to search images from

assetsPath

(default: false)

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

useHash

(default: false)

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


Contributing

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

About

PostCSS plugin to rebase or inline on url().

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%