tassel

Tassel is an ultra-lightweight CSS-In-JS library inspired by cssmodules. Write styles, get unique classes which describe your components. Tassel works wherever there are classes: React, Vue or even vanillaJS.

• 📦 Zero dependencies
• 🔧 Zero configuration
• 🔥 < 1KB GZIPPED.

Install

Through NPM: npm install --save tassel

Through Yarn: yarn add tassel

Getting Started

Note: See the examples folder for framework specific implementations

Write This

Landing.styles.js

import Tassel from "tassel";
 
const $primary = "papayawhip";
const $accent = "palevioletred";
 
export default Tassel({
  text: {
    fontSize: "1.5em",
    textAlign: "center",
    color: $accent
  },
  container: {
    padding: "4em",
    background: $primary
  }
});

Landing.jsx

import React from "react";
import ReactDOM from "react-dom";
 
import styles from "./Landing.styles.js";
 
class Landing extends React.Component {
  render() {
    return (
      <div className={styles.container}>
        <div className={styles.text}>Hello, my style name is {styles.text}</div>
      </div>
    );
  }
}
 
const rootElement = document.getElementById("root");
ReactDOM.render(<Landing />, rootElement);

Get This

Classnames are automatically generated in the format {componentname}_{stylename} so you'll always know where a style came from. No more hunting down styles in your IDE.

Try it on CodeSandbox

React

Vue

Contributing

Please open an issue and then raise a PR related to that issue. I'll try and respond within 24h.

Liscense

Tassel is licensed under a MIT License.