JS API: Support custom functions

[nex3]

We need to support the node-sass API's functions option, which specifies custom functions that can be called from Sass stylesheets. This will involve exposing SassScript objects, and making them API-compatible with node-sass.

[ArmorDarks]

Are there any chances that we will get more intuitive and clear API for working with custom functions?

Current way of custom functions declaration in node-sass quite crude, starting from quite specific need to declare function signature, and ending with complications of need to cast there and back everything into Sass-specific objects.

Working with colors gave us especial headaches, since in many places we had declaration of hexadecimal colors in plain string, like "#fff", but turned out that it can't be feed to node-sass that easily. Well, conversion of string to real hexadecimal number isn't that complicated, of course, but it would be great if original library could take care of it out of the box. Not all devs are great at this low-level stuff, after all.

Besides, it would be great to have way to pass in variables too, not only functions.

Ideally, something like:

        functions:

          'my-func': (arg1, arg2) =>
            return arg1 + arg2

          'myVar': someJsVar

instead of

        functions:

          'my-func($arg1, $arg2)': (arg1, arg2) =>
            return castToSass(arg1) + castToSass(arg2)

         # 'myVar': someJsVar
         # no way to do this

[nex3]

For the time being, Dart Sass's focus is on matching the existing API so that we can be compatible with existing codebases that are written to Node Sass. Once that's complete, we may start working with node-sass to improve the APIs, but it's not a near-term goal.

[bencergazda]

Quite an old thread, I hope you don't mind me posting here. I created a package, jSass (https://github.com/body-builder/jsass), which helps exactly in what @ArmorDarks asked.

Example:

functions: jsFunctionsToSass.convert({
  'myFunction($attr1, $attr2)': myFunction
})

It converts the Sass arguments to JS types and converts the returning JS values to Sass types. It also supports JS variable injection to Sass (and also vice versa).

The simpler syntax, suggested by @ArmorDarks

functions: jsFunctionsToSass.convert({
  'myFunction': myFunction
})

or even

functions: jsFunctionsToSass.convert({
  myFunction
})

is also a great idea. It doesn't look to be too difficult to implement. I will do this in case there will be interest about the package.

@nex3 @ArmorDarks Please have a look at jSass and please also spread the word, if you find the package useful.

disclaimer: I am the author of the module, but please don't take it as spam. I do hope that Sass end-users can benefit with the use of jSass.

TBH, it was only @ArmorDarks 's comment, where I learned about the existence of @chriseppstein 's useful castToSass() and castToJs() functions from, which I assume has been created for quite similar use.