a tree-sitter grammar based on the existing CSS tree-sitter grammar which adds support for Javascript/Typescript template-string interpolation tokens. the intended usage is in IDEs where source code files are parsed using multiple tree-sitter languages at the same time:
const height = '16px'; /* javascript */
const MyComponent = styled.div`
display: inline-block; /* CSS */
height: ${height}; /* both! */
background-color: tomato;
`;
this should provide the basic functionality required for IDEs to support features like indentation, syntax highlighting, and code-completion hinting for CSS-in-JS using tree-sitter:
shared libraries for all supported OS+CPU platforms are automatically built for you. Freshest copies of these shared libraries can be found in the Github release tagged latest.
| OS | Arch | Status |
|---|---|---|
| Linux | x86_64 | builds; tested |
| OSX | x86_64 | builds; untested |
| OSX | arm64 | builds; tested |
| Windows | x86_64 | builds; untested |
- clone this repo
- run
npm installto install dependencies - run
npm run buildto build a tree-sitter shared library appropriate for your platform. the shared library will be written to a platform-specific directory; check tree-sitter's documentation to see where your .so / .dll is.
emacs users should note that this repository is not currently compatible with the language-builder repo at https://github.com/casouri/tree-sitter-module/ . (the package.json in this repo has an npm postinstall step which clones the base CSS grammar repo)
css-in-js-mode is an emacs minor mode designed to bring support for (several flavors of) CSS-in-JS to the treesit-aware Javascript/Typescript/JSX/TSX major modes in emacs version 29.0 and newer. syntax highlighting, indentation, and completion-at-point are all supported.
- a version of emacs compiled with treesit support
- download
css-in-js-mode.eland put it in a directory listed in yourload-path - load the file:
(require 'css-in-js-mode)
these steps can also be done using straight.el:
(straight-use-package '(css-in-js-mode :type git :host github :repo "orzechowskid/tree-sitter-css-in-js"))or using straight.el plus use-package:
(use-package css-in-js-mode :straight '(css-in-js-mode :type git :host github :repo "orzechowskid/tree-sitter-css-in-js"))
- fetch the tree-sitter shared library appropriate for your OS+CPU if you don't already have it on disk:
(css-in-js-mode-fetch-shared-library)(and pass it an argument oftto force a re-download of the latest released version if you do already have it on disk) - visit a javascript/typescript file and enable the Typescript[TSX] major mode:
(tsx-ts-mode) - enable this minor-mode:
(css-in-js-mode)
useful variables are members of the css-in-js-mode customization group and can be viewed and modified with the command M-x customize-group [RET] css-in-js-mode [RET].
this minor mode also uses css-indent-offset to control the amount of whitespace applied to each indent step so be sure to set that to an acceptable value too.
please first check to see that your bug is not present when parsing a file using the base CSS grammar (from which the CSS-in-JS grammar derives). if it is present there too then you'll want to file an issue over at https://github.com/tree-sitter/tree-sitter-css .
please first check to see that your bug is not present in the base tsx-ts-mode or css-ts-mode (whichever one is applicable). if it is present there too then you'll want to file an issue against emacs by using M-x report-emacs-bug (after reading through the manual at M-x info-emacs-bug first).
src/scanner.c is © 2018 Max Brunsfeld, licensed under the MIT License. Original source can be found at https://github.com/tree-sitter/tree-sitter-css . all other code is licensed under the MIT License. See LICENSE in the top level of this repository.