Proposal: Integrate @eslint/css for CSS Linting #91
Description
ESLint now officially supports linting of CSS using @eslint/css
https://www.npmjs.com/package/@eslint/css
TL;DR (요약)
ESLint now officially supports CSS linting through the @eslint/css plugin. This proposal suggests integrating @eslint/css into @naverpay/eslint-config to provide built-in CSS linting capabilities.
ESLint가 @eslint/css 플러그인을 통해 CSS 린팅을 공식적으로 지원한다고 발표했습니다.
아직 버전이 0.4.0이지만 1.0.0 까지 오른다면 @eslint/css를 @naverpay/eslint-config에 통합하여 CSS 및 PostCSS 린팅 기능을 기본적으로 제공하는 것이 어떨까 제안드립니다.
Background (배경)
The ESLint team announced official CSS linting support in February 2025 with the release of the @eslint/css plugin. This plugin leverages the CSSTree project for parsing and provides a set of built-in rules for CSS linting. It also offers flexibility to support PostCSS syntax through custom configuration.
ESLint 팀은 2025년 2월 @eslint/css 플러그인 출시와 함께 공식적인 CSS 린팅 지원을 발표했습니다. 이 플러그인은 CSSTree 프로젝트를 활용하여 CSS를 파싱하고 CSS 린팅을 위한 기본 규칙 세트를 제공합니다. 또한 사용자 정의 구성을 통해 PostCSS 문법을 지원할 수 있는 유연성을 제공합니다.
Proposed Solution (제안하는 해결책)
-
Install @eslint/css as a dependency: Add @eslint/css as a development dependency to @naverpay/eslint-config.
@eslint/css를 의존성으로 설치: @eslint/css를 @naverpay/eslint-config의 개발 의존성으로 추가합니다. -
Configure ESLint to use the @eslint/css plugin: Update the ESLint configuration to include the @eslint/css plugin and configure it to lint CSS and PostCSS files. A basic configuration could look like this:
ESLint가 @eslint/css 플러그인을 사용하도록 구성: ESLint 구성을 업데이트하여 @eslint/css 플러그인을 포함하고 CSS 및 PostCSS 파일을 린트하도록 구성합니다. 기본적인 구성은 다음과 같습니다:
import css from "@eslint/css";
export default {
overrides: [
{
files: ["**/*.css"],
plugins: {
css,
},
languageOptions: {
parserOptions: {
ecmaVersion: 2024,
sourceType: "module",
},
customSyntax: {
// Add PostCSS custom syntax here. 사용자 정의 문법을 여기에 작성
atrules: {
"define-mixin": {
prelude: "<string>",
},
},
},
tolerant: true, // For PostCSS plugins. PostCSS를 위한 설정
},
language: "css/css",
rules: {
"css/no-duplicate-imports": "error",
"css/no-empty-blocks": "error",
"css/no-invalid-at-rules": "error",
"css/no-invalid-properties": "error",
"css/require-baseline": "warn",
"css/use-layers": "warn",
},
},
],
};-
Consider sensible default rules: Enable a set of sensible default rules from @eslint/css to provide a baseline level of linting for both CSS and PostCSS.
합리적인 기본 규칙 고려: @eslint/css에서 CSS와 PostCSS 모두에 대한 기본 수준의 린팅을 제공하기 위해 합리적인 기본 규칙 세트를 활성화합니다. -
Provide configuration options: Allow users to customize the CSS and PostCSS linting rules and configurations through options in @naverpay/eslint-config.
구성 옵션 제공: @naverpay/eslint-config의 옵션을 통해 사용자가 CSS 및 PostCSS 린팅 규칙 및 구성을 사용자 정의할 수 있도록 합니다. -
Support PostCSS syntax: Include configuration options for PostCSS syntax support, such as customSyntax and tolerant mode.
PostCSS 문법 지원: customSyntax 및 tolerant 모드와 같은 PostCSS 문법 지원을 위한 구성 옵션을 포함합니다.
Benefits (이점)
-
No Need for Stylelint Installation: Since CSS linting is included within the eslint-config, there is no need to install a separate package like Stylelint for style linting.
eslint-config 내부에 함께 포함되어 별도의 스타일 린팅을 위한 패키지 및 설정이 불필요해집니다. -
Ability to Write Custom Plugins: You can create custom plugins specifically for CSS. This enables consistent rule creation across all aspects of ESLint, including CSS.
css를 위한 커스텀 플러그인을 작성할 수 있습니다. 이는 eslint 전반적으로 일관된 룰 작성이 CSS에도 가능해집니다.
Note: Similar to @eslint/json and @eslint/markdown, @eslint/css allows you to create custom rules. Using the CSSTree AST format, you can write your own rules in the same way you would for JavaScript. Code Explorer now supports CSS parsing and is a great resource to help you get started with creating your own rules. link
Potential Drawbacks (잠재적 단점)
Risk of Using an Early Version: The current version of @eslint/css is 0.4.0, which is still in its early stages. It may be necessary to wait for the release of version 1.0.0, as the current version could raise concerns regarding stability and feature completeness.
초기 버전 사용의 위험: @eslint/css의 현재 버전이 0.4.0으로, 아직 초기 단계에 있습니다
1.0.0 정식 버전 출시까지 기다려야 할 수도 있습니다.