Rename gradient functions to allow writing valid CSS

[robwierzbowski]

Currently the gradient functions override the spec CSS gradient functions and prevent a user from writing valid CSS. This renames the linear-gradient and radial-gradient functions to generate-linear and generate-radial.

I split the PR into two commits — I'm assuming there's a build step to create dist/ but I didn't find any documentation, so edited manually.

Bourbon.io docs will have to be updated 😄. If you give the thumbs up I'll submit a pull for the gh-pages branch too.

Fixes #177.

[elliottkember]

👍

[ajjahn]

+1

[robwierzbowski]

Is this something that the Bourbon maintainers are interested in adding?

[plapier]

@robwierzbowski Yes, but not by renaming the linear-gradient function. It would break backwards compatibility and would ruin the "vanilla" part. I tried to programmatically solve this a bit ago, but I ran into a snag. I'll see if I can dig up the work I did.

[bobrocke]

Some type of solution is needed. I'm trying to use Bourbon and Neat for their mixins and Autoprefixer for vendor prefixes (where needed). Until this is fixed, I can't.

[robwierzbowski]

You could try some options processing to determine if what's being passed is bourbon args or CSS args, but if that doesn't work I think changing the API is a solution. IMO this is more of a long running bug than a feature that shouldn't be broken.

[plapier]

My work is on the gradient-spec branch: 9ec0471

I renamed the linear-gradient() function to be prefixed with an underscore.
This makes the spec work without issue.

background-image: linear-gradient(...);

I then tried to use sass's new string slicing to parse the string passed into the background-image mixin to extract the gradient values. But thats where I ran into issues. String slicing creates slices of a string, and thus the colors no longer are of type color. And the rest of the code breaks becuase we are type checking the code.

@include background-image( linear-gradient( red, orange) );

@robwierzbowski I agree with you that it's a long running bug.

[plapier]

I spent the past two days solving this bug. I ended up rewriting the background and background-image mixins. I removed the linear-gradient and radial-gradient functions so that they don't step on top of the standard CSS functions.

The PR can be viewed here. #358

I was able to maintain backwards compatibility for the most part. The only changes that will effect users is that you must make sure your linear/radial-gradients are written to spec. Older syntaxes will break.

Examples:

  // OLD SPEC
  @include background-image( radial-gradient( 50% 50%, cover circle, orange, red ) );
  @include background-image( radial-gradient( 40% 60%, orange, red ) );
  @include background-image( radial-gradient( cover circle, orange, red ) );
  @include background-image( radial-gradient( cover, orange, red ) );

  // NEW SPEC
  @include background-image( radial-gradient( circle at 50% 50%, orange, red ) );
  @include background-image( radial-gradient( at 40% 60%, orange, red ) );
  @include background-image( radial-gradient( circle, orange, red ) );
  @include background-image( radial-gradient( circle, orange, red ) );

The code will require Sass 3.3+ to work. This is likely be the last major change before releasing Bourbon 4.0. I'm jumping to 4.0 because backwards compatibility broke in certain places.

I will upload a pre-release to get this new feature tested before final.

[robwierzbowski]

👏 👏 👏. Thanks!

[plapier]

PR has been merged and a pre-release is out: Bourbon v4.0.0-rc.1

Please test your gradients and report any issues you find.