Some useful tips for migrating

Overlapping keywords are usually differentiated with underscores.

In this fork...

• flex the property is expressed with the flex function.
• flex the keyword value is expressed with the flex_ variable.

This is different to the original elm-css where to write display: flex;, you'd have to write the following:

displayFlex

In this fork of elm-css, you'd write it this way:

display flex_

You will find this in various different keywords, such as left_, contain_, etc. If a keyword value is no longer working when you try to migrate, it's probably this.

---

List-based properties are differentiated with Many.

There are many different properties that accept a custom number of arguments. In this fork of elm-css, they are marked consistently in their function with Many.

For example, for the font-family property:

• In the original elm-css, the list-based version is called fontFamilies.
• In this fork, the list-based version is called fontFamilyMany.

In addition, to prevent broken CSS from being created by this package, if you happen to use one of these Many property functions and give it an empty list, they will almost always emit the keyword value unset.

filterMany [] -- filter: unset;

filterMany [ invert (pct 70), sepia(pct 50) ] -- filter: invert(70%) sepia(50%);