style2class-extensions

Motivation

If you are developing a web application using React (JSX) and have adopted the CSS modules approach based on the babel-plugin-react-css-modules plugin.

One day, you may want to switch back to the native CSS modules approach.

It means you want to convert <div styleName="container"/> to AA <div className={styles.container}/>.

More case like this:

    <div styleName="container"/> ==> <div className={styles.container}/>
    
    <div styleName="container show"/> ==> <div className={`${styles.container} ${styles.show}`}/>

    <div styleName={true ? "show": "hide"}/> ==> <div className={`true ? ${styles.show}:${styles.hide}`}/>

    <div styleName="card-1"/> ==> <div className={styles["card-1"]}/>

    // use <classnames> package:https://www.npmjs.com/package/classnames
    <div styleName={classnames("container",{show:true})}/> ==> <div styleName={classnames(styles.container,{[style["show"]]:true})}/>

    ...

The extension will help you to make the conversion quickly !!

Usage

method 1

1. Choose a tsx or jsx file;
2. Open the Command Palette(Ctrl+Shift+P);
3. Run the style2class command；

method 2

1. Choose a tsx or jsx file;
2. Click style2class menu item from editor/context menu;