Skip to content

Prefixed CSS in Array for not being resolved to String #289

Open
@JayCanuck

Description

@JayCanuck

On platforms that require CSS style prefixes (for example ones that trigger useFallback in inline-style-prefixer), some CSS can return an Array rather than a string. For example, SplitPane's usage of display: flex could be resolved to display: ['-webkit-flex', '-moz-flex', '-ms-flex', 'flex']. However it looks like react-split-pane is directly plugging the object into the React style, which end up with display not being used in the output.

It may be ideal to run through a resolver/normalizer to ensure string CSS is being passed into the jsx. Since the old multiple-attribute React style string hack doesn't work anymore, probably best to resolve to the last entry (the non-prefixed entry). Something along the lines of:

function resolveStyles(styles) {
    for (const x in styles) {
        if (Array.isArray(styles[x]) {
            styles[x] = styles[x][styles[x].length - 1];
        }
    }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions