Compress My Css
A unique CSS stylesheet formatter with single-line (stacked) rules formatting support.
Compress My Css - Visual Studio Marketplace
Compress My Css Demo :
👩💻 How to use
You can compress stylesheet rules code by surrounding it with a special comment tag region.
Start Tag
/* @compress-my-css */
End Tag
/* @end-compress-my-css */
👩💻 Apply region specific compression mode
You can asssign a compression mode for a region by changing starting comment tag to :
Stacked Mode :
/* @compress-my-css : stacked */
Minified Mode :
/* @compress-my-css : minified */
Ignore Mode :
/* @compress-my-css : ignore */
🔎 Compression modes
Stacked Mode
Stack mode formats stylesheet code to have single-line per stylesheet selector rule.
body { color:red; font-weight:bold; background:red; }
#app { font-size:1rem; margin:10px 20px 30px 40px; }
#container { display:flex; flex-direction:column; }
...
Minified Mode
Minified mode formats stylesheet code to have only one line for all stylesheet rules.
body {color:red;}#app {font-size:1rem;}#container {display:flex; flex-direction:column;}...
Ignore Mode
Ignore mode is useful if we want to mark a region without applying compression/format.
(NOTE : If no compression mode provided in comment tag, it will use default mode based on extension settings)
⚙️ Extension Settings
Following settings are available with this extension :
- Enable/Disable compression on file save.
- Enable/Disable information dialog after compression.
- Select default compression mode.
- Space after stylesheet rule selector.
- Space inside stylesheet rule parantheses.
- Space between stylesheet rule properties.
- Remove comments from stylesheet.
In the begining, this extension was created for personal use only as a web application, but switching back to browser and vscode was a bit nightmare. So the idea was to create a dedicated open-source extension for Visual Studio Code and distribute it to everyone who is interested in such kind of tool for stylesheet formatting in single-line (stacked) format.
As the backend of this extension is using only "Regex Expressions" for matching, replacing the text from editor. There might be some use-cases where the extension will provide unwanted results.
Feel free to contribute into repository for improving this extension :
https://github.com/guasam/compress-my-css-vscode
