styling not works with babel-plugin-react-css-modules

[Bhushankumar-pawar]

We are migrating from react-CSS-modules to babel-plugin-react-CSS-modules. Styling of react-autosuggest working in react-css-modules but it's not working with babel-plugin-react-CSS-modules.

Autocomplete.jsx

import styles from "./css/autocomplete.css";

<Autosuggest
            id={this.props.id}
            theme={styles}
            suggestions={suggestions}
            onSuggestionsFetchRequested={this.onSuggestionsFetchRequested.bind(this)}
            onSuggestionsClearRequested={this.onSuggestionsClearRequested.bind(this)}
            getSuggestionValue={this.props.getSuggestionValue}
            renderSuggestion={this.props.renderSuggestion}
            onSuggestionSelected={this.onSuggestionSelected.bind(this)}
            inputProps={inputProps}
            {...shouldRenderSuggestions}
          />

autocomplete.css

`@value textfieldDisabledBgColor, textfieldDisabledColor, autocompleteSuggestionsContainerBg, autocompleteSuggestionsContainerBorder, autocompleteSuggestionsContainerShadow, autocompleteSuggestionFont, autocompleteSuggestionFontColor, autocompleteSuggestionHighlghtedBg, autocompleteSuggestionHighlghtedColor from "../../css/default-theme.css";

@keyframes rotateAnim {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.input {
  composes: field from "./textfield.css";
}

.wrapper {
  composes: wrapper from "./textfield.css";
}

.label-holder {
  composes: label-holder from "./textfield.css";
}

.label {
  composes: label from "./textfield.css";
}

.field-tips {
  composes: field-tips from "./textfield.css";
}

.input-holder {
  composes: input-holder from "./textfield.css";
  & input:disabled {
    background-color: textfieldDisabledBgColor;
    color: textfieldDisabledColor;
    &::placeholder {
      color: textfieldDisabledColor;
    }
  }
}

.loading-icon {
  display: inline-block;
  position: absolute;
  top: 4px;
  right: 4px;
  animation: rotateAnim 0.4s linear infinite;
}

.suggestionsContainer {
  background-color: autocompleteSuggestionsContainerBg;
  max-height: 200px;
  overflow: auto;
}

.suggestionsContainerOpen {
  border: 1px solid autocompleteSuggestionsContainerBorder;
  padding: 12px;
  box-shadow: 0 2px 15px 1px autocompleteSuggestionsContainerShadow;
}

.suggestion {
  font-family: autocompleteSuggestionFont;
  color: autocompleteSuggestionFontColor;
  font-size: 13px;
  font-weight: 300;
  padding: 7px 10px;
  cursor: pointer;
}

.suggestionHighlighted {
  background-color: autocompleteSuggestionHighlghtedBg;
  color: autocompleteSuggestionHighlghtedColor;
}
`