postcss-assetus v1.2.0

postcss-assetus

Find the assets and then saves (or convert to inline) and compresses

Easy to use with your CSS

Install

npm install postcss-assetus --save

Example

postcss([
    require('postcss-assetus')()
])

Input example

.image {
    background-image: assetus-url("assets/images/image.png");
    background-size: assetus-size("assets/images/image.png");
    width: assetus-width("assets/images/image.png");
    height: assetus-height("assets/images/image.png");
}
.image-inline {
    background-image: assetus-inline("assets/images/image.png");
    width: assetus-width("assets/images/image.png");
    height: assetus-height("assets/images/image.png");
}
/* .icon-... */

Output example

.image {
    background-image: url("../images/image.png");
    background-size: 60px 60px;
    width: 60px;
    height: 60px;
}

.image-inline {
    background-image: url(data:image/png;base64,...);
    width: 60px;
    height: 60px;
}

Methods and options

The path relative to the root of the script

$image: "assets/images/image.png";

Methods

Inline options

$image: "assets/images/image.png?name=newimage";

• name — another name of the image to save

Plugin options

// ...
postcss([
  assetus({
    searchPrefix: "assetus",
    withImagemin: true,
    withImageminPlugins: [
        imageminPngquant({
           quality: "60-70",
           speed: 1
       })
    ],
    imageDirCSS: "../images/",
    imageDirSave: "public/images/"
  })
])
// ...

withImagemin

Compression of the image using imagemin. Defaults to true

Images of assetus-inline are compressed too

withImageminPlugins

Specify what to use plugins for. Defaults to [require('imagemin-pngquant')({quality: "60-70",speed: 1})]

imageDirCSS

Relative URL (background-image) which is replaced in position in your CSS. Defaults to ../images/

imageDirSave

The path where to save the images relative to the root of the script. Defaults to public/images/

searchPrefix

If you want to use a different prefix, then this option is for you. Defaults to assetus

gulpfile.js

// ...
postcss([
  assetus({
    searchPrefix: "myprefix"
  })
])
// ...

Now you can now use

.icon {
    background-image: myprefix-url(...);
    background-size: myprefix-size(...);
    myprefix:ihw(...);
}