postcss-normalize-url

What is postcss-normalize-url?

The postcss-normalize-url npm package is a PostCSS plugin designed to normalize URLs within your CSS. This includes operations such as normalization of quotation marks, removal of default ports, and encoding of special characters in URLs. It helps in reducing the size of your CSS by ensuring URLs are optimized and consistent.

What are postcss-normalize-url's main functionalities?

Normalization of URLs

This feature normalizes URLs by removing the default port (80 for http and 443 for https) and ensures the URL is encoded properly. It also normalizes quotation marks around URLs.

postcss([ require('postcss-normalize-url')() ]).process('a { background-url: url(http://example.com:80/image.png); }').then(result => { console.log(result.css); });

Removal of unnecessary quotes

This feature removes unnecessary quotes around URLs when they are not required, which can help in reducing the size of the CSS file.

postcss([ require('postcss-normalize-url')() ]).process('a { background-url: url("http://example.com/image.png"); }').then(result => { console.log(result.css); });

Encoding of special characters in URLs

This feature ensures that special characters in URLs are properly encoded, making the URL safe to use across different browsers and environments.

postcss([ require('postcss-normalize-url')() ]).process('a { background-url: url(http://example.com/ü.png); }').then(result => { console.log(result.css); });

Other packages similar to postcss-normalize-url

clean-css

clean-css is a fast and efficient CSS optimizer for Node.js and the browser. It includes functionalities for minifying CSS, which indirectly includes optimizing URLs within stylesheets. However, it is more comprehensive in scope, focusing on overall CSS optimization rather than specifically on URL normalization.

cssnano

cssnano is a modular CSS minifier that includes various optimizations to reduce the size of CSS files. One of its plugins, postcss-minify-urls, performs tasks similar to postcss-normalize-url by optimizing URLs. cssnano provides a broader range of CSS optimizations, making it a more versatile tool for overall CSS minification.

README

postcss-normalize-url

Normalize URLs with PostCSS.

Install

With npm do:

npm install postcss-normalize-url --save

Example

Input

h1 {
    background: url("http://site.com:80/image.jpg")
}

Output

h1 {
    background: url(http://site.com/image.jpg)
}

Note that this module will also try to normalize relative URLs, and is capable of stripping unnecessary quotes. For more examples, see the tests.

Usage

See the PostCSS documentation for examples for your environment.

API

normalize([options])

Please see the normalize-url documentation. By default, normalizeProtocol & stripFragment are set to false; stripWWW to true.

Contributing

Pull requests are welcome. If you add functionality, then please add unit tests to cover it.

License

MIT © Ben Briggs