stylelint.config.js

module.exports = {
    extends: ['stylelint-config-recommended', 'stylelint-config-css-modules', 'stylelint-config-prettier'],
    plugins: ['stylelint-order', 'stylelint-no-unsupported-browser-features', 'stylelint-a11y'],
    rules: {
        'plugin/no-unsupported-browser-features': [
            true,
            {
                browsers: ['last 1 version', '> 3%', 'not ie < 13'],
                severity: 'warning',
            },
        ],
    },
};

browserlist gives the list of browsers

Using targets:
{
  "android": "67",
  "chrome": "67",
  "edge": "17",
  "firefox": "61",
  "ios": "11.3",
  "safari": "11.1"
}

here the css code

#root {
    min-height: 100vh;
}

and the warning

{
   "resource": ".../default.css",
   "owner": "_generated_diagnostic_collection_name_#1",
   "code": "plugin/no-unsupported-browser-features",
   "severity": 4,
   "message": "Unexpected browser feature \"viewport-units\" is not supported by Opera Mini all and only partially supported by IE Mobile 11 (plugin/no-unsupported-browser-features)",
   "source": "stylelint",
   "startLineNumber": 7,
   "startColumn": 5,
   "endLineNumber": 7,
   "endColumn": 5
}

The only way I seem to be able to get the browserlist to be recognised is by setting it in the configuration for the plugin directly using the browsers option rather than having it in the package.json or a browserlist file in the root of the project.

I am using atom and the plugin and stylelint versions should be the latest as I only installed them on the project today.

Is there an example of this working with the package.json or browserlist file configuration.

my stylelint config is as follows

{ "plugins": [ "stylelint-no-unsupported-browser-features" ], "rules": { "plugin/no-unsupported-browser-features": [true, { "severity": "warning", "ignore": ['rem']}] } }

And greenkeeper lockfile and the token.

*** reproduction repository will come in the future, apologies.

I cannot use this plugin - I've tried multiple times, but whenever I try to run stylelint with this plugin this is the result:

    at module.exports (workspacee/node_modules/stylelint/lib/utils/configurationError.js:8:28)
    at workspacee/node_modules/stylelint/lib/augmentConfig.js:325:13
    at Array.forEach (<anonymous>)
    at normalizeAllRuleSettings (workspacee/node_modules/stylelint/lib/augmentConfig.js:318:29)
    at workspacee/node_modules/stylelint/lib/augmentConfig.js:94:14```

these are my configs:

```module.exports = {
	"extends": [
		"stylelint-config-recommended-scss",
		"stylelint-config-recess-order",
		"stylelint-prettier/recommended",
		"stylelint-no-unsupported-browser-features"
	],
	"rules": {
		"no-empty-source": null,
		"plugin/no-unsupported-browser-features": [true, {
			"severity": "warning"
		}]
	},
}

I have tried different variations, but the error is always the same.

package.json is updated to the latest version of stylelint and all related packages using node-check-update.

