Fork of postcss-cachebuster. Cachebusting all local files in css
npm install @zaininnari/postcss-cachebusterThis project is a fork of https://github.com/glebmachine/postcss-cachebuster.
- Package name: @zaininnari/postcss-cachebuster
- This fork focuses on keeping the plugin working on modern Node.js/PostCSS.
[PostCSS] plugin added cachebuster to local files based on their date changed.
``bash`
npm i -D @zaininnari/postcss-cachebuster
`js
import postcss from 'postcss';
import cachebuster from '@zaininnari/postcss-cachebuster';
const result = await postcss([
cachebuster({
imagesPath: '/images',
cssPath: '/stylesheets',
}),
]).process(css, { from: undefined });
result.css;
`
`css`
@import url('/css/styles.css');
.foo {
background-image: url('../images/index/logo.png');
behavior: url('../behaviors/backgroundsize.min.htc');
}
@font-face {
font-family: 'My font';
src: url('fonts/myfont.ttf');
}
`css`
@import url('/css/styles.css?v66f22a33fff');
.foo {
background-image: url('../images/index/logo.png?v14f32a475b8');
behavior: url('../behaviors/backgroundsize.min.htc?v15f55a666c2');
}
@font-face {
font-family: 'My font';
src: url('fonts/myfont.ttf?v32f14a88dcf');
}
`js
import postcss from 'postcss';
import cachebuster from '@zaininnari/postcss-cachebuster';
postcss([
cachebuster({
imagesPath: '/images',
cssPath: '/stylesheets',
}),
]);
`
See [PostCSS] docs for examples for your environment.
[PostCSS]: https://postcss.org/
- cssPath - option to redefine relative images resolving directory (by default the same as css file folder)imagesPath
- - variable to define absolute images base pathtype
- - define cachebuster type, mtime by default, allows: mtime, checksum (checksum based on a hash algorithm),paramName
or a function which receives the absolute path to the file as an argument and whose return value becomes
the url pathname.
- - prefix for the cachebuster value added to an asset's queryv
string (defaults to ). The default of v produces URLs likeimages/horse.jpg?v32f14a88dcf
. You can include an = to format it as aparamName
key/value parameter. For example, setting to v= could produceimages/horse.jpg?v=32f14a88dcf
URLs like .hashAlgorithm
- - the hash algorithm to use when type is set to checksum (defaults to md5).additionalProps
See the crypto.createHash()
documentation for information about available hash algorithms.
- - array of additional CSS properties to supportsupportedProps
- - replacement array of supported CSS properties (see below
for the default list of supported properties).
Default supported properties:
- backgroundbackground-image
- border-image
- behavior
- src
-
Add to this list by setting the additionalProps configuration option.mask-image
To add support for properties, for example:
`js
import postcss from 'postcss';
import cachebuster from '@zaininnari/postcss-cachebuster';
postcss([
cachebuster({
additionalProps: ['mask-image', '-webkit-mask-image'],
}),
]);
`
Replace the default list by setting the supportedProps configuration option.
To limit the cachbusting to background images only, for example:
`js
import postcss from 'postcss';
import cachebuster from '@zaininnari/postcss-cachebuster';
postcss([
cachebuster({
supportedProps: ['background', 'background-image'],
}),
]);
``
- Gleb Mikheev (https://github.com/glebmachine)
- Graham Bates (https://github.com/grahambates)
- Yusuke Yagyu (https://github.com/gyugyu)
- Jackson Ray Hamilton (https://github.com/jacksonrayhamilton)