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

How to interpolate strings in Kotlin programming language

-
Image
Kotlin programming language has string interpolation similar to template literals in JavaScript For JavaScript You can write as; var passage = `I'm going todo a ${chore}` In Kotlin you can do string interpolation as; var passage = "I'm going todo a $chore" Interpolating expressions in kotlin is done as; var state = "I'm done with ${numChores()} chores"
Read more

Animated sky on HTML5 Canvas

-
Image
So far I've added a new bunch of clouds, some stars and a phase changing moon' As the number of Clouds increased i cursed them into an Array and created two more Obstacles the Moon and Stars Here's progress. (Extended preview) In extended preview i added trees and buildings. (everything is drawn programmatically without using static Images)
Read more

How to target all elements of a given class name in JavaScript

-
JavaScript getByClassName only targets one element by default Workarounds  "loops " Loops can mess up your code I personally don't like them. To target all elements you will have to iterate through all of them for each element you will have to add a event listener Example For instance the are 3 links of a same class and you want to add event listeners on all of them .... .... .... // JavaScript const links = document.getByClassName("links") for(var i = 0; i < links.length; i++) links[i].addEventListener('click', event => console.log(event.target.get attribute('class')))
Read more

How to evaluate a string on a regular expression rule in JavaScript

-
JavaScript has a built in regular expression function for testing if a string arguments is matching the given regular expression rule; Syntax of the regular expression tester is as follows; /regex/.test(string) Take for instance you want to test if a string contains only alphanumeric upper and lower case characters, space and numbers; const str = "Eat code sleep" /[A-Z,a-z,0-9, ]*/.test(str) // returns boolean 'true' Or in another example; const str = "Eat, Code, Sleep" /[A-Z,a-z,0-9, ]*/.test(str) // returns boolean 'false' Because commas are not included in the regular expression match rules.
Read more

E2020 dynamic imports in JavaScript

-
Escmascript Is a standard from which JavaScript and typescript are both derived from. ES2020 is out it comes with it new ways of writing JavaScript code. Dynamic imports enable importing dependencies in a rather dynamic way. Initially JavaScript developers were restricted to statically load their dependencies for instance; import { property } from 'dependency' On runtime the JavaScript engine loads the required dependencies and makes them accessible globally. However that is a rigid way of writing code. Dynamic imports are  relatively more flexible therefore you can included them at any segment within your program. For instance if you want to load file system module only if a certain criteria is met you would do as follows; If(process.argv[2] == 'start') Import fs from 'fs' Dynamic imports return a promise use the syntax below to make use of them import('fs') .then(fs => {    // consume module fs })
Read more