;;; oni-css.el --- CSS configuration -*- lexical-binding: t; -*- ;; Copyright (C) 2019 Tom Willemse ;; Author: Tom Willemse ;; Keywords: local ;; Version: 20190219000529 ;; Package-Requires: (oni-company hydra fill-column-indicator) ;; This program is free software; you can redistribute it and/or modify ;; it under the terms of the GNU General Public License as published by ;; the Free Software Foundation, either version 3 of the License, or ;; (at your option) any later version. ;; This program is distributed in the hope that it will be useful, ;; but WITHOUT ANY WARRANTY; without even the implied warranty of ;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the ;; GNU General Public License for more details. ;; You should have received a copy of the GNU General Public License ;; along with this program. If not, see . ;;; Commentary: ;; Configuration for `css-mode' and `scss-mode'. ;;; Code: (require 'align) (require 'css-mode) (require 'hydra) (eval-when-compile (require 'compile) (require 'grep)) (defun oni-css-property-important-p () "Return whether or not the current property is important." (save-excursion (beginning-of-line) (re-search-forward "!important" (line-end-position) :noerror))) (defun oni-css-add-important () "Add an important flag to the property on the current line." (interactive) (unless (oni-css-property-important-p) (save-excursion (end-of-line) (when (re-search-backward ";" (line-beginning-position) :noerror) (insert " !important"))))) (defun oni-css-remove-important () "Remove the important flag from the property on the current line." (interactive) (when (oni-css-property-important-p) (save-excursion (end-of-line) (when (re-search-backward " !important" (line-beginning-position) :noerror) (replace-match ""))))) (defun oni-css-mode-init--toggle-important () "Toggle the important flag on the property on the current line." (interactive) (if (oni-css-property-important-p) (oni-css-remove-important) (oni-css-add-important))) (defhydra css-mode-hydra (:color blue) ("!" oni-css-mode-init--toggle-important)) (setq css-indent-offset 2) (add-hook 'css-mode-hook 'electric-pair-local-mode) (add-hook 'css-mode-hook 'electric-indent-local-mode) (add-hook 'css-mode-hook 'company-mode) (add-hook 'css-mode-hook 'fci-mode) (with-eval-after-load 'compile (let ((scss-error-regexp (rx (and bol (zero-or-more space) "on line " (group (one-or-more digit)) " of " (group (one-or-more (or word punct (syntax symbol)))) eol)))) (add-to-list 'compilation-error-regexp-alist (list scss-error-regexp 2 1 nil 2 2)))) (define-key css-mode-map (kbd "C-c m") #'css-mode-hydra/body) ;; Align CSS files like so: ;; body { color: #ffffff; } ;; .some-class { background-color: #ffffff; } ;; #some-id { width: 200px; } ;; .some-more-class { ;; color: #ffffff; ;; background-color: #ffffff; ;; width: 200px; ;; } ;; Keep these in order. They are each added to the _front_ of the ;; list and are applied in order. Changing their order will change ;; the results. (add-to-list 'align-rules-list `(css-closing-brace (regexp . ,(rx (group (0+ whitespace)) "}" eol)) (group . (1)) (modes . '(scss-mode css-mode)))) (add-to-list 'align-rules-list `(css-colons (regexp . ,(rx bol (0+ whitespace) (1+ (any (?a . ?z) ?- ?$)) ":" (group (0+ whitespace)) (0+ nonl) ";" eol)) (group . (1)) (modes . '(scss-mode css-mode)) (repeat . t))) (add-to-list 'align-rules-list `(css-opening-brace (regexp . ,(rx bol (0+ whitespace) (0+ (any ?# ?. ?, ?\s ?& ?: ?- (?a . ?z) (?A . ?Z) (?0 . ?9))) (any (?a . ?z) (?A . ?Z) (?0 . ?9)) (group (0+ whitespace)) "{" (0+ nonl))) (group . (1)) (modes . '(scss-mode css-mode)))) ;;;###autoload (with-eval-after-load 'grep (add-to-list 'grep-files-aliases '("css" . "*.css *.less *.sass *.scss"))) (provide 'oni-css) ;;; oni-css.el ends here