Typescript with CSS in JS (styled-components, Emotion), JSX and graphql highlight and major mode for Emacs Doom with `mmm-mode` for *.tsx

config.el

;; Assign typescript-mode to .tsx files
(add-to-list 'auto-mode-alist '("\\.tsx\\'" . typescript-mode))

(require 'mmm-mode)
(setq mmm-global-mode t)
(setq mmm-submode-decoration-level 0) ;; Turn off background highlight

;; Add css mode for CSS in JS blocks
(mmm-add-classes
  '((mmm-styled-mode
    :submode css-mode
    :front "\\(styled\\|css\\)[.()<>[:alnum:]]?+`"
    :back "`;")))

(mmm-add-mode-ext-class 'typescript-mode nil 'mmm-styled-mode)

;; Add submodule for graphql blocks
(mmm-add-classes
  '((mmm-graphql-mode
    :submode graphql-mode
    :front "gr?a?p?h?ql`"
    :back "`;")))

(mmm-add-mode-ext-class 'typescript-mode nil 'mmm-graphql-mode)

;; Add JSX submodule, because typescript-mode is not that great at it
(mmm-add-classes
  '((mmm-jsx-mode
     :front "\\(return\s\\|n\s\\|(\n\s*\\)<"
     :front-offset -1
     :back ">\n?\s*)"
     :back-offset 1
     :submode web-mode)))

(mmm-add-mode-ext-class 'typescript-mode nil 'mmm-jsx-mode)

(defun mmm-reapply ()
  (mmm-mode)
  (mmm-mode))

(add-hook 'after-save-hook
          (lambda ()
            (when (string-match-p "\\.tsx?" buffer-file-name)
              (mmm-reapply))))

packages.el

;; Packages used in config.el for regular emacs you'll need `use-package` I guess
(package! mmm-mode)
(package! typescript-mode)
(package! web-mode)
(package! graphql-mode)

Updated handling of JSX oneliners.

(
 :front "\\(return\s\\|n\s\\|(\n\s*\\)<"
)

I have altered this to use with rjsx-mode and it gave my funky results, just so you know.

@zerinoid How did you manage? Although it lacks typescript support which currently I need, would be really interested! Care to share? :)

Thanks so much @rangeoshun! Works like a charm ✨

I'm trying this with js-mode but can't that initial 2 space offset.

I get this

const RepositoryNameQuery = graphql`
query AppRepositoryNameQuery {
  repository(owner: "facebook", name: "relay") {
    name
  }
}
`;

instead of this

const RepositoryNameQuery = graphql`
  query AppRepositoryNameQuery {
    repository(owner: "facebook", name: "relay") {
      name
    }
  }
`;

@vmsp, try installing prettier and prettier-mode, I use that for all my formatting stuff.

Thanks for your work on this. I think the mmm-jsx-mode is not taking care of inline javascript for components...i.e. this could happen:

<Table {...getTableProps()} className={className}>
      <TableHead>
        {headerGroups.map((headerGroup) => (
          <TableRow {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((header) =>
              header.render('Header', { key: header.getHeaderProps().key }),
            )}
          </TableRow>
        ))} <-- the :back regex will match here
...
</Table>

Trying to work it out as we speak.

This is what worked for me

(mmm-add-classes
   '((mmm-jsx-mode
      :include-front t
      :front "<\\([a-zA-Z0-9_-]+\\)"
      :include-back t
      :back "~1>"
      :save-matches t
      :submode web-mode)))

EDIT: That's what I thought...for some reason it breaks with mmm-parse-buffer - it does work if I use mmm-mode with mmm-parse-region though

This one is better, still no perfect though:

(mmm-add-classes
   '((mmm-jsx-mode
      :include-front t
      :front "\\(return\s\\|=>\s\\|\n\s\\|\\s(\n\s*\\)<\\([a-zA-Z0-9_-]+\\)"
      :include-back t
      :back "~2>"
      :save-matches t
      :submode web-mode)))

Also, it does not match tags ending with />

@rangeoshun, I'm using RJSX with this config and it looks not that awful and indenting works. But auto suggestion is not working with it.
Do you have any recommendations for this config to putting up auto suggestion list buffer? I'm using company and tide.

@peter-wd-1 For some reason it stopped working a while back. I'll look into it!

@arichiardi Am I assuming correctly that this will make every tag a separate little sub mode?

;; use css in js with polymode
(use-package! polymode
   :ensure t
   :after rjsx-mode
   :config
   (define-hostmode poly-rjsx-hostmode nil
     "RJSX hostmode."
     :mode 'rjsx-mode)
   (define-innermode poly-rjsx-cssinjs-innermode nil
     :mode 'css-mode
     :head-matcher "\\(styled\\|css\\)[.()<>[:alnum:]]?+`"
     :tail-matcher "\`"
     :head-mode 'host
     :tail-mode 'host)
   (define-polymode poly-rjsx-mode
     :hostmode 'poly-rjsx-hostmode
     :innermodes '(poly-rjsx-cssinjs-innermode))
   (add-to-list 'auto-mode-alist '("\\.js?\\'" . poly-rjsx-mode)))

Now I'm using this instead
Not a perfect solution but I just excepted there isn't such a reliable solution with RSJX mode yet
Thank you!

Hello, I'm trying to use this previous snippet with typescript-mode, but it really just doesn't work right for me. It does change the mode to css-mode when I enter between the two backticks, but syntax highlight and code completion still is from typescript