Installation

npm i @vtechguys/vs

Usage

Following is example usage of vs with css-modules.

We will start by creating variants for a button. We recommend to create a separate file for variants styling like following.

button.vs.js

import { vs } from "@vtechguys/vs";
import styles from "./button.module.css";
 
export const button = vs(
// (1) variant config
{
  // (2) base styles all buttons must have
  base: styles.btn,
  // (3) variants of buttons
  variants: {
    // (4) color variants
    color: {
      // (5) values of color variants
      primary: styles["btn-color--primary"], // (6) styles applied on primary button
      secondary: styles["btn-color--secondary"]
    },
    size: {
      small: styles["btn-size--small"],
      medium: styles["btn-size--medium"]
    }
  }
});

vs takes a config argument using which it creates variant for the component-style.
Each component-style can have base styling which is applied by default.
Set of variants supported for this component-style.
In this example variants are color and size.
color variant can be of two types primary and secondary. Each type is mapped to several styles.
For color="primary" style applied on button item will be styles["btn-color--primary"].

Not that we have created component-style from variant config we can use it inside our component. Following is a example usage in React.js:

button.jsx

import clsx from "clsx";
import { button } from "./button/button.vs";
 
export default function Button() {
  // (1) returns array of class-names for given button variant props color="primary" size="medium"
  const classes = button({ color: "primary", size: "medium" });
  // (2) merging the classes
  const className = clsx(classes)
 
  return (
    <div>
      <button className={className}>
        aaa
      </button>
    </div>
  );
}

component-styles button imported from button.vs.js takes in values for variants and returns the mapped styles accordingly.
As it return bare bone styles these need to processed. In this example it uses css modules so returns array of class names which can can be cocatenated to generate cumulative styles.

For completion sake I'm putting button.module.css here; please note your CSS may vary but so you can skip this file.

button.module.css

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
 
.btn-color--default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
 
.btn-color--primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}
 
.btn-color--secondary {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #eea236;
}
 
.btn-size--small {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}
 
.btn-size--medium {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.3rem;
}

Introduction CSS in TS