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

cssinjs / jss

JSS is an authoring tool for CSS which uses JavaScript as a host language.

https://cssinjs.org

MIT License

7.07k stars 397 forks source link

[jss-expand] Add optional syntax for CSS grids templateAreas #737

Open brianmhunt opened 6 years ago

brianmhunt commented 6 years ago

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 commented 6 years ago

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 commented 5 years ago

Has this been added to JSS yet?

HenriBeck commented 5 years ago

No, not yet.

GalGreenfield commented 5 years ago

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 commented 5 years ago

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

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