Emmet expands css abbreviations as html

Question

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

This:

m10+p0

Should expand to this:

margin: 10px;
padding: 0px;

But instead expands to this:

<m10></m10>
<p0></p0>

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

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

  :init
  (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

  :config
  (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.

score 1 · Accepted Answer · answered Mar 24 '18 at 10:20

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.

Emmet expands css abbreviations as html

1 Answers1