absolutize-css-resources

1.2.3 • Public • Published

Build Status

absolutize-css-resources

Converts the links of all css images, fonts and other resources into absolute paths from a css file, and you are free to worry about improper replacement.

Install

$ npm install absolutize-css-resources --save

Usage

var absolutize = require('absolutize-css-resources');
var url = require('url');
 
absolutize(file_content, {
  filename: '/path/to/style.css',
  filebase: '/path',
  resolve: function(path){
    return url.resolve('http://mydomain.com/static/', path); 
  }
}, function(err, parsed_content){
  parsed_content;
});
If we have a css file:
body {
  background: url(img/pic.png)
}

Then the parsed_content will be:

body {
  background: url(http://mydomain.com/static/to/img/pic.png)
}

absolutize(file_content, options, callback [, callback_on_found])

  • file_content String the content of the css file
  • options Object
    • filename path the absolute path of the css file
    • filebase path
    • resolve function(relative_path) the method to resolve the relative_path to an absolute url
      • relative_path the path of each css image or resource which is relative to filebase
    • allow_absolute_url Boolean=true whether allow absolute url of css images, such as background: url(/a.png) which is a bad practice.
  • callback function() the error(if exists) and the parsed content will pass to the callback function.
  • callback_on_found function(path, relative_path)= called if a css resource is found. Optional.
    • path the original pathname of the resource
    • relative_path the pathname relative to the filebase

options.resolve(relative_path)

options.resolve can be a synchronous method or an asynchronous one by using the common this.async() style.

Sometimes, we need to invoke an asynchronous process to fetch the version info of a image, querying version from db or digesting md5 from the file content, for example.

 
// options
{
  resolve: function(relative_path){
    // Turns the method into an async method
    var done = this.async();
 
    my_method_2_get_md5(relative_path, function(err, md5){
      if (err) {
        return done(err);
      }
 
      var REGEX_EXTENSION = /\.[a-z0-9]$/i;
 
      // Inserts md5 string into the path
      relative_path = relative_path.replace(REGEX_EXTENSION, function(match){
        return '-' + md5.slice(0, 7) + match;
      });
 
      // Converts the relative path into an url,
      // The converted url might be something like:
      // -> http://mydomain.com/static/to/pic-9f9dd65.png
      var resolved = require('url').resolve('http://mydomain.com/static/', relative_path);
 
      done(null, resolved);
    });
  }
}

License

MIT

Package Sidebar

Install

npm i absolutize-css-resources

Weekly Downloads

1

Version

1.2.3

License

MIT

Last publish

Collaborators

  • kael