Fix media-feature-name-no-vendor-prefix positions for *-device-pixel-ratio

[romainmenke]

What steps are needed to reproduce the bug?

@media (min--moz-device-pixel-ratio: 0.0104), (-webkit-min-device-pixel-ratio: 0.0104) {
  div {
    color: green;
  }
}

What Stylelint configuration is needed to reproduce the bug?

{
  "rules": {
    "media-feature-name-no-vendor-prefix": true
  }
}

How did you run Stylelint?

https://stylelint.io/demo/#N4Igxg9gJgpiBcIACBbGUCWBDABAChQwDsBaElCALxNgDcMwYSAHDADxgBsSAnLAFwwR4OAAwA6UQEZRAFgCUAGnwkA7jABGAawz9yxGjHqMW7LrwFCRE6XPk5gAHSI4cmWg+evXkThB4iAOY8MDBEANxeOAC+ztEgiiAAZhicMAByWGgIIDBsWcxp4mAAziUJ4BBEKYE5Ti44jrls-GFQJU0iANpRrk0l-ACeaZzEepDVGIEkA1hEUFg8UE1RALqKUU08AK5pHQieDX0gaJhYJEkwAtshJERZTEQQJNtEWk+qRJ04XUS7nKsorEiPFEhMagAxfwoAQ5ABWJSqFVgzHKiHqxwGwy4Y2+TU4AhgAyaGwa-SGIzGJHBUxm-DmCyWeJABNaxJAcRA0SAA

Which version of Stylelint or dependencies are you using?

{
  "stylelint": "latest",
  "stylelint-config-standard": "latest"
}

What did you expect to happen?

I expected a correct source index for both media queries.

ERROR Unexpected vendor-prefix (media-feature-name-no-vendor-prefix) [1:9-36]
ERROR Unexpected vendor-prefix (media-feature-name-no-vendor-prefix) [1:48-78]

What actually happened?

The source index for the first media query warning is offset by 3 characters.

ERROR Unexpected vendor-prefix (media-feature-name-no-vendor-prefix) [1:12-36]
ERROR Unexpected vendor-prefix (media-feature-name-no-vendor-prefix) [1:48-78]

Does the bug relate to non-standard syntax?

No response

Proposal to fix the bug

Update :

stylelint/lib/rules/media-feature-name-no-vendor-prefix/index.js

Line 35 in 5abe468

const matches = atRule.toString().match(/-[a-z-]+device-pixel-ratio/gi);

To :

const matches = atRule.toString().match(/(?:min-|max-)?-[a-z-]+device-pixel-ratio/gi);

Add extra tests :

{
	code: '@media (-webkit-min-device-pixel-ratio: 1) {}',
	fixed: '@media (min-device-pixel-ratio: 1) {}',
	message: messages.rejected,
	line: 1,
	column: 9,
},
{
	code: '@media (min--moz-device-pixel-ratio: 1) {}',
	fixed: '@media (min-device-pixel-ratio: 1) {}',
	message: messages.rejected,
	line: 1,
	column: 9,
},
{
	code: '@media ( min--moz-device-pixel-ratio: 1) {}',
	fixed: '@media ( min-device-pixel-ratio: 1) {}',
	message: messages.rejected,
	line: 1,
	column: 10,
},
{
	code: '@media (/* a comment */min--moz-device-pixel-ratio: 1) {}',
	fixed: '@media (/* a comment */min-device-pixel-ratio: 1) {}',
	message: messages.rejected,
	line: 1,
	column: 24,
},

[jeddy3]

@romainmenke Thanks for the report and fix proposal.

I've labelled the issue as ready to implement.