이 블로그 포스트는 Stylelint의 버전 V14에 대해 설명하고 있습니다. 만약 Stylelint의 V15에 대해 알고 싶은 분들은 다음 블로그 포스트의 링크를 참고해 주시기 바랍니다.

• [Code Quality] Stylelint V15

목차

• 개요
• Node 설치
  • macOS
  • Windows
• CSS를 위한 Stylelint
  • CSS를 위한 Stylelint의 package.json 생성
  • CSS를 위한 Stylelint 설치
  • CSS를 위한 Stylelint 설정
  • CSS를 위한 Stylelint 실행 스크립트
  • CSS를 위한 Stylelint 실행
• SCSS를 위한 Stylelint
  • SCSS를 위한 Stylelint의 package.json 생성
  • SCSS를 위한 Stylelint 설치
  • SCSS를 위한 Stylelint 설정
  • SCSS를 위한 Stylelint 실행 스크립트
  • SCSS를 위한 Stylelint 실행
• CSS-in-JS를 위한 Stylelint
  • 프로젝트 준비
  • CSS-in-JS를 위한 Stylelint 설치
  • CSS-in-JS를 위한 Stylelint 설정
  • CSS-in-JS를 위한 Stylelint 실행 스크립트
  • CSS-in-JS를 위한 Stylelint 실행
• TypeError: Cannot read properties of undefined (reading ‘stringify’) 에러
• 완료

개요

웹 개발을 하면, 웹의 스타일을 관리하기 위해 CSS(Cascading Style Sheets)를 사용하게 됩니다. 이번 블로그 포스트에서는 Stylelint를 사용하여 CSS, SCSS, CSS-in-JS의 코드 스타일을 검사해 보도록 하겠습니다.

• Stylelint

여기서 소개한 소스코드는 아래에 링크를 통해 확인할 수 있습니다.

• GitHub: https://github.com/dev-yakuza/study-linters/tree/main/stylelint-example

Node 설치

Stylelint를 사용하기 위해서는 Node를 설치할 필요가 있습니다. 각각의 OS에 맞게 Node를 설치합니다.

macOS

Homebrew는 맥에서 패키지를 설치하고 관리할 수 있는 맥용 패키지 관리자입니다. Homebrew를 통해 맥에 필요한 패키지를 간단하게 설치할 수 있다. 다음 명령어를 실행하여 Homebrew를 설치합니다.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

설치가 완료되었다면, 다음 명령어를 실행하여 잘 설치되었는지 확인합니다.

brew --version

만약 버전이 표시되지 않는다면, 터미널을 종료하고, 다시 실행시킵니다. 이미 Homebrew가 설치된 분들은 다음 명령어를 실행하여 Node를 설치합니다.

brew install node

Windows

윈도우에는 Chocolatey라는 패키지 매니저를 사용합니다. 관리자 권한으로 실행된 명령어 프롬프트 또는 파워쉘을 열고 다음 명령어를 실행하여 Chocolatey를 설치합니다.

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

설치가 완료되었다면, 다음 명령어를 실행하여, 설치가 잘 되었는지 확인합니다.

choco –version

Chocolatey의 버전이 표시되지 않는다면, 명령어 프롬프트 또는 파워쉘을 종료하고 다시 실행시킵니다. Chocolatey가 설치되었다면, 다음 명령어를 실행하여 Node를 설치합니다.

choco install -y nodejs.install

CSS를 위한 Stylelint

CSS 파일을 검사하기 위해 Stylelint를 설치하고 사용하는 방법에 대해서 살펴보도록 하겠습니다.

CSS를 위한 Stylelint의 package.json 생성

Stylelint는 Node 개발 환경에서 동작합니다. 따라서 노드 패키지를 관리하기 위해 package.json 파일을 생성할 필요가 있습니다. 다음 명령어를 사용하여 package.json 파일을 생성합니다.

npm init

명령어를 실행하면 다음과 같이 여러 질문들이 나옵니다. 특별히 변경하고 싶은 내용이 없다면 모든 질문에 Enter키를 입력합니다.

package name: (stylelint-example)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

