项目作者: lagden

项目描述 :
PostCSS plugin used to replace value inside of url function to base64
高级语言: JavaScript
项目地址: git://github.com/lagden/postcss-inline-base64.git
创建时间: 2016-03-05T18:02:18Z
项目社区:https://github.com/lagden/postcss-inline-base64

开源协议:MIT License

下载


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

  1. import postcssInlineBase64 from 'postcss-inline-base64'
  2. postcss([
  3. postcssInlineBase64(options),
  4. ])

If you are using CommonJS module:

  1. postcss([
  2. require('postcss-inline-base64')(options),
  3. ])

Options

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

Example

Use the syntax below inside url() function:

  1. Variations:
  2. - b64---{file}---
  3. - b64---'{file}'---
  4. - b64---"{file}"---
  5. - 'b64---{file}---'
  6. - "b64---{file}---"

input

  1. :root {
  2. --image: 'b64---./example.gif---';
  3. }
  4. @font-face {
  5. font-family: 'example';
  6. src: url('b64---./example.woff---') format('woff'), url('b64---./example.woff2---') format('woff2');
  7. font-weight: normal;
  8. font-style: normal;
  9. }
  10. body {
  11. background-color: gray;
  12. background-image: url(var(--image));
  13. }
  14. .notfound {
  15. background-image: url('b64---https://file.not/found.png---');
  16. }
  17. .ignore {
  18. background-image: url('https://cdn.lagden.in/mask.png');
  19. }

output

  1. :root {
  2. --image: 'data:image/png;charset=utf-8;base64,iVBORw0K...SuQmCC';
  3. }
  4. @font-face {
  5. font-family: 'example';
  6. 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');
  7. font-weight: normal;
  8. font-style: normal;
  9. }
  10. body {
  11. background-color: gray;
  12. background-image: url(var(--image));
  13. }
  14. .notfound {
  15. background-image: url('https://file.not/found.png');
  16. }
  17. .ignore {
  18. background-image: url('https://cdn.lagden.in/mask.png');
  19. }

See PostCSS docs for examples for your environment.

Donate ❤️

License

MIT © Thiago Lagden