parse-jsx-to-css v1.0.6

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