New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add function-name-arguments-allowed-list #4816
Changes from 3 commits
3c97e71
a64ee6d
27c276e
8d63a48
3b3de22
a118c99
28b4213
907513a
45afff9
2f06e7a
e74c8c1
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
# function-name-arguments-whitelist | ||
|
||
Specify a whitelist of allowed property and value pairs within declarations. | ||
|
||
<!-- prettier-ignore --> | ||
```css | ||
a { background-image: url('http://www.example.com/file.jpg'); } | ||
/** ↑ ↑ | ||
* These properties and these values */ | ||
``` | ||
|
||
## Options | ||
|
||
`object`: `{"unprefixed-function-name": ["string", "/regex/", /regex/] }` | ||
|
||
Given: | ||
|
||
``` | ||
["data", "/^http/"] | ||
``` | ||
|
||
The following patterns are considered violations: | ||
|
||
<!-- prettier-ignore --> | ||
```css | ||
a { background-image: url('file://file.jpg'); } | ||
``` | ||
|
||
The following patterns are _not_ considered violations: | ||
|
||
<!-- prettier-ignore --> | ||
```css | ||
a { background-image: url('example.com/file.jpg'); } | ||
``` | ||
|
||
<!-- prettier-ignore --> | ||
```css | ||
a { background-image: url('/example.com/file.jpg'); } | ||
``` | ||
|
||
<!-- prettier-ignore --> | ||
```css | ||
a { background-image: url('//example.com/file.jpg'); } | ||
``` | ||
|
||
<!-- prettier-ignore --> | ||
```css | ||
a { background-image: url('./path/to/file.jpg'); } | ||
``` | ||
|
||
<!-- prettier-ignore --> | ||
```css | ||
a { background-image: url('http://www.example.com/file.jpg'); } | ||
``` | ||
|
||
<!-- prettier-ignore --> | ||
```css | ||
a { background-image: url('https://www.example.com/file.jpg'); } | ||
``` | ||
|
||
<!-- prettier-ignore --> | ||
```css | ||
a { background-image: url('HTTPS://www.example.com/file.jpg'); } | ||
``` | ||
|
||
<!-- prettier-ignore --> | ||
```css | ||
a { background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs='); } | ||
``` |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
'use strict'; | ||
|
||
const { messages, ruleName } = require('..'); | ||
|
||
testRule({ | ||
ruleName, | ||
|
||
config: [['/^http/']], | ||
|
||
accept: [ | ||
{ | ||
code: 'a { background: url(http://example.com/file.jpg); }', | ||
}, | ||
{ | ||
code: 'a { background: url(HTTP://example.com/file.jpg); }', | ||
}, | ||
{ | ||
code: 'a { background: url(https://example.com/file.jpg); }', | ||
}, | ||
], | ||
|
||
reject: [ | ||
{ | ||
code: 'a { background: url(ftp://example.com/file.jpg); }', | ||
message: messages.rejected('ftp'), | ||
line: 1, | ||
column: 21, | ||
}, | ||
{ | ||
code: | ||
"a { background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs='); }", | ||
message: messages.rejected('data'), | ||
line: 1, | ||
column: 27, | ||
}, | ||
], | ||
}); | ||
|
||
testRule({ | ||
ruleName, | ||
|
||
config: [[/^http/]], | ||
|
||
accept: [ | ||
{ | ||
code: 'a { background: url(http://example.com/file.jpg); }', | ||
}, | ||
{ | ||
code: 'a { background: url(HTTP://example.com/file.jpg); }', | ||
}, | ||
{ | ||
code: 'a { background: url(https://example.com/file.jpg); }', | ||
}, | ||
], | ||
|
||
reject: [ | ||
{ | ||
code: 'a { background: url(ftp://example.com/file.jpg); }', | ||
message: messages.rejected('ftp'), | ||
line: 1, | ||
column: 21, | ||
}, | ||
{ | ||
code: | ||
"a { background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs='); }", | ||
message: messages.rejected('data'), | ||
line: 1, | ||
column: 27, | ||
}, | ||
], | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
// @ts-nocheck | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We should use the {
"rules": {
"function-name-arguments-whitelist": {
"url": ["/^images/", "^fonts/"],
"blur": ["50%"]
}
}
}
The |
||
|
||
'use strict'; | ||
|
||
const _ = require('lodash'); | ||
const functionArgumentsSearch = require('../../utils/functionArgumentsSearch'); | ||
const getSchemeFromUrl = require('../../utils/getSchemeFromUrl'); | ||
const isStandardSyntaxUrl = require('../../utils/isStandardSyntaxUrl'); | ||
const matchesStringOrRegExp = require('../../utils/matchesStringOrRegExp'); | ||
const report = require('../../utils/report'); | ||
const ruleMessages = require('../../utils/ruleMessages'); | ||
const validateOptions = require('../../utils/validateOptions'); | ||
|
||
const ruleName = 'function-name-arguments-whitelist'; | ||
|
||
const messages = ruleMessages(ruleName, { | ||
rejected: (property, value) => `Unexpected arguments "${value}" for function "${property}"`, | ||
}); | ||
|
||
function rule(whitelist) { | ||
return (root, result) => { | ||
const validOptions = validateOptions(result, ruleName, { | ||
actual: whitelist, | ||
possible: [_.isString, _.isRegExp], | ||
}); | ||
|
||
if (!validOptions) { | ||
return; | ||
} | ||
|
||
root.walkDecls((decl) => { | ||
functionArgumentsSearch(decl.toString().toLowerCase(), 'url', (args, index) => { | ||
const unspacedUrlString = _.trim(args, ' '); | ||
|
||
if (!isStandardSyntaxUrl(unspacedUrlString)) { | ||
return; | ||
} | ||
|
||
const urlString = _.trim(unspacedUrlString, '\'"'); | ||
const scheme = getSchemeFromUrl(urlString); | ||
|
||
if (scheme === null) { | ||
return; | ||
} | ||
|
||
if (matchesStringOrRegExp(scheme, whitelist)) { | ||
return; | ||
} | ||
|
||
report({ | ||
message: messages.rejected(scheme), | ||
node: decl, | ||
index, | ||
result, | ||
ruleName, | ||
}); | ||
}); | ||
}); | ||
}; | ||
} | ||
|
||
rule.ruleName = ruleName; | ||
rule.messages = messages; | ||
module.exports = rule; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Your best next step is to change the tests so they align with the intended behaviour of the rule. I suggest starting with:
The config is saying:
brightness
function the parameters can only be50%
url
the parameters must start with eitherimages
orvendor
Then there are
accept
andreject
test cases for this config.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I should validate against the background this contains either base64 string or URL function.
If URL present means have to validate starts with strings
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The rule isn't concerned with the type of arguments. It should always treat the arguments as a string for comparsion.