TastyCSS

CSS-in-JS solution modules that include state-to-style bindings, SSR, and next-level developer experience.

Installation

# with npm
npm install tastycss

# with yarn
yarn add tastycss

Usage of Tasty API

Let's look at styled API:

import { tasty } from 'tastycss';

const Element = tasty({
  /** The tag name of the element. */
  as: 'span',
  /** Default styles of the element. */
  styles: {
    // tokens
    '@local-padding': ['2x', '1x'], // responsive styles
    '@text-color': 'rgba(255, 0, 0)',
    // styles
    padding: '@local-padding',
    color: {
      // the default color
      '': '#text',
      // the color if `blue` mod is specified
      blue: 'blue',
    }, // use color token
  },
  /** Default attributes (example) */
  role: 'article',
  /** The list of styles that can be provided by props */
  styleProps: ['align'],
});

Now you can use this element inside your React App:

export default function Component({ title, children }) {
  return (
    <>
      <Heading>{title}</Heading>
      <Element>{children}</Element>
    </>
  );
}

Extend base options

You can use tasty() function to extend styling of the existing component.

const CustomElement = tasty(Element, {
  /** Change tag name */
  as: 'input',
  /** Extend or rewrite styles */
  styles: {
    color: '#purple',
  },
  /** Add more default properties/attributes */
  role: 'article',
});

Documentation is work in progress.

Contributing

Please follow our contributing guidelines.

Authors

Andrey Yamanov (@tenphi)

License

TastyCSS is a project by Outpost.

Released under the MIT License.