CSS Utils Revamp + Extended functionality

[rowan-gud]

CSS-utils

Motivation

I have found myself wanting more CSS utils. I have refactored the calc util to use classes to do the chaining in hopes that it will be a little bit of an easier structure to follow. I have a couple more PRs that can be opened if people are interested in this idea! I realize that this is not linked to an issue but I just thought it would be cool and started working on it.

Changes

The calc function now returns a class with the same methods as before but now has context on what operator the sub expressions are using and so can try to group the expression in a logical way. The actual changes in functionality here are very minimal but this class based implementation gives a structure to follow for the other changes I mention later.

Example

Current implementation:

expect(calc(2).add(3).multiply(4).add(3).toString()).toBe('calc(((2 + 3) * 4) + 3)')

This implementation:

expect(calc(2).add(3).multiply(4).add(3).toString()).toBe('calc((2 + 3) * 4 + 3)')

Note that extra parentheses are not added in the above expression

Future Changes

The main reason for doing this is to add more functions to the css-utils packages. Some that I was thinking of are:

• transition

const root = style({
  transition: transition('background-color')
    .duration('1s')
    .easing('ease-in')
    .build()
})

• animation

const rotate = keyframes({
  '0%': { transform: 'rotate(0deg)' },
  '100%': { transform: 'rotate(360deg)' }
});

const root = style({
  animation: animation(rotate)
    .duration('1s')
    .build()
});

• px, rem (super simple)

const root = style({
  height: px(400),
  fontSize: rem(0.875),
})

• transform - This one I'm really excited about! My lines are getting reaaally long and multiline strings are not the prettiest thing to look at

const root = style({
  transform: transform
    .rotate('45deg')
    .translate(0, 1, 2)
    .translateX('50%')
    .build()
})

Closing Thoughts

Copying this over from #1419 as I didn't see that the discussion section was actively used! Would love to get some thoughts on this. I already have a lot of the suggestions here implemented in my fork of this repo here

[MaximKondratev]

I have found myself thinking of the exact same things like building transitions and other values using something more type-safe and not just raw strings. Went to search for discussions and found this one.

I would like this to be implemented as well. We need to get maintainers attention somehow.

[rowan-gud]

@askoufis Looks like there's some interest in this. Any thoughts on this?