callumlocke/css-url-rewriter

Runs your callback for every URL found in a string of CSS

css-url-rewriter

Simple function that looks for url(...) definitions in a string of CSS and runs them through your own rewriter function.

Getting Started

Install the module with: npm install css-url-rewriter

var rewriteCSSURLs = require('css-url-rewriter');

// example - add a query string to all URLs
var newCSS = rewriteCSSURLs(someCSS, function (url) {
  return url + '?12345';
});

It will process all URLs it encounters by default, even data: URIs, so you need to check for those manually if you want to handle them differently. The only exception is URLs in 'excluded properties' (see settings).

Settings

You can optionally pass in a settings object as a second argument:

var newCSS = rewriteCSSURLs(someCSS, settings, function (url) {
  return url + '?12345';
});

Currently there is only one configurable setting, excludedProperties, which is an array of properties that you want to skip. This setting defaults to ['behavior', '*behavior'] (because you usually don't want to mess with URLs in this proprietary MSIE property, because it has weird relativity rules).

License

Copyright (c) 2014 Callum Locke. Licensed under the MIT license.

css-url-rewriter's Issues

API changes

• remove excludeProperties setting
• pass the current property name (and possibly some other info) as extra arg(s) to the callback, so the callback function can decide what to do

Update cssPropertyMatcher

According to the spec, the ordering of individual background-* property values is arbitrary, so shouldn't the cssPropertyMatcher regex be a little more flexible?

I ran into this issue when declaring background-color before background-image in a background shorthand property. Here is a quick attempt to fix. The new tests are on lines 16 and 17.

The solution presented there is probably a little too loose, but take a look and see what you think.

Thanks!

Incorrectly parses CSS "propertyName" on qtip2, resulting in failure to detect excludeProperties "behavior" attribute

I believe there are probably more libraries having this problem, but it's not parsing the CSS correct.
(1) dist/jquery.qtip.css
(2) dist/jquery.qtip.min.css

The two above files were unable to avoid the "behavior" attribute. Putting a console.log on css-url-rewriter.js:46 for the variable "propertyName" tells me that it has not parsed the CSS correctly.

It returns "http" as "propertyName" when using (1)
It returns "{cursor" as "propertyName" when using (2)

I'm using version 0.1.3

Thanks!

move to css-utils org?

i'm on a missing to organize source code into github orgs. are you interested in moving this module there? i can add you as owner.

https://github.com/css-utils

Css Property regular expression is missing {

If the css property is the first one in the block, e.g:
.test {background-image:url(_____)}

The regular expression will miss it as it is expecting ';' or white space at the beginning.

I fixed it by adding {

var cssPropertyMatcher = /[;\s{]?[a-zA-Z-]+\s_:\s_url(\s_['"]?[^'")\s]+['"]?\s_)[^;}]/g;