tassel
v1.0.0
Published
tassel is an ultra-lightweight CSS-In-JS library inspired by cssmodules.
Downloads
4
Readme
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.