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.

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

support colliding CSS filter effects functions #515

Merged
merged 3 commits into from Oct 8, 2014

Conversation

benesch
Copy link
Contributor

@benesch benesch commented Oct 6, 2014

@hcatlin this a rebased #467.

I wasn't able to repro your alpha test failures—is alpha even tested?—but this passes ./script/spec successfully for me!


CSS filter effects 0 define several functions (invert, grayscale,
opacity, saturation) that collide with the names of built-in Sass
functions. Overload these functions with a no-op when the filter effects
function signature is discovered. This is compatible with Ruby Sass.

For example, calling invert with a color will return an inverted color
as before:

color: invert(#333) => color: #cccccc

But calling invert with a percentage will pass through the function
call unharmed.

filter: invert(30%) => filter: invert(30%)
filter: invert(.03) => filter: invert(.03)

Fixes #151.

@coveralls
Copy link

Coverage Status

Coverage decreased (-0.11%) when pulling 8a866f3 on benesch:filter-effects-functions into 3a404a8 on sass:master.

HamptonMakes added a commit to sass/sass-spec that referenced this pull request Oct 6, 2014
@HamptonMakes
Copy link
Member

I didn't see any tests for this, so @malrase wrote some up. It is here: https://github.com/malrase/sass-spec/blob/issue_151/spec/libsass-todo-issues/issue_151/input.scss

WE ARE SO CLOSE... but the tests that we wrote fail.

With Sass 3.4, when you do "saturate(red)" with only one variable, it doesn't error, it returns "saturate(red)". Right now, as written, it breaks.

So close! Come on! Help us finish this one up!

@malrase
Copy link

malrase commented Oct 6, 2014

Here's the saturate test case as a gist:
http://sassmeister.com/gist/b906aa9a86d31f921bf2

If Sass sees one variable, it just ignores the saturate() and exports it directly into the CSS.

If there's two variables, it does the colour maths on saturate().

@malrase
Copy link

malrase commented Oct 6, 2014

I added a new test to the sass-spec (PR: sass/sass-spec#66) to cover the weird saturate() case.

@benesch
Copy link
Contributor Author

benesch commented Oct 6, 2014

Ah, okay. I added some tests of my own for this way back when (sass/sass-spec#35), but looks like I missed the tricky saturate case. I'm on it!

CSS filter effects [0] define several functions (invert, grayscale,
opacity, saturation) that collide with the names of built-in Sass
functions. Overload these functions with a no-op when the filter effects
function signature is discovered. This is compatible with Ruby Sass.

For example, calling `invert` with a color will return an inverted color
as before:

    color: invert(sass#333) => color: #cccccc

But calling `invert` with a percentage will pass through the function
call unharmed.

    filter: invert(30%) => filter: invert(30%)
    filter: invert(.03) => filter: invert(.03)

Fixes sass#151.

[0]: http://www.w3.org/TR/filter-effects/
Since RGB channels are stored as doubles, HSL/RGB conversions can result
in decimal values being stored for a channel. This breaks color name
lookup. For example, previously

    rgb(127.5, 127.5, 127.5)

would fail to be converted to "gray," despite being rounded and output
as

    #808080

which *does* map to gray. So instead of performing the rounding only
when outputting as a hex triplet, perform the rounding at the start,
always. This achieves consistency with Sass.
@coveralls
Copy link

Coverage Status

Coverage decreased (-0.11%) when pulling 46769e9 on benesch:filter-effects-functions into 3a404a8 on sass:master.

@benesch
Copy link
Contributor Author

benesch commented Oct 7, 2014

Well, that was tricky.

Turns out the saturate overload as I originally wrote was okay, though it didn't quite agree with Ruby Sass. Since CSS3 filter functions can only take numbers as arguments, I was checking whether the first argument was a number. So

saturate(red)

was getting rejected as a CSS3 filter function overload, since red isn't a valid value for a CSS filter function, whereas

saturate(10)

would get accepted as a CSS3 filter function overload, since 10 is valid there.

Anyway, for compliance with Sass, I've updated the overload to naively check for the existence of the second $amount argument, and assume that the user intends the filter function overload if s/he only provides one argument.

Then just a couple minor output formatting modifications (see commit messages) to achieve parity with Sass.

@HamptonMakes
Copy link
Member

Alright, this looks good to me now.

HamptonMakes added a commit that referenced this pull request Oct 8, 2014
support colliding CSS filter effects functions
@HamptonMakes HamptonMakes merged commit 0aa1495 into sass:master Oct 8, 2014
@HamptonMakes HamptonMakes mentioned this pull request Oct 8, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

New CSS filter functions conflict with built-in Sass functions
4 participants