[My Little Rosemary] vanilla-extract 기본 세팅하기

설치하기

vanilla-extract 설치하기

npm install @vanilla-extract/css

 

통합 플러그인 설치하기

npm install --save-dev @vanilla-extract/next-plugin

 

플러그인 설정

next.config.js

const {
  createVanillaExtractPlugin
} = require('@vanilla-extract/next-plugin');
const withVanillaExtract = createVanillaExtractPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {};

module.exports = withVanillaExtract(nextConfig);

 

참고한 페이지 https://vanilla-extract.style/documentation/integrations/next/

Next.js — vanilla-extract

 

나는 이미 config 파일이 있었는데 거기에 추가하려고 봤더니 겹치는 내용이 있었다. 그리고 CommonJS 모듈로 작성되어 있어서  ES 모듈에 맞는 형태로 변환하고 중복되는 내용은 제거해서 작성했다.

/** @type {import('next').NextConfig} */

import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';
const withVanillaExtract = createVanillaExtractPlugin();

const nextConfig = {};

export default withVanillaExtract(nextConfig);

사이트 예제

css 파일 작성

//styles.css.ts

import { style } from '@vanilla-extract/css';

export const container = style({
  padding: 10
});

 

app.ts에 스타일 적용하기

//app.ts

import { container } from './styles.css.ts';

document.write(`
  <section class="${container}">
    ...
  </section>
`);

 

글로벌 스타일 설정하기

이전에 작성한 스타일 컴포넌트의 글로벌 스타일 세팅을 바꿔보려고 한다. vanilla-extract에서는 글로벌 스타일 설정을 다음과 같이 할 수 있다.

import { globalStyle } from '@vanilla-extract/css';

globalStyle('html, body', {
  margin: 0
});

 

유의해야 하는 부분은 간단한 의사 선택자나 복합 선택자를 사용할 수 없다는 것이다. 그럴때는 다른 클래스를 생성해 그 클래스를 참조하는 방식으로 작성하면 된다.

import { style, globalStyle } from '@vanilla-extract/css';

export const parentClass = style({});

globalStyle(`${parentClass} > a`, {
  color: 'pink'
});

//css result
.app_parentClass__sznanj0 > a {
  color: pink;
}

 

글로벌 스타일에 스타일 리셋을 적용하려고 했는데 스타일 컴포넌트처럼 자동으로 리셋을 만들어주는 편리한 라이브러리나 명령어는 없었다. 나중에 추가해주려나..? 일단 다른 분들은 어떻게 작성했는지 찾아봤는데 이분의 방법을 따라하기로 했다.

 

https://yong-nyong.tistory.com/92

[Next.js] styled-components에서 vanilla-extract로 마이그레이션 진행 (app router)

내 하찮은 글 보다 훨씬 자세하고 상세하게 나와있어서 글을 쓰는 의미에 대해 잠시 고민하게 되긴 했지만 뭐 이건 내 기록용이니까 하고 다시 멘탈 부여잡았다.

 

https://meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

리셋 코드는 이 곳을 참고해서 작성하는듯 하다. 나도 동일하게 작성하려고 한다. 그리고 나면 a11y-hidden같은 클래스랑 폰트같은 것들 글로벌로 설정하면 기본 세팅은 정말 끝날듯 하다.