SassError: Can't find stylesheet to import.

[krutoo]

Hi, i use jest-css-modules-transform with typescript files and in my .scss files i have something like this:

@use '~foo/bar/baz.scss';

// ....some scss here

And in mye tests i have error:

SassError: Can't find stylesheet to import.

Looks like in jest environment sass cannot resolve tilde

how can i solve this problem?

[Connormiha]

@krutoo can you provide your sass and jest config? And also webpack config. Maybe it works with Webpack because you have some custom import rules.

[krutoo]

there is no sass config in this project

jest config:

module.exports = {
  preset: 'ts-jest/presets/js-with-babel',
  setupFiles: ['./jest/setup.js', 'jest-canvas-mock'],
  globalSetup: '<rootDir>/jest/test-env.js',
  globals: {
    'ts-jest': {
      tsConfig: '<rootDir>/tsconfig.jest.json',
    },
  },
  transformIgnorePatterns: [
    '/node_modules/(?!(@FOO/|@foo-bar/|middleware-axios)).*/',
  ],
  transform: {
    '\\.svg$': '<rootDir>/jest/transforms/svg.js',
    '\\.(css|scss)$': 'jest-css-modules-transform',
    '\\.(jpg|jpeg|png|gif|eot|otf|ttf|woff|woff2)$': '<rootDir>/jest/transforms/media.js',
  },
  testPathIgnorePatterns: [
    '<rootDir>/.yarn-cache/',
    '<rootDir>/node_modules/',
  ],
  modulePathIgnorePatterns: [
    '<rootDir>/.yarn-cache/',
    '<rootDir>/build/',
  ],
  coveragePathIgnorePatterns: [
    '\\.scss$',
    '\\.svg$',
    '/jest/',
    '/common/cqc/',
  ],
  coverageThreshold: {
    global: {
      branches: 100,
      functions: 100,
      lines: 100,
      statements: 100,
    },
  },
  clearMocks: true,
};

[krutoo]

@Connormiha it looks like I thought it was built-in functionality of sass/jest-css-modules-transform

Do you have any idea how you can add support for this?

This code works:

@use 'node-modules/@foo-bar/baz.scss';

[Connormiha]

You can use custom importer for sass config https://github.com/Connormiha/jest-css-modules-transform#options https://sass-lang.com/documentation/js-api#importer

[krutoo]

@Connormiha Thanks

[ldonis]

I had the same issue, fixed through customizing the sass importer a bit

function importer(url, prev, done) {

    // if the url (file I want to import) match, resolve from node modules
    if (url === 'lesli-css') {
        url = path.resolve('node_modules', url);
    }

    return { file: url };
}

sassTestFiles.forEach(file => sassTrue.runSass({ importer, file }, { describe, it }))

[krutoo]

@Connormiha, sorry for reopen but I have same issue but now with:

@use 'pkg:@sima-land/ui-nucleons/colors';

The pkg: prefix is new way to use packages, should it works by default in jest-css-modules-transform?

Details: https://sass-lang.com/documentation/at-rules/use/#pkg-ur-ls

If no, how can i enable this?

---

I tried this but it is not working:

// jest-css-modules-transform-config.js
const sass = require('sass');

module.exports = {
  sassConfig: {
    importers: [new sass.NodePackageImporter()],
  },
};

[Connormiha]

@krutoo Hello. It should work. It just pass config to sass module. Could you please show error message and ensure path of jest-css-modules-transform-config.js?

[krutoo]

@Connormiha I noticed that jest-css-modules-transform uses sass.renderSync which is deprecated according to Sass docs: https://sass-lang.com/documentation/js-api/functions/rendersync/

Looks like it is accepts importer (deprecated) but not importers (new) option.

Also, looks like importer does not support NodePackageImporter

---

Could you please show error message...

It is same error "SassError: Can't find stylesheet to import." with @use 'pkg:...

[krutoo]

@Connormiha I made a quick alternative to suit my needs, you can see what I came up with: https://github.com/krutoo/jest-css-modules-transform/blob/main/src/index.ts

[Connormiha]

@krutoo Now test work sync. I will try to fix it soon, but it is a big changes. Thanks.