Broken CSS if using &:hover and etc

[meetromb]

Project created with CRA, config-overrides setup:

config.module.rules.push({
    test: /\.(js|mjs|jsx|ts|tsx)$/,
    use: [
        {
	     loader: 'astroturf/loader',
             options: { extension: '.module.css' },
        },
    ],
})

Components code:

export const OptionElement = styled('li')`
    padding: 8px 10px;
    list-style-type: none;

    &:hover {
        background-color: red;
    }
`

Result CSS:

.OptionElement_option-element__3KySt {
    padding: 8px 10px;
    list-style-type: none;
    (!) &: hover {;
    (!) background-color: red;
    (!)}: ;
}

[olegshilov]

As mentioned here you must add this rule to your config to get nesting work correctly.

{
  test: /\.css$/,
  use: ['style-loader', 'astroturf/css-loader'],
}