how does one enable css indentation and/or syntax highlighting

[iambumblehead]

i want to use web-mode to get css behaviour but all of the elements are aligned to left and there's no indentation or color. How are these enabled?

(mmm-add-classes
 '((js-vue-css
    :submode web-mode
    :face mmm-declaration-submode-face
    :front "styles: \\[ `"
    :front-offset (end-of-line 1)
    :back-offset (end-of-line 1)
    :back "` \\]")))

result

[iambumblehead]

from the buffer rendering this file, if I call M-x web-mode-set-content-type to "css" this specific area gets nice syntax highlighting, so I believe web-mode is not detecting this expression correctly.

It would be very nice if web-mode included something could be engaged as web-mode-css or web-mode-js in order enable web-mode and specify the engine at the same time

[iambumblehead]

Adjustments shown in the diff attached here make it possible to apply web-mode css style to Vue3 styles

```diff diff --git a/web-mode.el b/web-mode.el index 03be12e..0f08d29 100644 --- a/web-mode.el +++ b/web-mode.el @@ -858,6 +858,8 @@ Must be used in conjunction with web-mode-enable-block-face." (defvar web-mode-dom-regexp "<\\(/?>\\|/?[[:alpha:]][[:alnum:].:_-]*\\|!--\\|!\\[CDATA\\[\\|!doctype\\|!DOCTYPE\\|\?xml\\)") +(defvar vue-mode-dom-regexp "\\(\\[ `\\|` \\]\\)") + (defvar web-mode-whitespaces-regexp "^[ \t]\\{2,\\}$\\| \t\\|\t \\|[ \t]+$\\|^[ \n\t]+\\'\\|^[ \t]?[\n]\\{2,\\}" "Regular expression for whitespaces.") @@ -5201,10 +5203,24 @@ Also return non-nil if it is the command `self-insert-command' is remapped to." (defun web-mode-scan-elements (reg-beg reg-end) (save-excursion - (let (part-beg part-end flags limit close-expr props tname tbeg tend element-content-type (regexp web-mode-dom-regexp) part-close-tag char) + (let (part-beg part-end flags limit close-expr props tname tbeg tend + element-content-type (regexp-vue vue-mode-dom-regexp) + (regexp web-mode-dom-regexp) part-close-tag char) ;;(message "scan-elements: reg-beg(%S) reg-end(%S)" reg-beg reg-end) (goto-char reg-beg) + (while (web-mode-dom-rsf regexp-vue reg-end) + (setq tname (downcase (match-string-no-properties 1))) + (when (string-match-p "\\[ `" tname) + (setq element-content-type "css") + (setq part-beg (point))) + (when (string-match-p "` \\]" tname) + (setq part-end (point))) + (when (and part-beg part-end) + (put-text-property + part-beg part-end 'part-side + (intern element-content-type web-mode-obarray)))) + (goto-char reg-beg) (while (web-mode-dom-rsf regexp reg-end) ;;(message "%S: %S (%S %S)" (point) (match-string-no-properties 0) reg-beg reg-end) @@ -9363,7 +9379,7 @@ Also return non-nil if it is the command `self-insert-command' is remapped to." ((not (setq beg (web-mode-markup-indentation-origin pos jsx-depth))) (setq offset 0)) ((null (setq ret (web-mode-element-is-opened beg pos))) - (setq offset (web-mode-indentation-at-pos beg))) + (setq offset (+ (web-mode-indentation-at-pos beg) (if (= beg 1) 4 0)))) ((eq ret t) (setq offset (+ (web-mode-indentation-at-pos beg) web-mode-markup-indent-offset))) ```

this mmm-mode configuration captures and sends the open and close areas into web-mode [ ` ` ]

(mmm-add-classes
 '((js-vue-css
    :submode web-mode
    :face mmm-declaration-submode-face
    :front "styles: \\[ `"
    :front-offset (end-of-line -3)
    :back "` \\]"
    :back-offset (end-of-line)
    )))

(mmm-add-mode-ext-class 'js2-mode nil 'js-vue-css)

relates to https://github.com/purcell/mmm-mode/issues/125

[iambumblehead]

I want to say that web-mode is an amazing elisp file and thank you for creating and sharing it.

[iambumblehead]

Searching for a way to unit-test the solution above surfaced this link https://zck.org/testing-buffer-modifying-emacs-code-again. It would be awesome if web-mode had a CI pipeline and a few unit-tests that honed in on areas like the one added to the diff further up.

Also, it would be awesome if web-mode exposed an interface to engage specific modes in specific areas from mmm-mode. The area in the diff is observably faster than the regexp-match loop following it and so areas defining their own syntax for web-mode could be handled in a faster way. Areas that processed in the slower loop are sometimes not syntax-highlighted when initially opening a file in emacs and updating this area might fix a few small issues.

[iambumblehead]

Also, it would be awesome if web-mode could be configured like mmm-mode, so that the "front" and "back" regular expressions could be defined by the user for certain content-types. If this feature were supported web-mode content-types could be applied to any region defined by the user-configured front and back values

[fxbois]

Hello, web-mode is not ment to work with mmm-mode. It is an autonomous mode.