Bogus "target selector not found" error with meta.load-css()

[dmt0]

Currently this produces an error:

.animate--fade-in {
  opacity: 0;
  animation: fade-in 0.1s forwards cubic-bezier(0.19, 1, 0.22, 1);
}

@mixin animate($type: 'fade-in', $time: 1s, $delay: 0s) {
  @if $type == 'fade-in' {
    @extend .animate--fade-in;
    animation-duration: $time;
    animation-delay: $delay;
  }

Error: The target selector was not found.
Use "@extend .animate--fade-in !optional" to avoid this error.
    ╷
276 │     @extend .animate--fade-in;
    │     ^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵

Bumped into this after upgrading from Ruby Sass to current version "sass": "1.52.1"

[nex3]

It's hard to tell what's going on here without a full Sass file that reproduces the issue.

[dmt0]

It's in an open-source repo fortunately:
https://github.com/figlinq/react-chart-editor/blob/769054741922b66d3ef540a810790c2f86bafe18/src/styles/_mixins.scss#L209
I had to add !optional to the offending extendss to make Sass compile.

[nex3]

Can you provide me a stand-alone file that reproduces the error?

[kerryj89]

I reported a similar issue as a reply to sass/dart-sass#1295

However in my case above it's workability depends on whether or not it's within a @mixin and not conditionals.

[kerryj89]

I am also having this problem, but I was able to distill @dmt0 setup to simplest terms and make it replicable.

It seems to be some combination of @include meta.load-css, :root {} (only through multiple @use/@forward nestings), and @use 'mixins' in _index.scss that prevents the selector from being seen even when placed in the same file as the @extend. I tried making sense of it but couldn't, see the Observations section).

I know it doesn't make much sense to @use 'mixins' in _index.scss in my example - in @dmt0 case it makes sense as he does call a mixin within the file. I kept it because it actually seems to be part (if not all) of the problem.

If we are not using the system as expected I think at the very least we could get a more accurate error message than Error: The target selector was not found. when it is clearly listed next to the @extend. Thanks!

https://github.com/kerryj89/dart-sass-issue-3322

[nex3]

I've simplified the reproduction a little more—it looks like the mixin isn't necessary. Here's the smallest reproduction I've found so far:

// index.scss
@use 'sass:meta';
@use 'target';

@include meta.load-css('extender');

// extender.scss
@use 'target';

.extender {
  @extend .target;
}

// _target.scss
@use 'midstream';

.target {x: y}

// _midstream.scss
@use 'upstream';

// _upstream.scss
@x;

It only reproduces if _upstream.scss contains some concrete CSS, but what it is seem to be totally irrelevant.

[nex3]

I haven't fully excavated this yet, but I think the issue here is that we're sharing the same instance of _midstream.scss between the primary set of modules and the duplicated set we create for meta.load-css() because it doesn't contain any concrete styles, but it's participating in @extend resolution because it does depend on concrete styles. Somehow we're picking up the @extend from the load-css module set in the primary module set as though it were defined in _midstream.scss, and that's what's failing.

I've confirmed that if I add .target.upstream {...} to _upstream.scss, the error disappears and both .target.upstream {...} blocks are extended when in fact only the one loaded from extender.scss should be.

[nex3]

Fixed by sass/dart-sass#1824