Skip to content

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

@Daniel15

Description

@Daniel15

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]">

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions