Bjorn-Strom / FSS

MIT License
100 stars 4 forks source link

Defining GridTemplateColumns #23

Closed su8898 closed 1 year ago

su8898 commented 1 year ago

How do we define grid-template-columns using fss?

For example, I couldn't find way to define the following template using fss. GridTemplateColumns.value is only accepting 1 ILengthPercentage instead of a list of ILengthPercentage.

    display: grid;
    grid-template-columns: auto 20%;

Thanks for creating this library.

Bjorn-Strom commented 1 year ago

Hello @su8898.

Thank you for reporting this issue. You are right, it seems that support for a list of ILengthPercentage is missing for grid-template-columns!

In order to make your styling work you can use the custom "escape hatch" for the time being:

fss [ Custom "grid-template-columns" "auto 20%"]

And I will look into adding support for this as soon as I have some free time on my hands.

su8898 commented 1 year ago

Many thanks for the feedback @Bjorn-Strom I wasn't aware of the custom "escape hatch". I think it will do just fine for now. Once again thank you for creating this awesome library. 👍🏽

Bjorn-Strom commented 1 year ago

Hello @su8898 . Sorry for the late fix, I have been quite busy lately. I have added support for list syntax on GridTemplateColums and GridTemplateRows with #24 .

It should work as you expect as long as you either cast the first element in the list to an LengthUnit or specify the type of the list. So either: GridTemplateColumns.value [auto :> LengthUnit; pct 20] or GridTemplateColumns.value ([auto; pct 100]: LengthUnit list) This fix is available in any 2.0.1 release of the library 👍

Hope that fixes the problem, if not - please let me know!

Thank you again for reporting the bug 🙏