Package Exports

tastycss
tastycss/dist/index.cjs
tastycss/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tastycss) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.