Emacs: Pretty Format CSS 🚀

Pretty Format CSS

here are commands to pretty format CSS

(defun xah-css-format-compact-block (&optional Begin End)
  "Reformat CSS source code in a compact style.
Works on text selection or the {} block cursor is in, or the {} block before cursor.
Note: this command only add or remove whitespaces.

URL `http://xahlee.info/emacs/emacs/elisp_css_compressor.html'
Created: 2020-12-23
Version: 2021-09-05"
  (interactive)
  (let (xp1 xp2)
    (if Begin
        (setq xp1 Begin xp2 End)
      (if (region-active-p)
          (setq xp1 (region-beginning) xp2 (region-end))
        (when (search-backward "{")
          (setq xp1 (point))
          (when (search-forward "}"))
          (setq xp2 (point)))))
    (save-restriction
      (narrow-to-region xp1 xp2)
      (xah-replace-regexp-pairs-region
       (point-min)
       (point-max)
       '(
         ["\n" " "]
         ["[ \t\n][ \t\n]+" " "]
         [" }" "}"]
         [" :" ":"]
         [" ;" ";"]
         ["; " ";"]
         ["} " "}"]
         )))))

(defun xah-css-format-compact-buffer ()
  "Reformat CSS code to a compact style, in whole buffer.
Respect `narrow-to-region'.

URL `http://xahlee.info/emacs/emacs/elisp_css_compressor.html'
Created: 2020-12-18
Version: 2021-09-07"
  (interactive)
  (save-excursion
    (xah-css-format-compact-block (point-min) (point-max))
    (xah-replace-pairs-region
     (point-min) (point-max)
     '(
       [ "/*" "\n/*"]
       ["*/" "*/\n" ]
       ["}" "}\n"]
       ))))

(defun xah-css-format-expand-block (&optional Begin End)
  "Expand minified CSS code to multiple lines.
Works on text selection or the {} block cursor is in, or before cursor.
Note: this command only add or remove whitespaces.
Created: 2016-10-02
Version: 2021-08-03 2021-09-07 2023-08-25"
  (interactive)
  (let (xp1 xp2)
    (if Begin
        (setq xp1 Begin xp2 End)
      (if (region-active-p) (setq xp1 (region-beginning) xp2 (region-end))
        (if (search-backward "{" nil t)
            (progn
              (setq xp1 (point))
              (if (search-forward "}" nil t)
                  (setq xp2 (point))
                (user-error "no next } found")))
          (user-error "no previous { found"))))
    (save-restriction
      (narrow-to-region xp1 xp2)
      (xah-replace-regexp-pairs-region
       (point-min) (point-max)
       '(
         ["  +" " "]
         [" *; *" ";\n"]
         ["/\\*" "\n/*"]
         ["\\*/" "*/\n"]
         ["{ *" "{\n"]
         [" *} *" "}\n"]
         ["\n\n+" "\n"]
         ))
      (goto-char (point-max))
      (when (eq (char-before) 10)
        (delete-char -1)))))

(defun xah-css-format-expand-buffer ()
  "Expand minified CSS code to multiple lines for whole buffer.
Respect `narrow-to-region'.
Version: 2021-08-03"
  (interactive)
  (save-excursion
    (xah-css-format-expand-block (point-min) (point-max))
    (xah-replace-regexp-pairs-region
     (point-min) (point-max)
     '(
       ["}" "}\n" ]
       ["\n\n\n+" "\n\n"]
       ))))

requires package Emacs: xah-replace-pairs.el 📦

The command is part of Emacs: Xah CSS Mode 📦