Skip to content

Commit

Permalink
Add media-feature-range-notation
Browse files Browse the repository at this point in the history 
Co-authored-by: sidverma32 <sid.verma32@gmail.com>
  • Loading branch information
@jeddy3 @sidverma32
jeddy3 and sidverma32 committed Nov 29, 2022
1 parent 2290f55 commit 545eddd
Show file tree
Hide file tree
Showing 6 changed files with 354 additions and 8 deletions.
1 change: 1 addition & 0 deletions docs/user-guide/rules.md
View file
Expand Up @@ -217,6 +217,7 @@ Enforce one representation of things that have multiple with these `notation` (s
- [`hue-degree-notation`](../../lib/rules/hue-degree-notation/README.md): Specify number or angle notation for degree hues (Autofixable).
- [`import-notation`](../../lib/rules/import-notation/README.md): Specify string or URL notation for `@import` rules (Autofixable).
- [`keyframe-selector-notation`](../../lib/rules/keyframe-selector-notation/README.md): Specify keyword or percentage notation for keyframe selectors (Autofixable).
- [`media-feature-range-notation`](../../lib/rules/media-feature-range-notation/README.md): Specify context or prefix notation for media feature ranges.
- [`selector-not-notation`](../../lib/rules/selector-not-notation/README.md): Specify simple or complex notation for `:not()` pseudo-class selectors (Autofixable).
- [`selector-pseudo-element-colon-notation`](../../lib/rules/selector-pseudo-element-colon-notation/README.md): Specify single or double colon notation for applicable pseudo-element selectors (Autofixable).

Expand Down
20 changes: 12 additions & 8 deletions lib/reference/mediaFeatures.js
View file
Expand Up @@ -14,18 +14,24 @@ const deprecatedMediaFeatureNames = new Set([
'min-device-width',
]);

const mediaFeatureNames = uniteSets(deprecatedMediaFeatureNames, [
'any-hover',
'any-pointer',
const rangeTypeMediaFeatureNames = new Set([
'aspect-ratio',
'color-index',
'color',
'height',
'monochrome',
'resolution',
'width',
]);

const mediaFeatureNames = uniteSets(deprecatedMediaFeatureNames, rangeTypeMediaFeatureNames, [
'any-hover',
'any-pointer',
'color-gamut',
'color-index',
'display-mode',
'dynamic-range',
'forced-colors',
'grid',
'height',
'hover',
'inverted-colors',
'light-level',
Expand All @@ -43,7 +49,6 @@ const mediaFeatureNames = uniteSets(deprecatedMediaFeatureNames, [
'min-monochrome',
'min-resolution',
'min-width',
'monochrome',
'orientation',
'overflow-block',
'overflow-inline',
Expand All @@ -52,14 +57,13 @@ const mediaFeatureNames = uniteSets(deprecatedMediaFeatureNames, [
'prefers-contrast',
'prefers-reduced-motion',
'prefers-reduced-transparency',
'resolution',
'scan',
'scripting',
'update',
'video-dynamic-range',
'width',
]);

module.exports = {
rangeTypeMediaFeatureNames,
mediaFeatureNames,
};
1 change: 1 addition & 0 deletions lib/rules/index.js
View file
Expand Up @@ -197,6 +197,7 @@ const rules = {
'media-feature-parentheses-space-inside': importLazy(() =>
require('./media-feature-parentheses-space-inside'),
)(),
'media-feature-range-notation': importLazy(() => require('./media-feature-range-notation'))(),
'media-feature-range-operator-space-after': importLazy(() =>
require('./media-feature-range-operator-space-after'),
)(),
Expand Down
74 changes: 74 additions & 0 deletions lib/rules/media-feature-range-notation/README.md
View file
@@ -0,0 +1,74 @@
# media-feature-range-notation

Specify context or prefix notation for media feature ranges.

<!-- prettier-ignore -->
```css
@media (width >= 600px) and (min-width: 600px) {}
/** ↑ ↑
* These media feature notations */
```

Media features of the range type can be written using prefixes or the more modern context notation.

Because `min-` and `max-` both equate to range comparisons that include the value, they may be [limiting in certain situations](https://drafts.csswg.org/mediaqueries/#mq-min-max).

## Options

`string`: `"context"|"prefix"`

### `"context"`

Media feature ranges _must always_ use context notation.

The following patterns are considered problems:

<!-- prettier-ignore -->
```css
@media (min-width: 1px) {}
```

<!-- prettier-ignore -->
```css
@media (min-width: 1px) and (max-width: 2px) {}
```

The following patterns are _not_ considered problems:

<!-- prettier-ignore -->
```css
@media (width >= 1px) {}
```

<!-- prettier-ignore -->
```css
@media (1px <= width >= 2px) {}
```

### `"prefix"`

Media feature ranges _must always_ use prefix notation.

The following patterns are considered problems:

<!-- prettier-ignore -->
```css
@media (width >= 1px) {}
```

<!-- prettier-ignore -->
```css
@media (1px <= width >= 2px) {}
```

The following patterns are _not_ considered problems:

<!-- prettier-ignore -->
```css
@media (min-width: 1px) {}
```

<!-- prettier-ignore -->
```css
@media (min-width: 1px) and (max-width: 2px) {}
```
177 changes: 177 additions & 0 deletions lib/rules/media-feature-range-notation/__tests__/index.js
View file
@@ -0,0 +1,177 @@
'use strict';

const stripIndent = require('common-tags').stripIndent;

const { messages, ruleName } = require('..');

testRule({
ruleName,
config: ['context'],

accept: [
{
code: '@media {}',
description: 'empty media query',
},
{
code: '@media () {}',
description: 'empty media feature',
},
{
code: '@media screen {}',
description: 'keyword',
},
{
code: '@media (color) {}',
description: 'range type media feature in boolean context',
},
{
code: '@media (color > 0) {}',
description: 'range type media feature in non-boolean context',
},
{
code: '@media (pointer: fine) {}',
description: 'discrete type media feature',
},
{
code: '@media (width >= 1px) {}',
description: 'range type media feature in context notation',
},
{
code: '@media screen and (width >= 1px) {}',
description: 'range type media feature in context notation with keyword',
},
{
code: '@media not print, (width >= 1px) {}',
description: 'range type media feature in context notation in media query list',
},
{
code: '@media (1px <= width >= 2px) {}',
description: 'range type media feature in context notation with two values',
},
],

reject: [
{
code: '@media (min-width: 1px) {}',
description: 'range type media feature in prefix notation',
message: messages.expected('context'),
line: 1,
column: 8,
endLine: 1,
endColumn: 24,
},
{
code: '@media screen and (min-width: 1px) {}',
description: 'range type media feature in prefix notation with keyword',
message: messages.expected('context'),
line: 1,
column: 19,
endLine: 1,
endColumn: 35,
},
{
code: '@media not print, (min-width: 1px) {}',
description: 'range type media feature in prefix notation in media query list',
message: messages.expected('context'),
line: 1,
column: 19,
endLine: 1,
endColumn: 35,
},
{
code: stripIndent`
@media (min-width: 1px)
and (max-width: 2px) {}
`,
description: 'two range type media features in prefix notation',
warnings: [
{ message: messages.expected('context'), line: 1, column: 8, endLine: 1, endColumn: 24 },
{ message: messages.expected('context'), line: 2, column: 7, endLine: 2, endColumn: 23 },
],
},
],
});

testRule({
ruleName,
config: ['prefix'],

accept: [
{
code: '@media {}',
description: 'empty media query',
},
{
code: '@media () {}',
description: 'empty media feature',
},
{
code: '@media screen {}',
description: 'keyword',
},
{
code: '@media (color) {}',
description: 'range type media feature in boolean context',
},
{
code: '@media (min-color: 1) {}',
description: 'range type media feature in non-boolean context',
},
{
code: '@media (pointer: fine) {}',
description: 'discrete type media query',
},
{
code: '@media (min-width: 1px) {}',
description: 'range type media feature in prefix notation',
},
{
code: '@media screen and (min-width: 1px) {}',
description: 'range type media feature in prefix notation with keyword',
},
{
code: '@media not print, (min-width: 1px) {}',
description: 'range type media feature in prefix notation in media query list',
},
],

reject: [
{
code: '@media (width >= 1px) {}',
description: 'range type media feature in context notation',
message: messages.expected('prefix'),
line: 1,
column: 8,
endLine: 1,
endColumn: 22,
},
{
code: '@media screen and (width >= 1px) {}',
description: 'range type media feature in context notation with keyword',
message: messages.expected('prefix'),
line: 1,
column: 19,
endLine: 1,
endColumn: 33,
},
{
code: '@media not print, (width >= 1px) {}',
description: 'range type media feature in context notation in media query list',
message: messages.expected('prefix'),
line: 1,
column: 19,
endLine: 1,
endColumn: 33,
},
{
code: '@media (1px < width >= 2px) {}',
description: 'range type media feature in context notation with two values',
message: messages.expected('prefix'),
line: 1,
column: 8,
endLine: 1,
endColumn: 28,
},
],
});

0 comments on commit 545eddd

Please sign in to comment.