Custom Property Analyzer

Custom Property Analyzer is a tool for gathering statistics and identifying errors in css custom properties.

Table of Contents

1. Installation and Usage
2. Code of Conduct
3. API
4. Contributing
5. Help

<a name="installation-and-usage"></a>Installation and Usage

You can install using yarn or npm:

$ yarn add -D @shopify/custom-property-analyzer

$ npm install --save-dev @shopify/custom-property-analyzer

You can then run the executable:

$ ./node_modules/.bin/@shopify/custom-property-analyzer --pattern 'src/**/*.scss' -skip-errors true

<a name="api"></a>API

CLI options

analyzeCustomProperties

// Default export
type AnalyzeCustomProperties = (
  options: Options,
) => Promise<[CustomPropertyMap, CustomPropertyMap, CustomPropertyStats]>;

interface Options {
  /**
   * List of properties that are expected to be found and used to filter properties that are found
   * @default []
   */
  knownCustomProperties?: string[];
  /**
   * Regular expression used to validate properties
   * @default undefined
   */
  customPropertyPattern?: string;
  /**
   * Glob pattern used to find files
   * css & scss files are supported
   * @default '**\/*.css.'
   */
  pattern?: string;
  /**
   * Determines the errors displayed. `verbose` will display everything. `info` will display everything except errors.
   * `error` will only display errors. And `never` will not display any logs
   * @default 'verbose'
   */
  logLevel?: LogLevel;
  /**
   * Determines if error analysis will be executed.
   * @default 'false'
   */
  skipErrors?: boolean;
}

interface CustomPropertyStats {
  uniqueCustomProperties: number;
  totalCustomProperties: number;
  fileCount: number;
}

interface InputStreamPosition {
  cursor: number;
  line: number;
  column: number;
}

interface Location {
  file: string;
  start: InputStreamPosition;
  end: InputStreamPosition;
}

interface CustomPropertyMap {
  [key: string]: {
    declaration: boolean;
    usedFromDeclaration: boolean;
    count: number;
    locations: Location[];
  };
}

<a name="code-of-conduct"></a>Code of Conduct

Refer to the Code of Conduct documentation.

<a name="contributing"></a>Contributing

Refer to the Contributing documentation.

<a name="help"></a>Help

React out on slack or open an issue.