Indentation issues inside JavaScript template literals (html``, css``)

[aguynamedben]

I was pumped to see web-mode-enable-literal-interpolation in the latest release. I love web-mode and live by it. Thank you for your contributions to the Emacs community. 🙏

I think I have a feature request, unless I'm missing something about how indentation works.

In a JSX file, when I'm inside an Emotion template literal, indentation doesn't seem to be supported. Is that right? Also, any time I yank (paste) into the file, reindentaion happens in other parts of the file, resulting in incorrect indentation inside the template literal. See video.

https://user-images.githubusercontent.com/107841/107329057-7ceb4780-6a64-11eb-93d5-113cef06fa0c.mp4

Relevant section of my Emacs config:

(use-package web-mode
  :ensure t
  :mode
  (("\\.erb\\'" . web-mode)
   ("\\.html\\'" . web-mode)
   ("\\.tpl\\'" . web-mode)
   ("\\.js\\'" . web-mode)
   ("\\.jsx\\'" . web-mode)
   ("\\.json\\'" . web-mode)
   ("\\.hbs\\'" . web-mode))
  :custom
  (web-mode-css-indent-offset 2)
  (web-mode-markup-indent-offset 2)
  (web-mode-code-indent-offset 2)
  (web-mode-enable-auto-quoting nil)
  (web-mode-enable-current-element-highlight t)
  (web-mode-enable-literal-interpolation t)

  ;; Indent inline JS/CSS within HTML
  ;; https://stackoverflow.com/a/36725155/3516664
  (web-mode-script-padding 2)
  (web-mode-style-padding 2)
  (web-mode-block-padding 2))