search

atfzl / eslint-plugin-css-modules

Project status: NOT MAINTAINED; Checks that you are using the existent css/scss classes, no more no less
153 stars 34 forks source link

False Positive with sass files #33

Open wgottschalk opened 6 years ago

wgottschalk commented 6 years ago

I'm running into an issue where we're dynamically creating class names to label our rows.

// styles.scss
$row-names: One Two Three

@each $row-name in $row-names {
  .row#{$row-name} {...}
}

and in the js file

// MyComponent.js
import styles from './styles.scss';

<div className={styles.rowOne}/>
<div className={styles.rowTwo}/>
<div className={styles.rowThree}/>

I end up getting the eslint: Class 'rowX' not found (css-modules/no-undef-class) error but class names properly assigned to the component.

I don't know if this is the correct place to post this issue or if work arounds exist for this.

atfzl commented 6 years ago

Hi @wgottschalk, this plugin only uses static analysis to find out what are the class names. What this means is we do not compile the scss to css to find out what all classes are there, but we just parse the scss source code as text to an AST and try to find out what all classes are in that file.