unused css rules tree shaking elimination nodejs

-

Unused css rules elimination process is a lot more like tree shaking done by JavaScript bundlers for instance if you're familiar with how webpack eliminates dead code as a result tree shaking generates a much smaller bundle with only essential code

Purifycss is a nodejs npm open source package that eliminates unused css
You can use purifycss to remove excess css from libraries such as bootstrap, materal design lite to name a few,

Installation

You can get "purify-css" npm package from the package manager by typing in your terminal;

npm i purify-css

To install globally add -g flag;

npm i -g purify-css

Basic example usage;
You can use css purify global cli package as;

Syntax;

purifycss {css} {html}

Important flags;

-m minify output
-o specify output file name

For example;

purifycss *.css *.html -o css.min.css

Output containg minified css rules will get saved to css.min.css

Comments

Post a Comment

Popular posts from this blog

Redirecting a webpage in JavaScript

-
Redirects are way of navigating a user to another webpage or location redirects are normally done by server side implementations. it's possible to do redirects using JavaScript too window.location is a object that stores current location information such as path, port, hostname and href or the location in the address bar of your browser changing it invokes a redirect it's a simple way to redirect a user to another webpage Syntax window.location.asign('https://example.com') or simply like window.location = "https://example.com" or simply omit window location = "https://example.com"
Read more

What is 'this.' keyword in JavaScript

-
In JavaScript 'this' is an object and a reference to the current object that is used to get and to set properties of the current object. Take for instance within a function; const func = function (name){     this.name = name } func.name instance property name is set to that of the first argument; const inst = new func('duke') inst.name // returns duke You can as well extend func to set name using 'this'; func.prototype.set = function(name){     this.name = name } Running the previous instance with this set method; inst.set('John') // returns John
Read more

Introduction to webshare API (navigator.share)

-
Image
navigator.share is a JavaScript API providing a sharing interface similar to native apps webshare API is supported on most updated mobile browsers Including Google chrome for Android Sharing is done by passing an Object with parameters "url", "text" or "title" to navigator.share function. For a webshare request to succeed you must supply at lest one of the parameters navigator.share returns a Promise upon being called "upon navigator.share({     "url": document.location,     "text": "I'm an example",     "title": document.title }) .then(resp => console.info("Successfully shared")) .catch(errors => console.error(errors))
Read more