Emacs: CSS Compressor

By Xah Lee. Date: . Last updated: .

This page shows a emacs command to compress (reformat) CSS code.

Suppose you have this:

div.x70662 {
    display:table;
    margin:.5ex;
    padding:.5ex;
    border:solid thin silver;
    background-color:#fff8dc;
}

You want it to be this:

div.x70662{ display:table; margin:.5ex; padding:.5ex; border:solid thin silver; background-color:#fff8dc;}

Solution

Here's emacs command to compact CSS code.

(require 'xah-replace-pairs)

(defun xah-css-compact-css-region (&optional @begin @end)
  "Remove unnecessary whitespaces of CSS source code in region.
If there's text selection, work on that region.
Else, work on whole buffer.
WARNING: not 100% robust. This command work by doing string replacement. Can get wrong if you have a string or comment. Worst will happen is whitespace gets inserted/removed in string or comment.
URL `http://ergoemacs.org/emacs/elisp_css_compressor.html'
Version 2016-10-11"
  (interactive
   (if (use-region-p)
       (list (region-beginning) (region-end))
     (list (point-min) (point-max))))
  (save-restriction
    (narrow-to-region @begin @end)
    (xah-css--replace-regexp-pairs-region
     (point-min)
     (point-max)
     '(["  +" " "]))
    (xah-css--replace-pairs-region
     (point-min)
     (point-max)
     '(
       ["\n" " "]
       [" /* " "/*"]
       [" */ " "*/"]
       [" {" "{"]
       ["{ " "{"]
       ["; " ";"]
       [": " ":"]
       [";}" "}"]
       ["}" "}\n"]
       ))))

This is a simple find replace solution. It doesn't go all the way.

You'll need xah-replace-pairs.el. See: Emacs: xah-replace-pairs.el Multi-Pair Find Replace

This command is part of xah-css-mode.

Emacs Text Transform Under Cursor

  1. Toggle Letter Case
  2. Title Case
  3. Upcase Sentences
  4. Cycle Space Hyphen Underscore
  5. Escape Quotes
  6. Quote Lines
  7. Spaces to New Lines
  8. Change Brackets/Quotes
  9. Remove Accent Marks
  10. Convert Straight/Curly Quotes
  11. Convert English/Chinese Punctuations
  12. Color Conversion (RGB, HSL, HSV)
  13. Decimal to Hexadecimal
  14. Replace Greek Letter Names to Unicode
  15. Twitterfy Text
  16. Toggle line wrap
  17. Clean White Space

HTML Topic

  1. Emacs HTML Tips
  2. Insert HTML Tag
  3. URL to Link Command
  4. Lines to HTML Table
  5. Replace HTML Entities
  6. CSS Compressor
  7. Color CSS Color Values
  8. View Image Thumbnails
  9. HTML Image Path to Img Tag
  10. Convert Image Files in Dired
  11. Xah HTML Mode

Elisp HTML Commands

  1. wrap-url
  2. URL to Link
  3. Link to Dead Link
  4. Make Image Links
  5. Extract URL
  6. Word to Wikipedia Linkify
  7. Wikipedia URL Linkify
  8. URL Percent Decode/Encode
  9. Lines to HTML Table
  10. Markup Function Names
  11. Color Source Code
  12. Transform Text Under Cursor
  13. Chinese Char Reference Linkify
  14. HTML make-citation
  15. update-title
  16. Google Map Linkify 🌐
  17. CSS Compressor
  18. Make Ruby Annotation
  19. Move Image File

If you have a question, put $5 at patreon and message me.
Or Buy Xah Emacs Tutorial
Or buy a nice keyboard: Best Keyboards for Emacs

Emacs

Emacs Lisp

Misc