Nascent Plasticine Materialist

    tastycss
    TypeScript icon, indicating that this package has built-in type declarations

    0.6.5 • Public • Published

    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

    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.

    Install

    npm i tastycss

    DownloadsWeekly Downloads

    63

    Version

    0.6.5

    License

    MIT

    Unpacked Size

    230 kB

    Total Files

    93

    Last publish

    Collaborators

    • tenphi
    • katrin_luna
    • shubhamkaushal