antbear

Analyze custom styles usage in the project.

Usage no npm install needed!

<script type="module">
  import antbear from 'https://cdn.skypack.dev/antbear';
</script>

README

[WIP] antbear

Build Status npm

Analyze custom styles usage in the project.

Motivation

We shouldn’t use custom styles on the application level. We should compose our user interfaces from primitive components. Sometimes, a component library isn’t flexible enough to make it possible, especially when it’s young.

By analyzing custom styles usage in the application and finding which component’s styles developers override the most, we can find what’s missing in the component library: missing component props, missing design tokens, and so on.

Supports

  • JavaScript files
  • TypeScript and Flow files
  • styled-components and Emotion (styled factory)
  • sx and css props (Theme UI)
  • CSS
  • CSS Modules
  • Sass

Statistics

  • Custom styles per module
  • Overridden elements
  • Overridden components
  • CSS properties
  • CSS values
  • Custom colors (very basic, needs more work)
  • Custom spacing
  • Components and props
  • Components, props and values

Installation

npm install antbear

Usage

npx antbear 'src/**/*.{js,ts,tsx}'

Changelog

The changelog can be found on the Releases page.

Contributing

Everyone is welcome to contribute. Please take a moment to review the contributing guidelines.

Authors and license

Artem Sapegin and contributors.

MIT License, see the included License.md file.