Jss: [jss-expand] Add optional syntax for CSS grids templateAreas

[brianmhunt]

CSS grid template areas' ascii-layout is "special" and would probably benefit from being documented.

The best way I've come up with to get it working involves back-tick and single quotes.

 templateAreas: `
             'head    head    head'
             'left    panel   right'
             'foot    foot    foot'`

An alternative that might be supported (and might lend itself to better dynamics) is using an array syntax:

 templateAreas: [
             'head    head    head',
             'left    panel   right',
             'foot    foot    foot']

• [ ] document current syntax
• [ ] add a nicer syntax to jss-expand

[kof]

I don't see any prob with the first syntax, its exactly how it is expected from the spec, also you can use double quotes inside of back-ticks. Same for content property. We should evtl add an example with template Areas to the docs after this one http://cssinjs.org/json-api?v=v9.8.6#property-content

But we can think of a nicer optional addition to jss-expand cc @typical000

[GalGreenfield]

Has this been added to JSS yet?

[HenriBeck]

No, not yet.

[GalGreenfield]

No, not yet.

Okay, thanks for the information.

I'm new to React. If I were to want to use template-areas with a JSS component, I'd have to use it its style prop, right? Just making sure I know a workaround until this is implemented.

[HenriBeck]

No, there is just no better syntax than this yet:

 templateAreas: `
             'head    head    head'
             'left    panel   right'
             'foot    foot    foot'`