Narwhals Poke Mammals

    postcss-inline-base64

    7.2.2 • Public • Published

    PostCSS Inline Base64

    Node.js CI Coverage Status Snyk badge

    PostCSS plugin used to replace value inside of url function to base64

    Usage

    See the example below

    import postcssInlineBase64 from 'postcss-inline-base64'
    
    postcss([
      postcssInlineBase64(options),
    ])

    If you are using CommonJS module:

    postcss([
      require('postcss-inline-base64')(options),
    ])

    Options

    Name Type Default Description
    baseDir string process.cwd() Path to load files

    Example

    Use the syntax below inside url() function:

    Variations:
    
     - b64---{file}---
     - b64---'{file}'---
     - b64---"{file}"---
     - 'b64---{file}---'
     - "b64---{file}---"
    

    input

    :root {
      --image: 'b64---./example.gif---';
    }
    
    @font-face {
      font-family: 'example';
      src: url('b64---./example.woff---') format('woff'), url('b64---./example.woff2---') format('woff2');
      font-weight: normal;
      font-style: normal;
    }
    
    body {
      background-color: gray;
      background-image: url(var(--image));
    }
    
    .notfound {
      background-image: url('b64---https://file.not/found.png---');
    }
    
    .ignore {
      background-image: url('https://cdn.lagden.in/mask.png');
    }

    output

    :root {
      --image: 'data:image/png;charset=utf-8;base64,iVBORw0K...SuQmCC';
    }
    
    @font-face {
      font-family: 'example';
      src: url('data:font/woff;charset=utf-8;base64,d09...eLAAAA==') format('woff'), url('data:font/woff2;charset=utf-8;base64,d09...eLAAAA==') format('woff2');
      font-weight: normal;
      font-style: normal;
    }
    
    body {
      background-color: gray;
      background-image: url(var(--image));
    }
    
    .notfound {
      background-image: url('https://file.not/found.png');
    }
    
    .ignore {
      background-image: url('https://cdn.lagden.in/mask.png');
    }

    See PostCSS docs for examples for your environment.

    License

    MIT © Thiago Lagden

    Install

    npm i postcss-inline-base64

    DownloadsWeekly Downloads

    1,534

    Version

    7.2.2

    License

    MIT

    Unpacked Size

    1.14 MB

    Total Files

    12

    Last publish

    Collaborators

    • lagden