Are BEM-style class names possible?

Hi. I want to get classes like Card and Card--large. In the documentation I found an example like this:

const Card = styled('form')`
width: 150px;
height: 120px;
&.large {
  width: 300px;
  height: 240px;
}
`;
// …
return (<Card large />);

It will generate somethins like this:

<form class="UserCard-Card--3mYhX UserCard-Card--2O_am"></form>

with webpack config

    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            { 
              loader: "style-loader",
            },
            { 
              loader: "astroturf/css-loader",
              options: {
                modules: true,
                localIdentName: '[name]--[hash:base64:5]',
              },
            }
          ],
        },
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: ['babel-loader', 'astroturf/loader'],
        }
      ]
    },

But is there any way to get canonical BEM .Card and .Card--large classes?

<form class="Card__3mYhX Card--large__3mYhX"></form>

Regards. Anton.

[SilentImp]

@taion Actually, no, sir. I think you got the problem wrong. How I should set modifier class?

const Card = styled('form')`
width: 150px;
&--large {
  width: 300px;
}
`;
// …
return (<Card --large />);

Just wouldn’t work. As you may see in the config example — I am aware of localIdentName property. But if I am wrong and I may somehow configure it to get what i need — please, show me how.

Regards.

[SilentImp]

@jquense css`` with localIdentName: ‘[local]’, is totally the solution. Thanks.