lang/web/+css: refactor; css imenu support; add counsel-imenu & rainbow-mode

modules/lang/web/+css.el

@@ -1,31 +1,39 @@
 ;;; lang/web/+css.el
 
-(add-hook! (css-mode scss-mode less-css-mode) 'rainbow-delimiters-mode)
+;; css-mode hooks apply to scss and less-css modes
+(add-hook 'css-mode-hook 'rainbow-delimiters-mode)
+(add-hook! (css-mode sass-mode)
+  '(yas-minor-mode-on flycheck-mode highlight-numbers-mode))
 
 (sp-with-modes '(css-mode scss-mode less-css-mode stylus-mode)
   (sp-local-pair "/*" "*/" :post-handlers '(("[d-3]||\n[i]" "RET") ("| " "SPC"))))
 
 (map! :map* (css-mode-map scss-mode-map less-css-mode-map)
       :n "M-R" '+css/web-refresh-browser
-      :localleader
-      :nv ";" '+css/append-semicolon
-      :prefix "r"
-      :n  "b" '+css/toggle-inline-or-block)
-
+      (:localleader
+        :nv ";"  '+css/append-semicolon
+        :n  "rb" '+css/toggle-inline-or-block))
 
 ;;
 ;; Packages
 ;;
 
+(def-package! counsel-css
+  :commands (counsel-css counsel-css-imenu-setup)
+  :init
+  (add-hook 'css-mode-hook 'counsel-css-imenu-setup)
+  (map! :map* (css-mode-map scss-mode-map less-css-mode-map)
+        :leader :n ";" 'counsel-css))
+
+
+(def-package! rainbow-mode
+  :commands rainbow-mode
+  :init (add-hook! (css-mode sass-mode) 'rainbow-mode))
+
+
 (def-package! css-mode
   :mode "\\.css$"
   :mode ("\\.scss$" . scss-mode)
-  :init
-  (add-hook! css-mode
-    '(yas-minor-mode-on flycheck-mode rainbow-mode highlight-numbers-mode
-      ;; doom|counsel-css-imenu-setup
-      ))
-
   :config
   (set! :company-backend '(css-mode scss-mode) '(company-css company-yasnippet))
   (set! :build 'scss 'scss-mode '+css/scss-build))

modules/lang/web/packages.el

@@ -1,8 +1,9 @@
 ;; -*- no-byte-compile: t; -*-
 ;;; lang/web/packages.el
 
-;; config.el
-;; n/a
+(package! rainbow-mode)
+(when (featurep! :completion ivy)
+  (package! counsel-css :recipe (:fetcher github :repo "hlissner/emacs-counsel-css")))
 
 ;; +html.el
 (package! company-web)