TastyCSS

A set of modules is for CSS-in-JS solution that includes state-to-style bindings, SSR and next-level developer experience. It includes a framework-agnostic implementation

Installation

Framework-agnostic version:

1# with npm
2npm install tastycss
3
4# with yarn
5yarn add tastycss

React version:

1# with npm
2npm install tastycss-react
3
4# with yarn
5yarn add tastycss-react

Documentation

TastyCSS utils allow generating performant CSS with responsiveness and style-to-state bindings.

TastyCSS React is a styled version for React Apps that uses styled-components under-the-hood.

React

Let's look at styled API:

1import styled from 'tastycss-react';
2
3const Element = styled({
4  /** The name of the element. It can be used to override styles in context. */
5  name: 'Article',
6  /** The tag name of the element. */
7  tag: 'span',
8  /** Default styles of the element. */
9  styles: {
10    // tokens
11    '@local-padding': ['2x', '1x'], // responsive styles
12    '@text-color': 'rgba(255, 0, 0)',
13    // styles
14    padding: '@local-padding',
15    color: {
16      // the default color
17      '': '#text',
18      // the color if `blue` mod is specified
19      blue: 'blue',
20    }, // use color token
21  },
22  /** Default raw css of the element. */
23  css: `
24    appearance: none;
25  `,
26  /** Default attributes */
27  attrs: {
28    role: 'article',
29  },
30  availableMods: ['blue'],
31});

Now you can use this element inside your React App:

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

Customize styles in-place using styles attribute:

1<Element styles={{ color: 'red' }}>{chidlren}</Element>

Customize styles in context:

1import { StylesProvider } from 'tastycss-react';
2
3export default function Component({ title, children }) {
4  return <StylesProvider Article={{
5    color: 'red',
6  }}>
7    <Heading>{title}</Heading>
8    <Element>{chidlren}</Element>
9    <Element>{chidlren}</Element>
10  </StylesProvider>;
11}

Responsive breakpoints

Customize responsive breakpoints:

1import { BreakpointsProvider } from 'tastycss-react';
2
3export default function Component({ title, children }) {
4  return <BreakpointsProvider value={[1200, 960]}>
5    <Heading>{title}</Heading>
6    <Element>{chidlren}</Element>
7    <Element>{chidlren}</Element>
8  </BreakpointsProvider>;
9}

This will create two breakpoints (1200px and 960px) which will split possible screen width into three zones: >=1200px, >=960px & <1200px, <960px.

Then you can create responsive styles with specific value for each zone:

1<Element styles={{ 
2  color: [
3    'red', // >=1200px
4    'blue', // >=960px & <1200px
5    'purple', // <960px
6  ],
7}}>
8  content
9</Element>

Style-to-state bindings

Style-to-state binding works gracefully and allows to use logical operators:

1// This example is not a real-life case. It's only a demonstation of library capabilities.
2<Element styles={{
3  color: {
4    // default
5    '': 'yellow',
6    // if `blue` mod is presented on the element
7    'blue': 'blue',
8    // if `blue` mod is not presented on the element and the element is hovered
9    '!blue & :hover': 'purple',
10    // if `green` or `success` mod is presented on the element
11    'success | green': 'green',
12    // if either `red` or `danger` mod is presented on the element
13    'success ^ green': 'green',
14  }
15}}></Element>

You can use even more complex expressions with brackets. The algorithm will go from the last to the first expression trying to match every possible combination of modifiers. If the combination is matched then it applies the style value to that selector.

This documentation is work in progress. It is not yet ready.

Contributing

Please follow our contributing guidelines.

Authors

• Andrey Yamanov (@tenphi)

License

TastyCSS is a project by Forneu.

Released under the MIT License.