{"id":13490518,"url":"https://github.com/orzechowskid/tree-sitter-css-in-js","last_synced_at":"2025-03-28T06:31:28.258Z","repository":{"id":54466944,"uuid":"515372828","full_name":"orzechowskid/tree-sitter-css-in-js","owner":"orzechowskid","description":"tree-sitter grammar for CSS-in-JS","archived":false,"fork":false,"pushed_at":"2025-03-16T16:28:11.000Z","size":276,"stargazers_count":11,"open_issues_count":3,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-24T21:03:32.700Z","etag":null,"topics":["css","css-in-js","javascript","tree-sitter"],"latest_commit_sha":null,"homepage":"","language":"C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/orzechowskid.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-18T23:37:28.000Z","updated_at":"2025-03-16T16:28:15.000Z","dependencies_parsed_at":"2024-04-21T16:46:13.296Z","dependency_job_id":"a77c6bbb-bf15-4a6e-a1bf-de1ffba1d7ec","html_url":"https://github.com/orzechowskid/tree-sitter-css-in-js","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orzechowskid%2Ftree-sitter-css-in-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orzechowskid%2Ftree-sitter-css-in-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orzechowskid%2Ftree-sitter-css-in-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orzechowskid%2Ftree-sitter-css-in-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/orzechowskid","download_url":"https://codeload.github.com/orzechowskid/tree-sitter-css-in-js/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245984522,"owners_count":20704792,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-in-js","javascript","tree-sitter"],"created_at":"2024-07-31T19:00:47.919Z","updated_at":"2025-03-28T06:31:27.644Z","avatar_url":"https://github.com/orzechowskid.png","language":"C","funding_links":[],"categories":["C"],"sub_categories":[],"readme":"# tree-sitter-css-in-js\n\n## tree-sitter grammar\n\na [tree-sitter](https://tree-sitter.github.io/tree-sitter/) grammar based on [the existing CSS tree-sitter grammar](https://github.com/tree-sitter/tree-sitter-css) 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:\n\n```\nconst height = '16px';          /* javascript */\nconst MyComponent = styled.div`\n  display: inline-block;        /* CSS */\n  height: ${height};            /* both! */\n  background-color: tomato;\n`;\n```\n\nthis 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:\n\n![](https://repository-images.githubusercontent.com/515372828/a6f10257-e841-4553-9ccf-b7e6cd525b18)\n\n### Releases\n\nshared 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`.\n\n| OS      | Arch    | Status           |\n|---------|---------|------------------|\n| Linux   | x86\\_64 | builds; tested   |\n| OSX     | x86\\_64 | builds; untested |\n| OSX     | arm64   | builds; tested   |\n| Windows | x86\\_64 | builds; untested |\n\n### Local build instructions\n\n1. clone this repo\n2. run `npm install` to install dependencies\n3. run `npm run build` to 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](https://tree-sitter.github.io/tree-sitter/syntax-highlighting#per-user-configuration) to see where your .so / .dll is.\n\nemacs 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)\n\n## emacs minor mode\n\n`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.\n\n### Requirements\n\n- a version of emacs compiled with treesit support\n\n### Installation\n\n1. download `css-in-js-mode.el` and put it in a directory listed in your `load-path`\n1. load the file: `(require 'css-in-js-mode)`\n\n\u003e these steps can also be done using [straight.el](https://github.com/radian-software/straight.el):\n\u003e `(straight-use-package '(css-in-js-mode :type git :host github :repo \"orzechowskid/tree-sitter-css-in-js\"))`\n\u003e\n\u003e or using straight.el plus use-package:\n\u003e `(use-package css-in-js-mode\n\u003e   :straight '(css-in-js-mode :type git :host github :repo \"orzechowskid/tree-sitter-css-in-js\"))`\n\n### Usage\n\n1. 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 of `t` to force a re-download of the latest released version if you do already have it on disk)\n1. visit a javascript/typescript file and enable the Typescript[TSX] major mode: `(tsx-ts-mode)`\n1. enable this minor-mode: `(css-in-js-mode)`\n\n### Configuration\n\nuseful 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]`.\n\nthis 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.\n\n## Bugs\n\n### Grammar bugs\n\nplease 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 .\n\n### emacs minor-mode bugs\n\nplease 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).\n\n## License\n\nsrc/scanner.c is \u0026copy; 2018 Max Brunsfeld, licensed under the MIT License.  Original source can be found at https://github.com/tree-sitter/tree-sitter-css .\nall other code is licensed under the MIT License.  See LICENSE in the top level of this repository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forzechowskid%2Ftree-sitter-css-in-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Forzechowskid%2Ftree-sitter-css-in-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forzechowskid%2Ftree-sitter-css-in-js/lists"}