Closed SilentImp closed 5 years ago
Yes – you need to configure localIdentName
to calculate the name as you desire. See https://github.com/webpack-contrib/css-loader#localidentname.
@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.
@taion you would reopen issue or I should create a new one with the same content?
You still do &.large
in the CSS template string. You instead set getLocalIdentName
to emit the CSS class name that you want – something like [name]--[local]
, but with a carve-out for the "root" class.
@taion If I will use localIdentName: '[name]--[local]',
and component Card was used in the class UserForm component I will get: UserForm-Card--card UserForm-Card--large
.
I have created gist to show full class code: https://gist.github.com/SilentImp/a3969a4f24387b548c2a4891164f24d9
But anyway even if this, maybe, will do on trivial cases but in more complex — I don't think it would work. For example I have products list. Inside of this list I will have entities that both product and product list item. Usually this will look like this:
<ul class="productList">
<li class="productList__item product">
<b class="product__title">Item</b>
</li>
<li class="productList__item product product--discount">
<b class="product__title">Item</b>
</li>
</ul>
This is closest I can get: https://gist.github.com/SilentImp/e05ffa5aeb273e222ebcf849d3e577b1 It looks like it's just impossible. Maybe there are some ways to work with css more freely with such approach?
One another point: I shouldn't control class naming with webpack config. Event this project have chapter «Use without webpack». Bundler (and building process at all) should not be mixed with class naming.
I am clearly understand that with different tools you should use different approaches … but BEM naming is great approach to naming (including mixins and modifiers) and I don't want to throw it out if there are way to continue use it.
Regards.
I'm not sure I understand the value of trying to use BEM here. The whole idea of cases modules is that you don't need to care what the names are because they are all unique. This feels like trying to format compiled code.
If you like the BEM style naming conventions you can name your classes along those conventions using the css
tag, for the styled
use case tho I'm not sure there is much value in making the output markup pretty when sourcemaps are a thing
also, as noted in the docs i linked above, you can use a getLocalIdent
function to fully customize what you emit. as @jquense notes, you really shouldn't care what the emitted class names are, but to the extent you do, we're delegating this to the CSS loader, which gives you full control, as you would have if you were using CSS modules normally.
@jquense class name conventions have three main reasons to use them:
So mainly it's about UX. hash from CSS modules is good enough for production.
If you like the BEM style naming conventions you can name your classes along those conventions using the css tag, for the styled use case tho I'm not sure there is much value in making the output markup pretty when source maps are a thing
Thanks, I'll give it a try and will return with feedback.
getLocalIdent
@taion Thanks, I will investigate it, but it, as I have mentioned earlier seems somehow wrong.
With all kind regards.
@jquense css`` with localIdentName: '[local]', is totally the solution. Thanks.
Hi. I want to get classes like
Card
andCard--large
. In the documentation I found an example like this:It will generate somethins like this:
with webpack config
But is there any way to get canonical BEM
.Card
and.Card--large
classes?Regards. Anton.