TastyCSS

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

Installation

1# with npm
2npm install tastycss
3
4# with yarn
5yarn add tastycss
6
7# with pnpm
8pnpm add tastycss

Usage of Tasty API

Let's look at styled API:

1import { tasty } from 'tastycss';
2
3const Element = tasty({
4  /** The tag name of the element. */
5  as: 'span',
6  /** Default styles of the element. */
7  styles: {
8    // tokens
9    '@local-padding': ['2x', '1x'], // responsive styles
10    '@text-color': 'rgba(255, 0, 0)',
11    // styles
12    padding: '@local-padding',
13    color: {
14      // the default color
15      '': '#text',
16      // the color if `blue` mod is specified
17      blue: 'blue',
18    }, // use color token
19  },
20  /** Default attributes (example) */
21  role: 'article',
22  /** The list of styles that can be provided by props */
23  styleProps: ['align'],
24});

Now you can use this element inside your React App:

1export default function Component({ title, children }) {
2  return (
3    <>
4      <Heading>{title}</Heading>
5      <Element>{children}</Element>
6    </>
7  );
8}

Extend base options

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

1const CustomElement = tasty(Element, {
2  /** Change tag name */
3  as: 'input',
4  /** Extend or rewrite styles */
5  styles: {
6    color: '#purple',
7  },
8  /** Add more default properties/attributes */
9  role: 'article',
10});

Define global styles

Use tasty() to define global styles for elements:

1import { tasty } from 'tastycss';
2
3const GlobalStyledHeading = tasty('.myButton', {
4  display: 'inline-block',
5  padding: '1x 2x',
6  preset: 't2',
7  border: true,
8  radius: true,
9});

Style variants

You can reduce the amount of CSS for your component by splitting it into variants.

1import { tasty } from 'tastycss';
2
3const StyledButton = tasty(Button, {
4  styles: {
5    /* default styles */
6  },
7  variants: {
8    // define themes using variants
9    default: {
10      // default (fallback) variant
11      // define new styles for `default` variant or override default styles.
12    },
13    danger: {
14      // define new styles for `danger` variant or override default styles.
15    },
16  },
17});

Usage example:

1<StyledButton variant="danger">Danger Button</StyledButton>

If the variant prop is not provided then the default variant will be used.

IMPORTANT: It's preferred that the component will not receive any change in variant prop to avoid style replacement. But this case is supported.

Documentation is work in progress.

Contributing

Please follow our contributing guidelines.

License

TastyCSS is a project by Outpost.

Released under the MIT License.