Add support for nested child selectors

[satazor]

<div className={ `${styles.container} ${styles.isLoading}` }>
    This container is green
</div>

.container {
    &-green {
        background-color: green;
    }

    &.isLoading {
        background-color: grey;
    }
}

The linter does not recognise .container.isLoading, even though they exist.

See https://github.com/atfzl/eslint-plugin-css-modules/issues/15

[vasco-santos]

Any news regarding this problem? 😟

Thanks

[nicollecastrog]

Commented about this on #15 as well, but even though I'm using version 2.7.5, still not recognising nested classes as per styles.isLoading example above. @amannn given the work you did on #20, can you shed any light perhaps?

Thanks for the great plugin!

[amannn]

@satazor Hm, your code gives me the warning Unused classes found: container-green (css-modules/no-unused-class). But that's because you're not using that class.

E.g. this code works fine for me with version 2.7.5:

<div className={`${styles.container} ${styles['container-green']} ${styles.isLoading}`}>
  This container is green
</div>

Can you maybe submit a failing test as a PR?

[chapati23]

Doesn't work for me either. eslint-plugin-css-modules just pretends the nested .test class doesn't exist.

Webpack Loader

    use: [
      {
        loader: 'css-loader',
        options: {
          camelCase: true,
          importLoaders: 1,
          modules: true,
          localIdentName: '[name]__[local]--[hash:base64:5]'
        }
      },
      'postcss-loader?sourceMap'
    ]

styles.css

.wrapper {
  background: blue;
  color: white;

  & .test {
    color: red;
  }
}

React Component

export const Home = () => (
  <div className={styles.wrapper}>
    <h1 className={styles.test}>Doesn't work</h1>
  </div>
)

[amannn]

Hmm, if that's the case, that's an error.

However, do you even need that & sign here? Omitting it should produce the same result, right?

Anyway if you find an error, it would be helpful if you could submit a PR with a failing test case.

[chapati23]

It's postcss-nesting which is based on the official CSS Nesting Module Level 3 Spec.

So I guess I either have to quit using it and revert back to the more verbose:

.wrapper .test {}

or I can't use this great plugin

[olgenn]

Any news regarding this problem? Thanks!

[olgenn]

@atfzl I am willing to help. Can you describe what needs to be done?

[atfzl]

@olgenn I tried reproducing the issue but could not reproduce it.

I tried the following setup and it is working correctly, may be I am missing something. Please help.

import s from './parentClassSelector1.scss';

export default Foo = () => (
  <div className={s.wrapper}>
    <h1 className={s.test}>foobar</h1>
  </div>
)

.wrapper {
  background: blue;
  color: white;

  &.test {
    color: red;
  }
}

[olgenn]

@atfzl The problem is different. I have this css styles

.wrapper {
  background: blue;
  color: white;

  & .test-text {
    color: red;
  }
}

import s from './css.css';

export default Foo = () => (
  <div className={s.wrapper}>
    <h1 className={s.testText}>foobar</h1>
  </div>
)

And the console displays an error that class'.test Text ' does not exist. But the camelCase option is enabled.

[atfzl]

Ok, so the problem exists only for dash-cases class names and not on camelCase. Can you please confirm.

[olgenn]

@atfzl Yep.

[atfzl]

I tried the example that you provided and it is still working, I have created a PR with new tests and they are passing. Link to PR: https://github.com/atfzl/eslint-plugin-css-modules/pull/32

Are you sure that you have the camelCase option enabled.

[olgenn]

@atfzl https://github.com/atfzl/eslint-plugin-css-modules/pull/32/commits/7b86ff148658fb1c0269e53fa38544c4b199d222#diff-0361dac614e957fd8929e88158cb5b9bR341 There must be className={s.fooBar}

[atfzl]

I have fixed the PR with s.fooBar.

[atfzl]

I think i have found the problem. The nested syntax works with scss but not css. Seems there is some issue in gonzales-pe parser and it does not recognise nesting in css but does in scss.

[olgenn]

I use postcss. Files extension .css

[atfzl]

I don't think this would be fixed so easily because it is dependent on gonzales-pe. Meanwhile I suggest that you can use scss for your css. If you are using webpack, you can use sass-loader combined with postcss-loader or css-loader with postcss plugin.

[olgenn]

@atfzl Thank you, I have time to wait. Maybe you should write to developers gonzales-pe?

[ajarbol]

@olgenn over a year later, did you ever get progress on this issue? I've had to disable the plugin to consume the full postcss capabilities, but the linting was extremely helpfull..