Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mrgaogang/parse-jsx-to-css
Parse react/vue className to less/css/sass files
https://github.com/mrgaogang/parse-jsx-to-css
css less parser react scss vue
Last synced: 2 months ago
JSON representation
Parse react/vue className to less/css/sass files
- Host: GitHub
- URL: https://github.com/mrgaogang/parse-jsx-to-css
- Owner: MrGaoGang
- Created: 2021-02-28T05:20:03.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-03-22T06:50:59.000Z (10 months ago)
- Last Synced: 2024-10-31T13:28:26.689Z (3 months ago)
- Topics: css, less, parser, react, scss, vue
- Language: TypeScript
- Homepage:
- Size: 57.6 KB
- Stars: 9
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# parse-jsx-to-css
Parse the `class/className` in the `react/vue` file, and automatically generate the `less/sass/css` file.
[中文介绍](https://mrgaogang.github.io/other/parse-to-css.html)
## Usage
- [online](https://mrgaogang.github.io/parse-jsx-to-css-plugins/)
- [vscode plugins](https://marketplace.visualstudio.com/items?itemName=mrgaogang.parse-to-css-vscode-plugin)
## Feature
- [x] support `react` `className` to `less/css/sass`
- [x] support `vue` `class` to `less/css/sass`
- [x] support one file muti return method return `
`
- [ ] support `class/className` expression
## example
**React** code:
```js
import React, { PureComponent } from "react";
function LoginButton() {
return
;
}
class Demo extends PureComponent {
render() {
return (
);
}
}
export default Demo;
```
**generate less/sass code:**
```less
.login-button {
}
.login-container {
&--user-name {
}
&--password {
}
}
```
**css code**
```css
.login-button {
}
.login-container {
}
.login-container .login-container--user-name {
}
.login-container .login-container--password {
}
```
## Install
```
npm install parse-jsx-to-css
```
## Config
| option | type | required | default | desc |
| ------------- | --------------------- | -------- | -------------------- | ---------------------------------------------------------------------------------------------------- |
| input | string | true | default is file path | if `transformType` is `code`,`input` must be `your code`, otherwise `input` must be `your file path` |
| callback | function | false | (res)=>{} | the parsed and formatted code |
| transformType | `file or code` | false | `file` | `input` type |
| language | `react or vue` | false | `react` | |
| outType | `less or css or sass` | false | `less` | the file save type, or code format type |
| outPath | string | false | `./` | the output path relative to the `input` file, only use in `transformType:file` |