Styn NPM | npm.io

Usage

Basic

import { styn } from "styn";

const { selector, css } = styn({
  backgroundColor: "red",
  "&:hover": {
    backgroundColor: "blue",
  },
});

Outputs to:

selector: '.styn4b5pb' (generated class name)

css:

.styn4b5pb {
  background-color: red;
}
.styn4b5pb:hover {
  background-color: blue;
}

Opt-out auto generated class name

import { styn } from "styn";

const { selector, css } = styn(
  {
    backgroundColor: "red",
    "&:hover": {
      backgroundColor: "blue",
    },
  },
  {
    selector: ".box",
  }
);

.box {
  background-color: red;
}
.box:hover {
  background-color: blue;
}

Plugins

styn accepts plugins that interact with the styn tree, here are an example of a plugin that accept a new truncate property that converts to three new properties (white-space, overflow and text-overflow)

Note: "styn tree" is a very, very, very short version of an AST. It may not be the best option if you want to work with a full AST.

import { styn, StynPlugin } from "styn";

const truncate: StynPlugin = (tree, walk) => {
  return walk(tree, (rule) => {
    if (rule.declarations) {
      for (const property in rule.declarations) {
        if (property === "truncate") {
          delete rule.declarations.truncate;
          rule.declarations.whiteSpace = "nowrap";
          rule.declarations.overflow = "hidden";
          rule.declarations.textOverflow = "ellipsis";
        }
      }
    }
  });
};

const { css } = styn(
  {
    width: "350px",
    padding: "20px",
    truncate: true,
  },
  {
    plugins: [truncate],
  }
);

css output

.styn4b5pb {
  width: 350px;
  padding: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Built-in plugins

styn comes with those built-in plugins

tokenizer

import { tokenizer } from "styn";

const plugins = [
  tokenizer({
    colors: {
      primary: "#123456",
    },
  }),
];

const { css } = styn({ color: "colors.primary" }, { plugins });

// css => `.styn4b5pb { color: #123456; }`