Stylelint Config Inspector

A visual tool for inspecting and understanding your Stylelint configuration.

Screenshot

Usage

From a project that contains a Stylelint config (stylelint.config.* or .stylelintrc*), run:

npx stylelint-config-inspector@latest

Then open http://localhost:8888/ (If it does not open automatically) to explore your config.

Resolve for a target file

Use a target file so Stylelint resolves context-sensitive options (overrides, customSyntax, etc.):

npx stylelint-config-inspector --file src/styles/app.css

If you do not provide --file or --target, the inspector resolves your config against a synthetic file named stylelint-inspector-target.css relative to the resolved base path.

--file and --target are equivalent.

CLI

stylelint-config-inspector [options]
stylelint-config-inspector build [options]

Core options

• --config <configFile>: explicit config file path
• --basePath <basePath>: root path used for glob resolution
• --file <filePath>: alias of --target
• --target <filePath>: file used for effective config resolution
• --files: include matched file metadata in payload (enabled by default)

Static build

To generate a static inspector snapshot:

npx stylelint-config-inspector build

This emits a single-page app in .stylelint-config-inspector.

Monorepo / package subdirectory inspection

When inspecting a package inside a monorepo, set the base path for file glob matching and target resolution:

npx stylelint-config-inspector --config stylelint.config.mjs --basePath packages/web --file src/app.css

Environment aliases are also supported:

• STYLELINT_BASE_PATH (or legacy ESLINT_BASE_PATH)
• STYLELINT_TARGET (or legacy ESLINT_TARGET)

Run npx stylelint-config-inspector --help for all options.

License

Apache-2.0

Contributors ✨

Thanks goes to these wonderful people (emoji key):