Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up

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

License

NotificationsYou must be signed in to change notification settings

postcss/postcss-url

Repository files navigation

Travis Build StatusAppVeyor Build Statusdependencies StatusdevDependencies Status

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

Installation

$npm install postcss postcss-url

Basic example - rebase

// dependenciesconstfs=require("fs")constpostcss=require("postcss")consturl=require("postcss-url")// css to be processedconstcss=fs.readFileSync("input.css","utf8")// process cssconstoutput=postcss().use(url({url:"rebase"})).process(css,{from:"src/stylesheet/index.css",to:"dist/index.css"})

before:

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

after:

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

Inline

// postcss-url optionsconstoptions={url:'inline'};postcss().use(url(options)).process(css,{from:"src/stylesheet/index.css",to:"dist/index.css"})

before:

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

after:

.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 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%2F%3E');}

Copy

// postcss-url optionsconstoptions={url:'copy',// base path to search assets frombasePath:path.resolve('node_modules/bootstrap'),// dir to copy assetsassetsPath:'img',// using hash names for assets (generates from asset content)useHash:true};postcss().use(url(options)).process(css,{from:"src/stylesheet/index.css",to:"dist/index.css"})

before:

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

after:

.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 incustom will processing with other options

constoptions=[{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}`}];postcss().use(url(options))

Checkouttests for examples.

Options combinations

  • rebase -default
    • assetsPath - directory to copy assets (relative toto or absolute)
  • inline
    • basePath - path or array of paths to search assets (relative tofrom, 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 tofrom, or absolute)
    • assetsPath - directory to copy assets (relative toto or absolute)
    • useHash - use filehash(xxhash) for naming
    • hashOptions - options for hash function
  • custom {Function}
    • multi - processing with other options

Options list

url

rebase -(default)

Allow you to fixurl() according to postcssto and/orfrom options (rebase toto first if available, otherwisefrom orprocess.cwd()).

inline

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

copy

Allow you to copy and rebase assets according to postcssto,assetsPath andfrom options (assetsPath is relative to the optionto).

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 fromurl, ex.?query=1 from./image.png?query=1
    • hash -hash fromurl, 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 functionresult.warn for currentdecl
  • 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)

ignoreFragmentWarning

(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.

filter

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

fallback

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

includeUriFragment

(default:false)

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

basePath

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

assetsPath

(default:false)

If you specify anassetsPath, the assets files will be copied in thatdestination

useHash

(default:false)

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

hashOptions

method

(default:xxhash32)

Hash methodxxhash32|xxhash64 or custom function (accept file buffer)

shrink

(default:8)

Result hash shrink count

append

(default:false)

Prepend the original filename in resulting filename


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$npmtest

[8]ページ先頭

©2009-2025 Movatter.jp