Project Firefly

A CSS Support Validator.

Installation

You can install Project Firefly either through cloning with git or by using npm (the recommended way):

npm install -g project-firefly

Usage

firefly <options>

For CLI options, use the -h (or --help) argument:

firefly -h

Usage: firefly or
       firefly [-i | --input <path>] [-e | --export <path>] [-w | --watch]
       [-j | --json] [-h | --help] [-v | --version]

Options:
   -i, --input <path>    Specify the input file path.
   -e, --export <path>   Export the generated report in JSON format.

Flags:
   -w, --watch           Rerun firefly on file change.
   -j, --json            Output firefly's report in JSON format.
   -h, --help            Output usage information.
   -v, --version         Output the version number.

Configuration File

Use a JavaScript, JSON or YAML file to specify configuration information for an entire directory and all of its subdirectories. Firefly supports the following formats:

• a firefly property in package.json
• a .fireflyrc file in JSON or YAML format
• a .fireflyrc.json file
• a .fireflyrc.yaml, .fireflyrc.yml, or .fireflyrc.js file
• a firefly.config.js file exporting a JS object

Options

mode
Type: string
Default: 'default'
Modes:

• default - Validate the project and output its report.
• export - Export the generated report in JSON format.
• json - Output Firefly's report in JSON format.
• watch - Rerun Firefly on file change.

entry
Type: string or null
Default: null

Specify the input file path. null will validate the entire project.

export
Type: object
Default: {filename: 'report.json', path: './'}
Properties: filename and path

Specify the export path and filename using the relative syntax.

browserslist
Type: array
Default: ['defaults']

An array containing the project's browserslist.

disableFeedbackSystem
Type: boolean
Default: false

Whether Firefly should display the alternatives/feedback or not.

exclude
Type: array
Default: ['**/node_modules']

An array containing files and directories which Firefly should ignore. E.g. ['**/dist, **/node_modules']

ignoreAtSupports
Type: boolean
Default: false

Whether Firefly should ignore @supports declarations or not.

ignoreVendorPrefixes
Type: boolean
Default: false

Whether Firefly should ignore venter prefixes or not. E.g. -webkit-**, -moz-**, etc.

Output

~/Projects/usability-test
❯ firefly
 FAIL  bootstrap.css
  At-Rules (1)
    ✘ [8224:3] safari 12 does not support 'page'.
  Properties (16)
    ✘ [273:3] edge 17 & ie 11 does not support 'resize'.
    ✘ [300:3] ie 11 does not support 'outline-offset'.
    ✘ [633:3] ie 11 does not support 'grid-template-columns'.
    ✘ [634:3] ie 11 does not support 'grid-template-rows'.
    ✘ [3395:3] ie 11 does not support 'appearance'.
    ✘ [3493:3] ie 11 does not support 'appearance'.
    ✘ [3509:3] ie 11 does not support 'appearance'.
    ✘ [3534:3] ie 11 does not support 'appearance'.
    ✘ [3558:3] ie 11 does not support 'appearance'.
    ✘ [4114:3] ie 11 does not support 'object-fit'.
    ✘ [4244:5] firefox 65, safari_ios 11.3 & safari 12 does not support 'orphans'.
    ✘ [4245:5] firefox 65, safari_ios 11.3 & safari 12 does not support 'widows'.
    ✘ [5042:3] firefox 65 does not support 'line-break'.
    ✘ [5152:3] firefox 65 does not support 'line-break'.
    ✘ [8217:5] firefox 65, safari_ios 11.3 & safari 12 does not support 'orphans'.
    ✘ [8218:5] firefox 65, safari_ios 11.3 & safari 12 does not support 'widows'.
  Media Features (7)
    ✘ [1735:19] chrome 72, edge 17 & others does not support 'prefers-reduced-motion'.
    ✘ [2222:19] chrome 72, edge 17 & others does not support 'prefers-reduced-motion'.
    ✘ [2814:19] chrome 72, edge 17 & others does not support 'prefers-reduced-motion'.
    ✘ [2831:19] chrome 72, edge 17 & others does not support 'prefers-reduced-motion'.
    ✘ [4645:19] chrome 72, edge 17 & others does not support 'prefers-reduced-motion'.
    ✘ [4911:19] chrome 72, edge 17 & others does not support 'prefers-reduced-motion'.
    ✘ [5327:19] chrome 72, edge 17 & others does not support 'prefers-reduced-motion'.