Skip to content
πŸ”Œ A Developer Tools panel for flagging browser compatibility issues
Branch: master
Clone or download
Latest commit 019b034 Jun 5, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update screenshot in README Dec 10, 2017
dist Update README Dec 10, 2017
pre-build Initial commit Nov 20, 2017
src Merge pull request #15 from lefta/data-update Jun 5, 2018
test Add transforms Dec 9, 2017
.babelrc Initial commit Nov 20, 2017
.gitignore Update README Dec 10, 2017
.travis.yml Add test suite Nov 25, 2017
README.md Fix links in the readme Feb 2, 2018
package-lock.json Add PostCSS Nov 25, 2017
package.json
test.js Add transforms Dec 9, 2017
webpack.config.js Add transforms Dec 9, 2017

README.md

Colorful Lego bricks

Compat Report

coverage Build Status

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.

Screenshot of Compat Report

Installation

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.

You can’t perform that action at this time.