search

astroturfcss / astroturf

Better Styling through Compiling: CSS-in-JS for those that want it all.
https://astroturfcss.github.io/astroturf/
MIT License
2.28k stars 60 forks source link

Broken CSS if using &:hover and etc #191

Open meetromb opened 5 years ago

meetromb commented 5 years ago

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 commented 5 years ago

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

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