emacs 29 and newer includes native support for treesit, meaning a lot of features of this minor mode are no longer needed. users of emacs 29 are encouraged to try the CSS-in-JS treesit grammar and emacs minor mode for emacs 29. users of emacs 28, read on!
Emacs minor mode to enable a better development experience for (some) CSS-in-JS. If your webapp uses:
then this might be of use to you.
above: typescript-mode, styled-components, and company-mode with company-quickhelp-mode
- Dependencies: make sure you have
mmm-modeandscss-modeinstalled already. They're both available in MELPA and probably elsewhere too. - Install: download this package and place it inside a directory on your
load-path - Require:
(require 'css-in-js) - Enable:
(css-in-js-mode t)
useful variables are members of the css-in-js-mode group and can be viewed and modified with the command M-x customize-group [RET] css-in-js-mode [RET].
css-in-js-mode also uses css-indent-offset during indentation so be sure to set that to an acceptable value. You might also be interested in playing around with mmm-submode-decoration-sublevel.
plenty. indentation is kinda janky right now, there are probably some enhancements to be made around LSP, and it doesn't support a whole bunch of popular css-in-js libraries. I've also only done minimal testing with web-mode and js-mode. PRs welcome for any and all bugs and feature-requests!