cli-to-module

introduction

there are a lot of library out there, helping to make your react component scoped; and somehow it is not a developer friendly; you may have to write css like env; you may feel not at ease; this cli is not intend to introduce you to new lib, yet this cli will help you, just one click convert your normal styled component to module styled component, or another one click convert module style back to normal styled component; no more learning curve, no more css like component;

Note*

this cli is a sub-set of cli-uv; if you want to include all the features, pls visit; https://www.npmjs.com/package/cli-uv or https://github.com/UVcoder/cli-uv

install

npm i -g cli-to-module

Command

uvm toModule <filePath> [option]

| short | full | default | description if true | | ----- | ------------------------- | ------- | -------------------------------------------------- | | -n | - - notIncludeStyle | false | update only component style, not touching scss/css | | -a | - - absolute | false | ref to absolute path | | -r | - - reverse | false | reverse module styled component to normal style | | -s | - - styleName | uvStyle | style variable, default uvStyle |

example:

uvm toModule "d:/code projects/cli/cli-uv/src/components/product/guest-product-component.jsx" -a

relative path to src

uvm toModule components/product/guest-product-component.jsx

i like absolute path as i can drag & drop file; (don't have to write that long path); absolute path should be true by default, yet i first introduce relative path in earlier version, so ...

change style variable from uvStyle to vvv

uvm toModule components/product/guest-product-component.jsx -s vvv

this will change import uvStyle from "./my-style-path.module.scss" to import vvv from "./my-style-path.module.scss" note* if you change 'uvStyle', when reverse back to normal style, you must provide your changed style variable name;

before conversion

react component

import React from "react";
import "./module-styles.module.scss";

const GuestProduct = () => {
  return (
    <div
      className={
        `
      flex ${last + time}
      flex-column 
      flex-center ${title}${other}
      guest-product
      title
      txt-info ${item - fast}
      flex-start
      12invalid ${time} 
      ${other}
      21-other
      32-what-else
      ` +
        variable +
        `flex title` +
        "i am title" +
        "also title"
      }
    >
      <div className=" title ">Pay Nothing & Have it ALL</div>
      <div className=" txt-info ">suitable from small to Large business </div>

      <div className=" product ">
        {ProductInfo.map(pro => (
          <Card key={pro.id} title={pro.title} icon={pro.icon} content={pro.content} />
        ))}
      </div>
      <div className=" txt-info txt-info-sm ">Integrated with Role Base System Management</div>
    </div>
  );
};

const Card = ({ title, icon, content }) => {
  return (
    <Box className=" card " bgcolor="background.paper" boxShadow={3}>
      <div className=" icon ">{icon}</div>
      <div className=" title-card ">{title.toUpperCase()}</div>
      <div className=" product-content ">{content}</div>
    </Box>
  );
};

export default GuestProduct;

style

@import "../../../../uv-commons/styles/variable.scss";
.guest-product {
  width: 80%;
}
.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-radius: 16px;
  width: 215px;
  height: 270px;
  padding: 14px;
  text-align: center;
}
.title {
  color: $col-yellow;
  font-size: 36px;
  text-align: center;
}
.icon {
  font-size: 4.2rem;
}
.title-card {
  text-transform: uppercase;
  color: $col-yellow;
  font-size: 24px;
  text-align: center;
  margin-bottom: 6px;
}
.txt-info {
  // font-size: 11px;
  text-align: center;
}
.product {
  display: flex;
  width: 720px;
  justify-content: space-around;
  margin: 17px 0;
}
@media (max-width: 600px) {
  .product {
    flex-direction: column;
    align-items: center;
  }
  .guest-product {
    justify-content: flex-start;
  }
  .card {
    margin: 12px 0;
  }
  .txt-info-sm {
    margin-bottom: 24px;
  }
}
@media (max-width: 1070px) {
  .txt-info-sm {
    margin-bottom: 24px;
  }
}
.-other {
  color: red;
}

after conversion

react component

any class name which is not found in scss/css file will not be converted to ${uvStyle.name}; in this way, you can have component scoped and also be able to use global style;

flex flex-column flex-center flex-start 12invalid 21-other 32-what-else i am also product-content remain the same, as it is not listed in css file;

