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

html-jsx fix case-insensitive attributes and style names #8

Closed
Daniel15 opened this issue Sep 21, 2014 · 1 comment
Closed

html-jsx fix case-insensitive attributes and style names #8

Daniel15 opened this issue Sep 21, 2014 · 1 comment

Comments

@Daniel15
Copy link
Member

Originally reported by @jhiswin at facebook/react#838:


Solution

-Known attributes like maxlength have to be camelcased to maxLength or whatever is in [DefaultDOMPropertyConfig] https://github.com/facebook/react/blob/master/src/dom/DefaultDOMPropertyConfig.js
Might be a good idea to throw a warning/error for unknown properties, so they don't get discarded without you knowing.

-Styles should be lowercased before processing.

Example

<input style="TEXT-ALIGN: center; WIDTH: 40px" maxlength=2 />

transpiles to:

<input style={{TEXTALIGN: 'center', WIDTH: 40}} maxlength={2} />

transpiles to:

React.DOM.input( {style:{TEXTALIGN: 'center', WIDTH: 40}, maxlength:2} )

generates:

<input style="-t-e-x-t-a-l-i-g-n:center;-w-i-d-t-h:40px;" data-reactid=".r[2wp76]">
jhiswin added a commit to jhiswin/react-magic that referenced this issue Sep 22, 2014
Just lowercase all CSS keynames.  CSS style keynames are case-insensitive per W3C spec.
issue reactjs#8
jhiswin pushed a commit to jhiswin/react-magic that referenced this issue Mar 14, 2015
Daniel15 added a commit that referenced this issue May 10, 2015
issue #8 : case insensitive css attributes, import react's attribute map...
@jhiswin
Copy link

jhiswin commented May 10, 2015

Should now be fixed with patch #20

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