Everytime I expand an abbreviations on a css file it expands as html instead the proper css expansion.



Should expand to this:

margin: 10px;
padding: 0px;

But instead expands to this:


I have installed the Emmet mode using use-package with this config:

;; --- Emmet Mode ---
(use-package emmet-mode
  :ensure t

  (add-hook 'sgml-mode-hook 'emmet-mode) ;; Auto-start on any markup modes
  (add-hook 'css-mode-hook  'emmet-mode) ;; Enable Emmet's css abbreviation.
  (add-hook 'web-mode-hook 'emmet-mode) ;; Auto-start on any web modes

  (local-set-key (kbd "C-c C-e w") nil)
  (local-set-key (kbd "C-c C-e w") 'emmet-wrap-with-markup)      

I tried disabling other packages but still does the same, even running the M-x emmet-expand-line instead of using the keybinding in case there's any collision on the keybindings.


I found the culprit, it was a line on my web-mode use-package block.

;; --- Web-Mode ---
(use-package web-mode
  :mode (
     ("\\.php\\'" . web-mode)
         ("\\.html\\'" . web-mode)
         ("\\.htm\\'" . web-mode)
         ("\\.js\\'" . web-mode)
         ("\\.css\\'" . web-mode)   ;; <----Removed this one

It seems web-mode was grabbing the control of the css files and trying to autocomplete the abbreviations as html. Now the css files are associated with the css-mode and emmet identifies this properly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.