A DevTools panel for flagging browser compatibility issues
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.
- Mozilla Firefox: https://addons.mozilla.org/en-US/firefox/addon/compat-report/
- Google Chrome: Coming soon
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.
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
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
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 (
translate3d). We need a set of rules that specify how each sub-feature can be identified in a block of CSS.
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.
Clone the repository
git clone firstname.lastname@example.org:eduardoboucas/compat-report.git
Install the dependencies using NPM
Watch for changes
npm run watch
Unit tests use Jest and live in the
To run the suite: