Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeError: Cannot set properties of null (setting '...'), when using markAsUsed comments #93

Open
tiwariav opened this issue Oct 28, 2023 · 4 comments

Comments

@tiwariav
Copy link

The issue is in the version 2.12.0, works fine for 2.11.4

@yuhsianw
Copy link
Collaborator

yuhsianw commented Oct 30, 2023

Hi @tiwariav , thanks for reporting this. Can you please provide the reproduce steps for the issue following this example:

Repro Code

import s from './animationName.scss';

export default Foo = () => (
  <div>
    <div className={s.someAnimation}></div>
  </div>
);
@keyframes someAnimation {}

ESLint Config

{
  "plugins": ["css-modules"],
  "extends": ["plugin:css-modules/recommended"]
}

Expected Result

Expected no errors

Actual Result

Received error:

Class or exported property 'someAnimation' not found

@yuhsianw
Copy link
Collaborator

yuhsianw commented Nov 1, 2023

Template for above:

### Repro Code
```javascript
import s from './animationName.scss';

export default Foo = () => (
  <div>
    <div className={s.someAnimation}></div>
  </div>
);
```
```css
@keyframes someAnimation {}
```

### ESLint Config
```json
{
  "plugins": ["css-modules"],
  "extends": ["plugin:css-modules/recommended"]
}
```

### Expected Result
Expected no errors

### Actual Result
Received error:
```
Class or exported property 'someAnimation' not found
```

@tiwariav
Copy link
Author

tiwariav commented Nov 1, 2023

Repro Code

/* eslint css-modules/no-unused-class: [2, {camelCase: true, markAsUsed:
  ['nested']
}] */
import styles from './styles.scss';

export default Foo = () => (
  <div className={styles.root}>
    <div className={styles.nested}></div>
  </div>
);
.root {
  color: green;
  & .nested {
    color: red;
  }
}

ESLint Config

{
  "plugins": ["css-modules"],
  "rules": {
    "css-modules/no-undef-class": ["warn", { "camelCase": true }],
    "css-modules/no-unused-class": ["error", { "camelCase": true }],
  }
}

Expected Result

Expected no errors

Actual Result

Received error:

TypeError: Cannot set properties of null (setting 'nested')

Can check here as well.
https://codesandbox.io/p/sandbox/brave-mopsa-ycnv8f?file=%2Fsrc%2Findex.tsx%3A6%2C1

@tiwariav
Copy link
Author

tiwariav commented Nov 1, 2023

From what I have tried, its only giving error if using nested classes. Although the same works fine with previous version.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants