sass/dart-sass

@at-root breaks with @use above it

Open

#1347 opened on Jun 7, 2021

View on GitHub
 (7 comments) (0 reactions) (0 assignees)Dart (4,192 stars) (376 forks)batch import
bughelp wanted

Description

I don't know if this is a bug or some intentional language design gotcha I'm not aware of.

Anyway, I migrated our styles to use math.div(). That worked great, or so I thought...

Apparently @at-root breaks when used with @use above it:

//styles.scss

.namespace {
    @import "foobar";
}

//_foobar.scss

@use "sass:math";

@at-root {
    .foo {
        width: math.div(6px, 2);
    }
}

.bar {
    width: math.div(6px, 2);
}

If transpiles into the following:

// styles.css

.namespace .foo {
    width: 3px;
}
.namespace .bar {
    width: 3px;
}

I expected the following:

// styles.css

.foo {
    width: 3px;
}

.namespace .bar {
    width: 3px;
}

I tried the following:

  • Using @include meta.load-css("foobar") instead of @import
  • Wrapping @at-root within a mixin and calling it immediately
  • Move @use below @at-root (errors out as expected, but thought I'd try)

--

If I remove @use and just use the division symbol like previously it outputs as expected.

Contributor guide

Tech stack
css
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Understanding of Sass @use and @at root
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate the interaction between @use and @at root in the Sass compiler. The bug is that @use above @at root causes @at root to lose its effect. Look at how the compiler handles module scopes and the @at root directive, likely in the parsing or evaluation code. Check if the issue is related to the order of processing @use and @at root. Consider reproducing the bug locally and adding a failing test before implementing a fix.