meteor-css-modules icon indicating copy to clipboard operation
meteor-css-modules copied to clipboard

White space problem

Open arggh opened this issue 7 years ago • 2 comments

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.

arggh avatar Dec 21 '17 19:12 arggh

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.

akanix42 avatar Jan 15 '18 14:01 akanix42

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

camospace

arggh avatar Jan 15 '18 15:01 arggh