Style Helper: Hover Preview and Autocomplete Fail with Sass `//` Comments or Curly Braces in Comments

[karlhorky]

插件名/Extension:

您的本地环境信息/Your local environment information

• 操作系统及其版本/System and Version: Ventura 13.1 (22C65)
• Node version: 18.12.1
• npm version: 8.19.3

您遇到的问题及复现步骤/What are your problems and how to reproduce them

1. When using Sass-style // comments, the hover preview does not appear:

Code:

.bodyBold {
  display: flex;
  flex-direction: column;
  align-items: center;

  & h2 {
    // font-size: ${theme.fonts.averta.sizes.heading3};
    padding: 0 40px;
  }
}

// page.tsx
import styles from './page.module.scss';

export default function Login() {
  return (
    <div className={styles.bodyBold}>

2. Also autocomplete doesn't work with // Sass-style comments:

This instead shows className={}, which causes the code to break when selected.

3. Hover previews also fail on usage of { or } in a comment:

.bodyBold {
  display: flex;
  flex-direction: column;
  align-items: center;

  & h2 {
    /* { */
    padding: 0 40px;
  }
}

4. Also autocomplete does not work with usage of { or } in a comment:

This instead shows className={}, which causes the code to break when selected.

This however does work with other extensions such as React CSS modules (repo):

Workaround 1: Both hover previews and autocompletion entries start working again when I remove the comment:

Workaround 2: Convert to a CSS-style comment and Remove { and }

您期待的正确结果/The right result you're looking forward to

The hover preview and autocomplete features should still work with:

1. Usage of Sass-style // comments
2. Usage of { and } in comments