그럼 다음과 같이 package.json 파일이 생성되는 것을 확인할 수 있습니다.

{
  "name": "stylelint-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

CSS를 위한 Stylelint 설치

Stylelint를 사용하여 CSS를 검사하고 싶으신 분들은 다음 명령어를 사용하여 Stylelint와 추가로 필요한 라이브러리를 설치합니다.

npm install --save-dev stylelint stylelint-config-standard stylelint-config-prettier

CSS를 위한 Stylelint 설정

이렇게 설치한 Stylelint를 사용하기 위해 .stylelintrc.json 파일을 생성하고 다음과 같이 수정할 필요가 있습니다.

{
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"]
}

CSS를 위한 Stylelint 실행 스크립트

Stylelint를 사용하여 모든 CSS 파일을 검사하기 위해 package.json 파일을 다음과 같이 수정합니다.

{
  ...
  "scripts": {
    "lint:css": "stylelint --ignore-path .gitignore '**/*.css'",
  },
  ...
}

--ignore-path에 .gitignore 파일을 설정하여 불필요한 파일들을 검사하지 않도록 하였습니다.

CSS를 위한 Stylelint 실행

다음으로 Stylelint가 잘 실행되는지 확인하기 위해 test.css 파일을 생성하고 다음과 같이 수정합니다.

h2 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}

그런 다음, 다음 명령어를 실행하여, Stylelint가 잘 실행되는지 확인해 봅니다.

npm run lint:css

Stylelint가 잘 설치되고 설정되었다면, 다음과 같은 경고를 확인할 수 있습니다.

test.css
 2:3  ✖  Unexpected longhand value '0 0 1rem 0' instead of '0 0 1rem'  shorthand-property-no-redundant-values

test.css 파일을 다음과 같이 수정하고, Stylelint를 실행하면, 문제가 해결되는 것을 확인할 수 있습니다.

h2 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
}

SCSS를 위한 Stylelint

SCSS 파일을 검사하기 위해 Stylelint를 설치하고 사용하는 방법에 대해서 살펴보도록 하겠습니다.

SCSS를 위한 Stylelint의 package.json 생성

Stylelint는 Node 개발 환경에서 동작합니다. 따라서 노드 패키지를 관리하기 위해 package.json 파일을 생성할 필요가 있습니다. 다음 명령어를 사용하여 package.json 파일을 생성합니다.

npm init

명령어를 실행하면 다음과 같이 여러 질문들이 나옵니다. 특별히 변경하고 싶은 내용이 없다면 모든 질문에 Enter키를 입력합니다.

package name: (stylelint-example)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

그럼 다음과 같이 package.json 파일이 생성되는 것을 확인할 수 있습니다.

{
  "name": "stylelint-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

SCSS를 위한 Stylelint 설치

Stylelint를 사용하여 SCSS를 검사하고 싶으신 분들은 다음 명령어를 사용하여 Stylelint와 추가로 필요한 라이브러리를 설치합니다.

npm install --save-dev stylelint stylelint-config-standard-scss stylelint-config-prettier-scss

SCSS를 위한 Stylelint 설정

이렇게 설치한 Stylelint를 사용하기 위해 .stylelintrc.json 파일을 생성하고 다음과 같이 수정할 필요가 있습니다.

{
  "extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"]
}

SCSS를 위한 Stylelint 실행 스크립트

Stylelint를 사용하여 모든 SCSS 파일을 검사하기 위해 package.json 파일을 다음과 같이 수정합니다.

{
  ...
  "scripts": {
    "lint:css": "stylelint --ignore-path .gitignore '**/*.scss'",
  },
  ...
}

--ignore-path에 .gitignore 파일을 설정하여 불필요한 파일들을 검사하지 않도록 하였습니다.

SCSS를 위한 Stylelint 실행

다음으로 Stylelint가 잘 실행되는지 확인하기 위해 test.scss 파일을 생성하고 다음과 같이 수정합니다.

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

그런 다음, 다음 명령어를 실행하여, Stylelint가 잘 실행되는지 확인해 봅니다.

npm run lint:css

