CSS-in-JS solution with style-to-state bindings, SSR, and a next-level developer experience.

Last update: Mar 23, 2022

TastyCSS

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

NPM Version Discord

Installation

Framework-agnostic version:

# with npm
npm install tastycss

# with yarn
yarn add tastycss

React version:

# with npm
npm install tastycss-react

# with yarn
yarn 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:

import styled from 'tastycss-react';

const Element = styled({
  /** The name of the element. It can be used to override styles in context. */
  name: 'Article',
  /** The tag name of the element. */
  tag: '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 raw css of the element. */
  css: `
    appearance: none;
  `,
  /** Default attributes */
  attrs: {
    role: 'article',
  },
  availableMods: ['blue'],
});

Now you can use this element inside your React App:

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

Customize styles in-place using styles attribute:

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

Customize styles in context:

import { StylesProvider } from 'tastycss-react';

export default function Component({ title, children }) {
  return <StylesProvider Article={{
    color: 'red',
  }}>
    <Heading>{title}</Heading>
    <Element>{chidlren}</Element>
    <Element>{chidlren}</Element>
  </StylesProvider>;
}

Responsive breakpoints

Customize responsive breakpoints:

import { BreakpointsProvider } from 'tastycss-react';

export default function Component({ title, children }) {
  return <BreakpointsProvider value={[1200, 960]}>
    <Heading>{title}</Heading>
    <Element>{chidlren}</Element>
    <Element>{chidlren}</Element>
  </BreakpointsProvider>;
}

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:

<Element styles={{ 
  color: [
    'red', // >=1200px
    'blue', // >=960px & <1200px
    'purple', // <960px
  ],
}}>
  content
</Element>

Style-to-state bindings

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

// This example is not a real-life case. It's only a demonstation of library capabilities.
<Element styles={{
  color: {
    // default
    '': 'yellow',
    // if `blue` mod is presented on the element
    'blue': 'blue',
    // if `blue` mod is not presented on the element and the element is hovered
    '!blue & :hover': 'purple',
    // if `green` or `success` mod is presented on the element
    'success | green': 'green',
    // if either `red` or `danger` mod is presented on the element
    'success ^ green': 'green',
  }
}}></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

License

TastyCSS is a project by Forneu.

Released under the MIT License.

GitHub

https://github.com/numldesign/tasty
You might also like...

Autoprefixer for JavaScript style objects

inline-style-prefixer A small, simple and fast vendor prefixer from JavaScript style object. Support Us Support Robin Frischmann's work on Fela and it

Jun 11, 2022

A tool for creating ratio-based style systems built in React.

A tool for creating ratio-based style systems built in React.

Rational Design is a tool for generating type-scales for greater consistency in design systems or web design projects. It’s built with React Hooks, SCSS, Webpack, and npm scripts, and is fully responsive.

Dec 29, 2021

A terminal style/styled portfolio website made with 3 using react.

A Terminal Styled Portfolio Website. πŸ±β€πŸ’», a terminal style/styled portfolio website made with 3 using react.

Jun 23, 2022

TailwindCSS plugin that helps styling radix state

TailwindCSS Radix TailwindCSS plugin that helps styling radix state. Installation yarn yarn add tailwindcss-radix npm npm i tailwindcss-radix Usage Yo

Jun 22, 2022

CSS media queries in react - for responsive design, and more.

react-responsive Information Package react-responsive Description Media queries in react for responsive design Browser Version = IE6* Demo The best s

Jun 21, 2022

Encapsulated styling for your javascript components with all the power of javascript and CSS combined.

Stilr Encapsulated styling for your javascript components with all the power of javascript and CSS combined. Unique class names (Content Hash Based) U

May 30, 2022

Parse CSS and add vendor prefixes to rules by Can I Use

Autoprefixer PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twi

Jun 19, 2022

This repository allows you to create a React template component folder. It optionally includes scss and css files

Generate-React-Components - grc grc let you generate react components in typescript in a folder you specify and it will include .tsx, .scss, .css file

Nov 26, 2021

Loads a Sass/SCSS file and compiles it to CSS.

Loads a Sass/SCSS file and compiles it to CSS.

sass-loader Loads a Sass/SCSS file and compiles it to CSS. Getting Started To begin, you'll need to install sass-loader: npm install sass-loader sass

