Initial commit

This commit is contained in:
Patrick Marsceill
2017-03-09 13:16:08 -05:00
commit b7b0d0d7bf
4147 changed files with 401224 additions and 0 deletions

View File

@@ -0,0 +1,79 @@
# media-feature-name-no-unknown
Disallow unknown media feature names.
```css
@media (min-width: 700px) {}
/** ↑
* These media feature names */
```
This rule considers media feature names defined in the CSS Specifications, up to and including Editor's Drafts, to be known.
All vendor-prefixed media feature names are ignored.
Caveat: Media feature names within a [range context](https://www.w3.org/TR/mediaqueries-4/#mq-ranges) are currently ignored.
## Options
### `true`
The following patterns are considered warnings:
```css
@media screen and (unknown) {}
```
```css
@media screen and (unknown: 10px) {}
```
The following patterns are *not* considered warnings:
```css
@media all and (monochrome) {}
```
```css
@media (min-width: 700px) {}
```
```css
@media (MIN-WIDTH: 700px) {}
```
```css
@media (min-width: 700px) and (orientation: landscape) {}
```
```css
@media (-webkit-min-device-pixel-ratio: 2) {}
```
## Optional secondary options
### `ignoreMediaFeatureNames: ["/regex/", "string"]`
Given:
```js
["/^my-/", "custom"]
```
The following patterns are *not* considered warnings:
```css
@media screen and (my-media-feature-name) {}
```
```css
@media screen and (MY-MEDIA-FEATURE-NAME) {}
```
```css
@media screen and (custom: 10px) {}
```
```css
@media (min-width: 700px) and (custom: 10px) {}
```

View File

@@ -0,0 +1,68 @@
"use strict"
const atRuleParamIndex = require("../../utils/atRuleParamIndex")
const isCustomMediaQuery = require("../../utils/isCustomMediaQuery")
const isRangeContextMediaFeature = require("../../utils/isRangeContextMediaFeature")
const isStandardSyntaxMediaFeatureName = require("../../utils/isStandardSyntaxMediaFeatureName")
const optionsMatches = require("../../utils/optionsMatches")
const report = require("../../utils/report")
const ruleMessages = require("../../utils/ruleMessages")
const validateOptions = require("../../utils/validateOptions")
const _ = require("lodash")
const keywordSets = require("../../reference/keywordSets")
const mediaParser = require("postcss-media-query-parser").default
const postcss = require("postcss")
const ruleName = "media-feature-name-no-unknown"
const messages = ruleMessages(ruleName, {
rejected: mediaFeatureName => `Unexpected unknown media feature name "${mediaFeatureName}"`,
})
const rule = function (actual, options) {
return (root, result) => {
const validOptions = validateOptions(result, ruleName, { actual }, {
actual: options,
possible: {
ignoreMediaFeatureNames: [_.isString],
},
optional: true,
})
if (!validOptions) {
return
}
root.walkAtRules(/^media$/i, atRule => {
mediaParser(atRule.params).walk(/^media-feature$/i, mediaFeatureNode => {
const parent = mediaFeatureNode.parent,
sourceIndex = mediaFeatureNode.sourceIndex,
value = mediaFeatureNode.value
if (isRangeContextMediaFeature(parent.value) || !isStandardSyntaxMediaFeatureName(value) || isCustomMediaQuery(value)) {
return
}
if (optionsMatches(options, "ignoreMediaFeatureNames", value)) {
return
}
if (postcss.vendor.prefix(value) || keywordSets.mediaFeatureNames.has(value.toLowerCase())) {
return
}
report({
index: atRuleParamIndex(atRule) + sourceIndex,
message: messages.rejected(value),
node: atRule,
ruleName,
result,
})
})
})
}
}
rule.ruleName = ruleName
rule.messages = messages
module.exports = rule