제로 런타임 범위 구성 요소 스타일링이 쉬워졌습니다!

배경

저는 전통적으로 Vue 사용자였지만 최근에 Solid로 앱을 작성하기로 결정했습니다. 불행히도 Solid는 Vue에서 <style scoped>와 같은 것을 가지고 있지 않습니다. CSS-in-JS 솔루션에 대한 몇 가지 권장 사항을 보았지만 스타일 지정을 위해 추가 런타임을 추가하는 것이 정말 마음에 들지 않았고 도구와의 통합이 많은 시간 동안 고통스러웠습니다. 더 나은 호환성과 더 적은 실행 시간을 가진 것이 필요했습니다.

CSS 모듈은 (거의) 완벽합니다

에서와 같이 그들은 내가 가진 문제를 거의 완벽하게 해결하는 것 같습니다. 하지만 한 가지 작은 문제가 있습니다. 모든 새 구성 요소에 대해 CSS 모듈을 만드는 것이 지루해집니다! 동일한 폴더에 있는 모든 구성 요소에 대한 새 CSS 파일이 있다고 상상해 보십시오!

소개: vite-plugin-inline-css-modules

그래서 구성 요소 내부에 CSS 모듈을 작성할 수 있는 간단한 Vite 플러그인을 작성했습니다. 단순성으로 인해 엄청나게 빠르며 CSS 모듈로 직접 변환되기 때문에 추가 런타임이 없습니다.

실제로 살펴보겠습니다.

import { css } from 'vite-plugin-inline-css-modules'

const classes = css`
  .root {
    background-color: #1f1;
    @apply rounded-md;
  }
`

export const Root = () => <div class={classes.root}>Hello world</div>

다음으로 변환:

import classes from 'virtual:inline-css-modules/App-0.module.css'

export const Root = () => <div class={classes.root}>Hello world</div>

런타임 없음!

또한 참고 사항: 과거에 CSS-in-JS 솔루션 및 @apply 사용에 문제가 있었기 때문에 Tailwind/UnoCSS 통합과 같은 지저분한 툴링에도 도움이 될 수 있습니다. 규칙은 간단합니다. 유효한 CSS 모듈 구문은 인라인 CSS 모듈 내에서도 유효합니다. 그것이 번역되는 것이기 때문입니다.

또한 이것은 CSS 모듈이 모든 프레임워크에서 표준이기 때문에 어떤 종류의 특별한 통합 없이도 모든 프레임워크에서 작동합니다. 스타일이 있는 템플릿 문자열을 선언하기만 하면 제대로 작동합니다. :)

Check out the plugin here