Switch from Emotion to StyleX(form Meta)

[StKostyantin]

Description

Chakra uses the Emotion library. but it does not support ssr. As a suggestion to switch to a library created by Facebook called StyleX.

Problem Statement/Justification

Emotion doesn't support ssr. and is inferior to modern libraries in terms of working with css in many other ways.

Proposed Solution or API

Example of use

import stylex from '@stylexjs/stylex';

const styles = stylex.create({
  // base styles
  main: {
    width: '100%',
    maxWidth: 800,
    minHeight: 40,
  },
  // conditional styles
  active: {
    transform: 'scale(0.9)',
  },
});

import stylex from '@stylexjs/stylex';

const styles = stylex.create({ ... });
// Use styles
<div
  className={stylex(
    // Use base styles
    styles.main,
    // Use styles if a condition is true
    isActive && styles.active,
    // Use styles passed in as a prop
    props.xstyle,
  )}
/>;

Additional Information

Docs: https://stylex-docusaurus.vercel.app/docs/learn/
Github: https://github.com/facebook/stylex

[shannonhochkins]

This graph is wrong - Emotion for one, it supports everything you have ticked for StyleX

[sandrinjoy]

how is emotion atomic?

[shannonhochkins]

How is it not?

[sandrinjoy]

you can check how the classes are generated in emotion. It creates one class for each style definition of an element, rather than keeping classes for each css property like tailwind, styleX , etc...

[shannonhochkins]

There is many ways to achieve atomic styles and classes with emotion, the downside is it's runtime unlike stylex

[jddeleon]

I think this is unlikely to happen, since the roadmap for Chakra V3 is already laid out, with the goal of using Panda as the new CSS-in-JS system.

https://www.adebayosegun.com/blog/the-future-of-chakra-ui

[satarovbekzhan]

Don't you know when the Chakra V3 is gonna be released?

[nmn]

Panda has most of the same benefits as StyleX, it’s a good choice!