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

More robust value fallback support #6

Open
rtsao opened this issue Aug 15, 2016 · 7 comments
Open

More robust value fallback support #6

rtsao opened this issue Aug 15, 2016 · 7 comments

Comments

@rtsao
Copy link
Member

@rtsao 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
Copy link

@menelike menelike commented Dec 16, 2016

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

@joeshub
Copy link

@joeshub 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
Copy link

@skellyb 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
Copy link
Collaborator

@frenic frenic commented May 22, 2017

I could give this a shot.

@rtsao rtsao changed the title Fully support value fallbacks More robust value fallback support May 22, 2017
@TxHawks
Copy link

@TxHawks 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
Copy link

@grundmanise grundmanise commented Apr 5, 2018

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

@rtsao rtsao changed the title More robust value fallback support [styletro-engine-atomic] More robust value fallback support Aug 30, 2018
@rtsao rtsao changed the title [styletro-engine-atomic] More robust value fallback support [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 [styletron-engine-atomic] More robust value fallback support More robust value fallback support Aug 30, 2018
jh3y added a commit to jh3y/styletron that referenced this issue Apr 12, 2019
- add support for Array type values to style properties
jh3y added a commit to jh3y/styletron that referenced this issue May 3, 2019
- add support for Array type values to style properties
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
8 participants