Hi,
Before I start, I acknowledge that this tool is an inspiration by CSS Stats. Ok, let's jump on it.
What is CSS Viewer?
The tool used to view the CSS Styles.
Wait a minute. We already have CSS Stats, right?
How it differs from CSS stats? 🤔
As I mentioned above, I used CSS Stats to run this tool.
If we give the CSS path in CSS Stats, we can get the stats of the particular CSS file. Here we can give the JSON path of the assetsMap of your application. It will list down all the CSS paths. While clicking the particular CSS path you can view the CSS Styles as you want.
Ok, what is the exact use case to use this application?🧐
Consider this scenario of your application using fingerprinting technology to build the application.
Example:
https://my-domain/my-css-{fingerprinted-hash}
For every build, the fingerprinted hash will vary.
For example, it may vary from 737jsb77sd236 to dsvyd623t3bdc.
So, in this case, you have to replace the old hash with the new hash to view the recent changes in the CSS Stats. To avoid this confusion, we can use this tool for the requirement of updated CSS stats.
working:
1. Paste your JSON path:
2. Click the particular CSS Path:
My Use case:
My mentors taught me that don't use too many colours in any application for a better user experience. So, Before I introduce new colours in the design phase, I should check the available colours to reuse them. So I used CSS stats to check the available colours. But, sometimes I missed giving the updated fingerprinted hash. So I decided to create this. I hope it will fit your use case also.
If it doesn't fit, Please raise an issue here
Thank you for reading this post 🙏. Feel free to post your comments if you want to share something. Contributions to this project are also welcome.
Application: https://css-viewer.vercel.app/
Github: https://github.com/AlwarG/css-viewer
Top comments (0)