Jss: [jss-expand] Flex properties are not expanded.

[avendiart]

[email protected]:

flex: {
  wrap: 'wrap'
}

is not expanded to flex-wrap: wrap. Same with flex-direction. Is that an intended behaviour? I know that the actual property is flex-flow, but it's not possible to use flex-flow's sub-properties right now as well.

[kof]

cc @typical000

[typical000]

@avendiart Nope, it wasn't intended. Lets fix it :)

[typical000]

Added possibility to write such properties inside flex object:

1. flex-basis
2. flex-direction
3. flex-wrap
4. flex-flow
5. flex-shrink
6. justify-content
7. align-self
8. align-items
9. align-content
10. order
    (List has been taken from https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)

So you can write this:
js a: { flex: { grow: 1, direction: 'row', shrink: 0, justifyContent: 'center', alignSelf: 'center', alignItems: 'center', order: 1 } }

And it will be compiled to:
css .a-826362942 { flex-grow: 1; flex-direction: row; justify-content: center; align-self: center; align-items: center; order: 1; }

See here - https://github.com/cssinjs/jss-expand/pull/20

[avendiart]

I'm not sure that I would expect align, justify and order properties inside the flex property as a user. I personally would be more inclined to write something like this:

{
  flex: {
    direction: 'row',
    wrap: 'wrap',
  },
  align: {
    self: 'center',
    items: 'center',
  }
}

or alternatively:

{
  flex: {
    direction: 'row',
    wrap: 'wrap',
    align: {
      self: 'center',
      items: 'center',
    },
  }
}

Edit: or probably even:

{
  flex: {
    flow: {
      direction: 'row',
      wrap: 'wrap',
    },
    align: {
      self: 'center',
      items: 'center',
    },
  }
}

Do you think it would be a good idea to support both variants?

[kof]

I agree with @avendiart , those properties are used together with flex, but for some reason notation is independent, maybe those will be used for something else later as well. So lets keep it connected to how they are defined in css, flex-* should be expandable, align-* should be expandable.

[typical000]

Hmm... don't know.
From one side - all those properties are 'flexbox-related' i.e. if used without flex they have no sense.
I'ts like line-height - all properties are prefixed by font- and this is only one who isn't :) Just a naming thing and we already support line-height inside font object

From other side - I like this notation
{ flex: { direction: 'row', wrap: 'wrap', }, align: { self: 'center', items: 'center', } }
Because it separates all namings as they are

[avendiart]

@typical000, generally speaking, as a user, I naturally expect jss-expand to expand dashes. Like, if I write flex: { grow: 1 } it should be compiled to flex-grow: 1, anything that goes beyond that might be less intuitive.

[kof]

if used without flex they have no sense.

The question is why are they not prefixed with "flex", maybe there is some future use for them without flex, for e.g. with gridcss?

[typical000]

@kof right. Maybe. Flexbox isn't so old thing in css)

[typical000]

input:
js a: { flex: { grow: 1, direction: 'row', shrink: 0, }, justifyContent: 'center', order: 5, align: { self: 'center', items: 'flex-start', content: 'center' } }

And it will be compiled to:
css .a-2438097903 { justifyContent: center; order: 5; flex-grow: 1; flex-direction: row; flex-shrink: 0; align-self: center; align-items: flex-start; align-content: center; }

[avendiart]

@typical000 looks good to me

[kof]

fixed and released jss-expand 2.1.0