https://github.com/guasam/compress-my-css-vscode
A unique CSS stylesheet formatter with single-line (stacked) rules formatting support.
https://github.com/guasam/compress-my-css-vscode
compress-style css-compress minify single-line-rules vscode-extension
Last synced: 3 months ago
JSON representation
A unique CSS stylesheet formatter with single-line (stacked) rules formatting support.
- Host: GitHub
- URL: https://github.com/guasam/compress-my-css-vscode
- Owner: guasam
- License: other
- Created: 2022-07-19T13:36:36.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-07-19T18:45:54.000Z (almost 3 years ago)
- Last Synced: 2025-01-12T22:46:28.213Z (5 months ago)
- Topics: compress-style, css-compress, minify, single-line-rules, vscode-extension
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=guasam.compress-my-css
- Size: 2.06 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
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**
```css
/* @compress-my-css */
```
**End Tag**
```css
/* @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 :**
```css
/* @compress-my-css : stacked */
```
**Minified Mode :**
```css
/* @compress-my-css : minified */
```
**Ignore Mode :**
```css
/* @compress-my-css : ignore */
```
## 🔎 Compression modes
**Stacked Mode**
Stack mode formats stylesheet code to have single-line per stylesheet selector rule.
```css
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.
```css
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.
## ♾️ Developer Comments
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