Stylelint가 잘 설치되고 설정되었다면, 다음과 같은 경고를 확인할 수 있습니다.

test.scss
 1:14  ✖  Expected "Helvetica" to be "helvetica"  value-keyword-case

test.scss 파일을 다음과 같이 수정하고, Stylelint를 실행하면, 문제가 해결되는 것을 확인할 수 있습니다.

$font-stack: helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

CSS-in-JS를 위한 Stylelint

저는 주로 React를 사용하여 개발을 하고 있으며 MUI와 CSS-in-JS 라이브러리인 Emotion을 사용하여 스타일링을 하고 있습니다.

• MUI
• Emotion

Stylelint를 사용하여 CSS-in-JS의 스타일을 검사하는 방법에 대해서 살펴보도록 하겠습니다.

프로젝트 준비

Stylelint를 사용하여 CSS-in-JS의 스타일 검사를 하기 위해 CRA(create-react-app)를 사용하여 샘플 프로젝트를 생성해 보도록 하겠습니다. CRA를 설치하거나 CRA를 사용하여 React 프로젝트를 생성하는 방법에 대한 자세한 내용은 이전 블로그를 참고하시기 바랍니다.

• create-react-app

다음 명령어를 사용하여 React 프로젝트를 생성합니다.

npx create-react-app stylelint-example --template typescript

다음 명령어를 사용하여 Emotion과 MUI를 설치합니다.

npm install --save @mui/material @emotion/react @emotion/styled

그리고 CSS-in-JS를 사용하여 스타일링을 하기 위해, ./src/App.tsx 파일을 열고 다음과 같이 수정합니다.

import styled from '@emotion/styled';

const Title = styled.h2`
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
`;

function App() {
  return (
    <div>
      <Title>Learn React</Title>
    </div>
  );
}

export default App;

CSS-in-JS를 위한 Stylelint 설치

Stylelint를 사용하여 CSS-in-JS를 검사하고 싶으신 분들은 다음 명령어를 사용하여 Stylelint와 추가로 필요한 라이브러리를 설치합니다.

npm install --save-dev stylelint stylelint-config-standard stylelint-config-prettier postcss postcss-syntax @stylelint/postcss-css-in-js

CSS-in-JS를 위한 Stylelint 설정

이렇게 설치한 Stylelint를 사용하기 위해 .stylelintrc.json 파일을 생성하고 다음과 같이 수정할 필요가 있습니다.

{
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
  "overrides": [
    {
      "files": ["**/*.tsx"],
      "customSyntax": "@stylelint/postcss-css-in-js"
    }
  ],
  "rules": {
    "function-no-unknown": [true, { "ignoreFunctions": ["/\\${/"] }]
  }
}

CSS-in-JS를 위한 Stylelint 실행 스크립트

Stylelint를 사용하여 모든 CSS-in-JS 파일을 검사하기 위해 package.json 파일을 다음과 같이 수정합니다.

{
  ...
  "scripts": {
    "lint:css": "stylelint --ignore-path .gitignore '**/*.(css|tsx)'"
  },
  ...
}

--ignore-path에 .gitignore 파일을 설정하여 불필요한 파일들을 검사하지 않도록 하였습니다.

CSS-in-JS를 위한 Stylelint 실행

이제, 다음 명령어를 실행하여, Stylelint가 잘 실행되는지 확인해 봅니다.

npm run lint:css

Stylelint가 잘 설치되고 설정되었다면, 다음과 같은 경고를 확인할 수 있습니다.

src/App.css
  1:1   ✖  Expected class selector to be kebab-case  selector-class-pattern
  5:1   ✖  Expected class selector to be kebab-case  selector-class-pattern
 11:3   ✖  Expected class selector to be kebab-case  selector-class-pattern
 16:1   ✖  Expected class selector to be kebab-case  selector-class-pattern
 27:1   ✖  Expected class selector to be kebab-case  selector-class-pattern
 31:12  ✖  Expected keyframe name to be kebab-case   keyframes-name-pattern
 35:3   ✖  Expected empty line before rule           rule-empty-line-before

