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

color is legacy #4

Closed
wants to merge 15 commits into from
Closed

color is legacy #4

Changes from 4 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
17e8664
added tests for legacy colors and non-legacy colors
SondraE Nov 17, 2022
e59e75e
add note that new function won't be implemented in libsass
SondraE Nov 18, 2022
af984a0
added too many, too few, and type errors
SondraE Nov 18, 2022
7f6b962
revised based on Stacy's comments about commas, file name, and adding…
SondraE Nov 18, 2022
1f44744
removed unneeded error message info and fixed named and rec
SondraE Nov 22, 2022
f54710c
added missing error inputs
SondraE Dec 2, 2022
1d041c1
switched blue to a on too many arguments error and added use sass col…
SondraE Dec 7, 2022
7ddb751
[Color 4] Update tests for Color Level 4 (#1846)
nex3 Dec 9, 2022
cb479d5
Merge branch 'feature.color-4' into color-is-legacy
dvdherron Dec 9, 2022
1ae8fbb
Generate error outputs
nex3 Dec 13, 2022
a4fa86a
Poke CI
nex3 Dec 13, 2022
ad0145c
fix too few and named tests
stacyk Dec 13, 2022
017ff98
Use feature branches for testing the JS API (#1853)
nex3 Dec 14, 2022
c2cf2ed
Merge branch 'feature.color-4' of github.com:sass/sass-spec into colo…
nex3 Dec 14, 2022
6a63b6f
Update output for too_few_args
nex3 Dec 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
284 changes: 284 additions & 0 deletions spec/core_functions/color/is_legacy.hrx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,284 @@
<===> options.yml
---
:ignore_for:
- libsass

<===>
===================================================================
<===> rgb/input.scss
@use "sass:color";
a {b: color.is-legacy(rgb(0 255 0))}

<===> rgb/output.css
a {
b: true;
}

<===>
===================================================================
<===> rgba/input.scss
@use "sass:color";
a {b: color.is-legacy(rgba(72 122 180 / .2))}

<===> rgba/output.css
a {
b: true;
}

<===>
================================================================================
<===> hwb/input.scss
@use "sass:color";
a {b: color.is-legacy(hwb(0 50% 0%))}

<===> hwb/output.css
a {
b: true;
}

<===>
================================================================================
<===> hsl/input.scss
@use "sass:color";
a {b: color.is-legacy(hsl(110 31% 32%))}

<===> hsl/output.css
a {
b: true;
}

<===>
================================================================================
<===> hex/input.scss
@use "sass:color";
a {b: color.is-legacy(#f2ece4)}

<===> hex/output.css
a {
b: false;
}

<===>
================================================================================
<===> named/input.scss
@use "sass:color";
a {b: color.is-legacy(midnightblue)}

<===> named/output.css
a {
b: false;
}

<===>
================================================================================
<===> srgb/input.scss
@use "sass:color";
a {b: color.is-legacy(color(srgb 0.45098 0.07843 0.823530))}

<===> srgb/output.css
a {
b: false;
}

<===>
================================================================================
<===> srgb-linear/input.scss
@use "sass:color";
a {b: color.is-legacy(color(srgb-linear 0.45098 0.07843 0.823530))}

<===> srgb-linear/output.css
a {
b: false;
}

<===>
================================================================================
<===> display-p3/input.scss
@use "sass:color";
a {b: color.is-legacy(color(display-p3 0.515 0.35 0.3 / 1))}

<===> display-p3/output.css
a {
b: false;
}

<===>
================================================================================
<===> a98-rgb/input.scss
@use "sass:color";
a {b: color.is-legacy(color(a98-rgb 0 1 0))}

<===> a98-rgb/output.css
a {
b: false;
}

<===>
================================================================================
<===> prophoto-rgb/input.scss
@use "sass:color";
a {b: color.is-legacy(color(prophoto-rgb 0.42444 0.934918 0.190922))}

<===> prophoto-rgb/output.css
a {
b: false;
}

<===>
================================================================================
<===> rec2020/input.scss
@use "sass:color";
a {b: color.is-legacy(?????)}

<===> rec2020/output.css
a {
b: false;
}

<===>
================================================================================
<===> xyz/input.scss
@use "sass:color";
a {b: color.is-legacy(color(xyz 0.0426 0.0442 0.0364))}

<===> xyz/output.css
a {
b: false;
}

<===>
================================================================================
<===> xyz-d50/input.scss
@use "sass:color";
a {b: color.is-legacy(color(xyz-d50 0.2005 0.14089 0.4472))}

<===> xyz-d50/output.css
a {
b: false;
}

<===>
================================================================================
<===> xyz-d65/input.scss
@use "sass:color";
a {b: color.is-legacy(color(xyz-d65 0.21661 0.14602 0.59452))}

<===> xyz-d65/output.css
a {
b: false;
}

<===>
================================================================================
<===> lab/input.scss
@use "sass:color";
a {b: color.is-legacy(lab(5 110 115))}

<===> lab/output.css
a {
b: false;
}

<===>
================================================================================
<===> lch/input.scss
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<===> lch/input.scss
<===> named/input.scss

We could swap out one of the tests or add an additonal test called named. This will test that the function also works if the argument is explicitly named e.g. $color: lch(90.6 52.8 197)

@use "sass:color";
a {b: color.is-legacy(lch(90.6 52.8 197))}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
a {b: color.is-legacy(lch(90.6 52.8 197))}
a {b: color.is-legacy($color: lch(90.6 52.8 197))}


<===> lch/output.css
a {
b: false;
}

<===>
================================================================================
<===> oklab/input.scss
@use "sass:color";
a {b: color.is-legacy(oklab(0.44027 0.08818 -0.13386))}

<===> oklab/output.css
a {
b: false;
}

<===>
================================================================================
<===> oklch/input.scss
@use "sass:color";
a {b: color.is-legacy(oklch(70% 0.1 200))}

<===> oklch/output.css
a {
b: false;
}

<===>
================================================================================
<===> error/too_few_args/input.scss
a {b: color.is-legacy(rgb(0 255))}

<===> error/too_few_args/error
Error: Missing argument $amount.
,--> input.scss
1 | a {b: color.is-legacy(rgb(0 255))}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^ invocation
'
,--> sass:color
1 | @function color.is-legacy(rgb($amount $amount $amount)) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think instead of testing how the is-legacy() function works this is instead testing if the correct values are in the rgb() function. For is-legacy(), the "too few" error should be triggered with an empty function (color.is-legacy()) since this function only takes one argument ($color).

And then for all of the errors in this file, see Natalie's note about leaving the error message content blank.

| ============================================= declaration
'
input.scss 1:7 root stylesheet

<===> error/too_few_args/error-libsass
Error: Function color.is-legacy is missing argument $amount.
on line 1 of input.scss
>> a {b: color.is-legacy(rgb(0 255))}

------^

<===>
================================================================================
<===> error/too_many_args/input.scss
a {b: color.is-legacy(rgb(0 255 0 15))}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here. We're just trying to test is-legacy(). A "too many" args error should be triggered if we run this function with more than one color:

a {b: color.is-legacy(rgb(0 255 0), blue)}

(see the functions for blue() and blackness() for examples of errors for a single argument function)


<===> error/too_many_args/error
Error: Only 3 arguments allowed, but 4 were passed.
,--> input.scss
1 | a {b: color.is-legacy(rgb(0 255 0 15))}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ invocation
'
,--> sass:color
1 | @function color.is-legacy(rgb($amount $amount $amount)) {
| ============================================= declaration
'
input.scss 1:7 root stylesheet

<===> error/too_many_args/error-libsass
Error: wrong number of arguments (4 for 3) for `color.is-legacy'
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this probably won't ever be implemented in libsass, we can omit any libsass error messages for this function and any entirely new function we write tests for. At the top of the file we have told the test runner to ignore libsass completely with :ignore_for: - libsass

on line 1:7 of input.scss
>> a {b: color.is-legacy(rgb(0 255 0 15))}

------^

<===>
================================================================================
<===> error/type/input.scss
a {b: color.is-legacy(rgb(0 255 red))}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
a {b: color.is-legacy(rgb(0 255 red))}
a {b: color.is-legacy(1)}

This function expects a color. A number would be the wrong type for the $color argument.

It might be good to also write an additional type test (error/type/string/input.scss) to make sure this errors if $color is a string (in quotes):

a {b: color.is-legacy("blue")}


<===> error/type/error
Error: $amount: red is not a number.
,
1 | a {b: color.is-legacy(rgb(0 255 red))}
| ^^^^^^^^^^^^^^^^^^
'
input.scss 1:7 root stylesheet

<===> error/type/error-libsass
Error: argument `$amount` of `color.is-legacy(rgb($amount $amount $amount))` must be a number
on line 1:7 of input.scss, in function `color.is-legacy`
from line 1:7 of input.scss
>> a {b: color.is-legacy(rgb(0 255 red))}

------^

<===>