handle `[` and `]`

[alexander-akait]

For example:

/* <track-list> values */
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);

/* <auto-track-list> values */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns: minmax(100px, max-content)
                       repeat(auto-fill, 200px) 20%;
grid-template-columns: [linename1] 100px [linename2]
                       repeat(auto-fit, [linename3 linename4] 300px)
                       100px;
grid-template-columns: [linename1 linename2] 100px
                       repeat(auto-fit, [linename1] 300px) [linename3];

From spec https://drafts.csswg.org/css-grid/#typedef-line-names

When we parse [linename1] we have one word value, but [linename3 linename4] output [linename3 word, space and linename4], i think we should better parse this cases. Maybe for [ we should introduce new ast node?

/cc @TrySound

[TrySound]

I see this syntax for the first time. Yeah, new node is ok. Though I would release it with major bump.

[alexander-akait]

@TrySound agree about major, what do you think about new name of [ and ] nodes?

Also i find this syntax (prettier/prettier#6375):

  -ms-grid-columns: (1fr)[5];

Can't find anything about this in spec, maybe non standard, but i will investigate this, maybe handle ( and ) should be handled as parens not a function (we now do this), but i will open other PR for this

[TrySound]

Not sure. Maybe just square?

[alexander-akait]

@TrySound 👍