Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BEM dashes break output css #244

Closed
Galvo87 opened this issue Mar 14, 2016 · 2 comments
Closed

BEM dashes break output css #244

Galvo87 opened this issue Mar 14, 2016 · 2 comments

Comments

@Galvo87
Copy link

Galvo87 commented Mar 14, 2016

I am loading css like this

loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader')

and when using BEM naming convention with modifiers like menu__subitem--visible there seems to be a problem in generated css style.
Works fine if I rename it to menu__subitem__visible, so I guess it doesn't really like double dashes...
Any help?

@psimyn
Copy link

psimyn commented Apr 18, 2016

what goes wrong with the generated styles?

dashes work fine in either your own classes or localIdentName, only thing I can think of that will break is JS with styles.className notation (which will be syntax error).

The CSS you get should have transformed class name

@silouanwright
Copy link

@psimyn Wait I'm confused. I normally either have the option of using styleName, or using styles.className notation. I don't have the option of using styleName when it comes to using something like ReactCSSTransition, so I'm using styles.className notation, unless there's some other option.

I think my issue is that if the camelCase option is ticked off, then it should remove multiple hyphens as well... there's zero use case where someone would turn camelCase on, then not want the double hyphen case translated to camel.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants