@shopify/custom-property-analyzer NPM

Custom Property Analyzer

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

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

API

CLI options

Option	Type	Default	Description
-o, --output	string		Output location.
-e, --output-errors	boolean	true	Include errors in output.
-C, --output-custom-properties	boolean	true	Include custom properties in output.
-s, --output-stats	boolean	true	Include stats in output.
-i, --input	string		Input directory for known custom properties. Expects an array of string.
-c, --custom-property-pattern	string		Regex to include custom properties.
-p, --pattern	string	"*/.css."	Glob pattern to find files
-l, --log-level	"verbose" \| "info" \| "error" \| "never"	"verbose"	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
-S, --skip-errors	boolean	false	Determines if error analysis will be executed.
-v, --version			Output the current version
-h, --help			output usage information

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[];
  };
}