Jun 20, 2022
Comments
  • 1. Typings issue faced when compiling using ViteJS

    Is your feature request related to a problem? Please describe.

    import React from 'react';
    import { Base } from 'tastycss/dist/mjs/react';
    import { AllBaseProps } from 'tastycss/dist/mjs/types/component';
    
    const BaseElement = React.forwardRef((props: AllBaseProps, ref) => (<Base {...props} ref={ref}>
      {props.children}
    </Base>));
    
    export default BaseElement;
    

    Yes, While I am building TastyCSS. ViteJs gives

    [vite:resolve] Missing "./dist/mjs/react" export in "tastycss" package
    error during build:
    Error: Missing "./dist/mjs/react" export in "tastycss" package
    

    This means in tastycss package.json, tastycss/dist/mjs/react entry in exports is not found.

    Describe the solution you'd like Need to see, what will be the actual way to import modules from TastyCSS

    Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

    Additional context Add any other context or screenshots about the feature request here.

    Reviewed by SyedUmerHasan at 2021-08-22 19:43
  • 2. Allow to style nested and pseudo-elements

    Is your feature request related to a problem? Please describe. It's impossible to style the inner elements of the styled element.

    Describe the solution you'd like I would be nice to add additional syntax to cover this case:

    const Element = styled({
      styles: {
        color: '#purple', // the color of the element
        '& > svg': {
          color: 'currentColor', // the color of the SVG inside
        },	
      },
    });
    

    Any used modifier will apply to the root element.

    const Element = styled({
      styles: {
        '& > svg': {
          opacity: {
            '': .8, // default opacity
            'hovered': 1, // opacity on hover
          }
        },	
      },
    });
    

    This will create the following selector for svg styles: .IDCLASS[data-is-hovered] > svg.

    Describe alternatives you've considered One more way is to allow alternative array-like syntax. It will perform slightly better BUT will require drastic changes to the codebase.

    const Element = styled({
      styles: [{
        color: '#purple', // the color of the element
      }, {
        $: '> svg',
        color: 'currentColor', // the color of the SVG inside
      }],
    });
    

    Additional context Nope

    Reviewed by tenphi at 2021-10-14 08:49
  • 3. Create an 'examples' folder in root for sandbox ci test

    Is your feature request related to a problem? Please describe. Test with sandbox ci

    Describe the solution you'd like Create an examplesfolder in root with tastycss and tastycss-react with and without Typescirpt default project setup for sandbox ci test purpose. We can also add more examples to it like with different frameworks later.

    Describe alternatives you've considered N/A

    Additional context N/A

    Reviewed by shubham-kaushal at 2021-09-13 18:04
  • 4. TatyCSS update, docs, and PH launch.

    Is your feature request related to a problem? Please describe. With ref. to our today's discussion ->

    • Improvement of styled -> tasty export
    • remove customization API with better approach
    • removal Base component with better approach
    • Brainstorm on the createStyle.ts function should be added or not
    • Fix the typings of expression build error
    • Documentation of TastyCSS that'll include all styles api.

    Describe the solution you'd like Next week plan ->

    • Release the updates and documentation of TatstyCSS and TastyCSS-React
    • Launch on Product Hunt

    Describe alternatives you've considered N/A

    Additional context N/A

    cc @tenphi

    Reviewed by shubham-kaushal at 2022-04-15 12:23
CSS Maid 🧹 A tool made for React.js to clean up CSS default styling! Give your CSS a nice reset and style with less hassle!
CSS Maid 🧹 A tool made for React.js to clean up CSS default styling! Give your CSS a nice reset and style with less hassle!

CSS Maid ?? What is it? CSS Maid is a tool for React.js that helps clean up & reset default css! It resets default padding, remove text-decoration on

Sep 1, 2021
Whirlwind is a utility-first styling framework specifically designed for React Native. It is heavily inspired by Tachyons and Tailwind CSS and uses low-level building blocks for rapidly building custom designs.

React Native Whirlwind ??️ A utility-first CSS framework designed for React Native. Whirlwind is a utility-first CSS framework specifically designed f

May 6, 2022
Court.css - A naive CSS Utility framework based on JSX and css custom properties

court.css ?? A (work in progress) JSX-based, CSS utility framework with a predic

Mar 14, 2022
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress πŸ’…
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress πŸ’…

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress ?? Looking for v5? The master branch is un

Jun 27, 2022
πŸ‘©β€πŸŽ€ CSS-in-JS library designed for high performance style composition
πŸ‘©β€πŸŽ€ CSS-in-JS library designed for high performance style composition

emotion The Next Generation of CSS-in-JS Emotion 11 has been released ?? See the blog post Emotion is a performant and flexible CSS-in-JS library. Bui

Jun 24, 2022
Style your React components with simplicity using css inside your comments.

Style your React components with simplicity using css inside your comments.

Oct 12, 2021
CSS style loader for Webpack that is optimized for isomorphic (universal) web apps.
CSS style loader for Webpack that is optimized for isomorphic (universal) web apps.

Isomorphic CSS style loader for Webpack CSS style loader for Webpack that works similarly to style-loader, but is optimized for critical path CSS rend

Jun 25, 2022
The simplest solution for content loading in React and styled-components.

styled-content-loader The simplest solution for content loading in React and styled-components. Getting Started npm install styled-components styled-c

Jul 13, 2021
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Jun 19, 2022
🏠 Airbnb website using React, Next.js and Tailwind CSS
🏠 Airbnb website using React, Next.js and Tailwind CSS

This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind docs.

May 2, 2022