Doesn't find mixin

[IvanSavoskin]

A mixin is created in a separate file. I import this mixin into various scss files via @use "src / styles / mixin" as *;

Expected Behavior

Everything works correctly, files with style declarations are created

Current Behavior

I get the error no mixin named themify orInvalid CSS after "... nt-height: main": expected expression (eg 1px, bold), was ". $ Content-height,"and no ad files are generated or appear

Steps to Reproduce (for bugs)

mixin.scss

@use "sass:map";
@use "src/styles/themes/mainTheme" as main;
@use "src/styles/themes/newTheme" as new;

$themes: (
        main: (
                app-height: main.$app-height,
                content-height: main.$content-height
        ),
        smartMarket: (
                app-height: smartMarket.$app-height,
                content-height: smartMarket.$content-height
        )
);

@function themed($key) {
  @return map-get($theme-map, $key);
}

@mixin themify($themes: $themes) {
  @each $theme, $map in $themes {

    :global(.theme-#{$theme}) & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }

      @content;
      $theme-map: null !global;
    }
  }
}

mixin usage

@use "src/styles/mixin" as *;

.name {
        @include themify($themes) {
            color: themed('tree-selected-text-color');
    }
}

Your Environment

• Typescript version: 4.2.3
• Version used: 4.1.0
• Operating System and versions: macOS 11.2.3

[skovy]

@IvanSavoskin thanks for opening the issue, can you provide a minimal reproducible example (or, a failing test case)?

Based on the code provided, I'm not sure what the file structure is, what the problematic line of code is, or what options were being passed.

[IvanSavoskin]

@skovy

src/styles/theme/mainTheme.scss

$app-height: 300px; 
$content-height: 200px;

src/styles/theme/newTheme.scss

$app-height: 600px; 
$content-height: 500px;

src/styles/mixin.scss

@use "sass:map";
@use "src/styles/themes/mainTheme" as main;
@use "src/styles/themes/newTheme" as new;

$themes: (
        main: (
                app-height: main.$app-height,
                content-height: main.$content-height
        ),
        smartMarket: (
                app-height: smartMarket.$app-height,
                content-height: smartMarket.$content-height
        )
);

@function themed($key) {
  @return map-get($theme-map, $key);
}

@mixin themify($themes: $themes) {
  @each $theme, $map in $themes {

    :global(.theme-#{$theme}) & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }

      @content;
      $theme-map: null !global;
    }
  }
}

src/component/styles/App.scss

@use "src/styles/mixin" as *;

.name {
        @include themify($themes) { // Error "no mixin named themify" here while generating d.ts file
            color: themed('tree-selected-text-color');
    }
}

[IvanSavoskin]

@skovy

There is an assumption that the construction

@use "src/styles/variables" as variables;

.name {
    color: variable.$color // Error here "Invalid CSS after "...olor: variables": expected expression (e.g. 1px, bold), was ".$color !important""
}

A similar error occurs also in the mixin.scss file
I hope this will add understanding of the problem

[IvanSavoskin]

@skovy
Good day. Unfortunately, I have not found a solution for this problem. For some reason typed-scss-modules cannot work with named @use and all style files that use it cause errors when generating declarations. As a result, I had to switch to using dts-css-modules-loader

[skovy]

I tried to replicate this issue based on comments but it worked as expected for me.

The file name listed was src/styles/theme/newTheme.scss but the file imported src/styles/themes/newTheme.scss. Updating this directory to themes loaded those files correctly. $themes smartMarket also needed to be changed to new to work correctly. The tool ran successfully (without generating anything).

I'm closing this issue without a reproducible example. Feel free to open a new issue with a link to a minimal reproduction repo.