Skip to content

Commit

Permalink
Add fully supports and partially supports queries (#787)
Browse files Browse the repository at this point in the history
* Add `fully supports` query

This is like the `supports` query, except it does not include browsers
with partial support for the given feature.

* Add `partially supports` and update docs

`partially supports` does the same thing as `supports` but makes it
clearer that it includes partial browser support.

It feels easier to teach the difference between `fully supports` and
`partially supports` and then say `supports` is an alias` of
`partially supports`.

* Readme updates

* better partial support check
  • Loading branch information
BPScott committed Sep 26, 2023
1 parent b9e2ddd commit 686cc18
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 15 deletions.
22 changes: 15 additions & 7 deletions README.md
Expand Up @@ -19,7 +19,7 @@ when聽you聽add聽the聽following to `package.json`:

```json
"browserslist": [
"defaults and supports es6-module",
"defaults and fully supports es6-module",
"maintained node versions"
]
```
Expand All @@ -29,7 +29,7 @@ Or in `.browserslistrc` config:
```yaml
# Browsers that we support

defaults and supports es6-module
defaults and fully supports es6-module
maintained node versions
```

Expand Down Expand Up @@ -273,13 +273,20 @@ You can specify the browser and Node.js versions by queries (case insensitive):
to PhantomJS runtime.
* `extends browserslist-config-mycompany`: take queries from
`browserslist-config-mycompany` npm package.
* `supports es6-module`: browsers with support for specific features.
`es6-module` here is the `feat` parameter at the URL of the [Can I Use]
page. A list of all available features can be found at
[`caniuse-lite/data/features`].
* By browser support:<br>
In these example queries `es6` and `es6-module` are the the `feat` parameter
from the URL of the [Can I Use] page. A list of all available features can be
found at [`caniuse-lite/data/features`].
* `fully supports es6`: browsers with full support for specific
features. For example `fully supports css-grid` will omit Edge 12-15, as
those browser versions are marked as [having partial support].
* `partially supports es6-module` or `supports es6-module`: browsers with
full or partial support for specific features. For example
`partially supports css-grid` will include Edge 12-15 support, as those
browser versions are marked as [having partial support].
* `browserslist config`: the browsers defined in Browserslist config. Useful
in Differential Serving to modify user鈥檚 config like
`browserslist config and supports es6-module`.
`browserslist config and fully supports es6-module`.
* `since 2015` or `last 2 years`: all versions released since year 2015
(also `since 2015-03` and `since 2015-03-10`).
* `unreleased versions` or `unreleased Chrome versions`:
Expand All @@ -295,6 +302,7 @@ You can add `not ` to any query.
[still maintained]: https://github.com/nodejs/Release
[Can I Use]: https://caniuse.com/
[Firefox Extended Support Release]: https://support.mozilla.org/en-US/kb/choosing-firefox-update-channel
[having partial support]: https://caniuse.com/css-grid

### Grammar Definition

Expand Down
13 changes: 7 additions & 6 deletions index.js
Expand Up @@ -298,10 +298,10 @@ function filterJumps(list, name, nVersions, context) {
return list.slice(jump - 1 - nVersions)
}

function isSupported(flags) {
function isSupported(flags, includePartialSupport) {
return (
typeof flags === 'string' &&
(flags.indexOf('y') >= 0 || flags.indexOf('a') >= 0)
(flags.indexOf('y') >= 0 || (includePartialSupport && flags.indexOf('a') >= 0))
)
}

Expand Down Expand Up @@ -883,10 +883,11 @@ var QUERIES = {
select: coverQuery
},
supports: {
matches: ['feature'],
regexp: /^supports\s+([\w-]+)$/,
matches: ['supportType', 'feature'],
regexp: /^(?:(fully|partially) )?supports\s+([\w-]+)$/,
select: function (context, node) {
env.loadFeature(browserslist.cache, node.feature)
var includePartialSupport = (node.supportType || 'partially') === 'partially';
var features = browserslist.cache[node.feature]
var result = []
for (var name in features) {
Expand All @@ -895,13 +896,13 @@ var QUERIES = {
var checkDesktop =
context.mobileToDesktop &&
name in browserslist.desktopNames &&
isSupported(features[name][data.released.slice(-1)[0]])
isSupported(features[name][data.released.slice(-1)[0]], includePartialSupport)
data.versions.forEach(function (version) {
var flags = features[name][version]
if (flags === undefined && checkDesktop) {
flags = features[browserslist.desktopNames[name]][version]
}
if (isSupported(flags)) {
if (isSupported(flags, includePartialSupport)) {
result.push(name + ' ' + version)
}
})
Expand Down
32 changes: 30 additions & 2 deletions test/feature.test.js
Expand Up @@ -46,10 +46,10 @@ test('throw an error on wrong feature name from Can I Use', () => {
)
})

test('selects browsers by feature', () => {
test('selects browsers by feature, including partial support by default', () => {
browserslist.cache.rtcpeerconnection = {
and_chr: { 81: 'y' },
chrome: { 80: 'n', 81: 'y', 82: 'y' },
chrome: { 80: 'n', 81: 'a', 82: 'y' },
ie: { 10: 'n', 11: 'n' }
}

Expand All @@ -60,6 +60,34 @@ test('selects browsers by feature', () => {
])
})

test('selects browsers by feature, including partial support in partial mode', () => {
browserslist.cache.rtcpeerconnection = {
and_chr: { 81: 'y' },
chrome: { 80: 'n', 81: 'a', 82: 'y' },
ie: { 10: 'n', 11: 'n' }
}

equal(browserslist('partially supports rtcpeerconnection'), [
'and_chr 81',
'chrome 82',
'chrome 81'
])
})

test('selects browsers by feature, omiting partial support in full mode', () => {
browserslist.cache.rtcpeerconnection = {
and_chr: { 81: 'y' },
chrome: { 80: 'n', 81: 'a', 82: 'y' },
ie: { 10: 'n', 11: 'n' }
}

equal(browserslist('fully supports rtcpeerconnection'), [
'and_chr 81',
'chrome 82',
])
})


test('selects browsers by feature with dashes in its name', () => {
browserslist.cache['arrow-functions'] = {
and_chr: { 81: 'n' },
Expand Down

0 comments on commit 686cc18

Please sign in to comment.