SCSS - Importing SCSS variables globally breaks exported TS type to `{}`.

[mthines]

Thanks for the awesome TS plugin! 💪

Describe the bug
There's certain cases when using SASS where you need the value of a variable and need to wrap it in #{} in order to get the variable output and not the variable name.

When adding #{} to a *.module.scss, the file's classNames etc are no longer exported and only shows {} in the TS file.

To Reproduce

Add the following to any *.module.scss file, and try and import it to a TS file.

container.module.scss

@use "variables" as *; // Which includes $breakpoint

.container {
  @media (min-width: #{$breakpoint}) {
    color: red;
  }
}

Expected behavior
Using the #{} functionality shouldn't remove the classNames.

Desktop (please complete the following information):

• OS: iOS
• Browser: Chrome
• Version: 96.

[mthines]

I think it might be related to using sass variables in @media selectors, as I can see I get the same issue without the #{} syntax.

Works

.container {
  @media (min-width: 768px) {
    color: red;
  }
}

Don't work

@use "variables" as *; // Which includes $breakpoint

.container {
  @media (min-width: $breakpoint) {
    color: red;
  }
}

Both of these examples makes the imported object type be an empty object {}.

Is there anything I can do to help debug the issue and help fix it?
Can you guide me in a direction?

[mthines]

I think it's related to #146.

Trying to add the variable directly to the scss fixed the error.
I have a SCSS configuration in my NextJS app which includes all my resources, and I think that needs to be set in the same way for the plugin.

const nextConfig = {
  sassOptions: {
      prependData: '@use "libs/theme/src/lib/resources.scss" as *;',
    },
  ...
}

I will try and update the tsconfig plugin settings, and see if I can get it to work :)

[woodysee]

I have a similar issue. I think the plugin is unable to resolve any SASS variables that are defined in additionalData or sassOptions.prependData inside webpack.config.js.

// src/css1.module.scss
// $class-prefix is defined in additionalData
// which I think `typescript-plugin-css-modules`
// is unable to resolve
.test {
   font-size: 24px;
   :global {
      .#{$class-prefix} {
           font-size: 24px;
       }
   }
}

// src/css2.module.scss
// $class-prefix is defined within the SASS files
// where `typescript-plugin-css-modules` can resolve its
// value
$class-prefix: 'hello';
.test {
   :global {
       .#{$class-prefix} {
           font-size: 24px;
       }
   }
}

// src/Component.tsx

// This one will not work, throwing type errors underlined in css1.test:
// (alias) let css1: {}
import css1 from './css1.module.scss'; 
// This one works:
// (alias) let css2: {
//    test: string;
// }
import css2 from './css2.module.scss';

const SomeComponent = () => {
    return (
      <div>
        <div className={css1.test}><span className="hello">Hello!</div></div>
        <div className={css2.test}><span className="hello">Hello!</div></div>
      </div>
    )
}

// webpack.config.js
module.exports = {
  // ....
  module: {
    // ....
    rules: [
      // ....
      {
          test: /\.(scss|sass)$/,
          use: [
              {
                loader: 'sass-loader',
                options: {
                    additionalData: `$class-prefix: ${CLASS_PREFIX};`
                }
              },
         ]
      }
      // ....
    ],
    // ....
  },
  // ....
}

[mthines]

I think it's related to #146.

Trying to add the variable directly to the scss fixed the error. I have a SCSS configuration in my NextJS app which includes all my resources, and I think that needs to be set in the same way for the plugin.

const nextConfig = {
  sassOptions: {
      prependData: '@use "libs/theme/src/lib/resources.scss" as *;',
    },
  ...
}

I will try and update the tsconfig plugin settings, and see if I can get it to work :)

So far I haven't been able to find a solution which imports the resources.

[kirill-martynov]

Hello @mthines !

Did you find a solution for this issue?

[mthines]

@kirill-martynov No and I'm still frustrated by it.

I really want this plugin to work.

@mrmckeb 🙏

[kirill-martynov]

@kirill-martynov No and I'm still frustrated by it.

I really want this plugin to work.

@mrmckeb 🙏

me too, we have a lot of media query global variables on a project, but when we are using them, it's always showing empty type {}

With custom media global variables @media #{$new-tablet-only} {

Without custom media global variables

@mrmckeb please help us to fix this issue

[kirill-martynov]

So, I've tried another solutions for my purpose, specially media-quaries global variables.
I've removed sass variables from my project, switched to pure css modules and installed postcss-custom-media and others plugins

Created a file with custom media queries variables:

// src/styles/media.css

