style-sentry
Advanced tools
A custom CSS linter and VSCode extension to enforce team's design system rules.
Style Sentry is a custom CSS linter and VSCode extension designed to enforce your team's design system and coding standards.
.css, .scss, and .less files.classnames library (cn, classNames, clsx) for dynamic class composition.@mixin (e.g., &.oval, &.round) and TypeScript/webpack alias paths (e.g., @styles/, @components/)..css, .scss, and .less files. Note: This rule currently skips validation for declarations using preprocessor variables (e.g., $variable, @variable) as it cannot resolve their final color values.z-index, font-size, width) to maintain consistency and prevent issues. Supports .css, .scss, and .less files.To use the Style Sentry CLI, install it globally:
npm install -g style-sentry
Before using Style Sentry, you need a .stylesentryrc.js configuration file in your project root. To easily generate this file, run the following command:
npx style-sentry init
This command will create a .stylesentryrc.js file with a basic configuration.
Style Sentry is configured using a .stylesentryrc.js file in the root of your project. Here is an example configuration:
module.exports = {
rules: {
'no-unused-classes': {
enabled: true,
ignoreDynamicClasses: true,
},
'design-system-colors': {
allowedColors: ['#FFFFFF', '#000000', 'blue', 'red', 'green'],
},
'numeric-property-limits': {
'z-index': { threshold: 100, operator: '>=' },
'font-size': { threshold: 32, operator: '>=' },
},
},
};
&.icon i used by an <Icon> component) may be flagged as unused even if they are actually used in the browser. This is a known limitation of static analysis.To run the linter from the command line, execute the style-sentry command in your project's root directory:
style-sentry
To get the output in JSON format, use the --json flag:
style-sentry --json
Enhance your development workflow with the Style Sentry VS Code Extension. It provides real-time linting directly in your editor, displaying errors and warnings as you type or save. This offers immediate feedback and a seamless integration with your coding environment.
Install it from the Visual Studio Code Marketplace.
.css、.scss、.lessファイルをサポートします。classnamesライブラリ（cn、classNames、clsx）による動的クラス構成を完全にサポートします。@mixin内のネストされたクラス（&.oval、&.roundなど）や、TypeScript/webpackのエイリアスパス（@styles/、@components/など）も自動的にサポートします。.css、.scss、.lessファイルをサポートします。注: このルールは現在、プリプロセッサ変数（例: $variable、@variable）を使用する宣言については、最終的な色値を解決できないため、検証をスキップします。z-index、font-size、widthなどの数値CSSプロパティの制限をチェックし、一貫性を維持し、問題を防止します。.css、.scss、.lessファイルをサポートします。Style Sentry CLIを使用するには、グローバルにインストールします:
npm install -g style-sentry
Style Sentryを使用する前に、プロジェクトのルートに .stylesentryrc.js 設定ファイルが必要です。このファイルを簡単に生成するには、次のコマンドを実行します:
npx style-sentry init
このコマンドは、基本的な設定を持つ .stylesentryrc.js ファイルを生成します。
Style Sentryは、プロジェクトのルートにある .stylesentryrc.js ファイルで設定します。以下は設定例です:
module.exports = {
rules: {
'no-unused-classes': {
enabled: true,
ignoreDynamicClasses: true,
},
'design-system-colors': {
allowedColors: ['#FFFFFF', '#000000', 'blue', 'red', 'green'],
},
'numeric-property-limits': {
'z-index': { threshold: 100, operator: '>=' },
'font-size': { threshold: 32, operator: '>=' },
},
},
};
<Icon>コンポーネントで使用される&.icon i）は、実際にブラウザで使用されていても未使用としてフラグが立てられる場合があります。これは静的解析の既知の制限です。コマンドラインからリンターを実行するには、プロジェクトのルートディレクトリで style-sentry コマンドを実行します:
style-sentry
結果をJSON形式で取得するには、--json フラグを使用します:
style-sentry --json
Style Sentry VS Code拡張機能で開発ワークフローを強化しましょう。この拡張機能は、入力または保存時にエディターで直接リアルタイムリンティングを提供し、即座のフィードバックとコーディング環境とのシームレスな統合を実現します。
Visual Studio Code Marketplaceからインストールしてください。
.css, .scss, .less 파일을 지원합니다.classnames 라이브러리(cn, classNames, clsx)를 통한 동적 클래스 구성을 완전히 지원합니다.@mixin 내부의 중첩된 클래스(&.oval, &.round 등)와 TypeScript/webpack의 별칭 경로(@styles/, @components/ 등)도 자동으로 지원합니다..css, .scss, .less 파일을 지원합니다. 참고: 이 규칙은 현재 전처리기 변수(예: $variable, @variable)를 사용하는 선언에 대해서는 최종 색상 값을 확인할 수 없으므로 유효성 검사를 건너뜁니다.z-index, font-size, width와 같은 숫자 CSS 속성에 대한 제한을 확인하여 일관성을 유지하고 문제를 방지합니다. .css, .scss, .less 파일을 지원합니다.Style Sentry CLI를 사용하려면, 전역 설치합니다:
npm install -g style-sentry
Style Sentry를 사용하기 전에 프로젝트 루트에 .stylesentryrc.js 설정 파일이 필요합니다. 이 파일을 쉽게 생성하려면 다음 명령어를 실행하세요:
npx style-sentry init
이 명령어는 기본 설정이 포함된 .stylesentryrc.js 파일을 생성합니다.
Style Sentry는 프로젝트 루트의 .stylesentryrc.js 파일을 통해 설정합니다. 아래는 설정 예시입니다:
module.exports = {
rules: {
'no-unused-classes': {
enabled: true,
ignoreDynamicClasses: true,
},
'design-system-colors': {
allowedColors: ['#FFFFFF', '#000000', 'blue', 'red', 'green'],
},
'numeric-property-limits': {
'z-index': { threshold: 100, operator: '>=' },
'font-size': { threshold: 32, operator: '>=' },
},
},
};
<Icon> 컴포넌트에서 사용되는 &.icon i)는 실제로 브라우저에서 사용되고 있어도 미사용으로 표시될 수 있습니다. 이는 정적 분석의 알려진 제한사항입니다.커맨드 라인에서 린터를 실행하려면, 프로젝트 루트 디렉토리에서 style-sentry 명령을 실행하세요:
style-sentry
결과를 JSON 형식으로 받으려면 --json 플래그를 사용하세요:
style-sentry --json
Style Sentry VS Code 확장 프로그램으로 개발 워크플로우를 향상시키세요. 이 확장 프로그램은 코드를 입력하거나 저장할 때 에디터에서 직접 실시간 린팅을 제공하여 즉각적인 피드백과 코딩 환경과의 원활한 통합을 제공합니다.
Visual Studio Code Marketplace에서 설치할 수 있습니다.
FAQs
A custom CSS linter and VSCode extension to enforce team's design system rules.
The npm package style-sentry receives a total of 2 weekly downloads. As such, style-sentry popularity was classified as not popular.
We found that style-sentry demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.