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

White space problem #111

Open
arggh opened this issue Dec 21, 2017 · 2 comments
Open

White space problem #111

arggh opened this issue Dec 21, 2017 · 2 comments

Comments

@arggh
Copy link

arggh commented Dec 21, 2017

This isn't really an issue with CSS Modules, but it took me a few minutes to figure out what's going on.

I had a perfectly working page in my app, hadn't touched it in ages.

Then I setup class naming convention as instructed in your docs,

"cssClassNamingConvention": {
    "template": "${name}--${hasha(scopedName, {algorithm: 'md5'}).substring(0, 9)}"
 }

Suddenly my page is all wonky.

Turns out, I had a white space character in my css-file that wasn't actually white space.

whitespace

It didn't cause issues until I setup class naming convention.

After I erased the character camouflaged as white space and actually inserted white space => back to normal.

Not sure if this is something worth noting, feel free to close the issue if it's irrelevant.

@akanix42
Copy link
Owner

Do you happen to know what that character was? I'm guessing that it doesn't cause any issues as long as it's at the end of the line because the browser ignores it, but when you adjusted the naming convention as shown above it got stuck in the middle of the generated class name.
Probably all I need to do is look into what characters are legal for CSS class names and strip any that aren't, and likely also report the issue for the postcss plugin that's handling the transform.

@arggh
Copy link
Author

arggh commented Jan 15, 2018

Sure! Apparently it's a non-breaking space, whom we know better as   from the old days.

camospace

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

2 participants