I also have a browserlist entry in the package.json:

		"defaults",
		"IE 11"
	]```

To clearly inform the user of what versions of node are supported: https://docs.npmjs.com/files/package.json#engines

Hello.

I use this browser configuration"browsers": ["> 1%", "Last 2 versions", "not OperaMin >= 0"] but I get still warnings for Opera Mini like this one:

Unexpected browser feature "background-img-opts" is only supported by Opera Mini all (plugin/no-unsopported-browser-features)

for this css rule

background-size: cover;

How can I disable this warnings? Thought "not OperaMin >= 0" will help, but it doesn't work.

Test with all the supported stylelint versions: https://github.com/watson/test-all-versions

Breaking changes:

• Dropped node 4 support

Other changes:

• Updated stylelint to v9
• Updated doiuse to 4.1.0

Plugin code looks great!

I had a query about what the 2s in the README and tests configs. Should those 2s be trues instead, e.g?:

{
  "plugins": [
    "stylelint-no-unsupported-browser-features"
  ],
  "rules": {
    "plugin/no-unsupported-browser-features": [true, {
      "browsers": ["> 1%", "Last 2 versions"],
      "ignore": ["rem"]
    }]
  }
}

And

config: [true, { browsers: ['IE 8'] }],

To demonstrate functionality. See: https://github.com/conventional-changelog/commitlint readme for example.

Has this plugin been updated for Stylelint v8 compatibility? The README states v5+ support but I'm getting the following error on any LESS file that has an @import in it:

PS C:\Users\<user>\Desktop\stylelint-test-case> yarn run lint
yarn run v1.0.1
$ stylelint src/**/*.less
Error: Unkonwn node type import
    at C:\Users\<user>\Desktop\stylelint-test-case\node_modules\doiuse\lib\detect-feature-use.js:152:19
    at Root.each (C:\Users\<user>\Desktop\stylelint-test-case\node_modules\postcss-less\node_modules\postcss\lib\container.js:114:22)
    at Detector.node (C:\Users\<user>\Desktop\stylelint-test-case\node_modules\doiuse\lib\detect-feature-use.js:137:13)
    at Detector.process (C:\Users\<user>\Desktop\stylelint-test-case\node_modules\doiuse\lib\detect-feature-use.js:163:12)
    at Object.postcss (C:\Users\<user>\Desktop\stylelint-test-case\node_modules\doiuse\lib\doiuse.js:40:23)
    at postCssPlugin (C:\Users\<user>\Desktop\stylelint-test-case\node_modules\stylelint-no-unsupported-browser-features\index.js:35:27)
    at Promise.resolve.then (C:\Users\<user>\Desktop\stylelint-test-case\node_modules\stylelint\lib\lintSource.js:161:9)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Here's a reduced test case.

Downgrading to stylelint@^7.0.0 fixes this issue.

https://github.com/ai/browserslist#environments

doiuse right now have no active maintainer. Maybe you want to maintain it as author of stylelint-no-unsupported-browser-features (great plugin, thanks).

@ismay I didn’t find your email to add your to our discussion.

Basically stylelint/stylelint#2222:

If I use tools like autoprefixer, I want to not get warnings for issues solved by autoprefixer.

https://github.com/ismay/stylelint-no-unsupported-browser-features#recommendations

Should have a leading dot.

getting this error

Running "uglify:campaign" (uglify) task
    >> app/styles/components/_tables.scss
    >>  62:3  ���  Unexpected browser feature "css-sticky" is not supported by Edge 13,14,15 and only partially supported by Firefox 52,53,54, Chrome 57,58,59, Opera 44,45,46, Chrome for Android 59   plugin/no-unsupported-browser-features
    >> Linted 142 files without errors

While my browserslist has these config

last 3 Chrome versions
last 3 Firefox versions
last 3 Edge versions
last 3 Opera versions
last 3 ChromeAndroid versions
last 3 Safari versions

cc @ai

• https://github.com/stylelint/stylelint/blob/master/docs/user-guide/plugins.md

Will be EOL soon.

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

Your Greenkeeper Bot 🌴

Hi,

thanks for a cool plugin!

Is it suppose to correctly parse SCSS variables? I'm having a problem that if I have SCSS variables with names like

$filter-background
$resize-something

,so contains resize/filter, the plugin throws an error regarding css-filter, and css-resize options being not supported by IE>10.

Here is my stylelint congif:

{
  "plugins": [
    "stylelint-no-unsupported-browser-features"
  ],
  "rules": {
    "plugin/no-unsupported-browser-features": [true, {
      "browsers": ["IE >= 10"]
    }]
  }
}

and exceprt of SCSS file:

$modal-form-filter: #3d81c4;
$resize-background: #f5f6f7;
$resize-button-border: #d8dce1;

and output:

 6:1  ⚠  Unexpected browser feature "css-filters" is not supported by IE 10,11   plugin/no-unsupported-browser-features
 7:1  ⚠  Unexpected browser feature "css-resize" is not supported by IE 10,11    plugin/no-unsupported-browser-features

Here is a repo with minimal config: https://github.com/snaumov/stylelint-no-browser-features-issue

Hi Guys,

I could have a new feature request and want to check if that's in line with the project.

Currently, I'm struggling to filter out the supported features that are potentially dangerous and those that are partially supported (in most cases harmless)
Since you can only switch the plugin to either one of the severities (warning/error)

What if we could have something like

    "plugin/no-unsupported-browser-features": [true, {
      "severity": "warning",
      "error": ["css-resize"]
    }]

and the other way around

    "plugin/no-unsupported-browser-features": [true, {
      "severity": "error",
      "warning": ["flexbox"]
    }]

Let me know what you guys think
Best

Jakubikan

Hi,
Thank you for great plugin!
It would be nice if plugin use browserslist field from package.json or check all browser list source.

Seems to not be doing anything and haven't received the initial pr.

• greenkeeperio/greenkeeper#399

And align with the other stuff in those repos.

I ran stylelint with width: unset as a CSS rule, but the linter did not warn me about this, even though it was warning me about other things not supported by IE.

CanIUse shows unset as being unsupported by IE.

Version 2.4.0 of eslint-plugin-import just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As eslint-plugin-import is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

With:

• https://github.com/conventional-changelog/commitlint
• https://github.com/semantic-release/semantic-release

In travis

https://www.npmjs.com/package/eslint-plugin-import

And add node 8 build on travis.

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

The dependency lodash was updated from 4.17.10 to 4.17.11.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

lodash is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

@ismay Can you update doiuse in you plugin dependencies?

Hi! The issue with font unicode range has been fixed in [email protected], so it's time to update dependency?

Currently we're passing ignorePartialSupport to doiuse in the options. It should be omitted because it's not a valid doiuse option.

• Different option combinations
• Common edge cases (https://stylelint.io/developer-guide/rules#commonly-overlooked-edge-cases)

I would love for the plugin to ignore CSS rules that are covered already by feature queries, instead of having to ignore them manually, like this:

@supports (position: sticky) {
  .sticky {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    position: sticky;
  }
}

Stylelint is already at v8 and we're still adding v5 here so maybe something along the line of peer dependencies would work fine:

"peerDependencies": {
  "stylelint": ">=5.0.0" 
}

See stylelint benchmarks: https://github.com/stylelint/stylelint/blob/master/scripts/benchmark-rule.js, which uses https://www.npmjs.com/package/benchmark.

https://www.npmjs.com/package/stylelint-no-unsupported-browser-features

the :focus-within selector is an experimental feature, with the configuration of IE11 I had expected this to be picked up.

body:focus-within {
   background: green;
}

Any suggestions?

Add plugin into my stylintrc file as described

"plugins": [
        "stylelint-order",
        "stylelint-no-unsupported-browser-features"
    ],
    "rules": {
        "plugin/no-unsupported-browser-features": [true, {
            "severity": "warning"
        }],

also have created browserslist and .browserslistrc files and added list into package.json

Chrome >= 63
Firefox >= 58
Safari >= 11.11
iOS >= 10.3
Edge >= 41

but plugin doesnt recognizes browsers list
only by adding browsers list into .stylelintrc force the plugin to work

Thanks for the plugin!

I'm not sure if it's a bug with stylelint-no-unsupported-browser-features or with one of the underlying packages, but when a preprocessor (SASS) function containing calc word in its name is used the calc feature is reported as being used.

For example, with letter-spacing:rem-calc(1.8px); this is reported:

Unexpected browser feature "calc" is not supported by Blackberry Browser 7, plugin/no-unsupported-browser-features Opera Mobile 12,12.1 and only partially supported by Android Browser 4.4,4.4.3-4.4.4

The browserlist is

"browserslist": [
    "last 3 versions",
    "not ie_mob > 0",
    "not ie <= 10",
    "not OperaMini all"
  ]

Version 1.13.1 of prettier was just published.

This version is covered by your current version range and after updating it in your project the build failed.

prettier is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

As outlined here: https://stylelint.io/developer-guide/plugins.

Hello. When I try the latest version 4.1.1, the following error occurs:

TypeError: Cannot read property 'ignorePartialSupport' of undefined
    at /private/tmp/repro/node_modules/stylelint-no-unsupported-browser-features/lib/index.js:84:17
    at Array.forEach (<anonymous>)
    at /private/tmp/repro/node_modules/stylelint-no-unsupported-browser-features/lib/index.js:82:29
    at /private/tmp/repro/node_modules/stylelint/lib/lintPostcssResult.js:118:8
    at Array.map (<anonymous>)
    at /private/tmp/repro/node_modules/stylelint/lib/lintPostcssResult.js:110:18
    at Array.forEach (<anonymous>)
    at lintPostcssResult (/private/tmp/repro/node_modules/stylelint/lib/lintPostcssResult.js:74:8)
    at /private/tmp/repro/node_modules/stylelint/lib/lintSource.js:101:13
    at async Promise.all (index 0)

Reproduction

Given files:

/* a.css */
a {
  filter: brightness(110%);
}

# .browserslistrc
last 2 versions

// package.json
{
  "dependencies": {
    "stylelint": "^13.7.2",
    "stylelint-no-unsupported-browser-features": "^4.1.1"
  }
}

Run:

$ node_modules/.bin/stylelint a.css
TypeError: Cannot read property 'ignorePartialSupport' of undefined
    at /private/tmp/repro/node_modules/stylelint-no-unsupported-browser-features/lib/index.js:84:17
    at Array.forEach (<anonymous>)
    at /private/tmp/repro/node_modules/stylelint-no-unsupported-browser-features/lib/index.js:82:29
    at /private/tmp/repro/node_modules/stylelint/lib/lintPostcssResult.js:118:8
    at Array.map (<anonymous>)
    at /private/tmp/repro/node_modules/stylelint/lib/lintPostcssResult.js:110:18
    at Array.forEach (<anonymous>)
    at lintPostcssResult (/private/tmp/repro/node_modules/stylelint/lib/lintPostcssResult.js:74:8)
    at /private/tmp/repro/node_modules/stylelint/lib/lintSource.js:101:13
    at async Promise.all (index 0)

I would be happy if you could confirm it.