{"id":19322930,"url":"https://github.com/mrgaogang/parse-jsx-to-css","last_synced_at":"2025-04-22T19:31:54.508Z","repository":{"id":57319417,"uuid":"343027201","full_name":"MrGaoGang/parse-jsx-to-css","owner":"MrGaoGang","description":"Parse react/vue className to less/css/sass files","archived":false,"fork":false,"pushed_at":"2024-03-22T06:50:59.000Z","size":59,"stargazers_count":9,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-19T04:13:19.613Z","etag":null,"topics":["css","less","parser","react","scss","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MrGaoGang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-28T05:20:03.000Z","updated_at":"2024-03-22T06:51:04.000Z","dependencies_parsed_at":"2022-08-25T20:41:12.212Z","dependency_job_id":null,"html_url":"https://github.com/MrGaoGang/parse-jsx-to-css","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrGaoGang%2Fparse-jsx-to-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrGaoGang%2Fparse-jsx-to-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrGaoGang%2Fparse-jsx-to-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrGaoGang%2Fparse-jsx-to-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MrGaoGang","download_url":"https://codeload.github.com/MrGaoGang/parse-jsx-to-css/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250308459,"owners_count":21409274,"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","less","parser","react","scss","vue"],"created_at":"2024-11-10T01:43:07.535Z","updated_at":"2025-04-22T19:31:54.100Z","avatar_url":"https://github.com/MrGaoGang.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# parse-jsx-to-css\n\nParse the `class/className` in the `react/vue` file, and automatically generate the `less/sass/css` file.\n\n[中文介绍](https://mrgaogang.github.io/other/parse-to-css.html)\n\n## Usage\n\n- [online](https://mrgaogang.github.io/parse-jsx-to-css-plugins/)\n- [vscode plugins](https://marketplace.visualstudio.com/items?itemName=mrgaogang.parse-to-css-vscode-plugin)\n\n\n## Feature\n\n- [x] support `react` `className` to `less/css/sass`\n- [x] support `vue` `class` to `less/css/sass`\n- [x] support one file muti return method return `\u003cdiv\u003e\u003c/div\u003e`\n- [ ] support `class/className` expression\n\n## example\n\n**React** code:\n\n```js\nimport React, { PureComponent } from \"react\";\nfunction LoginButton() {\n  return \u003cdiv className=\"login-button\"\u003e\u003c/div\u003e;\n}\nclass Demo extends PureComponent {\n  render() {\n    return (\n      \u003cdiv className=\"login-container\"\u003e\n        \u003cdiv className=\"login-container--user-name\"\u003e\u003c/div\u003e\n        \u003cdiv className=\"login-container--password\"\u003e\u003c/div\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default Demo;\n```\n\n**generate less/sass code:**\n\n```less\n.login-button {\n}\n\n.login-container {\n  \u0026--user-name {\n  }\n  \u0026--password {\n  }\n}\n```\n\n**css code**\n\n```css\n.login-button {\n}\n\n.login-container {\n}\n.login-container .login-container--user-name {\n}\n\n.login-container .login-container--password {\n}\n```\n\n## Install\n\n```\nnpm install parse-jsx-to-css\n```\n\n## Config\n\n| option        | type                  | required | default              | desc                                                                                                 |\n| ------------- | --------------------- | -------- | -------------------- | ---------------------------------------------------------------------------------------------------- |\n| input         | string                | true     | default is file path | if `transformType` is `code`,`input` must be `your code`, otherwise `input` must be `your file path` |\n| callback      | function              | false    | (res)=\u003e{}            | the parsed and formatted code                                                                        |\n| transformType | `file or code`        | false    | `file`               | `input` type                                                                                         |\n| language      | `react or vue`        | false    | `react`              |                                                                                                      |\n| outType       | `less or css or sass` | false    | `less`               | the file save type, or code format type                                                              |\n| outPath       | string                | false    | `./`                 | the output path relative to the `input` file, only use in `transformType:file`                       |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrgaogang%2Fparse-jsx-to-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrgaogang%2Fparse-jsx-to-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrgaogang%2Fparse-jsx-to-css/lists"}