vanilla extract 사용하기 - Selectors

맛난 머핀

styling

Selectors

두 가지 방법을 통해 주어진 스타일에 대한 selector를 지정할 수 있다.

simple pseudo selectors

매개변수를 사용하지 않아, 알아보기 쉽고 간단하다.

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

const myStyle = style({
  ':hover': {
    color: 'pink'
  },
  ':first-of-type': {
    color: 'blue'
  },
  '::before': {
    content: ''
  }
});

selectors key

좀 더 복잡한 규칙은 selectors key를 통해 지정해줄 수 있다.

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

const link = style({
  selectors: {
    '&:hover:not(:active)': {
      border: '2px solid aquamarine'
    },
    'nav li > &': {
      textDecoration: 'underline'
    }
  }
});

const invalid = style({
  selectors: {
    // ❌ ERROR: Targetting `a[href]`
    '& a[href]': {...},

    // ❌ ERROR: Targetting `.otherClass`
    '& ~ div > .otherClass': {...}
  }
});

유지보수를 위해, 각각의 style block은 하나의 element만 타겟할 수 있다.

→ 이를 강제하기 위해, 모든 selector들은 & 문자 (현재 element)를 대상으로 해야한다!

→ 현 class가 아닌, 다른 element를 대상으로 할 경우 error가 발생한다.

 

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

// Invalid example:
export const child = style({});
export const parent = style({
  selectors: {
    // ❌ ERROR: Targetting `child` from `parent`
    [`& ${child}`]: {...}
  }
});

// Valid example:
export const parent = style({});
export const child = style({
  selectors: {
    [`${parent} &`]: {...}
  }
});

 

 

물론 다른 scope의 class name을 참조하는 것도 가능하다.

하지만 이 경우에도 자기 자신 element에 대한 스타일을 정의한다 는 제약을 지켜야하는 것!

(위 예제처럼! 부모에서 자식의 style을 정의하는게 아니라, 자식에서 부모의 자식 중 자기 자신 의 스타일을 정의해주고 있다)

 

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

export const parent = style({});

globalStyle(`${parent} a[href]`, {
  color: 'pink'
});

만약 전역적으로 자식 node들에 대한 스타일을 적용하고 싶은 경우에는 → globaStyle을 사용한다.

 

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

export const child = style({
  background: 'blue',
  get selectors() {
    return {
      [`${parent} &`]: {
        color: 'red'
      }
    };
  }
});

export const parent = style({
  background: 'yellow',
  selectors: {
    [`&:has(${child})`]: {
      padding: 10
    }
  }
});

selectors가 서로에게 의존적이라면, getter를 사용해 이들을 정의해줄 수 있다.