Inconsistent lowercasing when `@use` is given`scheme://` vs `scheme:` #2065

joeframbach · 2023-08-15T17:48:09Z

Repro:

<!doctype html>
<html>
  <script type="module">
    import * as sass from 'https://jspm.dev/sass';
  
    console.log(sass.compileString(`
      @use "scheme://Name/Path";
    `, {
      importers: [{
        canonicalize(url) {
          console.log(url); // scheme://name/Path
          return new URL(url);
        },
        load(canonicalUrl) {
          console.log(canonicalUrl); // { pathname: "//name/Path" }
          return {
            contents: `body {content: '${canonicalUrl}'}`,
            syntax: 'scss'
          };
        }
      }]
    }));
  </script>
</html>

Expected: Name/Path
Actual: name/Path

This appears to be a Dart language feature:

void parse(String url) {
  print("$url -> ${Uri.parse(url)}");
}
void main() {
  parse("Scheme:Host/Path");
  parse("Scheme://Host/Path");
  parse("Scheme:User@Host/Path");
  parse("Scheme://User@Host/Path");
}

/*
Scheme:Host/Path -> scheme:Host/Path
Scheme://Host/Path -> scheme://host/Path
Scheme:User@Host/Path -> scheme:User@Host/Path
Scheme://User@Host/Path -> scheme://User@host/Path
*/

The "host" portion is lowercased when the url contains "://".

I am migrating a large codebase from RubySass to DartSass, and we used :// in all our importers. The "host" portion of the url is case-sensitive due to our internal logic which resolves the custom imports.

My importers' canonicalize methods are now being called with the lowercased strings, and I have zero visibility to get to the originals. Is there any way to get those strings into my canonicalize and load methods? Alternatively, is there a way I could pre-parse the sass input and remove the // from the urls?

The text was updated successfully, but these errors were encountered:

Goodwine · 2023-08-15T22:30:01Z

Yeah, I think this is a limitation in Dart:

https://api.dart.dev/stable/2.14.2/dart-core/Uri/host.html

“The host string is case-insensitive. The returned host name is canonicalized to lower-case with upper-case percent-escapes.”

But note that JavaScript does the same thing when you provide a "valid" scheme like http.

new URL('http://Foo/bar').host // -> 'foo' (lowercase), not 'Foo'

Even if you canonicalize your URL from host to Host within canonicalize(), it will be lower-cased again by the time it reaches load(). So as a workaround, if you know exactly how to transform a lowercase host into the uppercase version, you must do the mapping in load().

The sass compiler doesn't have any kinds of "precompilation hooks", but you can use postcss to write all your files into a temp directory before compiling them with Sass.

Goodwine self-assigned this Aug 15, 2023

Goodwine closed this as completed Aug 15, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Inconsistent lowercasing when `@use` is given`scheme://` vs `scheme:` #2065

Inconsistent lowercasing when `@use` is given`scheme://` vs `scheme:` #2065

joeframbach commented Aug 15, 2023 •

edited by Goodwine

Loading

Goodwine commented Aug 15, 2023

Inconsistent lowercasing when @use is givenscheme:// vs scheme: #2065

Inconsistent lowercasing when @use is givenscheme:// vs scheme: #2065

Comments

joeframbach commented Aug 15, 2023 • edited by Goodwine Loading

Goodwine commented Aug 15, 2023

Inconsistent lowercasing when `@use` is given`scheme://` vs `scheme:` #2065

Inconsistent lowercasing when `@use` is given`scheme://` vs `scheme:` #2065

joeframbach commented Aug 15, 2023 •

edited by Goodwine

Loading