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,66 @@
# function-linear-gradient-no-nonstandard-direction
Disallow direction values in `linear-gradient()` calls that are not valid according to the
[standard syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Syntax).
```css
.foo { background: linear-gradient(to top, #fff, #000); }
/** ↑
* This (optional) first argument is the "direction" */
```
A valid and standard direction value is one of the following:
- an angle
- `to ` plus a side-or-corner (`to top`, `to bottom`, `to left`, `to right`; `to top right`, `to right top`, `to bottom left`, etc.)
A common mistake (matching outdated non-standard syntax) is to use just a side-or-corner without the preceding `to`.
## Options
### `true`
The following patterns are considered warnings:
```css
.foo { background: linear-gradient(top, #fff, #000); }
```
```css
.foo { background: linear-gradient(bottom, #fff, #000); }
```
```css
.foo { background: linear-gradient(left, #fff, #000); }
```
```css
.foo { background: linear-gradient(45, #fff, #000); }
```
```css
.foo { background: linear-gradient(to top top, #fff, #000); }
```
The following patterns are *not* considered warnings:
```css
.foo { background: linear-gradient(to top, #fff, #000); }
```
```css
.foo { background: linear-gradient(to bottom right, #fff, #000); }
```
```css
.foo { background: linear-gradient(45deg, #fff, #000); }
```
```css
.foo { background: linear-gradient(1.57rad, #fff, #000); }
```
```css
/* Direction defaults to "to bottom" */
.foo { background: linear-gradient(#fff, #000); }
```

View File

@@ -0,0 +1,81 @@
"use strict"
const functionArgumentsSearch = require("../../utils/functionArgumentsSearch")
const report = require("../../utils/report")
const ruleMessages = require("../../utils/ruleMessages")
const validateOptions = require("../../utils/validateOptions")
const postcss = require("postcss")
const ruleName = "function-linear-gradient-no-nonstandard-direction"
const messages = ruleMessages(ruleName, {
rejected: "Unexpected nonstandard direction",
})
function isStandardDirection(source, withToPrefix) {
const regexp = withToPrefix ? /^to (top|left|bottom|right)(?: (top|left|bottom|right))?$/ : /^(top|left|bottom|right)(?: (top|left|bottom|right))?$/
const matches = source.match(regexp)
if (!matches) {
return false
}
if (matches.length === 2) {
return true
}
// Cannot repeat side-or-corner, e.g. "to top top"
if (matches.length === 3 && matches[1] !== matches[2]) {
return true
}
return false
}
const rule = function (actual) {
return (root, result) => {
const validOptions = validateOptions(result, ruleName, { actual })
if (!validOptions) {
return
}
root.walkDecls(decl => {
functionArgumentsSearch(decl.toString().toLowerCase(), "linear-gradient", (expression, expressionIndex) => {
const firstArg = expression.split(",")[0].trim()
// If the first character is a number, we can assume the user intends an angle
if (/[\d\.]/.test(firstArg[0])) {
if (/^[\d\.]+(?:deg|grad|rad|turn)$/.test(firstArg)) {
return
}
complain()
return
}
// The first argument may not be a direction: it may be an angle,
// or a color stop (in which case user gets default direction, "to bottom")
// cf. https://drafts.csswg.org/css-images-3/#linear-gradient-syntax
if (!/left|right|top|bottom/.test(firstArg)) {
return
}
const withToPrefix = !postcss.vendor.prefix(decl.value)
if (!isStandardDirection(firstArg, withToPrefix)) {
complain()
return
}
function complain() {
report({
message: messages.rejected,
node: decl,
index: expressionIndex,
result,
ruleName,
})
}
})
})
}
}
rule.ruleName = ruleName
rule.messages = messages
module.exports = rule