@custom-media --small-viewport (max-width: 30em);

Then I added a postcss.config.js

// postcss.config.js

const postcssCustomMedia = require('postcss-custom-media');
const postcssNested = require('postcss-nested');

module.exports = {
  plugins: [
    postcssNested,
    postcssCustomMedia({
      importFrom: './src/styles/media.css',
    }),
  ],
};

Then I've used this variable in my css module file

// main.module.css

.app {
  padding: 0;

  @media (--small-viewport) {
    padding: 10px;
  }
}

And then everything works perfectly:

[mthines]

Thanks for the suggestion @kirill-martynov! I didn't know that postcss plugin, so I will be starting to use that, as I've been frustrated with CSS variables not working for media queries.

As must as I like your solution, it still doesn't fix the issue regarding not being able to import CSS files so I still believe we need to find a solution for that :)

[piotr-musialek-footballco]

Possible workaround!

I have the same configuration like @mthines with NextJS and @import all mixins in every scss file so we don't have write this import in each file. This results with {} as a type whenever we use @include or use mixins. I could add this @import everywhere but since we have something like customRenderer why not use it. Unfortunately this means I have to recreate rendering SASS files like it is in the source code:

customRenderer.js

const path = require('path');
const sass = require('sass');
const fs = require('fs');
const createMatchPath = require('tsconfig-paths');

const getFilePath = (fileName) => path.dirname(fileName);

/**
 * Creates a sass importer which resolves Webpack-style tilde-imports.
 */
const sassTildeImporter = (rawImportPath, source) => {
    // We only care about tilde-prefixed imports that do not look like paths.
    if (!rawImportPath.startsWith('~') || rawImportPath.startsWith('~/')) {
        return null;
    }

    // Create subpathsWithExts such that it has entries of the form
    // node_modules/@foo/bar/baz.(scss|sass)
    // for an import of the form ~@foo/bar/baz(.(scss|sass))?
    const nodeModSubpath = path.join('node_modules', rawImportPath.substring(1));
    const subpathsWithExts = [];
    if (
        nodeModSubpath.endsWith('.scss') ||
        nodeModSubpath.endsWith('.sass') ||
        nodeModSubpath.endsWith('.css')
    ) {
        subpathsWithExts.push(nodeModSubpath);
    } else {
        // Look for .scss first.
        subpathsWithExts.push(
            `${nodeModSubpath}.scss`,
            `${nodeModSubpath}.sass`,
            `${nodeModSubpath}.css`
        );
    }

    // Support index files.
    subpathsWithExts.push(`${nodeModSubpath}/_index.scss`, `${nodeModSubpath}/_index.sass`);

    // Support sass partials by including paths where the file is prefixed by an underscore.
    const basename = path.basename(nodeModSubpath);
    if (!basename.startsWith('_')) {
        const partials = subpathsWithExts.map((file) => file.replace(basename, `_${basename}`));
        subpathsWithExts.push(...partials);
    }

    // Climbs the filesystem tree until we get to the root, looking for the first
    // node_modules directory which has a matching module and filename.
    let prevDir = '';
    let dir = path.dirname(source);
    while (prevDir !== dir) {
        const searchPaths = subpathsWithExts.map((subpathWithExt) =>
            path.join(dir, subpathWithExt)
        );
        for (const searchPath of searchPaths) {
            if (fs.existsSync(searchPath)) {
                return { file: searchPath };
            }
        }
        prevDir = dir;
        dir = path.dirname(dir);
    }

    // Returning null is not itself an error, it tells sass to instead try the
    // next import resolution method if one exists
    return null;
};

module.exports = (css, { fileName, compilerOptions }) => {
    const { baseUrl, paths } = compilerOptions;
    const matchPath = baseUrl && paths ? createMatchPath(path.resolve(baseUrl), paths) : null;

    const aliasImporter = (url) => {
        const newUrl = matchPath !== null ? matchPath(url) : undefined;
        return newUrl ? { file: newUrl } : null;
    };

    const importers = [aliasImporter, sassTildeImporter];
    const filePath = getFilePath(fileName);
    return sass
        .renderSync({
            data: "@import 'src/styles/core.scss';\n\n" + css, // here I add my import at the beginning of sass source code
            includePaths: [filePath, 'node_modules'],
            importer: importers
        })
        .css.toString();
};

I tried to import sassTildeImporter but I couldn't figure it out so instead I copied the code here as well, hence this is so big. If anyone can improve it by importing it I'd really appreciate it.
Instead of rendering SASS from file I use input data because I want to prepend my import.