SolidJS

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

www.solidjs.com

성능도 성능이지만, switch-match, index같은게 엄청 좋아보임
일관된 문법을 사용하기 때문에 html 템플릿엔진이나 전처리기에서 요구하는 사항 대부분의 상위호환인듯


CSS in JS는 아직까지 마음에 드는걸 못찾았음
올해 말에 리엑트 플젝 끝나면 vanilla extract wrapper로 직관적이고 실용적인 CSS in JS API를 만들어볼까 생각중


---

말하신대로 로우레벨, 하이레벨로 나뉠 수 있습니다.

로우레벨은 또 scss, stylus와 같이 중첩된 셀렉터나 믹스인, 함수, 보간으로 css의 리터럴 구문 확장이나 조작을 개선하려는 패러다임과 tailwind, unocss처럼 재정의하거나, 축소하여 간결하게 디자인 시스템 토큰들을 만들려는 패러다임으로 나뉠 수 있습니다.

전처리기의 경우 조작은 js가 워낙 편하니 상위호환이고 셀렉터 문제도 대부분 css in js가 잘 다루어주고 있죠. 다만 scss의 property nesting, stylus의

property lookup등의 기능은 없어서 아쉬웠고요.

개인적으로 emotion의 object style을 선호하는데 zero runtime css in js에서 linaria는 지원하지 않고 vanilla extract는 selectors나 vars 처럼 쓸데없는 블럭

을 만들 필요가 있나 싶습니다.

atomic css의 경우 twin macro가 있으나 여전히 별로입니다. 저는 object style을 선호하기 때문에 tw(["flex", { w: 12, h: "md" }])처럼 합성 가능해야 한다는 거죠. 대시(-) 표시가 결국은 key-value값을 뜻하고 variant는 중첩 셀렉터나 다름없습니다.
거기다 tailwind는 사실상 만들어진 디자인 시스템 프리셋을 제공하는 수준이고요, unocss 보면 알겠지만 다들 유지보수하기 싫어하는 정규식을 사용하거나 variant 만들기 자체가 까다롭습니다.


물론 좋은 프리셋도 중요합니다.
이건 AdorableCSS 글을 참고하려 생각 중.


vanilla extract의 sprinkles도 참고할만한 합니다. 조건을 붙일 수 있어서 좋아요.

하지만 key-value만 사용해야 하는 근본적인 API 한계로 tw(["flex", "visible"])와 같이 사용이 불가하기 때문에 tailwind류를 절대 대체할 수 없습니다.

다이나믹 룰도 불가한데 fela나 lucid처럼 함수를 이용하면 되지 않나 싶고요.
마지막으로 데드코드 최적화가 불가합니다.

이건 패키지 뜯어보니 미리 모든 조건에 따라 생성을 해놓던데.. lazy하게 처리하려 합니다.


이제 약간 더 의미론적으로 만들어진 하이레벨을 다루어볼까요

하이레벨은 크게 3가지로 나뉠 수 있습니다.

  • 규약에 따라 UI 값을 변경 가능한 theme
  • 리터럴 혹은 디자인 토큰을 조합하는 variant (tailwind나 unocss의 variant는 중첩 셀렉터 혹은 condition와 다를바가 없습니다)
  • styled 컴포넌트

테마란 무엇이 스타일링과 다를까 생각해보면 중앙에서 변경이 가능합니다.

테마A는 배경이 파랑 텍스트가 노랑이고, 테마B를 사용하면 배경이 보라 텍스트가 하얀색으로 바뀌는 식이죠.

그런데 배경과 텍스트라는 규약이 정해져 있는겁니다.


atomic css가 bottom up이라면 theme는 top down인 셈이죠.

이것은 vanilla extract가 createTheme라고 잘 만들어놓은 터라 그리 건들고 싶지는 않습니다.

프리셋 규약은 Theme UI가 잘 만들어 두었어요.


variant는 스타일들을 모아 의미있게 만들어줍니다.

stitches 덕분에 유명해진 개념이고, vanilla extract에서는 recipe라는 이름입니다.

base인 스타일, 여러 variant 설정과 variant 기본값등을 세팅할 수 있어서 좋죠.

문제는 디자인 토큰 생성기인 atomic css와 같이 쓰기가 불편합니다.


음.. 그러니까 이런식으로 atomic css에서 생성해쓰자는 거죠.

const { recipe } = crateSprinkles(shadowRules, borderRules, paddingRules);

const button = recipe({

   base: ["shadow", { rounded: "md" }],

   variant: {

     roundless: {

       rounded: 0

     },

     size: {

       small: { p: 3 },

       large: { p: "lg" },

       custom: (padding) => ({ p: padding })

     }

   }

});

const smallButton = button({ size: "small" })

const largeRoundlessButton = button(["roundless", size: "large"])

const customButton = button({ size: { custom: 5 } })


상태만 다루는 headless ui와 붙여쓰면 꽤 편할거라 생각됩니다.

https://jbee.io/react/headless-concept/



styled 컴포넌트는 유명하니 자세한 설명은 생략.

react나 solid같은 컴포넌트에 의존하는 편이며 stitches가 잘 만들어 놓았다고 생각됩니다.

역시 atomic css 리턴값의 구조분해 할당에서 받아 쓸수 있으면 좋을 듯요.