@vkcn/report

The tool that helps to detect VKCN (vue-kebab-class-naming) violations:

• element class selectors that are defined in different files.
• modifier class selectors that may leak in different files.

It was created specifically for VKCN convention and will not work with any other naming conventions.

Class extraction supported from files: .css, .scss, .vue.

How to use it

Install the package as a devDependency

npm install -D @vkcn/reporter

yarn add -D @vkcn/reporter

pnpm add -D @vkcn/reporter

This tool can be used:

• programmatically - in a script for a custom reporter
• cli - run as a command from the terminal

Programmatic usage

Use it in a js/ts script

import { findViolationsInFiles } from "@vkcn/reporter"

const { duplicates, leaks } = await findViolationsInFiles({
  files: ["styles/**/*.{scss,css}", "components/**/*.vue"],
  ignore: ["some/styles/to/ignore/*.css"],
})

doSomethingWithDuplicates(duplicates)
doSomethingWithLeaks(leaks)

Options: files and ignore should be an array of patterns (provided by glob package)

CLI usage

Use it via a shell

vkcn-reporter <files> -i <ignore>

Where <files> and <ignore> - are patterns provided by glob package. Can be used for multiple patterns split by a space vkcn-reporter 'components/**/*.vue styles/**/*.scss'. (Make sure your folder and file names do not contain space)

If violations are found, the process will finish with a code 1