Ability to turn off dash case for CSSClass directive #3001

pflannery · 2015-07-12T13:40:20Z

I'm finding problems with css that uses camel case when using CSSClass because this line automatically converts each class to dashed case.

Can we have a choice between camel case and raw input when using the CSSClass directive?
Would be nice if we could provide a means to configure CSSClass directive per component.

pkozlowski-opensource · 2015-07-12T13:48:52Z

@pflannery why it is causing issues for you in practice? AFAIK css class names are not case-sensitive (https://developer.mozilla.org/en/docs/Case_Sensitivity_in_class_and_id_Names) and you can't have mixed cases in your HTML markup.

I'm finding problems with css that uses camel case

Could you be more precise? What is the exact use-case?

Can we have a choice between camel case and raw input when using the CSSClass directive?
Would be nice if we could provide a means to configure CSSClass directive per component.

This wouldn't work as 3rd party components would be dependent on app's settings and thus could break without warning.

Once again, I would be keen on knowing more about your exact use-case. It sounds like you might have mixed-case in your CSS classes (which is not great) and then trying to replicate this markup in your HTML.

pflannery · 2015-07-12T22:53:48Z

@pkozlowski-opensource The problem comes with using and writing libraries that follow camel case guidelines like OOCSS or using libraries like animate.css

Camel case is my preference over dashed case. For me I would have to convert all my previous libraries over to dashed case or would be forced to write them all as lower case (for angular) to get around the dash case transformer. I personally want to keep readability using camel case classes both in code and html.

This wouldn't work as 3rd party components would be dependent on app's settings and thus could break without warning.

Then perhaps a separate directive is a better approach?

pkozlowski-opensource · 2015-07-13T06:44:18Z

OK, I see, this is only for readability then, right?

Then perhaps a separate directive is a better approach?

As it is coded today, this conversion affects all the places where a CSS class is set on an element, so a separate directive wouldn't work / isn't enough.

@tbosch maybe we are too aggressive about this conversion and should do it only when a CSS class name comes from HTML attribute value (that is, when using [class.foo]=expr syntax?

mhevery · 2015-07-22T00:53:18Z

I don't see how a choice of CSS class names causes an issue. Could you provide a working example demonstrating the problem.

tbragaf · 2015-07-22T14:11:33Z

Hi all!

I also came into this issue. Here s how it goes:

Html I provide:

Output Html:

As you can see, I used an expression to bind the class of the element.
But the output has hyphens instead of Capital Letters.

The expected output:

The actual output:

Result

As you can see in the actual output I don't have that darker blue color (from the expected output).
Also, those dashes appear on the output HTML.

Best regards,
Tiago Braga

pkozlowski-opensource · 2015-07-22T14:16:21Z

@TiagoBraga39 as quick work-around make sure that your CSS class names are lower-cased (which makes sense anyway, since browsers are not dealing with case-sensitive CSS)

tbragaf · 2015-07-22T14:19:30Z

@pkozlowski-opensource The thing is I actually have a ton of css classes with capital letters, which worked on NG1, and now I can't use them in NG2?

pkozlowski-opensource · 2015-07-22T14:20:38Z

This is why I marked it as a work-around.

pflannery · 2015-07-22T20:44:57Z

I've found a case where the work-around doesn't work.

It baffled me for a while because at first I was sure that classes are case sensitive but then I realised that it's because my angular project didn't have a doctype defined and when I added <!DOCTYPE html> at the top of the page this workaround stops working in firefox and chrome (didnt try any other browser). Something else I noticed is that the article posted above was last updated 05 Mar 2001.

I think the ability to output as WYSIWYG would resolve this.

pflannery · 2015-07-22T20:52:10Z

@mhevery I've tried to post a working plunker example but cant get angular to work there. I always see "require is undefined"..if you have a template from plunker or fiddler etc.. I'd be happy to try demonstrate

tbragaf · 2015-07-22T21:22:05Z

@pflannery
There you go: http://plnkr.co/edit/N5uD9ogaOghiKLRNP1JQ?p=preview

Note 1, It's just an Hello World Sample with 2 cdn:

Angular alpha 31

System 0.16

Note 2, About the traceur options

I can't exactly remember the options to put on config.js since I don't have the code with me.

It also goes with google traceur and couldn't find system 0.18 cdn, but for the sake of the plunker it should be fine.

Best regards,
Tiago Braga

pflannery · 2015-07-23T06:31:17Z

@TiagoBraga39 thank you very much!

Here is an example of the issue http://plnkr.co/edit/StVbjnVMWWnBZPtVQSsu?p=preview

tbragaf · 2015-07-23T08:17:51Z

Yup, same behaviour.
After changing to dash case as @pkozlowski-opensource said, it works. But only that way.

moizp · 2015-07-24T00:30:01Z

+1 on maintaining original capitalization and dashes.

We use css class names such as Tabs-tabLabel and dynamically bind Tabs-tabLabel--selected. Worked fine with ng1 (using ng-class) and we'd very much like to continue that in ng2.

Fixes angular#3001

tbosch · 2015-07-24T16:20:50Z

Just verified myself: querySelector does differentiate between the case in class names.

Fixes angular#3001 BREAKING CHANGE: View renderer used to take normalized CSS class names (ex. fooBar for foo-bar). With this change a rendered implementation gets a calss name as specified in a template, without any transformations / normalization. This change only affects custom view renderers that should be updated accordingly.

Fixes #3001 BREAKING CHANGE: View renderer used to take normalized CSS class names (ex. fooBar for foo-bar). With this change a rendered implementation gets a calss name as specified in a template, without any transformations / normalization. This change only affects custom view renderers that should be updated accordingly. Closes #3264

rixrix · 2015-07-29T04:16:56Z

Hi, tnx for not de-normalizing the CSS class name

moizp · 2015-08-03T01:13:13Z

Thanks for the change. It's better than before but still not working as expected. Tried the following with alpha 33.

While using [class.Tabs-tabLabel--selected] = "tab.isActive()" the css class is only selected if it is in lower-case i.e. .tabs-tablabel--selected. It should work with .Tabs-tabLabel--selected

pkozlowski-opensource · 2015-08-03T08:07:02Z

@amoizp you are talking about a different issue here. You need to keep in mind that HTML is not case-sensitive nor case-preserving, so if you type [class.Tabs-tabLabel-selected] = "tab.isActive()" in HTML a browser will "auto-correct" it to be [class.tabs-tablabel-selected] = "tab.isActive()" (lower-casing all attribute names). This happens before angular's compiler run, so we can't do much about his one.

moizp · 2015-08-03T10:11:34Z

@pkozlowski-opensource Got it, thanks.

So far, our upgrade to angular 2 is working out very well. Keep it up guys!

angular-automatic-lock-bot · 2019-09-06T22:21:51Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

mhevery added feature Issue that requests a new feature P2: required effort1: hours labels Jul 22, 2015

pkozlowski-opensource mentioned this issue Jul 22, 2015

CSS Class Odd Behaviour #3192

Closed

pkozlowski-opensource added a commit to pkozlowski-opensource/angular that referenced this issue Jul 24, 2015

fix(class): allow class names with mixed case

5046f9a

Fixes angular#3001

pkozlowski-opensource added a commit to pkozlowski-opensource/angular that referenced this issue Jul 24, 2015

fix(class): allow class names with mixed case

cba0980

Fixes angular#3001

pkozlowski-opensource mentioned this issue Jul 24, 2015

fix(class): allow class names with mixed case #3264

Closed

pkozlowski-opensource closed this as completed in a8b5725 Jul 27, 2015

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ability to turn off dash case for CSSClass directive #3001

Ability to turn off dash case for CSSClass directive #3001

pflannery commented Jul 12, 2015

pkozlowski-opensource commented Jul 12, 2015

pflannery commented Jul 12, 2015

pkozlowski-opensource commented Jul 13, 2015

mhevery commented Jul 22, 2015

tbragaf commented Jul 22, 2015

pkozlowski-opensource commented Jul 22, 2015

tbragaf commented Jul 22, 2015

pkozlowski-opensource commented Jul 22, 2015

pflannery commented Jul 22, 2015

pflannery commented Jul 22, 2015

tbragaf commented Jul 22, 2015

pflannery commented Jul 23, 2015

tbragaf commented Jul 23, 2015

moizp commented Jul 24, 2015

tbosch commented Jul 24, 2015

rixrix commented Jul 29, 2015

moizp commented Aug 3, 2015

pkozlowski-opensource commented Aug 3, 2015

moizp commented Aug 3, 2015

angular-automatic-lock-bot bot commented Sep 6, 2019

Ability to turn off dash case for CSSClass directive #3001

Ability to turn off dash case for CSSClass directive #3001

Comments

pflannery commented Jul 12, 2015

pkozlowski-opensource commented Jul 12, 2015

pflannery commented Jul 12, 2015

pkozlowski-opensource commented Jul 13, 2015

mhevery commented Jul 22, 2015

tbragaf commented Jul 22, 2015

Result

pkozlowski-opensource commented Jul 22, 2015

tbragaf commented Jul 22, 2015

pkozlowski-opensource commented Jul 22, 2015

pflannery commented Jul 22, 2015

pflannery commented Jul 22, 2015

tbragaf commented Jul 22, 2015

pflannery commented Jul 23, 2015

tbragaf commented Jul 23, 2015

moizp commented Jul 24, 2015

tbosch commented Jul 24, 2015

rixrix commented Jul 29, 2015

moizp commented Aug 3, 2015

pkozlowski-opensource commented Aug 3, 2015

moizp commented Aug 3, 2015

angular-automatic-lock-bot bot commented Sep 6, 2019