Added code to check unused CSS Files

[THEBOSS0369]

Description
This PR fixes #896
I have added the Purgecss https://purgecss.com/ in the codebase which identifies a particular css/scss file and check html & js files whether the styling is in used or not. I manually checked these particular files adapters.scss, blog.scss, calendar.scss and forms.scss. But was so much time consuming to manually check the files solo so i created this postcss.config.js file.

This PR fixes #
By adding this we can easily check files whether there css styles are in use or not.

Steps to try ->

1. Check in which scss/css file you want to check.
2. Change the file name in the postcss.config.js and if you want to check in a particular html file
   change this to './**/*.html' to the file you want. for e.g. './_includes/**/*card.html' this will check the style of the css file you provided in the particular html file you want. purgecss uses postcss to work.

3. Then run this in the terminal
   npx postcss _sass/variables.scss -o ./output/variables.css --config ./postcss.config.js
   you will have to change variables.scss & variables.css to anything like header.scss & header.css. As it is using post css which used to check css, so this will convert scss file to css then check. If there will be any error it will be shown otherwise it will return nothing and if there is an unused css style then it will delete that from the particular file.

Notes for Reviewers
I found that many of the unused css styles are the ones that are used by pressing or hovering component like a button it has many styles like hovering OR on pressing different styles is used. so its style will be unused until the component is not in used.

Signed commits

• Yes, I signed my commits.

[welcome]

Yay, your first pull request! 👍 A contributor will be by to give feedback soon. In the meantime, please review the Newcomers' Guide and sure to join the community Slack.
Be sure to double-check that you have signed your commits. Here are instructions for making signing an implicit activity while peforming a commit.

[netlify]

✅ Deploy Preview for mesheryio-preview ready!

Name	Link
🔨 Latest commit	ff7bbc2
🔍 Latest deploy log	https://app.netlify.com/sites/mesheryio-preview/deploys/66c55bc5f9f74a00084e4ab4
😎 Deploy Preview	https://deploy-preview-1880--mesheryio-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Ashparshp]

@THEBOSS0369, Thanks for your contribution, let's discuss this on the website's call. Please add this as an agenda item to the meeting minutes.

[THEBOSS0369]

@THEBOSS0369, Thanks for your contribution, let's discuss this on the website's call. Please add this as an agenda item to the meeting minutes.

Hey @Ashparshp I wasn't able to attend the meeting due to travelling. What will i have to do now, like should I move to new issue or wait till this issue get reviewed. I think I should move to new issue, so that i can keep contributing.

[shubhusion]

@THEBOSS0369 Changing file names manually can be error-prone and cumbersome. Can you automate it using a script or make a dynamic configuration where file names can be updated whenever there is a need to check for unused css?

Also Please make sure your PR passes all required checks before it can be reviewed.

[Ashparshp]

@THEBOSS0369, sign-off will fix the dco.

[THEBOSS0369]

Hey @Ashparshp ! See this my recent commit i added this message git commit -s -m "My messge" and then git push origin unused-css but still the sign off error is coming. Even my signoff is showing on the commit message i don't know why this error is coming.
This is pic for signoff showing

[THEBOSS0369]

@THEBOSS0369 Changing file names manually can be error-prone and cumbersome. Can you automate it using a script or make a dynamic configuration where file names can be updated whenever there is a need to check for unused css?

Also Please make sure your PR passes all required checks before it can be reviewed.

Hey @shubhusion ! i have never worked with script. so i don't know if i will be able to solve it or not. But i will try to give my best shot.

[THEBOSS0369]

I have added a script by which, now user don't have to change the file name in any file he/she just have to update the file name in the terminal.

I have added an unused component name-btn so after running this in the terminal, it will automatically delete all the unnecessary css component that is not in used. If you want to check any other file just change blog.scss to file you wanted to check anything-you-want.scss and it will done its work.

Run this in terminal
node check-unused-css.js blog.scss

This will be prompted in terminal after execution of the script

Success: The file 'blog.scss' was processed successfully. The output has been saved to './output/blog.scss' NOTE: ALL THE UNUSED CSS IS REMOVED FROM THE UPDATED FILE

Before running the script, i added an name-btn unused component in website

It is removed after execution of code

Note : The updated file will be saved in the output directory.

Also, I don't why the dco issue is occuring even though i have signed off this commit.

[THEBOSS0369]

Hey @shubhusion @Ashparshp ! Can you review this PR, so that i can continue contributing further.

[Ashparshp]

Why did you make so many unrelated changes?

[THEBOSS0369]

Why did you make so many unrelated changes?

Hey @Ashparshp ! I didn't make those changes, they were made automatically when I was pushing the code it showed that my branch is behind few commits, so i went to my forked repo there was a notification showing 3 commits behind, so I did merge commit and git pull and these changes were done automatically. I didn't make any change in file other than postcss.config.js and check-unused.css

[THEBOSS0369]

Hey @Ashparshp can you guide me what to do with this PR?

[Ashparshp]

@THEBOSS0369, let's discuss this on the website's call. Please add this as an agenda item to the meeting minutes.

[Ashparshp]

@SAHU-01 //

[sudhanshutech]

@THEBOSS0369 revert the master changed from your pr since you have rebased . Either could be create a new pr.
Until this pr reviewed you can work on other issues as well.

[THEBOSS0369]

@sudhanshutech i have created a new PR #1898 for this issue, this time i just added only 2 files but the files i never added using git add or neither changed myself has came in my commit. Please look into this it shows me and leecalcote has merged, Don't know why it's coming.