Storybook Addon Baseline

• 

  The addon parses the code in the story and provides support report

Inspiration

Working on a component library that would be used on multiple products with different degrees of browser support.

CSS feature support is complex. Just because something works in Chrome doesn't mean it's production-ready. The Baseline project provides good data, and this gives developers a way to verify support as they are working on components in Storybook.

How I built this

Used Storybook's addon API to hook into the preview pipeline. The addon scans CSS in stories, maps features to baseline data from the web-features package and displays status in the toolbar.

What's next

• Add support for JavaScript and HTML features
• Allow users to enter a support target
• Integrate with build tools to fail builds when using unsupported features

Built With

• css-tree
• node.js
• storybook
• typescript