Skip to content

Tassel is an Ultra-lightweight CSS-In-JS library ๐ŸŽ“.

License

Notifications You must be signed in to change notification settings

JakeCooper/Tassel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

98 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Tassel


Gzip Size NPM Version License

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

Tassel

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

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.

About

Tassel is an Ultra-lightweight CSS-In-JS library ๐ŸŽ“.

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published