front-of-house/hypostyle

Hyper minimal framework-agnostic CSS-in-JS utility for easy theming, shorthands, and variants.

hypostyle's Issues

Need more expansive longhand/shorthand mappings for better DX

If, in the course of composing styles, a style object ends up with something like:

style = {
  c: 'red',
  color: 'blue',
}

style.color should be blue.

The trouble rn is that while we have shorthands — which serve as longhands too — we don't have a mapping of longhands-to-shorthands or vice versa.

Perhaps we should configure CSS properties like { token, unit } and then separately shorthands like { properties } 🤔

typescript

https://github.com/frenic/csstype

custom media overwrites styles

Say you've got breakpoints [400, 800]:

css({
  pt: [2, 4, 6],
  '@media (min-width: 800px)': {
    pt: 8,
  }
})

pt at 800px is going to be 6, since the custom media defined will actually overwrite the pt abbrev.

reference how to further post-process styles

for example: https://github.com/kitten/tiny-css-prefixer

`explode` referencing object as it mutates itself

Could be dropping values here

https://github.com/sure-thing/hypostyle/blob/78905fb053fd622311495dcca25823a1bade61a4/index.js#L37

add `createGlobal` API

It would init a new nano-css and immediately flush and return the stylesheet as a string. For SSR.