@sgalinski/image-dimensions

A module that allows you to use an image-height and image-width function in you css

Usage no npm install needed!

<script type="module">
  import sgalinskiImageDimensions from 'https://cdn.skypack.dev/@sgalinski/image-dimensions';
</script>

README

image-dimensions

This module takes a string of CSS code and looks for the occurences of image-width() and image-height() and replaces them with the dimensions of the referenced images.

Example

// styles.css
body {
    background-image: url('background.jpg');
    width: image-width('background.jpg');
    height: image-height('background.jpg');
}
// build.js
const fs = require('fs');
let css = fs.readFileSync('./foo.css', 'utf-8');
let newCss = new ImageDimensions(css, {
    imageBasePath: './images'
}).process();
fs.writeFileSync('./foo.css', newCss);
// styles.css
body {
    background-image: url('background.jpg');
    width: 213px;
    height: 160px;
}

Options

You can pass an option object as the second parameter. Right now the only option you can set is the imageBasePath. The imageBasePath will be prepended to the url that gets extracted from the imageWidth and imageHeight functions.