Could not resolve classname if used via "@nest" keyword

[andrey-skl]

Describe the bug
If modern CSS nesting syntax is used, it classnames are not recognized.

.content {
  display: inline-flex;

  @nest .fullscreen & {
    max-height: 100%;
  }
}

To Reproduce
Steps to reproduce the behavior:

1. Have a css file with content listed above
2. Have a postcss set up. Example postcss.config.js:

module.exports = {
  plugins: [
    require('postcss-preset-env')({
      stage: 3,
      features: {
        'nesting-rules': true
      }
    })
  ]
};

3. Use the typescript-plugin-css-modules plugin with configuration:

      {
        "name": "typescript-plugin-css-modules",
        "options": {
          "customMatcher": "\\.css$",
          "postCssOptions": {
            "useConfig": true
          }
        }
      }

4. Have a valid usage:

import styles from './styles.module.css';
console.log(styles.fullscreen); // TS2339: Property 'fullscreen' does not exist on type {content: string}

Expected behavior
.fullscreen classname is recognized and useable

[mrmckeb]

This looks like it'll be a large refactor unfortunately. I've started this work in #181, but need to spend more time working on it and testing sorry.

[mrmckeb]

It seems that this is now completely deprecated and has been removed from newer versions of postcss-nesting.

Regardless, I've fixed the underlying issue and it should work if you use an older version of postcss-nesting.

[andrey-skl]

@mrmckeb that's impressive, thank you a lot!

[mrmckeb]

This is should now be working in v4.2.1:

• https://github.com/mrmckeb/typescript-plugin-css-modules/releases/tag/v4.2.1
• https://github.com/mrmckeb/typescript-plugin-css-modules/releases/tag/v4.2.0