castToSass() can't cast certain JavaScript strings to Sass Numbers

[kohlmannj]

Preface: I realize that any form of string mangling is fraught with peril and concerns about "magic" behavior.

In nytpi-sass-utils' development branch, I'm using castToSass() to convert a JSON configuration file into a Sass map.

(At this point it's alpha-quality code, so apologies for some inevitably offensive code style faux pas.)

One of the challenges with this approach is that Sass has wonderful Number types, and math expressions written into the JSON file get lost in translation, since they're represented as strings in JSON, of course, and are cast to Sass strings.

To work around this, I have some rudimentary code in place to see if a string is a math expression ( and evaluate it) and/or create a Sass Number instance from a string that can be parsed as a float. (That code also attempts to parse out a unit string.)

By way of this issue, I'd like to propose enhancing castToSass() with a generalized "duck-typing" approach to Sass number conversation, whether it's opt-in or otherwise. That said, it's a complex topic, so would love to hear the maintainers' thoughts.

(Sidenote: at some point I'll definitely look into storing the config as a Sass map and converting it to JSON. That's another way around this…)

[davidkpiano]

Sassport has this functionality -- check out the section on Sass value inference. It works by actually passing the value through to Sass, so you'll always get a 100% accurate Sass value mapped from the string.

@chriseppstein If there is interest, I'd be more than happy to add the value inference into node-sass-utils for use in Eyeglass.

[anthonylebrun]

@davidkpiano THIS IS AMAZING.

Not being familiar with node/dart-sass internals, I was doing some serious casting gymnastics in my own code until I found this:

https://github.com/davidkpiano/sassport/blob/3bd0544739d7161ad4f1ab1fe93db0ef7ed149bd/src/utils/index.js#L33

sassUtils.infer = (jsValue) => {
  let result;

  try {  
    sass.renderSync({
      data: `$_: ___((${jsValue}));`,
      functions: {
        '___($value)': (value) => {
          result = value;

          return value;
        }
      }
    });
  } catch(e) {
    return jsValue;
  }

  return result;
};

(Pasting snippet for visibility here in case anyone else is looking to solve this problem)

This is actually the only reason I was importing node-sass-utils in the first place, thanks for saving me a dependency! EDIT: Actually, I still need castToSass :D

[anthonylebrun]

PS: I think this would be a really great addition to node-sass-utils given that it's the most highest profile package for writing javascript/sass interfaces. Happy to do the PR if @chriseppstein is into it and @davidkpiano is too busy.