KPC
Kevin Powell - Community•2mo ago
Micah

Dart Sass - Partial not included in Source Map

Hello guys, I'm using Dart Sass via the CLI to compile SCSS files to CSS. I have a setup like so: functions.scss: 
@use "sass:math";

$base: 16px !default;

@function strip-unit($number) {
    @if unitless($number) {
        @return $number;
    }
    @return math.div($number, $number * 0 + 1);
}

@function to-em($px, $base-context: $base) {
    $val: strip-unit($px);
    $base-val: strip-unit($base-context);
    @return ($val / $base-val) * 1em;
}
@use "sass:math";

$base: 16px !default;

@function strip-unit($number) {
    @if unitless($number) {
        @return $number;
    }
    @return math.div($number, $number * 0 + 1);
}

@function to-em($px, $base-context: $base) {
    $val: strip-unit($px);
    $base-val: strip-unit($base-context);
    @return ($val / $base-val) * 1em;
}
default.scss: 
@use "functions";

html {
  height: functions.to-em(768px);
}
@use "functions";

html {
  height: functions.to-em(768px);
}
In the result I'm not getting the functions.scss as a dependency listed in the source map. Could anyone explain why that is, and if I can achive this? The reason I need it to be in the source map is on one hand I want to be able to debug such functions within the browser and on the other hand I'm using the source map for caching and deciding if a recompilation of a SCSS file is required or not.
15 Replies
ἔρως
ἔρως•2mo ago
that's probably because functions.scss isnt a partial im not 200% sure on this, but, try to make it into a partial first and see how it goes
Micah
MicahOP•2mo ago
I already tried so, by renaming it to _functions.scss still did not appear in the resulting source map but the function was correcly applied in the resulting css.
ἔρως
ἔρως•2mo ago
what does it show when you view the files in google chrome?
Micah
MicahOP•2mo ago
When I inspect the styles on the html element I get the expected em value. In the sources tab only the default.scss can be found but the functions.scss cannot.
ἔρως
ἔρως•2mo ago
that is very weird can you confirm in another browser?
Micah
MicahOP•2mo ago
It's not browser dependent. When inspecting the source map itself, function.scss is not listed in the sources property Are you on windows? If so I can provide you a zip that contains everything to reproduce.
ἔρως
ἔρως•2mo ago
DONT SEND A ZIP FILE the mods dont like that, for very good reasons you can send a gist or send the css and map in here
Micah
MicahOP•2mo ago
Oh okey, sure. So here the content of all the files (being compiled using the command sass default.scss styles.css, whereas dart sass is installed in the latest version v1.93.2): _functions.scss: 
@use "sass:math";

$base: 16px !default;

@function strip-unit($number) {
    @if math.is-unitless($number) {
        @return $number;
    }
    @return math.div($number, $number * 0 + 1);
}

@function to-em($px, $base-context: $base) {
    $val: strip-unit($px);
    $base-val: strip-unit($base-context);
    @return math.div($val, $base-val) * 1em;
}
@use "sass:math";

$base: 16px !default;

@function strip-unit($number) {
    @if math.is-unitless($number) {
        @return $number;
    }
    @return math.div($number, $number * 0 + 1);
}

@function to-em($px, $base-context: $base) {
    $val: strip-unit($px);
    $base-val: strip-unit($base-context);
    @return math.div($val, $base-val) * 1em;
}
default.scss: 
@use "functions";

html {
  height: functions.to-em(400px);
}
@use "functions";

html {
  height: functions.to-em(400px);
}
RESULT styles.css: 
html {
  height: 25em;
}

/*# sourceMappingURL=styles.css.map */
html {
  height: 25em;
}

/*# sourceMappingURL=styles.css.map */
styles.css.map: 
{
  "version": 3,
  "sourceRoot": "",
  "sources": [
    "default.scss"
  ],
  "names": [],
  "mappings": "AAEA;EACE",
  "file": "styles.css"
}
{
  "version": 3,
  "sourceRoot": "",
  "sources": [
    "default.scss"
  ],
  "names": [],
  "mappings": "AAEA;EACE",
  "file": "styles.css"
}
ἔρως
ἔρως•2mo ago
that is so weird can you move to-em to a new partial file?
Micah
MicahOP•2mo ago
You think the naming of the partial is the problem? Created a new file _definitions.scss, copied the content from _functions.scss to that new file and changed @use "functions" to @use "definitions" as well as functions.to-em(400px); to definitions.to-em(400px); and got the same result :/
ἔρως
ἔρως•2mo ago
no, i think it is just generating the source map and skipping the @use
Micah
MicahOP•2mo ago
Hmm it seems that is by design. Looks like only scss files that directly generate css are included in the source map. I'll have to test the performance of using the --update parameter in the CLI instead of relying on the sources property of the source map for checking if recompilation is required or not
ἔρως
ἔρως•2mo ago
shouldnt be too bad it at least should be faster than using nodejs for that
Micah
MicahOP•2mo ago
Guess it might be just as fast as checking all the dependencies modification date using PHP.
ἔρως
ἔρως•2mo ago
php can use https://www.php.net/manual/en/book.inotify.php so, 0 performance impact the dart binary probably does something similar

Did you find this page helpful?