- Notifications
You must be signed in to change notification settings - Fork59
PostCSS plugin to rebase url(), inline or copy asset.
License
postcss/postcss-url
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
PostCSS plugin to rebase, inline or copy on url().
$npm install postcss postcss-url
// 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');}
// 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');}
// 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');}
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.
rebase
-defaultassetsPath
- 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 URImaxSize
- file size in kbytesfallback
-copy
,rebase
or custom function for files >maxSize
ignoreFragmentWarning
- do not warn when an SVG URL with a fragment is inlinedoptimizeSvgEncode
- 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 naminghashOptions
- options for hash function
custom {Function}
multi
- processing with other options
Allow you to fixurl()
according to postcssto
and/orfrom
options (rebase toto
first if available, otherwisefrom
orprocess.cwd()
).
Allow you to inline assets using base64 encoding. Can use postcssfrom
option to find ressources.
Allow you to copy and rebase assets according to postcssto
,assetsPath
andfrom
options (assetsPath
is relative to the optionto
).
Custom transform function. Takes following arguments:
asset
url
- original urlpathname
- url pathname (url without search or hash)absolutePath
- absolute path to assetrelativePath
- current relative path to assetsearch
-search fromurl
, ex.?query=1
from./image.png?query=1
hash
-hash fromurl
, ex.#spriteLink
from../asset.svg#spriteLink
dir
from
- postcss option fromto
- postcss option tofile
- decl file path
options
- postcss-url matched optionsdecl
- related postcss declaration objectwarn
- 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.
Specify the maximum file size to inline (in kbytes)
(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.
A regular expression e.g./\.svg$/
, aminimatch string e.g.'**/*.svg'
or a custom filter function to determine wether a file should be inlined.
The url fallback method to use if max size is exceeded or url contains a hash.Custom transform functions are supported.
(default:false
)
Specifies whether the URL's fragment identifer value, if present, will be addedto the inlined data URI.
Specify the base path or list of base paths where to search images from
(default:false
)
If you specify anassetsPath
, the assets files will be copied in thatdestination
(default:false
)
If set totrue
the copy method is going to rename the path of the files by a hash name
(default:xxhash32
)
Hash methodxxhash32|xxhash64
or custom function (accept file buffer)
(default:8
)
Result hash shrink count
(default:false
)
Prepend the original filename in resulting filename
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
About
PostCSS plugin to rebase url(), inline or copy asset.