CSS completion in web-mode

[louy2]

I cannot trigger CSS completion in <style> tag in html file.

Sample:

.complete {
  text-<cursor>
}

I'd like it to show me various text related properties, but I get nothing.

[CestDiego]

Isn't it a better practice to have a separate CSS file?

[louy2]

I am writing some riotjs tags, and there are certain specific style I'd like to embed in it. And I'd really like the complete funtion to go with the code whereever it is. I am a believer in Literate Programming.

I am considering mmm-mode. Any suggestions?

[mkcode]

@louy2 - web-mode is a successor to mmm-mode so switching to mmm-mode would be a step backwards. Adding this feature to web-mode is a much shorter path.

[mkcode]

From web-mode.org:

Context-aware auto-completion
If you have auto-complete installed, you can set up per-language ac-sources with web-mode-ac-sources-alist:

(setq web-mode-ac-sources-alist
  '(("css" . (ac-source-css-property))
    ("html" . (ac-source-words-in-buffer ac-source-abbrev)))
To find a language's name, run the function web-mode-language-at-pos while in a block of it.

All hooks in web-mode-before-auto-complete-hooks are run just before auto-completion starts. This is useful for adapting ac-sources meant for a single language to web-mode, like ac-source-yasnippet.

Here is a sample config for editing PHP templates, using php-auto-yasnippets, emmet-mode, and ac-emmet:

(setq web-mode-ac-sources-alist
  '(("php" . (ac-source-yasnippet ac-source-php-auto-yasnippets))
    ("html" . (ac-source-emmet-html-aliases ac-source-emmet-html-snippets))
    ("css" . (ac-source-css-property ac-source-emmet-css-snippets))))

(add-hook 'web-mode-before-auto-complete-hooks
          '(lambda ()
             (let ((web-mode-cur-language
                    (web-mode-language-at-pos)))
               (if (string= web-mode-cur-language "php")
                   (yas-activate-extra-mode 'php-mode)
                 (yas-deactivate-extra-mode 'php-mode))
               (if (string= web-mode-cur-language "css")
                   (setq emmet-use-css-transform t)
                 (setq emmet-use-css-transform nil)))))

[louy2]

And where shall I put those config?

[TheBB]

We use company, so I wouldn't recommend going with auto-complete to get this working. The right way to do this is probably to add company-css to the backends in web-mode.

[TheBB]

PR: #3579

[louy2]

Thank you! @TheBB