/vscode-plugin-jsx-to-scss

a vscode plugin which can help you generate style from jsx template

Primary LanguageJavaScript

jsx-to-scss README

This is a jsx-to-scss plugin which can help you extract scss from jsx template.

Steps

  • 1.Select the JSX you want to extract class names
  • 2.Use Command/Ctrl + E for one click extracting.
  • 3.Paste the SCSS structure to your *.scss file. tutorial

Here is a more specific example

1.Copy the JSX element to your clipboard.
<div className="container">
  <h1>Video Games</h1>
  <div className="wrapper">
    <ul className="game-list">
      <li className="game-item">Super Mario</li>
    </ul>
  </div>
  <footer className="notice">Games make life fantastic</footer>
</div>

CSS module is also supported

<div className={styles.fruitList}>
  <div className={styles.fruitItem}></div>
</div>
2.Press Command/Ctrl + E, and paste your clipboard content to your scss file.
.container {
  .wrapper {
    .game-list {
      .game-item {

      }
    }
  }
  .notice {

  }
}

.fruitList {
  .fruitItem {

  }
}

known issues

  • Not filter the repeated class names currently

report issues

If you have any questions, feel free to contact me.