LazySpan doesn't follow JS SourceSpan API

[alan-agius4]

The lazy span builder introduced in https://github.com/sass/dart-sass/pull/1916/files causes a bug that sometimes it's implementation is leaked when there is an exception when using the JS API.

Input

const { compileString } = require('sass');

const scss = `
@mixin dark {
  .red & {
    @content;
  }
}

@include dark {
  body {
    color: red;
  }
}
`;

try {
  compileString(scss);
} catch (e) {
  console.error(e.span);
}

Output

LazyFileSpan0 { '_lazy_file_span0$_builder': 
   Parser_spanFrom_closure0 { '$this': 
      SelectorParser0 { '_selector$_allowParent': true,
        '_selector$_allowPlaceholder': true,
        scanner: 
         SpanScanner { _sourceFile: 
            SourceFile { url: null,
              _lineStarts: [ 0, [Symbol($ti)]: [Object] ],
              _decodedChars: Uint32Array { [Iterator]  0: 46, 1: 114, 2: 101, 3: 100, 4: 32, 5: 38, 6: 32 },
              _cachedLine: null },
           sourceUrl: null,
           string: '.red & ',
           '_string_scanner$_position': 7,
           _lastMatch: null,
           _lastMatchPosition: null },
        logger: 
         DeprecationHandlingLogger0 { '_deprecation_handling$_warningCounts': 
         ....

Expected
Accessing .span returns an object matching the SourceSpan interface.

Version

npx sass --version
1.62.1 compiled with dart2js 2.19.6

[stof]

https://github.com/sass/dart-sass/blob/main/lib/src/js/source_span.dart might need to adjust the JS prototype of the LazyFileSpan

[stof]

hmm, while this might be needed, I'm not sure it will solve the case of console.error, which shows the inner implementation of the class, not the public API exposed through getters...

[nex3]

I'm not sure this is a bug. console.error() with a JS object is generally expected to print information about its implementation. Note that with a non-lazy span it prints:

_FileSpan {
  file: SourceFile {
    url: null,
    _lineStarts: [
      0,
      1,
      17,
      18,
      32,
      43,
      57,
      61,
      63,
      64,
      80,
      89,
      105,
      109,
      111,
      [Symbol($ti)]: [Rti]
    ],
    _decodedChars: Uint32Array(111) [
       10,  64, 101, 114, 114, 111, 114,  32,  34, 111, 104,  32,
      110, 111,  34,  59,  10,  10,  64, 109, 105, 120, 105, 110,
       32, 100,  97, 114, 107,  32, 123,  10,  32,  32,  46, 114,
      101, 100,  32,  38,  32, 123,  10,  32,  32,  32,  32,  64,
       99, 111, 110, 116, 101, 110, 116,  59,  10,  32,  32, 125,
       10, 125,  10,  10,  64, 105, 110,  99, 108, 117, 100, 101,
       32, 100,  97, 114, 107,  32, 123,  10,  32,  32,  98, 111,
      100, 121,  32, 123,  10,  32,  32,  32,  32,  99, 111, 108,
      111, 114,  58,  32,
      ... 11 more items
    ],
    _cachedLine: 1
  },
  '_file$_start': 1,
  _end: 15
}

which is certainly still full of implementation details. We could customize this by defining a util.inspect.custom method for Dart's span types, but I'm not sure that's really worth doing, any more than it's worth defining one for any other arbitrary object type exported by any other arbitrary library. You could as easily write console.error(e.span.toString()) and get a more human-friendly output.

[nex3]

Actually, diving into angular/angular-cli#25134, it looks like the original issue wasn't so much console.error() as that the documented JS getters don't work for LazySpan. That we can fix.