New core

[michalkvasnicak]

We'd like to simplify core a little.

1. Remove styler function support

Following will not be supported anymore because it introduces unnecessary cache logic and is prone to bugs:

const A = createComponent('div', {
   styles: () => {},
});

2. Simplify breakpoints definition and allow object responsive stylesheets

Currently breakpoints are defined as arrays which is then mapped to responsive CSS properties. It'd be probably better to allow defining responsive styles using objects.

const A = createComponent('div', {
   styles: {
      color: ['primary', 'danger'],
      bp0: {
         color: 'primary',
      },
      bp1: {
         color: 'danger',
      },
   },
});

I think we should support both. Maybe it would be good to keep breakpoint definition in design system as an array and then somehow map that to object too. The problem is that array needs to be always sorted from smallest to largest viewport. Also if user wants to use some special breakpoint for example to detect retina, ie, etc then he should be able to use it normally in style sheet (basically the same as in emotion css).

3. Allow to define variants as objects instead of using variant creators

const A = createComponent('div', {
   styles: {
      // there are shared base styles
   },
   variants: {
       size: {
          small: {
             // small styles added to base styles
          }
       },
       processing: {
           true: {
             // if enabled adds to base styles
             // this could be used to detect that this is boolean variant because it has true or false keys
           }
       }
   }
});

What if we want to have different behaviour of variants based on other variant props. In this case we need to investigate if something like this is possible to process in typescript:

const A = createComponent('div', {
   styles: {
      // there are shared base styles
       variants: {
         size: {
           small: {
             // small styles added to base styles
           }
         },
         processing: {
            true: {
             // if enabled adds to base styles
             // this could be used to detect that this is boolean variant because it has true or false keys
            }
         }
     }
   },
});

[michalkvasnicak]

@jurajhrib what do you think?