Stitchtail NPM

🧐 installation

# npm
npm install stitchtail

#yarn
yarn add stitchtail

Using tailwind and its intellisense? Try out the intellisense with stitchtails by simply adding this to your visual studio code settings.json.

"tailwindCSS.experimental.classRegex": [
	["stitchtail(?:<.+>)?\\({([\\s\\S]*)}\\)", "(?<!\\[{[^}]*?)[\"'`]([^\"'`]*)[\"'`]"]
]

😎 examples

Code:

src/components/Component.tsx

import React from "react";
import stitchtail from "stitchtail";

interface Props {
  colors: "red" | "green" | "blue",
  disabled?: boolean,
  children?: React.ReactNode
};

const classes = stitchtail<Props>({
  base: "rounded-sm p-4 text-white text-center",

  variants: {
    colors: {
      red: "bg-red-500",
      green: "bg-green-500",
      blue: "bg-blue-500"
    },
    disabled: "cursor-not-allowed"
  },

  compounds: [
    [{ colors: "red", disabled: true }, "bg-pink-500"]
  ]
});

const Component = (props: Props) => {
  return (
    <div className={classes(props)}>
      {props.children}
    </div>
  );
};

export default Component;

src/index.tsx

import React from "react";
import ReactDOM from "react-dom";

// Components
import Component from "./components/Component";

ReactDOM.render(
  <Component colors="red" disabled>
    Content
  </Component>,
  document.getElementById("root")
);

Result:

result

Code:

src/components/Component.js

import React from "react";
import stitchtail from "stitchtail";

const classes = stitchtail({
  base: "rounded-sm p-4 text-white text-center",

  variants: {
    colors: {
      red: "bg-red-500",
      green: "bg-green-500",
      blue: "bg-blue-500"
    },
    disabled: "cursor-not-allowed"
  },

  compounds: [
    [{ colors: "blue", disabled: true }, "bg-purple-500"]
  ]
});

const Component = (props) => {
  const { children, ...rest } = props;

  return (
    <div className={classes(rest)}>
      {props.children}
    </div>
  );
};

export default Component;

src/index.js

import React from "react";
import ReactDOM from "react-dom";

// Components
import Component from "./components/Component";

ReactDOM.render(
  <Component colors="blue" disabled>
    Content
  </Component>,
  document.getElementById("root")
);

Result:

result

It was intended to be used with tailwind, but you could also use your own classes or classes generated from some other library.

🥳 thanks

stitches.dev for inspiration on syntax and the whole concept in general.
typescript community for help with generics and other issues encountered whilst making types.