gajus / gajus/babel-plugin-react-css-modules

SASS @at-root generated class names do not work with plugin

Open
#81 8 comments 2 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2k
Forks
159
PR merge metrics
No merged PRs in 30d

Description

When using SASS `@at-root` directive and referencing the parent class name with `#{&}`, the babel plugin is unable to find a class, but the class exists at runtime. Below is the error I'm getting, here is the basic setup:

```scss
.ResultWrapperHeader {
...
@at-root #{&}__title {
...
}
}
```

Which outputs to:

```css
.ResultWrapperHeader {...}
.ResultWrapperHeader__title {...}
```

The plugin gives me this error message: `Could not resolve the styleName 'ResultWrapperHeader__title'.`

This may just be something that is not supported with the babel plugin version, since the plugin would have to process the sass to css in order to know what the class name is. Is there a way around this issue and still use this nested pattern (other than not using nesting)?

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.