Description
Merge multiple CSS files into a single file, autoprefix and minify for best in class performance.
What problem does it solve?
- Splitting CSS for better structure requires @import CSS files, but each @import is a network request. This might be bad for performance.
- CSS might contain duplicate declarations, properties, or comments that are not necessary in the production version
- CSS may need vendor prefixes which are tedious to type by hand
Features
- Merges multiple CSS files into a single file, resulting in a single network request
- Minifies CSS, resulting in smaller file size
- Auto-prefixes CSS, improving support for modern CSS features across browsers
- Checks CSS for errors. If there is an error, the bundling will fail, but tell you what’s wrong.
- No installation, no npm, no messing with Terminal. It just works.
- Great for people who just want to use modern, vanilla CSS.
How it works
- Select a folder with an
index.cssfile that @imports other CSS files - Include the
index.min.cssfile in your HTML<head> - 🚀The app watches changes to files, based on the location of the
index.cssfile. It will automatically rebuild as you make changes to any of the imported CSS files.
Attribution
- PostCSS
Things that could be improved
- Show file size before / after
- Show “watching” indicator
- Test text overflow of filenames