MrGaoGang / parse-jsx-to-css

Parse react/vue className to less/css/sass files

parse-jsx-to-css

Parse the class/className in the react/vue file, and automatically generate the less/sass/css file.

中文介绍

Usage

• online
• vscode plugins

Feature

• support react className to less/css/sass
• support vue class to less/css/sass
• support one file muti return method return <div></div>
• support class/className expression

example

React code:

import React, { PureComponent } from "react";
function LoginButton() {
  return <div className="login-button"></div>;
}
class Demo extends PureComponent {
  render() {
    return (
      <div className="login-container">
        <div className="login-container--user-name"></div>
        <div className="login-container--password"></div>
      </div>
    );
  }
}

export default Demo;

generate less/sass code:

.login-button {
}

.login-container {
  &--user-name {
  }
  &--password {
  }
}

css code

.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