Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Add support for multi-argument functions to function-calc-no-unspaced-operator #7670

Merged
merged 9 commits into from
May 1, 2024
Merged

Add support for multi-argument functions to function-calc-no-unspaced-operator #7670

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d64880c
Fix `function-calc-no-unspaced-operator` false negatives (alternative…
romainmenke Apr 29, 2024
0c0201a
tweak test order
romainmenke Apr 29, 2024
92ecf7b
tweak test order
romainmenke Apr 29, 2024
3042dd7
make it clear that this is a partial implementation
romainmenke Apr 29, 2024
e873c30
restore scss support
romainmenke May 1, 2024
ab8f172
tweak
romainmenke May 1, 2024
308a08a
better support for comments
romainmenke May 1, 2024
3c5eb19
one more comment
romainmenke May 1, 2024
ae8b36e
apply suggestions from code review
romainmenke May 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
190 changes: 144 additions & 46 deletions lib/rules/function-calc-no-unspaced-operator/__tests__/index.mjs
View file
Open in desktop
Mouvedia marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,10 @@ testRule({
code: 'a { margin-top: calc(var(--some-variable)\r\n\t+ var(--some-other-variable)); }',
description: 'CRLF newline and tab before operator',
},
{
code: 'a { top: calc(5--6px-7px); }',
description: 'custom units',
},
{
code: 'a { padding: 10px calc(calc(1px + 2px)* 3px); }',
},
Expand Down Expand Up @@ -225,17 +229,13 @@ testRule({
code: 'a { top: calc(10px/var(--foo)); }',
},
{
code: 'a { padding: calc(); }',
code: 'a { top: calc(10px*var(--foo, 10px 20px)); }',
},
{
code: 'a { font-size: clamp(1rem, 2.5vw, 1rem+1rem); }',
description:
'multiple argument: functions that accept more than one argument are not supported yet',
code: 'a { top: calc(10px*var(--foo, 10px+20px)); }',
},
{
code: 'a { width: min(25vw+25vw); }',
description:
'single argument: functions that accept more than one argument are not supported yet',
code: 'a { padding: calc(); }',
Mouvedia marked this conversation as resolved.
Show resolved Hide resolved
},
{
code: 'a { padding: calc(1px --2px); }',
Expand All @@ -247,6 +247,9 @@ testRule({
{
code: 'a { padding: calc(1px + 2- ); }',
},
{
code: 'a { padding: 10px calc([10px+5px]); }',
Mouvedia marked this conversation as resolved.
Show resolved Hide resolved
},
],
Mouvedia marked this conversation as resolved.
Show resolved Hide resolved

reject: [
Expand Down Expand Up @@ -576,6 +579,16 @@ testRule({
endLine: 1,
endColumn: 24,
},
{
code: 'a { padding: calc(1px+2px+3px); }',
fixed: 'a { padding: calc(1px + 2px + 3px); }',
warnings: [
{ message: messages.expectedBefore('+'), line: 1, endLine: 1, column: 22, endColumn: 23 },
{ message: messages.expectedAfter('+'), line: 1, endLine: 1, column: 22, endColumn: 23 },
{ message: messages.expectedBefore('+'), line: 1, endLine: 1, column: 26, endColumn: 27 },
{ message: messages.expectedAfter('+'), line: 1, endLine: 1, column: 26, endColumn: 27 },
],
},
{
code: 'a { padding: calc(1px+2px-3px); }',
fixed: 'a { padding: calc(1px + 2px - 3px); }',
Expand All @@ -586,60 +599,145 @@ testRule({
{ message: messages.expectedAfter('-'), line: 1, endLine: 1, column: 26, endColumn: 27 },
],
},
],
});

testRule({
ruleName,
config: [true],
customSyntax: 'postcss-scss',
fix: true,

accept: [
{
code: 'a { top: calc(100%*#{$foo}); }',
},
{
code: 'a { top: calc(100% *#{$foo}); }',
},
{
code: 'a { top: calc(100%* #{$foo}); }',
code: 'a { padding: calc(1px+2px-3px-4px); }',
fixed: 'a { padding: calc(1px + 2px - 3px - 4px); }',
warnings: [
{ message: messages.expectedBefore('+'), line: 1, endLine: 1, column: 22, endColumn: 23 },
{ message: messages.expectedAfter('+'), line: 1, endLine: 1, column: 22, endColumn: 23 },
{ message: messages.expectedBefore('-'), line: 1, endLine: 1, column: 26, endColumn: 27 },
{ message: messages.expectedAfter('-'), line: 1, endLine: 1, column: 26, endColumn: 27 },
{ message: messages.expectedBefore('-'), line: 1, endLine: 1, column: 30, endColumn: 31 },
{ message: messages.expectedAfter('-'), line: 1, endLine: 1, column: 30, endColumn: 31 },
],
},
{
code: 'a { top: calc(100% * #{$foo}); }',
code: 'a { top: calc((1px+ 1px)); }',
fixed: 'a { top: calc((1px + 1px)); }',
description: 'nested math expression',
message: messages.expectedBefore('+'),
line: 1,
column: 19,
endLine: 1,
endColumn: 20,
},
{
code: 'a { top: calc(100%/#{$foo}); }',
code: 'a { top: calc(((1px+ 1px))); }',
fixed: 'a { top: calc(((1px + 1px))); }',
description: 'nested math expression',
message: messages.expectedBefore('+'),
line: 1,
column: 20,
endLine: 1,
endColumn: 21,
},
{
code: 'a { top: calc(100% /#{$foo}); }',
code: 'a { font-size: clamp(1rem, 2.5vw, 1rem+1rem); }',
fixed: 'a { font-size: clamp(1rem, 2.5vw, 1rem + 1rem); }',
description: 'multiple argument functions',
warnings: [
{ message: messages.expectedBefore('+'), line: 1, endLine: 1, column: 39, endColumn: 40 },
{ message: messages.expectedAfter('+'), line: 1, endLine: 1, column: 39, endColumn: 40 },
],
},
{
code: 'a { top: calc(100%/ #{$foo}); }',
code: 'a { top: clamp(1px +2px, 3px-4px, none); }',
fixed: 'a { top: clamp(1px + 2px, 3px - 4px, none); }',
description: 'multiple argument functions',
warnings: [
{ message: messages.expectedAfter('+'), line: 1, endLine: 1, column: 20, endColumn: 21 },
{ message: messages.expectedBefore('-'), line: 1, endLine: 1, column: 29, endColumn: 30 },
{ message: messages.expectedAfter('-'), line: 1, endLine: 1, column: 29, endColumn: 30 },
],
},
{
code: 'a { top: calc(100% / #{$foo}); }',
code: 'a { width: min(25vw+25vw); }',
fixed: 'a { width: min(25vw + 25vw); }',
description: 'multiple argument functions',
warnings: [
{ message: messages.expectedBefore('+'), line: 1, endLine: 1, column: 20, endColumn: 21 },
{ message: messages.expectedAfter('+'), line: 1, endLine: 1, column: 20, endColumn: 21 },
],
},
],

reject: [
{
code: 'a { top: calc(100%- #{$foo}); }',
fixed: 'a { top: calc(100% - #{$foo}); }',
message: messages.expectedBefore('-'),
line: 1,
column: 19,
endLine: 1,
endColumn: 20,
code: 'a { padding: calc(1px+ 2px) calc(3px+ 4px); }',
fixed: 'a { padding: calc(1px + 2px) calc(3px + 4px); }',
description: 'nested math expression',
warnings: [
{ message: messages.expectedBefore('+'), line: 1, endLine: 1, column: 22, endColumn: 23 },
{ message: messages.expectedBefore('+'), line: 1, endLine: 1, column: 37, endColumn: 38 },
],
},
{
code: 'a { top: calc(100% -#{$foo}); }',
fixed: 'a { top: calc(100% - #{$foo}); }',
message: messages.expectedAfter('-'),
line: 1,
column: 20,
endLine: 1,
endColumn: 21,
code: 'a { top: rgb(from red calc(r+1) calc(g-+2) calc(clamp(10px+2px, g+2, none))); }',
fixed:
'a { top: rgb(from red calc(r + 1) calc(g- + 2) calc(clamp(10px + 2px, g + 2, none))); }',
description: 'nested math expression',
warnings: [
{ message: messages.expectedBefore('+'), line: 1, endLine: 1, column: 29, endColumn: 30 },
{ message: messages.expectedAfter('+'), line: 1, endLine: 1, column: 29, endColumn: 30 },
{ message: messages.expectedBefore('+'), line: 1, endLine: 1, column: 40, endColumn: 41 },
{ message: messages.expectedAfter('+'), line: 1, endLine: 1, column: 40, endColumn: 41 },
{ message: messages.expectedBefore('+'), line: 1, endLine: 1, column: 59, endColumn: 60 },
{ message: messages.expectedAfter('+'), line: 1, endLine: 1, column: 59, endColumn: 60 },
{ message: messages.expectedBefore('+'), line: 1, endLine: 1, column: 66, endColumn: 67 },
{ message: messages.expectedAfter('+'), line: 1, endLine: 1, column: 66, endColumn: 67 },
],
},
],
});

// testRule({
// ruleName,
// config: [true],
// customSyntax: 'postcss-scss',
// fix: true,
Mouvedia marked this conversation as resolved.
Show resolved Hide resolved

// accept: [
// {
// code: 'a { top: calc(100%*#{$foo}); }',
// },
// {
// code: 'a { top: calc(100% *#{$foo}); }',
// },
// {
// code: 'a { top: calc(100%* #{$foo}); }',
// },
// {
// code: 'a { top: calc(100% * #{$foo}); }',
// },
// {
// code: 'a { top: calc(100%/#{$foo}); }',
// },
// {
// code: 'a { top: calc(100% /#{$foo}); }',
// },
// {
// code: 'a { top: calc(100%/ #{$foo}); }',
// },
// {
// code: 'a { top: calc(100% / #{$foo}); }',
// },
// ],

// reject: [
// {
// code: 'a { top: calc(100%- #{$foo}); }',
// fixed: 'a { top: calc(100% - #{$foo}); }',
// message: messages.expectedBefore('-'),
// line: 1,
// column: 19,
// endLine: 1,
// endColumn: 20,
// },
// {
// code: 'a { top: calc(100% -#{$foo}); }',
// fixed: 'a { top: calc(100% - #{$foo}); }',
// message: messages.expectedAfter('-'),
// line: 1,
// column: 20,
// endLine: 1,
// endColumn: 21,
// },
// ],
// });