src/App.tsx
 4:3  ✖  Unexpected longhand value '0 0 1rem 0' instead of '0 0 1rem'  shorthand-property-no-redundant-values

src/index.css
 3:64  ✖  Unexpected quotes around "Roboto"     font-family-name-quotes
 3:74  ✖  Unexpected quotes around "Oxygen"     font-family-name-quotes
 4:6   ✖  Unexpected quotes around "Ubuntu"     font-family-name-quotes
 4:16  ✖  Unexpected quotes around "Cantarell"  font-family-name-quotes

다른 파일들에도 문제가 검출되지만 우리가 수정한 ./src/App.tsx 파일에서 Stylelint로 CSS를 검출했을 때와 동일한 에러가 발생하는 것을 확인할 수 있습니다. 이를 통해, 우리가 설정한 내용이 잘 적용되는 것을 확인할 수 있습니다.

./src/App.tsx 파일을 다음과 같이 수정하고, Stylelint를 실행하면, 해당 파일의 문제가 해결되는 것을 확인할 수 있습니다.

import styled from '@emotion/styled';

const Title = styled.h2`
  margin: 0 0 1rem;
  font-size: 1.5rem;
`;

function App() {
  return (
    <div>
      <Title>Learn React</Title>
    </div>
  );
}

export default App;

TypeError: Cannot read properties of undefined (reading ‘stringify’) 에러

최근 Stylelint의 버전을 14.9.1에서 14.14.0으로 올리면서 다음과 같은 에러가 발생하였습니다.

TypeError: Cannot read properties of undefined (reading 'stringify')
    at Function.stringify (/node_modules/postcss-syntax/stringify.js:8:38)
    at MapGenerator.generate (/node_modules/stylelint/node_modules/postcss/lib/map-generator.js:328:12)
    at LazyResult.stringify (/node_modules/stylelint/node_modules/postcss/lib/lazy-result.js:277:20)
    at LazyResult.runAsync (/node_modules/stylelint/node_modules/postcss/lib/lazy-result.js:443:17)
    at LazyResult.async (/node_modules/stylelint/node_modules/postcss/lib/lazy-result.js:221:30)
    at LazyResult.then (/node_modules/stylelint/node_modules/postcss/lib/lazy-result.js:206:17)

이 에러를 수정하기 위해서는 다음 명령어를 실행하여 postcss을 설치할 필요가 있습니다.

npm install --save-dev postcss

이렇게 postcss을 설치한 후, Stylelint를 실행하면 에러가 수정된 것을 확인할 수 있습니다.

완료

이것으로 Stylelint를 사용하여 CSS/SCSS와 같은 스타일 파일의 내용을 검사하는 방법에 대해서 알아보았습니다. 또한, styled-components/Emotion과 같은 CSS-in-JS 스타일도 검사하는 방법에 대해서 살펴보았습니다.

Github Sponsor Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

지금 보고 계신 블로그를 작성하는 Deku가 개발한 앱을 한번 사용해보세요.
Deku가 개발한 앱은 Flutter로 개발되었습니다.

관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.

어린이용 단어 공부 앱

블라부

세상의 모든 정보를 모아보다

씨로그

JLPT 일본어 단어앱

일단 공부

토익 영어 단어앱

토익 단어앱

중고등 영어 단어앱

중고등 영단어앱

HSK 중국어 단어앱

중국어 단어앱

독일어 단어앱

독일어 단어장

러시아어 단어앱

러시아어 단어장

아랍어 단어앱

아랍어 단어장

인도네시아 단어앱

인도네시아 단어장

프랑스어 단어앱

프랑스어 단어장

스페인어 단어앱

스페인어 단어장

책 홍보

블로그를 운영하면서 좋은 기회가 생겨 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

• 쿠팡: 구매하기
• yes24: 구매하기
• 교보문고: 구매하기
• 알라딘: 구매하기

• 쿠팡: 구매하기
• yes24: 구매하기
• 교보문고: 구매하기
• 알라딘: 구매하기

• 쿠팡: 구매하기
• yes24: 구매하기
• 교보문고: 구매하기
• 알라딘: 구매하기