Compat Report

A DevTools panel for flagging browser compatibility issues

Overview

This extension creates a Developer Tools panel that provides a basic overview of potential browser compatibility issues, using data from MDN. It's compatible with Mozilla Firefox and Google Chrome.

Installation

• Mozilla Firefox: https://addons.mozilla.org/en-US/firefox/addon/compat-report/
• Google Chrome: Coming soon

Development

Architecture

The panel is a JavaScript application built with Preact.js and Redux.

Some files exist in the dist/ directory, such as the extension manifest, images and the background scripts. In the majority of times, however, you'll be working on the src/ directory, where the Preact components and the key libraries live.

Inside lib/, the main file is StyleSheet.js, a module for parsing and processing stylesheets using PostCSS. When processing a stylesheet, it uses 3 sub-modules to process different types of elements:

• lib/AtRule.js: processes at-rules
• lib/Selector.js: processes selectors
• lib/Declaration.js: processes declarations

Transforms

When processing a declaration, the property will be matched against the list of CSS properties from MDN. This is a trivial comparison – when we find a property, say transform, we look for a mdn.css.properties.transform object.

But MDN compat data has the concept of sub-features, a variant of an object that introduces different browser support. In the example of transform, this could be 3D transforms.

This is identified by mdn.css.properties.transform.3d in MDN, but matching it with a CSS declaration is more complex than a textual comparison, as we need to look for transform functions (matrix3d, rotate3d, scale3d or translate3d). We need a set of rules that specify how each sub-feature can be identified in a block of CSS.

We do this with transforms (probably not the best name for the concept, but the best I could do). Each transform consists of a JavaScript file that receives a declaration, a rule and a list of MDN compatibility keys (like transform and transform.3d). The latter can be modified by a transform, which can add a new key to the list to signal a new compatibility problem, or remove existing items from the list if the transform believes that the context of the rule/declaration means that a particular key shouldn't be flagged as a compatibility issue.

To see an example, check the transform-3d transform which determines whether a transform function has been used in a declaration, applying the transform.3d sub-property if so.

Installing

1. Clone the repository

   git clone git@github.com:eduardoboucas/compat-report.git

2. Install the dependencies using NPM

   npm install

3. Watch for changes

   npm run watch

Test suite

Unit tests use Jest and live in the test/ directory.

To run the suite:

npm test

Credits

Logo made by Smashicons. Icon made by Coucou.