import React from "react";
import uvStyle from "./module-styles.module.scss";

const GuestProduct = () => {
  return (
    <div
      className={
        `${last + time} ${title} ${other} ${item - fast} ${time} ${other} ${uvStyle.guestProduct} ${uvStyle.title} ${
          uvStyle.txtInfo
        }  flex  flex-column  flex-center   flex-start 12invalid   21-other 32-what-else` +
        variable +
        ` ${uvStyle.title} flex` +
        `${uvStyle.title} i am` +
        `${uvStyle.title} also`
      }
    >
      <div className={`${uvStyle.title} `}>Pay Nothing & Have it ALL</div>
      <div className={`${uvStyle.txtInfo} `}>suitable from small to Large business </div>

      <div className={`${uvStyle.product} `}>
        {ProductInfo.map(pro => (
          <Card key={pro.id} title={pro.title} icon={pro.icon} content={pro.content} />
        ))}
      </div>
      <div className={`${uvStyle.txtInfo} ${uvStyle.txtInfoSm} `}>Integrated with Role Base System Management</div>
    </div>
  );
};
const Card = ({ title, icon, content }) => {
  return (
    <Box className={`${uvStyle.card} `} bgcolor="background.paper" boxShadow={3}>
      <div className={`${uvStyle.icon} `}>{icon}</div>
      <div className={`${uvStyle.titleCard} `}>{title.toUpperCase()}</div>
      <div className={` product-content`}>{content}</div>
    </Box>
  );
};
// GuestProduct.propTypes = {
// }

export default GuestProduct;

style

pls noted that as we convert your class name to camel case, any class name with preceding or tailing "-" will be omitted; -my-new-style will become `myNewStyle'

.guestProduct {
  width: 80%;
}
.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-radius: 16px;
  width: 215px;
  height: 270px;
  padding: 14px;
  text-align: center;
}
.title {
  color: $col-yellow;
  font-size: 36px;
  text-align: center;
}
.icon {
  font-size: 4.2rem;
}
.titleCard {
  text-transform: uppercase;
  color: $col-yellow;
  font-size: 24px;
  text-align: center;
  margin-bottom: 6px;
}
.txtInfo {
  // font-size: 11px;
  text-align: center;
}
.product {
  display: flex;
  width: 720px;
  justify-content: space-around;
  margin: 17px 0;
}
@media (max-width: 600px) {
  .product {
    flex-direction: column;
    align-items: center;
  }
  .guestProduct {
    justify-content: flex-start;
  }
  .card {
    margin: 12px 0;
  }
  .txtInfoSm {
    margin-bottom: 24px;
  }
}
@media (max-width: 1070px) {
  .txtInfoSm {
    margin-bottom: 24px;
  }
}
.other {
  color: red;
}

reverse your module style back to normal style

example:

uvm toModule "d:/code projects/cli/cli-uv/src/components/product/guest-product-component.jsx" -a -r

react component

import React from "react";
import "./module-styles.module.scss";

const GuestProduct = () => {
  return (
    <div
      className={
        `${last + time} ${title} ${other} ${item -
          fast} ${time} ${other} guestProduct title txtInfo  flex  flex-column  flex-center   flex-start 12invalid   21-other 32-what-else` +
        variable +
        ` title flex` +
        `title i am` +
        `title also`
      }
    >
      <div className={`title `}>Pay Nothing & Have it ALL</div>
      <div className={`txtInfo `}>suitable from small to Large business </div>

      <div className={`product `}>
        {ProductInfo.map(pro => (
          <Card key={pro.id} title={pro.title} icon={pro.icon} content={pro.content} />
        ))}
      </div>
      <div className={`txtInfo txtInfoSm `}>Integrated with Role Base System Management</div>
    </div>
  );
};

const Card = ({ title, icon, content }) => {
  return (
    <Box className={`card `} bgcolor="background.paper" boxShadow={3}>
      <div className={`icon `}>{icon}</div>
      <div className={`titleCard `}>{title.toUpperCase()}</div>
      <div className={` product-content`}>{content}</div>
    </Box>
  );
};

export default GuestProduct;

style file

remain camel case