Nature Preceded Machines

    postcss-url-mapper

    1.2.0 • Public • Published

    postcss-url-mapper Build Status npm version

    Simple .map for urls in CSS

    Install

    With npm do:

    npm install postcss-url-mapper --save
    

    Usage

    postcss([require('postcss-url-mapper')(mapfunc, options)])

    See the PostCSS documentation for examples for your environment.

    Configuration

    Map

    Map function.
    Takes two arguments: url and type, where type is a name of CSS variable, property or at-rule (background, cursor, import, --color, etc).
    Required.

    Options

    atRules

    Indicates whether the mapper should call map function for at-rules (like @import).
    Type: boolean
    Default: false

    Example

    Let's imagine that we need to add prefix /fonts/ for all src urls, /bg/ for value of CSS variable --background-image and /images/ for urls in other properties. And we also need to replace http with https in @import:

    postcss([require('postcss-url-mapper')(urlMapper, { atRules: true })]);
     
    function urlMapper(url, type) {
      switch (type) {
        case 'import':
          return url.replace('/^http/', 'https');
        case 'src':
          return `/fonts/${url}`;
        case '--background-image':
          return `/bg/${url}`;
        default:
          return `/images/${url}`;
      }
    }

    Note: Mapper doesn't match on data URI (url is always URL), but you can return it, e.g. when you replace icons with their data. But I think there is better tools for such tasks.

    Install

    npm i postcss-url-mapper

    DownloadsWeekly Downloads

    272

    Version

    1.2.0

    License

    MIT

    Last publish

    Collaborators

    • igoradamenko