Skip to content

Commit

Permalink
Merge pull request #309 from kristerkari/bugfix/operator-no-unspaced-…
Browse files Browse the repository at this point in the history 
…url-handling

operator-no-unspaced: improve handling of URLs
  • Loading branch information
@kristerkari
kristerkari committed Feb 6, 2019
2 parents 7d1bba7 + 3dba74d commit 6992335
Show file tree
Hide file tree
Showing 2 changed files with 211 additions and 4 deletions.
189 changes: 189 additions & 0 deletions src/rules/operator-no-unspaced/__tests__/index.js
View file
Expand Up @@ -65,6 +65,22 @@ testRule(rule, {
`,
description:
"background-image with relative path inside url function and interpolation."
},
{
code: `
$i: 10;
.thing {
background-image: url(https://99-0a.x.y.rackcdn.com/img/build/svg/arrow-#{$i + 2}-down-dark.svg);
}
`,
description:
"Op +: background-image with absolute path inside url function and interpolation."
},
{
code: `
div { background-image: url(https://99-0a.x.y.rackcdn.com/z.jpg); }
`,
description: "Op +: background-image with url that has a hyphen"
}
],

Expand Down Expand Up @@ -105,6 +121,19 @@ testRule(rule, {
message: messages.expectedAfter("+"),
line: 4,
column: 62
},
{
code: `
$i: 10;
.thing {
background-image: url(https://99-0a.x.y.rackcdn.com/img/build/svg/arrow-#{$i +2}-down-dark.svg);
}
`,
description:
"Op +: background-image with relative path inside url function and interpolation.",
message: messages.expectedAfter("+"),
line: 4,
column: 86
}
]
});
Expand Down Expand Up @@ -146,6 +175,19 @@ testRule(rule, {
description: "Op (ss+). b4: ss+ +#{1 + 2}.",
message: messages.expectedBefore("+"),
column: 11
},
{
code: `
$i: 10;
.thing {
background-image: url(https://99-0a.x.y.rackcdn.com/img/build/svg/arrow-#{$i+ 2}-down-dark.svg);
}
`,
description:
"Op +: background-image with relative path inside url function and interpolation.",
message: messages.expectedBefore("+"),
line: 4,
column: 85
}
]
});
Expand Down Expand Up @@ -450,6 +492,16 @@ testRule(rule, {
{
code: "a { b3: ss- -#{$var}; }",
description: "Sign: ss- -#{$var}."
},
{
code: `
$i: 10;
.thing {
background-image: url(https://99-0a.x.y.rackcdn.com/img/build/svg/arrow-#{$i - 2}-down-dark.svg);
}
`,
description:
"Op -: background-image with absolute path inside url function and interpolation."
}
],

Expand All @@ -465,6 +517,19 @@ testRule(rule, {
description: "Op (ss+): ss+ -#{1 + 2}.",
message: messages.expectedBefore("+"),
column: 11
},
{
code: `
$i: 10;
.thing {
background-image: url(https://99-0a.x.y.rackcdn.com/img/build/svg/arrow-#{$i- 2}-down-dark.svg);
}
`,
description:
"Op -: background-image with relative path inside url function and interpolation.",
message: messages.expectedBefore("-"),
line: 4,
column: 85
}
]
});
Expand Down Expand Up @@ -645,6 +710,19 @@ testRule(rule, {
{
code: "a { minusafter15: 1- #{$var}; }",
description: "Op (though concatenated): 1- #{$var}."
},
{
code: `
$i: 10;
.thing {
background-image: url(https://99-0a.x.y.rackcdn.com/img/build/svg/arrow-#{$i -2}-down-dark.svg);
}
`,
description:
"Op -: background-image with relative path inside url function and interpolation.",
message: messages.expectedAfter("-"),
line: 4,
column: 86
}
]
});
Expand Down Expand Up @@ -999,6 +1077,16 @@ testRule(rule, {
`,
description:
"background-image with relative path inside url function and interpolation."
},
{
code: `
$i: 10;
.thing {
background-image: url(https://99-0a.x.y.rackcdn.com/img/build/svg/arrow-#{$i / 2}-down-dark.svg);
}
`,
description:
"Op /: background-image with absolute path inside url function and interpolation."
}
],

Expand Down Expand Up @@ -1060,6 +1148,32 @@ testRule(rule, {
message: messages.expectedAfter("/"),
line: 4,
column: 62
},
{
code: `
$i: 10;
.thing {
background-image: url(https://99-0a.x.y.rackcdn.com/img/build/svg/arrow-#{$i /2}-down-dark.svg);
}
`,
description:
"Op /: background-image with relative path inside url function and interpolation.",
message: messages.expectedAfter("/"),
line: 4,
column: 86
},
{
code: `
$i: 10;
.thing {
background-image: url(https://99-0a.x.y.rackcdn.com/img/build/svg/arrow-#{$i/ 2}-down-dark.svg);
}
`,
description:
"Op /: background-image with relative path inside url function and interpolation.",
message: messages.expectedBefore("/"),
line: 4,
column: 85
}
]
});
Expand Down Expand Up @@ -1121,6 +1235,19 @@ testRule(rule, {
syntax: "scss",
skipBasicChecks: true,

accept: [
{
code: `
$i: 10;
.thing {
background-image: url(https://99-0a.x.y.rackcdn.com/img/build/svg/arrow-#{$i * 2}-down-dark.svg);
}
`,
description:
"Op *: background-image with absolute path inside url function and interpolation."
}
],

reject: [
{
code: "a { width: 10* 1; }",
Expand All @@ -1133,6 +1260,32 @@ testRule(rule, {
description: "Op: 10 *1.",
message: messages.expectedAfter("*"),
column: 15
},
{
code: `
$i: 10;
.thing {
background-image: url(https://99-0a.x.y.rackcdn.com/img/build/svg/arrow-#{$i *2}-down-dark.svg);
}
`,
description:
"Op *: background-image with relative path inside url function and interpolation.",
message: messages.expectedAfter("*"),
line: 4,
column: 86
},
{
code: `
$i: 10;
.thing {
background-image: url(https://99-0a.x.y.rackcdn.com/img/build/svg/arrow-#{$i* 2}-down-dark.svg);
}
`,
description:
"Op *: background-image with relative path inside url function and interpolation.",
message: messages.expectedBefore("*"),
line: 4,
column: 85
}
]
});
Expand Down Expand Up @@ -1212,6 +1365,16 @@ testRule(rule, {
{
code: "a { width: 10% - (1 + 3); }",
description: "10% - (1 + 3)."
},
{
code: `
$i: 10;
.thing {
background-image: url(https://99-0a.x.y.rackcdn.com/img/build/svg/arrow-#{$i % 2}-down-dark.svg);
}
`,
description:
"Op %: background-image with absolute path inside url function and interpolation."
}
],

Expand Down Expand Up @@ -1296,6 +1459,32 @@ testRule(rule, {
code: "a { width: 10% -(1 + 3); }",
description: "10% -(1 + 3).",
message: messages.expectedAfter("-")
},
{
code: `
$i: 10;
.thing {
background-image: url(https://99-0a.x.y.rackcdn.com/img/build/svg/arrow-#{$i %2}-down-dark.svg);
}
`,
description:
"Op %: background-image with relative path inside url function and interpolation.",
message: messages.expectedAfter("%"),
line: 4,
column: 86
},
{
code: `
$i: 10;
.thing {
background-image: url(https://99-0a.x.y.rackcdn.com/img/build/svg/arrow-#{$i% 2}-down-dark.svg);
}
`,
description:
"Op %: background-image with relative path inside url function and interpolation.",
message: messages.expectedBefore("%"),
line: 4,
column: 85
}
]
});
Expand Down
26 changes: 22 additions & 4 deletions src/utils/sassValueParser/index.js
View file
Expand Up @@ -347,6 +347,11 @@ function checkMinus(string, index) {
return "op";
}

// e.g. `#{10px -1}`
if (isInsideInterpolation(string, index)) {
return "op";
}

// e.g. `sth -1px`, `sth -1`.
// Always a sign, even inside parens/function args
if (
Expand Down Expand Up @@ -405,6 +410,11 @@ function checkMinus(string, index) {
return "op";
}

// e.g. `#{10px- 1}`
if (isInsideInterpolation(string, index)) {
return "op";
}

if (isNumberBefore(before) || isHexColorBefore(before)) {
// console.log('`-, op: 10- <sth>, #aff- <sth>`')
return "op";
Expand Down Expand Up @@ -491,6 +501,13 @@ function checkSlash(string, index, isAfterColon) {
return "char";
}

// e.g. `(1px/1)`, `fn(7 / 15)`, but not `url(8/11)`
const isInsideFn = isInsideFunctionCall(string, index);

if (isInsideFn.is && isInsideFn.fn === "url" && isProtocolBefore(before)) {
return "char";
}

// e.g. `10px/normal`
if (isStringBefore(before).is || isStringAfter(after)) {
// console.log("/, string")
Expand Down Expand Up @@ -548,9 +565,6 @@ function checkSlash(string, index, isAfterColon) {
return "op";
}

// e.g. `(1px/1)`, `fn(7 / 15)`, but not `url(8/11)`
const isInsideFn = isInsideFunctionCall(string, index);

if (
isInsideParens(string, index) ||
(isInsideFn.is && isInsideFn.fn !== "url")
Expand Down Expand Up @@ -679,7 +693,7 @@ function isInsideFunctionCall(string, index) {
const after = string.substring(index + 1).trim();
const beforeMatch = before.match(/([a-zA-Z_-][a-zA-Z0-9_-]*)\([^(){},]+$/);

if (beforeMatch && beforeMatch[0] && after.search(/^[^({},]+\)/) !== -1) {
if (beforeMatch && beforeMatch[0] && after.search(/^[^(,]+\)/) !== -1) {
result.is = true;
result.fn = beforeMatch[1];
}
Expand Down Expand Up @@ -887,6 +901,10 @@ function isDotBefore(before) {
return before.slice(-1) === ".";
}

function isProtocolBefore(before) {
return before.search(/https?:/) !== -1;
}

function isFunctionBefore(before) {
return before.trim().search(/[a-zA-Z0-9_-]\(.*?\)\s*$/) !== -1;
}
Expand Down

0 comments on commit 6992335

Please sign in to comment.