@extend %placeholder results in empty declaration file

[erikbrgn]

Hello! Thanks for this very useful plugin.

I've found an issue where extending classes/placeholders from other files results in an "empty" declaration file being generated.

Perhaps this goes against the idea of module files, but a very simple example to illustrate the issue:

.foo {
  background-color: blue;
}

Works fine when imported, and a declaration file is generated containing readonly foo: 'foo'

But, doing this results in a file only containing declare const classNames: {}:

@use '@style/placeholders';

.foo {
  @extend %bar;
}

I've narrowed it down to being an issue with the @use '@style/placeholders' ; specifically, because using a placeholder defined in the same file works as expected.

[activeguild]

Hi @erikbrgn

Please wait a moment while we check the reproduction.

[activeguild]

@erikbrgn

I could not reproduce it in my environment. Can you provide a minimum repository where I can verify the event?

[erikbrgn]

@activeguild Sure thing. Here you go https://github.com/erikbrgn/sass-dts-issue

Just by trying to reproduce the issue, outside the original project where I first came across it, has made me think that it could potentially be tied to complex sass use statements, i.e. where one or several scss files are being used by each and many other(s)

[activeguild]

@erikbrgn

I solved this by adding module to the file name. https://github.com/activeguild/sass-dts-issue/commit/9dee0915df71e3434581fb050ab1605ee064d64a

Was this a separate issue from this issue?

[erikbrgn]

@erikbrgn

I solved this by adding module to the file name. activeguild/sass-dts-issue@9dee091

Was this a separate issue from this issue?

@activeguild No, that wasn't the issue, it works as expected (according to your docs).

The issue I recreated is that the generated scss declaration file for the button component is empty, but it shouldn't be. If you remove one of the lines in the index.module.scss file, a proper declaration file is generated as expected.

So, the issue is in the components/button directory, rather than the scss directory.

[activeguild]

@erikbrgn

We found that changing the index.module.scss file of the button component as follows solves the problem. I don't know the exact reason, but it may be because @style/color etc. are duplicated and loaded in the destination file. I have not investigated further because the information was lost at the time of the parser in sass.

before

@use '@style/util';
@use '@style/color';

// Removing the line below solves the issue.
@use '@style/placeholders';

after

@use '@style/placeholders';
@use '@style/util';
@use '@style/color';

[erikbrgn]

@activeguild Huh, interesting. You're right, it solves the problem. Thanks for looking into it.

I'll close this issue.