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

More robust value fallback support #6

Open
rtsao opened this Issue Aug 15, 2016 · 6 comments

Comments

Projects
None yet
7 participants
@rtsao
Member

rtsao commented Aug 15, 2016

Value fallbacks (i.e. multiple values for a single property) are useful.

Because order is not currently guaranteed, using value fallbacks with styletron will not be robust.

@menelike

This comment has been minimized.

menelike commented Dec 16, 2016

@rtsao Not sure if I understand "value fallbacks" right, if it means deterministic resolution, then rofrischmann/fela#165 might be interesting. A atomic CSS cache (like styletron's) could solve that issue particially.

@joeshub

This comment has been minimized.

joeshub commented Jan 8, 2017

@menelike here's an example of a value fallback in CSS for fonts:

font-family: 'Roboto', arial, sans-serif;
I imagine in Styletron use case would be:

{
    fontFamily: ['Roboto', 'arial', 'sans-serif'],
}

although you end up with the last array element being used instead letting the browser fall back gracefully.

@skellyb

This comment has been minimized.

skellyb commented Jan 16, 2017

It looks like injectStyle already supports an array of values, but instead of creating fallbacks, multiple classes are being created. It's not clear to me what the use case for this functionality would be, since order is unreliable.

Here's a real use-case I'm trying to support:

// set font-size to 8vw, falling back to 32px if browser doesn't support that unit type
{ fontSize: ['32px', '8vw']  }

Currently, that would create two classes. I'd like it create one, with two rules in the order declared, like so:

.a { font-size: 32px; font-size: 8vw; }

Would it be reasonable to change how arrays of values are being handled? If so, I'd be happy to help.

@frenic

This comment has been minimized.

Collaborator

frenic commented May 22, 2017

I could give this a shot.

@rtsao rtsao changed the title from Fully support value fallbacks to More robust value fallback support May 22, 2017

@TxHawks

This comment has been minimized.

TxHawks commented Jul 5, 2017

I'm trying to understand if the use case requested by @skellyb ({ fontSize: ['32px', '8vw'] } --> .a { font-size: 32px; font-size: 8vw; }) is supported by #145, into which #133 was merged to.

If it is, it'd be nice to add this to the documentation in some way (Happy to do it myself, once I actually undersand how deterministic fallbacks work).

@grundmanise

This comment has been minimized.

grundmanise commented Apr 5, 2018

Did anyone succeed in providing fallback values? for example for a background css prop.

@rtsao rtsao changed the title from More robust value fallback support to [styletro-engine-atomic] More robust value fallback support Aug 30, 2018

@rtsao rtsao changed the title from [styletro-engine-atomic] More robust value fallback support to [styletron-engine-atomic] More robust value fallback support Aug 30, 2018

@rtsao rtsao added the atomic engine label Aug 30, 2018

@rtsao rtsao changed the title from [styletron-engine-atomic] More robust value fallback support to More robust value fallback support Aug 30, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment