【Stylex】Stylexとは

先日のReact Finland 2021で紹介されたStylexを調べてみた

www.youtube.com

こちら記事が参考になった

www.infoq.com

Stylexは新しいfacebookで使用されたFacebook独自のCSS-in-JSソリューション

以下の３つの目標がある

1. 高速であること
2. 親しみやすいこと
3. フレキシブルであること

高速であることの特徴は以下

• 静的なCSSファイルの出力
• 未使用のstyleの削除
• atomic stylesの使用

以下のように使う（動画より抜粋）

const styles = stylex.create({
  base: {
    position: 'absolute',
    top: 0,
    start: 0,
    end: 0,
    bottom: 0
  },
  active: {
    position: 'static',
  }
});

<div className={stylex(styles.base, isActive && styles.active}/>

これをコンパイルすると、プロジェクト内の全てのファイルが解析し、以下のようなCSSが生成され（動画より抜粋）

.position-abs {
  position: absolute;
}
.top-0 {top: 0; }
.start-0 {left: 0; }
.end-0 {right: 0; }
.bottom-0 {bottom: 0; }
.position-st {
  position: 'static';
}

このように関連づけられる（動画より抜粋）

const styles = {
  base: {
    position: 'position-abs',
    top: 'top-0',
    start: 'start-0',
    end: 'end-0',
    bottom: 'buttom-0'
  },
  active: {
    position: 'position-st',
  }
});

<div className={
         (isActive ? 'position-abs' : 'position-st') + 
         'top-0 start-0 end-0 bottom-0'
        }
/>

stylexはこのclass生成のロジックにより、ビルド後のCSSの定義順序によるデザインの違いも制御できるようになっている

例えば、以下のようにclassを定義した場合

<div className="bule red" />

blueが勝つか、redが勝つかはCSSの定義順序によってしまう

他ライブラリはどの順番になるか制御できないものが多いが、stylexは後ろに定義したものが必ず勝つようになっているため安心して実装ができる

<div className={stylex(styles.blue, styles.red}/>

あとは、StylexではAtomic Styleを利用することでCSSファイルのサイズを低減している

Atomic Styleについては後日調べる

sebastienlorber.com